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

本文在前面封裝hibernate工具的基礎上重點完成使用者登入功能，目前系統頁面展示的名稱是在html中寫死的，是以下面要做的事：若使用者已登入則顯示使用者名；若使用者未登入則點選進入登入頁面。

一、修改登入名稱預設為“登入”

打開d:\medical\war\js\common\common.js檔案，修改generatesystemmenu（）方法方法，修改後

<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 id="system_home_menu"><a href="#">首頁</a></li>'</code><code>;</code>

<code> </code><code>systemmenu += </code><code>'<li id="system_expert_menu"><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="login.act">'</code><code>;</code>

<code> </code><code>systemmenu += </code><code>'<i id="system_login_user_icon"></i>'</code><code>;</code>

<code> </code><code>systemmenu += </code><code>'<span id="system_login_user_name">登入</span>'</code><code>;</code>

<code> </code><code>systemmenu += </code><code>'</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_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>

在eclipse中運作tomcat，浏覽器中輸入http://localhost:8080/medical/index.act，系統菜單登入變為“登入”，但會發現當能量币的值過長時會把下拉菜單遮蓋住了，如下圖所示：

二、修改navigation.css樣式檔案

1、把菜單包裹器的寬度設定為1000像素，并設定為相對定位，如下：

.system_menu_wrapper{

margin: 0 auto;

height: inherit;

width: 1000px;

position: relative;

}

2、把使用者登入菜單設定為絕對定位，且在菜單包裹器的最右側顯示，如下：

.system_menu_user{

width: 120px;

position: absolute;

right: 0px;

z-index: 10;

修改後在chrome浏覽器中效果如圖所示：

三、編寫登入界面及css樣式檔案

1、在d:\medical\war\module\login下建立login.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/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>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>"login_wrapper"</code><code>></code>

<code> </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"login_title"</code><code>>使用者登入</</code><code>div</code><code>></code>

<code> </code><code><</code><code>input</code> <code>type</code><code>=</code><code>"text"</code> <code>class</code><code>=</code><code>"login_user_input"</code> <code>placeholder</code><code>=</code><code>"請輸入使用者名"</code> <code>id</code><code>=</code><code>"login_dynamic_user_name"</code> <code>/></code>

<code> </code><code><</code><code>input</code> <code>type</code><code>=</code><code>"text"</code> <code>class</code><code>=</code><code>"login_user_input"</code> <code>placeholder</code><code>=</code><code>"請輸入密碼"</code> <code>id</code><code>=</code><code>"login_dynamic_user_pass"</code> <code>/></code>

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

<code> </code><code><</code><code>a</code> <code>class</code><code>=</code><code>"login_confirm_button"</code> <code>href</code><code>=</code><code>"#"</code><code>>登入</</code><code>a</code><code>></code>

<code> </code><code><</code><code>a</code> <code>class</code><code>=</code><code>"login_regist_button"</code> <code>href</code><code>=</code><code>"#"</code><code>>注冊</</code><code>a</code><code>></code>

2、在d:\medical\war\theme\login下建立login.css檔案

<code>/* 系統登入樣式 */</code>

<code>.login_wrapper{</code>

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

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

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

<code> </code><code>border</code><code>: </code><code>1px</code> <code>solid</code> <code>#aaa</code><code>;</code>

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

<code> </code><code>box-shadow: </code><code>1px</code> <code>1px</code> <code>rgba(</code><code>0</code><code>, </code><code>0</code><code>, </code><code>0</code><code>, .</code><code>4</code><code>);</code>

<code>.login_title{</code>

<code> </code><code>width</code><code>: inherit;</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>#1575d5</code><code>;</code>

<code> </code><code>border</code><code>: </code><code>1px</code> <code>solid</code> <code>#0d6eb8</code><code>;</code>

<code> </code><code>border-radius: </code><code>8px</code> <code>8px</code> <code>0</code> <code>0</code><code>;</code>

<code> </code><code>box-shadow: </code><code>1px</code> <code>1px</code> <code>rgba(</code><code>255</code><code>, </code><code>255</code><code>, </code><code>255</code><code>, .</code><code>1</code><code>) </code><code>inset</code><code>;</code>

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

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

<code>.login_user_name{</code>

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

<code>.login_user_input{</code>

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

<code> </code><code>border</code><code>: </code><code>1px</code> <code>solid</code> <code>#ddd</code><code>;</code>

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

<code> </code><code>margin</code><code>: </code><code>20px</code> <code>10px</code> <code>5px</code> <code>10px</code><code>;</code>

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

<code>.login_button_wrapper{</code>

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

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

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

<code>.login_regist_button{</code>

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

<code> </code><code>margin-right</code><code>: </code><code>20px</code><code>;</code>

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

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

<code>.login_confirm_button{</code>

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

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

<code> </code><code>text-shadow</code><code>: </code><code>0</code> <code>-1px</code> <code>0</code> <code>rgba(</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0</code><code>,.</code><code>5</code><code>);</code>

<code> </code><code>box-shadow: </code><code>0</code> <code>1px</code> <code>0</code> <code>rgba(</code><code>255</code><code>,</code><code>255</code><code>,</code><code>255</code><code>,.</code><code>2</code><code>) </code><code>inset</code><code>,</code><code>0</code> <code>1px</code> <code>0</code> <code>rgba(</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0</code><code>,.</code><code>2</code><code>);</code>

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

<code> </code><code>white-space</code><code>: </code><code>nowrap</code><code>;</code>

3、在浏覽器中輸入http://localhost:8080/medical，回車後點選右側的“登入”按鈕，打開網頁的效果圖如下：

4、細心的使用者可以發現登入框在目前螢幕沒有垂直居中

（1）在d:\medical\war\js\common\common.js中增加垂直居中方法

<code> </code><code>* 使div垂直水準居中</code>

<code>function</code> <code>centercomponent(component)</code>

<code> </code><code>var</code> <code>x = ($(window).width() - component.outerwidth()) / 2; </code>

<code> </code><code>var</code> <code>y = ($(window).height() - component.outerheight()) / 2; </code>

<code> </code><code>component.css({left: x, top: y});</code>

（2）對d:\medical\war\theme\login\login.css檔案的.login_wrapper增加絕對定位樣式

<code> </code><code>position</code><code>: </code><code>absolute</code><code>;</code>

（3）對d:\medical\war\js\login\login.js檔案中的$(document).ready(）增加垂直居中方法調用

<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>// 登入框垂直居中</code>

<code> </code><code>centercomponent($(</code><code>"#login_dynamic_wrapper"</code><code>));</code>

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

（4）在浏覽器中輸入http://localhost:8080/medical，回車後點選右側的“登入”按鈕打開登入網頁，此時可見登入框已垂直居中。

【備注】：

1、對于輸入框的placeholderie10才支援，由于本系統隻在chrome、firefox中調試運作，若讓ie10之下的支援，可問問谷歌會搜尋到多個解決方法。

2、具體登入功能在下一節完成，會涉及到登入、注冊按鈕響應動作；向服務端下發請求；服務端擷取資料傳回；驗證不通過彈出提示資訊等。

【鬥醫】【10】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多任務上傳添加進度條