【鬥醫】【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天

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

繼續閱讀

前端學習之路---移動web開發（二）

css雪碧圖（css sprite）

移動端touch事件和滑鼠事件

Angular——子產品懶加載

在2016年如何學習JavaScript？

實用css技巧——清除浮動方法總結

css3中的結構僞類選擇器

圖檔下載下傳圖檔放大

mockjs 的正确使用姿勢mockjs fetch的使用思路

css display={block,inline,inline-block}的認識

前端開發日記之window.onload

webstorm中配置git

Vue圖檔切換過渡設計

測試工程師面試解析～

2018年不想被web前端開發淘汰，你需要掌握哪些技術？

Java Web項目開發需要掌握的技術