【鬥醫】【19】Web應用開發20天

本文把挑戰書的具體内容顯示在獨立頁面上，這裡涉及如下四個步驟：

1、增加觸發入口

2、增加業務配置

3、服務端擷取資料後封裝為Json對象傳回

4、通過對DOM元素操作繪制頁面

在講解這四個步驟之前先修改一個Bug：

【問題描述】：

（1）使用者首次點選“下戰書”菜單，進入登入界面提示使用者需要登入

（2）使用者登入成功之後就進入下戰書頁面

（3）此時再次點選“下戰書”菜單，界面又進入到登入頁面

期望：下次再點選“下戰書”菜單，此時的會話已存在，是以不應該再進入登入頁面

【問題原因】：

點選“下戰書”菜單時，資料直接從浏覽器記憶體中讀取，并沒有調用到服務端，是以這裡應該禁止直接從浏覽器中直接讀取

【問題解決]:

解決辦法通過增加時間戳的辦法來解決

（1）在common.js中增加兩個方法，分别用于響應“下戰書”和“首頁”菜單動作

<code> </code><code>* 響應首頁動作</code>

<code>function</code> <code>doMainAction()</code>

<code> </code><code>top.location = </code><code>"index.act?timestamp="</code> <code>+ </code><code>new</code> <code>Date().getTime();</code>

<code> </code><code>* 響應挑戰動作</code>

<code>function</code> <code>doChallengeAction()</code>

<code> </code><code>top.location = </code><code>"challenge.act?timestamp="</code> <code>+ </code><code>new</code> <code>Date().getTime();</code>

（2）修改common.js中的generateSystemMenu（）方法

<code>systemMenu += </code><code>'<li id="system_challenge_menu"><a href="javascript:doChallengeAction()">下戰書</a></li>'</code><code>;</code>

<code>systemMenu += </code><code>'<li id="system_home_menu"><a href="javascript:doMainAction()">首頁</a></li>'</code><code>;</code>

通過這樣修改，點選“下戰書”時浏覽器位址欄中會出現時間戳參數，如下圖：

【鬥醫】【19】Web應用開發20天

<code> </code><code>* 操縱DOM把資料繪制到頁面上</code>

<code>function</code> <code>appendData(i, item)</code>

<code> </code><code>// 略去部分内容</code>

<code> </code><code>// >>>>>>設定挑戰話題标題 </code>

<code> </code><code>var</code> <code>topWrapper = $(</code><code>"<div />"</code><code>).attr(</code><code>"class"</code><code>, </code><code>"main_item_wrapper"</code><code>);</code>

<code> </code><code>var</code> <code>topicTitle = $(</code><code>"<div />"</code><code>).attr(</code><code>"class"</code><code>, </code><code>"main_item_title"</code><code>);</code>

<code> </code><code>var</code> <code>titleLink = $(</code><code>"<a />"</code><code>).attr(</code><code>"href"</code><code>, </code><code>"javascript:forwardTopic('"</code> <code>+ item.topicId + </code><code>"')"</code><code>).text(item.topicTitle);</code>

<code> </code><code>titleLink.appendTo(topicTitle);</code>

<code> </code><code>topicTitle.appendTo(topWrapper);</code>

在main.js中增加forwardTopic()方法

<code> </code><code>* 跳轉到話題内容</code>

<code>function</code> <code>forwardTopic(topicId)</code>

<code> </code><code>top.location = </code><code>"topic.act?topicId="</code> <code>+ topicId + </code><code>"&timestamp="</code> <code>+ </code><code>new</code> <code>Date().getTime();</code>

（1）為了能響應topic.act請求，需要在system-action.xml中增加業務配置

<code><</code><code>business</code> <code>name</code><code>=</code><code>"topic"</code> <code>mustlogin</code><code>=</code><code>"false"</code><code>></code>

<code> </code><code><</code><code>forward</code><code>></code>

<code> </code><code><</code><code>path</code> <code>name</code><code>=</code><code>"success"</code> <code>path</code><code>=</code><code>"/module/topic/topic.html"</code> <code>/></code>

<code> </code><code><</code><code>path</code> <code>name</code><code>=</code><code>"failure"</code> <code>path</code><code>=</code><code>"/module/topic/topic.html"</code> <code>/></code>

<code> </code><code></</code><code>forward</code><code>></code>

<code></</code><code>business</code><code>></code>

（2）業務配置完後經過系統轉發後跳轉到topic.html頁面，是以需要在D:\medical\war\module\topic下增加topic.html檔案

<code> </code><code><</code><code>title</code><code>>鬥醫</</code><code>title</code><code>></code>

<code> </code><code><</code><code>meta</code> <code>name</code><code>=</code><code>"description"</code> <code>content</code><code>=</code><code>"鬥醫是一個醫學交流平台"</code> <code>/></code>

<code> </code><code><</code><code>meta</code> <code>name</code><code>=</code><code>"keywords"</code> <code>content</code><code>=</code><code>"醫學,交流,讨論"</code> <code>/></code>

<code> </code><code><</code><code>meta</code> <code>http-equiv</code><code>=</code><code>"content-type"</code> <code>content</code><code>=</code><code>"text/html;charset=utf-8"</code> <code>/></code>

<code> </code><code><</code><code>meta</code> <code>http-equiv</code><code>=</code><code>"pragma"</code> <code>content</code><code>=</code><code>"no-cache"</code> <code>/></code>

<code> </code><code><</code><code>meta</code> <code>http-equiv</code><code>=</code><code>"cache-control"</code> <code>content</code><code>=</code><code>"no-cache,must-revalidate"</code> <code>/></code>

<code> </code><code><</code><code>meta</code> <code>http-equiv</code><code>=</code><code>"expires"</code> <code>content</code><code>=</code><code>"Wed, 26 Feb 1997 08:21:57 GMT"</code> <code>/></code>

<code> </code><code><</code><code>link</code> <code>rel</code><code>=</code><code>"stylesheet"</code> <code>type</code><code>=</code><code>"text/css"</code> <code>href</code><code>=</code><code>"theme/navigation/navigation.css"</code><code>></code>

<code> </code><code><</code><code>script</code> <code>src</code><code>=</code><code>"js/common/jquery.js"</code><code>></</code><code>script</code><code>></code>

<code> </code><code><</code><code>script</code> <code>src</code><code>=</code><code>"js/common/common.js"</code><code>></</code><code>script</code><code>></code>

<code> </code><code><</code><code>script</code> <code>src</code><code>=</code><code>"js/topic/topic.js"</code><code>></</code><code>script</code><code>></code>

<code> </code><code><</code><code>div</code> <code>id</code><code>=</code><code>"system_navigation_menu"</code><code>></</code><code>div</code><code>></code>

<code> </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"system_content"</code><code>></code>

<code> </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"system_content_left"</code><code>></code>

<code> </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"topic_content_wrapper"</code> <code>id</code><code>=</code><code>"topic_content_dynamic_id"</code><code>> </code>

<code> </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"system_content_right"</code><code>></</code><code>div</code><code>></code>

（3）由于topic.html檔案中需要引用topic.js和topic.css，是以在系統中增加這兩個檔案。

（4）當topic.js加載時通過Ajax異步調用到服務端

<code>(</code><code>function</code><code>( window){</code>

<code> </code><code>$(document).ready(</code><code>function</code><code>()</code>

<code> </code><code>// 生成系統菜單</code>

<code> </code><code>generateSystemMenu();</code>

<code> </code><code>selectSystemMenu(</code><code>"system_home_menu"</code><code>);</code>

<code> </code><code>// 擷取話題内容</code>

<code> </code><code>getTopicContent();</code>

<code> </code><code>* 擷取話題内容</code>

<code> </code><code>function</code> <code>getTopicContent()</code>

<code> </code><code>var</code> <code>data = {</code><code>"topicId"</code><code>: getTopicId()};</code>

<code> </code><code>asyncRequest(</code><code>"topicContent.data"</code><code>, data, </code><code>function</code><code>(result)</code>

<code>})( window );</code>

（1）由于使通過topicContent.data調用到服務端，是以需要配置如下内容

<code><</code><code>business</code> <code>name</code><code>=</code><code>"topicContent"</code> <code>business-class</code><code>=</code><code>"com.medical.server.data.TopicDataAction"</code> <code>/></code>

（2）定義TopicDataAction類，完成服務端資料讀取和封裝

<code> </code><code>* 鬥醫系統擷取科室資訊處理類</code>

<code> </code><code>* @author qingkechina 2014-08-31</code>

<code>public</code> <code>class</code> <code>TopicDataAction </code><code>extends</code> <code>FrameDefaultAction</code>

<code> </code><code>* 全局Gson對象</code>

<code> </code><code>private</code> <code>final</code> <code>static</code> <code>Gson gson = </code><code>new</code> <code>Gson();</code>

<code> </code><code>@Override</code>

<code> </code><code>public</code> <code>String execute()</code>

<code> </code><code>throws</code> <code>FrameException</code>

<code> </code><code>// 擷取目前記錄索引值</code>

<code> </code><code>String topicId = getParameter(</code><code>"topicId"</code><code>);</code>

<code> </code><code>if</code> <code>(FrameUtil.isEmpty(topicId))</code>

<code> </code><code>FrameResultBean result = </code><code>new</code> <code>FrameResultBean();</code>

<code> </code><code>result.setErrorCode(FrameErrorCode.REQUEST_PARAM_ERROR);</code>

<code> </code><code>result.setErrorDesc(FrameUtil.getErrorDescByCode(result.getErrorCode()));</code>

<code> </code><code>return</code> <code>gson.toJson(result);</code>

<code> </code><code>// 擷取不到話題</code>

<code> </code><code>TopicDAO topic = TopicUtil.getTopicById(topicId);</code>

<code> </code><code>if</code> <code>(topic == </code><code>null</code><code>)</code>

<code> </code><code>result.setErrorCode(FrameErrorCode.REQUEST_CONTENT_EMPTY);</code>

<code> </code><code>return</code> <code>gson.toJson(topic);</code>

完善topic.js檔案中的getTopicContent()方法

<code> </code><code>* 擷取話題内容</code>

<code>function</code> <code>getTopicContent()</code>

<code> </code><code>var</code> <code>data = {</code><code>"topicId"</code><code>: getTopicId()};</code>

<code> </code><code>asyncRequest(</code><code>"topicContent.data"</code><code>, data, </code><code>function</code><code>(result)</code>

<code> </code><code>// 若有錯誤碼傳回表明擷取資料異常</code>

<code> </code><code>var</code> <code>resultJson = eval(result);</code>

<code> </code><code>if</code><code>(resultJson.errorCode)</code>

<code> </code><code>showSystemGlobalInfo(resultJson.errorDesc);</code>

<code> </code><code>return</code><code>;</code>

<code> </code><code>// 操縱DOM在頁面繪制資料</code>

<code> </code><code>appendTopic2Page(resultJson);</code>

<code> </code><code>* 操縱DOM在頁面繪制資料</code>

<code>function</code> <code>appendTopic2Page(result)</code>

<code> </code><code>var</code> <code>contentId = $(</code><code>"#topic_content_dynamic_id"</code><code>);</code>

<code> </code><code>var</code> <code>topicTitle = $(</code><code>"<h2 />"</code><code>).text(result.topicTitle);</code>

<code> </code><code>topicTitle.appendTo(contentId);</code>

<code> </code><code>var</code> <code>topicContent = $(</code><code>"<div />"</code><code>).attr(</code><code>"class"</code><code>, </code><code>"topic_content"</code><code>).html(result.prescript);</code>

<code> </code><code>topicContent.appendTo(contentId);</code>

<code> </code><code>// 添加附屬内容</code>

<code> </code><code>var</code> <code>topicAttach = $(</code><code>"<div />"</code><code>).attr(</code><code>"class"</code><code>, </code><code>"topic_attach"</code><code>);</code>

<code> </code><code>var</code> <code>attachPanel = $(</code><code>"<div />"</code><code>).attr(</code><code>"class"</code><code>, </code><code>"topic_attach_panel"</code><code>);</code>

<code> </code><code>attachPanel.appendTo(topicAttach);</code>

<code> </code><code>topicAttach.appendTo(contentId);</code>

<code> </code><code>// 添加話題評論</code>

<code> </code><code>var</code> <code>commentIcon = $(</code><code>"<i />"</code><code>).attr(</code><code>"class"</code><code>, </code><code>"topic_comment_icon"</code><code>);</code>

<code> </code><code>var</code> <code>commentLink = $(</code><code>"<a />"</code><code>).attr(</code><code>"href"</code><code>, </code><code>"#"</code><code>).attr(</code><code>"class"</code><code>, </code><code>"topic_comment_link"</code><code>);</code>

<code> </code><code>commentIcon.appendTo(commentLink);</code>

<code> </code><code>commentLink.text(</code><code>"添加評論"</code><code>);</code>

<code> </code><code>commentLink.appendTo(attachPanel);</code>

<code> </code><code>// 添加話題分享</code>

<code> </code><code>var</code> <code>shareIcon = $(</code><code>"<i />"</code><code>).attr(</code><code>"class"</code><code>, </code><code>"topic_share_icon"</code><code>);</code>

<code> </code><code>var</code> <code>shareLink = $(</code><code>"<a />"</code><code>).attr(</code><code>"href"</code><code>, </code><code>"#"</code><code>).attr(</code><code>"class"</code><code>, </code><code>"topic_share_link"</code><code>);</code>

<code> </code><code>shareIcon.appendTo(shareLink);</code>

<code> </code><code>shareLink.text(</code><code>"分享"</code><code>);</code>

<code> </code><code>shareLink.appendTo(attachPanel);</code>

<code> </code><code>// 添加話題邀請 </code>

<code> </code><code>var</code> <code>inviteLink = $(</code><code>"<a />"</code><code>).attr(</code><code>"href"</code><code>, </code><code>"#"</code><code>).attr(</code><code>"class"</code><code>, </code><code>"topic_invite_link"</code><code>); </code>

<code> </code><code>inviteLink.text(</code><code>"邀請回答"</code><code>);</code>

<code> </code><code>inviteLink.appendTo(attachPanel);</code>

<code> </code><code>// 添加話題舉報</code>

<code> </code><code>var</code> <code>reportIcon = $(</code><code>"<i />"</code><code>).attr(</code><code>"class"</code><code>, </code><code>"topic_report_icon"</code><code>);</code>

<code> </code><code>var</code> <code>reportLink = $(</code><code>"<a />"</code><code>).attr(</code><code>"href"</code><code>, </code><code>"#"</code><code>).attr(</code><code>"class"</code><code>, </code><code>"topic_report_link"</code><code>);</code>

<code> </code><code>reportIcon.appendTo(reportLink);</code>

<code> </code><code>reportLink.text(</code><code>"舉報"</code><code>);</code>

<code> </code><code>reportLink.appendTo(attachPanel);</code>

在浏覽器中輸入http://localhost:8080/medical，回車後效果圖如下：

【鬥醫】【19】Web應用開發20天

本文轉自qingkechina 51CTO部落格，原文連結：http://blog.51cto.com/qingkechina/1547236，如需轉載請自行聯系原作者

【鬥醫】【19】Web應用開發20天

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條