【斗医】【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