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

對于一個網站來講均會存在公共頁面，如異常頁面、系統菜單等等，本章針對鬥醫系統菜單做一下介紹。可以想一想常見網站的系統菜單形式，一般都是菜單項在每個頁面的内容不變，差別是菜單的選擇狀态不同。

jsp可以使用<%@ include file="">語句把公共系統菜單頁面引進來，但本文不準備使用jsp，原因有兩個：i、當伺服器把http請求的結果response傳回給用戶端之前，需要把jsp先轉換為html頁面，然後再吐給用戶端，這中間多了一個轉換過程；ii、随着web3.0的發展，js的用武之地越來越多，本系統準備多使用一下js。

同樣html也可以通過<iframe>或<object>把頁面引進來，本文亦不準備使用html的<iframe>引入菜單html頁面，因為<iframe>對網站的性能有一定的損耗，同時在web安全方面存在通過<iframe>透騙使用者的可能性。

【備注】：上面的說法并非十分嚴格，這些資訊隻是在實際工作中通過測試發現的。若對上面的個人觀點感興趣的話，大家可以在谷歌上搜尋類似話題。

四、鬥醫公共系統菜單

1、實作思路

（1）html頁面引用生成公共系統菜單的js檔案

（2）當html頁面加載完後就調用js的接口建立公共系統菜單，并根據目前頁面設定菜單項的選中狀态。這裡面涉及到判讀頁面是否加載完的知識點，可以使用js的onload()，也可以使用if(document.readystate=="complete")，兩者在加載完成稍有差別。

2、導航菜單草圖及菜單的作用

【搜尋框】：可以搜尋系統中相關的治療醫症的案例或相關醫學高手

【下戰書】：這是本系統的一個重點，之是以想叫鬥醫，也就是想有某個醫學高手開出一個藥方，裡面講明該藥方治療病症，及治療原理，其他的醫學高手可以對其進行點評，也可以給出其它的優于該藥方的藥方。這樣可以起到一個互相探讨的目的

【首頁】：顧名思義就是所有的醫學藥方的檢視處

【專家】：後續可以把給出藥方較好的人評價為專家，評價面要全面，可以更新為專家，也可以從專家隊伍中剔除

3、目錄規劃

在鬥醫運作環境d:\medical\war下分别建立module、theme、js檔案夾，其中module下放置html檔案，用于顯示頁面内容；theme下放置圖檔和css檔案，用于渲染頁面樣式；js下放置頁面響應動作。其結構如下：

4、引入jquery

伴随着js的發展，很多優秀的js工具都孕育而生，比如jquery、seajs、underscorejs、nodejs等等，關于jquery的更多說明大家可以在51cto的部落格上搜尋到很多，此處不再贅述，就個人而言還是比較喜歡jquery的便捷性，對于其ui元件（像表、樹、日期、遮罩等）建議讀其源碼而非直接使用。

【備注】：我下載下傳的是2.0.3未壓縮版本，之是以選擇未壓縮主要是為後面看源碼友善；把jquery_2.0.3.jar命名為jquery.js是為了引用時少寫版本号，此處意義不大。

5、頁面寫作之前的話

（1）寫一個網站一定要清楚這個網站的定位，否則既便做的很漂亮、性能很好，網站也無法長久生存，這點是做網站應用的前提條件。此鬥醫系統是我當初的心血來潮，主要是為了練手用的，是以其定位見上面《導航菜單草圖及菜單的作用》。

（2）曾看過一本關于css的書《别具光芒 css網頁布局案例剖析》，裡面講到如何寫一個頁面：先不管它的展顯形式，先把内容填寫進去，然後使用css對其進行裝飾。

（3）w3c在制定html5規範時有一句話講的很好，在此分享一下：html檔案隻負責顯示内容，css隻負責内容的展顯方式。

關于網頁方面的知識，可以問一下谷歌，肯定存在不少人才，會把上面看似無關聯的話題清晰地講出來。

6、導航菜單實作過程

（1）在d:\medical\war\module\navigation下建立navigation.html檔案（編碼格式為utf-8），内容如下

<code> </code><code><</code><code>title</code><code>>medical</</code><code>title</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>div</code> <code>class</code><code>=</code><code>"system_menu"</code><code>></code>

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

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

<code> </code><code><</code><code>input</code> <code>type</code><code>=</code><code>"text"</code> <code>id</code><code>=</code><code>"system_menu_searcher"</code><code>></code>

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

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

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

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

<code> </code><code><</code><code>li</code><code>><</code><code>i</code> <code>class</code><code>=</code><code>"system_menu_user_setting_home"</code><code>></</code><code>i</code><code>><</code><code>span</code><code>>首頁</</code><code>span</code><code>></</code><code>li</code><code>></code>

<code> </code><code><</code><code>li</code><code>><</code><code>i</code> <code>class</code><code>=</code><code>"system_menu_user_setting_set"</code><code>></</code><code>i</code><code>><</code><code>span</code><code>>設定</</code><code>span</code><code>></</code><code>li</code><code>></code>

<code> </code><code><</code><code>li</code><code>><</code><code>i</code> <code>class</code><code>=</code><code>"system_menu_user_setting_exit"</code><code>></</code><code>i</code><code>><</code><code>span</code><code>>退出</</code><code>span</code><code>></</code><code>li</code><code>></code>

【備注】：從這個檔案中可以看到對于标簽定義了class。有人問你怎麼知道這樣定義内容和樣式？我隻能回答：因這是我實作了的，是以我知道這樣做。其實這裡面有一個“量變”的積累過程，寫20多個頁面之後自然就清楚了，解釋起來真說不清楚。

（2）在d:\medical\war\theme\navigation下建立navigation.css檔案（編碼格式為utf-8），此時用浏覽器打開navigation.html檔案，其内容如下：

下面我們用css把其打扮的漂亮一些，在navigation.css中先定義如下内容：

<code>body, input, a, ul{</code>

<code> </code><code>font-family</code><code>: </code><code>'helvetica neue'</code><code>,</code><code>helvetica</code><code>,</code><code>arial</code><code>,</code><code>sans-serif</code><code>;</code>

<code> </code><code>margin</code><code>: </code><code>0px</code><code>;</code>

<code> </code><code>padding</code><code>: </code><code>0px</code><code>;</code>

<code> </code><code>* 去掉前面圓點</code>

<code> </code><code>list-style</code><code>: </code><code>none</code><code>;</code>

<code> </code><code>* 去掉下劃線</code>

<code> </code><code>text-decoration</code><code>: </code><code>none</code><code>;</code>

這些都是全局性質的樣式定義，其作用如注釋所示，浏覽器打開navigation.html檔案效果如下：

（3）使搜尋框、菜單項、使用者設定都在一行顯示

預設情況下div的寬度都是目前螢幕的寬度，是以定義多個div時都是上下并列的，這也是上圖上看到的搜尋框、菜單項（顯示為藍色部分）、使用者設定（藍色字型的下面部分）都是上下并列的。我們在navigation.css中追加下面内容:

<code> </code><code>* 搜尋框、菜單項、使用者項均浮動</code>

<code>.system_menu_search, .system_menu_item{</code>

<code> </code><code>float</code><code>: </code><code>left</code><code>;</code>

<code>.system_menu_user{</code>

<code> </code><code>float</code><code>: </code><code>right</code><code>;</code>

<code> </code><code>width</code><code>: </code><code>120px</code><code>;</code>

<code> </code><code>height</code><code>: inherit;</code>

其内容樣式變為如下效果：

（4）設定菜單項背景為藍色，高度固定為50像素

<code> </code><code>* 鬥醫系統導航菜單</code>

<code>.system_menu{</code>

<code> </code><code>height</code><code>: </code><code>50px</code><code>;</code>

<code> </code><code>width</code><code>: </code><code>100%</code><code>;</code>

<code> </code><code>background-color</code><code>: </code><code>#0767c8</code><code>;</code>

<code> </code><code>* 系統菜單包裹層高度與父同高,且居中顯示</code>

<code>.system_menu_wrapper{</code>

<code> </code><code>margin</code><code>: </code><code>0</code> <code>auto</code><code>;</code>

<code> </code><code>width</code><code>: </code><code>960px</code><code>;</code>

<code> </code><code>clear</code><code>: </code><code>both</code><code>;</code>

（5）美化全局搜尋框

<code>.system_menu_search input{</code>

<code> </code><code>width</code><code>: </code><code>360px</code><code>;</code>

<code> </code><code>height</code><code>: </code><code>36px</code><code>;</code>

<code> </code><code>border</code><code>: </code><code>1px</code> <code>solid</code> <code>#045bb3</code><code>;</code>

<code> </code><code>border-radius: </code><code>4px</code><code>;</code>

<code> </code><code>margin-top</code><code>: </code><code>7px</code><code>;</code>

<code> </code><code>margin-bottom</code><code>: </code><code>7px</code><code>;</code>

<code> </code><code>/*在chrome浏覽器下去掉<input>焦點時的外邊框*/</code>

<code> </code><code>outline</code><code>: </code><code>none</code><code>;</code>

這裡把搜尋框的高度設定為36像素，寬度設定為360像素，同時有4個像素的圓角，不過需要注意的是border-radius在ie8下不起作用，這裡不再處理相容問題了，大家可以在谷歌上搜尋css圓角，有很多關于相容的解決方案。設定後的效果如下：

<code> </code><code>* 系統菜單項設定</code>

<code>.system_menu_item ul{</code>

<code> </code><code>line-height</code><code>: </code><code>50px</code><code>;</code>

<code> </code><code>margin-left</code><code>: </code><code>15px</code><code>;</code>

<code>.system_menu_item li{</code>

<code> </code><code>width</code><code>: </code><code>50px</code><code>;</code>

<code> </code><code>margin</code><code>: </code><code>auto</code> <code>8px</code><code>;</code>

<code> </code><code>text-align</code><code>: </code><code>center</code><code>;</code>

<code>.system_menu_item li:hover{</code>

<code> </code><code>background-color</code><code>: </code><code>#ff901d</code><code>;</code>

<code>.system_menu_item a, .system_menu_user_wrapper a{</code>

<code> </code><code>color</code><code>: </code><code>#fff</code><code>;</code>

該css設定後的效果是菜單項是白色字型，菜單文本都是居中顯示，且菜單項之間有間隔，當滑鼠放到菜單項上時背景色變為棕***，效果圖如下：

（7）先下載下傳兩個圖檔以備後面使用：把下載下傳後的navigation.png放置到d:\medical\war\theme\navigation下面；把default.jpg放置到d:\medical\war\upload\default下面。在設定使用者css樣式之前，再熟悉一下使用者的html結構：

在每個<span>之前都有一個<i>标簽，裡面内容為空，它的作用是設定圖示用的。在navigation.css追加如下css讓<i>、<span>元素浮動起來：

<code> </code><code>* 系統使用者菜單項設定</code>

<code>.system_menu_user_wrapper{</code>

<code> </code><code>width</code><code>: inherit;</code>

<code>.system_menu_user_wrapper i, .system_menu_user_wrapper span{</code>

<code>.system_menu_user_wrapper i, .system_menu_user_wrapper span, .system_menu_user_setting_home, .system_menu_user_setting_set, .system_menu_user_setting_exit, .system_menu_user_setting span{</code>

<code>.system_menu_user_wrapper span, .system_menu_user_setting span{</code>

<code> </code><code>width</code><code>: </code><code>83px</code><code>;</code>

此時除了“使用者名”垂直居中顯示之外（因為.system_menu_user_wrapper的line-height值設定與父div高度相同），其它的都看不出來變化。下面再設定.system_menu_user_wrapper i把使用者的頭像顯示出來

<code>.system_menu_user_wrapper i{</code>

<code> </code><code>width</code><code>: </code><code>27px</code><code>;</code>

<code> </code><code>height</code><code>: </code><code>27px</code><code>;</code>

<code> </code><code>/*若無屬性背景圖檔無法顯示*/</code>

<code> </code><code>display</code><code>: inline-</code><code>block</code><code>;</code>

<code> </code><code>background-image</code><code>: </code><code>url</code><code>(../../upload/</code><code>default</code><code>/</code><code>default</code><code>.jpg);</code>

<code> </code><code>background-repeat</code><code>: </code><code>no-repeat</code><code>;</code>

<code> </code><code>margin-top</code><code>: </code><code>12px</code><code>;</code>

<code> </code><code>margin-left</code><code>: </code><code>10px</code><code>;</code>

效果圖如下：

（8）當滑鼠放置在使用者和頭像菜單上時也希望背景色變為棕***

<code>/*滑鼠放置在使用者菜單上時背景色變為棕****/</code>

<code>.system_menu_user_wrapper:hover, .system_menu_user_setting li:hover{</code>

（9）最後按此思路設定使用者設定的其它菜單項，在navigation.css中追加css，其效果圖如下：

<code>system_menu_user_setting li{</code>

<code> </code><code>height</code><code>: </code><code>40px</code><code>;</code>

<code> </code><code>line-height</code><code>: </code><code>40px</code><code>;</code>

<code> </code><code>background-color</code><code>: </code><code>#095fb3</code><code>;</code>

<code> </code><code>border-top</code><code>: </code><code>1px</code> <code>solid</code> <code>#0d5aa5</code>

<code>.system_menu_user_setting_home, .system_menu_user_setting_set, .system_menu_user_setting_exit{</code>

<code> </code><code>width</code><code>: </code><code>20px</code><code>;</code>

<code> </code><code>height</code><code>: </code><code>20px</code><code>;</code>

<code> </code><code>background-image</code><code>: </code><code>url</code><code>(navigation.png);</code>

<code> </code><code>margin-top</code><code>: </code><code>10px</code><code>;</code>

<code> </code><code>margin-left</code><code>: </code><code>17px</code><code>;</code>

<code>.system_menu_user_setting span{</code>

<code>.system_menu_user_setting_home{</code>

<code> </code><code>background-position</code><code>: </code><code>-6px</code> <code>-7px</code><code>;</code>

<code>.system_menu_user_setting_set{</code>

<code> </code><code>background-position</code><code>: </code><code>-6px</code> <code>-60px</code><code>;</code>

<code>.system_menu_user_setting_exit{</code>

<code> </code><code>background-position</code><code>: </code><code>-6px</code> <code>-87px</code><code>;</code>

（10）預設情況下我們希望使用者菜單項下面的子元素（首頁、設定、退出）不顯示，隻有當滑鼠放置到使用者菜單項時子元素才顯示出來。

<code>.system_menu_user_setting{</code>

<code> </code><code>display</code><code>: </code><code>none</code><code>;</code>

7、在第6步中通過html和css示範把菜單項繪制出來了，正如該文開頭所說，我們希望這個菜單項是公用的，是以想通過js生成此菜單，并把此菜單引入到每個頁面中。

（1）在d:\medical\war\js\common下建立common.js檔案，由于考慮到這是一個公共工具類，是以沒有采用閉包

<code> </code><code>* 生成系統公共菜單</code>

<code>function</code> <code>generatesystemmenu()</code>

<code> </code><code>var</code> <code>systemmenu = </code><code>'<div class="system_menu">'</code><code>;</code>

<code> </code><code>systemmenu += </code><code>'<div class="system_menu_wrapper">'</code><code>;</code>

<code> </code><code>systemmenu += </code><code>'<div class="system_menu_search">'</code><code>;</code>

<code> </code><code>systemmenu += </code><code>'<input type="text" id="system_menu_searcher">'</code><code>;</code>

<code> </code><code>systemmenu += </code><code>'</div>'</code><code>;</code>

<code> </code><code>systemmenu += </code><code>'<div class="system_menu_item">'</code><code>;</code>

<code> </code><code>systemmenu += </code><code>'<ul>'</code><code>;</code>

<code> </code><code>systemmenu += </code><code>'<li><a href="#">下戰書</a></li>'</code><code>;</code>

<code> </code><code>systemmenu += </code><code>'<li><a href="#">首頁</a></li>'</code><code>;</code>

<code> </code><code>systemmenu += </code><code>'<li><a href="#">專家</a></li>'</code><code>;</code>

<code> </code><code>systemmenu += </code><code>'</ul>'</code><code>;</code>

<code> </code><code>systemmenu += </code><code>'<div class="system_menu_user">'</code><code>;</code>

<code> </code><code>systemmenu += </code><code>'<div class="system_menu_user_wrapper">'</code><code>;</code>

<code> </code><code>systemmenu += </code><code>'<a href="#"><i></i><span>陳許諾</span></a>'</code><code>;</code>

<code> </code><code>systemmenu += </code><code>'</div>'</code><code>;</code>

<code> </code><code>systemmenu += </code><code>'<div class="system_menu_user_setting">'</code><code>;</code>

<code> </code><code>systemmenu += </code><code>'<ul>'</code><code>;</code>

<code> </code><code>systemmenu += </code><code>'<li><i class="system_menu_user_setting_home"></i><span>首頁</span></li>'</code><code>;</code>

<code> </code><code>systemmenu += </code><code>'<li><i class="system_menu_user_setting_set"></i><span>設定</span></li>'</code><code>;</code>

<code> </code><code>systemmenu += </code><code>'<li><i class="system_menu_user_setting_exit"></i><span>退出</span></li>'</code><code>;</code>

<code> </code><code>systemmenu += </code><code>'</ul>'</code><code>;</code>

<code> </code><code>systemmenu += </code><code>'</div>'</code><code>;</code>

<code> </code><code>$(systemmenu).appendto($(</code><code>"#system_navigation_menu"</code><code>));</code>

（2）修改d:\medical\war\module\login\login.html檔案，首先引入navigation.css樣式檔案，其次再引入jquery.js、common.js和login.js檔案

<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/login/login.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> </code><code><</code><code>h1</code><code>>this is login page!</</code><code>h1</code><code>></code>

【備注】：在引用css和js檔案時，一定要謹記檔案的相對路徑是相對web應用環境的，即我們的d:\medical\war

（3）建立d:\medical\war\js\login\login.js檔案，這裡使用jquery的ready方法來判斷頁面是否加載完，若加載完就調用common.js的生成菜單方法，把菜單追加到login.html的<div>中

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

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

<code> </code><code>generatesystemmenu();</code>

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

【備注】

（1）關于css樣式一定要多寫才能了解其含義，在寫的過程中就像一個雕刻藝術家一鑿鑿地打磨，這個過程是痛并快樂的。

（2）上面寫的navigation.html隻是友善調試樣式使用的，真正使用的是js生成的導航菜單。

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

繼續閱讀

Java String.format方法的簡單使用

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

neo4j之cypher使用文檔

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

GitHub連夜封殺！這份阿裡 10W 字内部 Java 字面試手冊到底有多強？

spark/scala關于【資源檔案】加載方法概述外部檔案加載方案測試資源檔案打包入jar包中小結

mybatis_入門程式Mybatis入門

JS生成uuid的四種方法

AOP程式設計_Android優雅權限架構(1)概念基礎，2021金三銀四前言正文大綱正文

Effective Java 8:通用程式設計

OOM三種類型

工廠模式-三種類型

【遞歸】高效率求2的n次幂

layui多任務上傳添加進度條

win10本地scala和spark安裝安裝scala安裝spark

scala (3) Function 和 Method