【斗医】【7】Web应用开发20天

现在想想一下首页放置哪些内容？由于该web应用的聚集点在“斗”上，也就是对医术的探讨方面，个人认为应该是对展示较新的或评价较好的病症药方的展示方面。这里包含两部分：（1）数据的获取，即动态读取较好或评价较好的药方数据；（2）页面的展示，即静态页面布局和数据显示。

五、斗医系统首页

关于系统的目录规划在上文中已说明：module放置功能页面；js放置功能脚本；theme放置样式文件。

1、在d:\medical\war\module\main下创建main.html文件

（1）为便于搜索引擎查询，在main.html中填写如下内容：

<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>meta</code> <code>name</code><code>=</code><code>"keywords"</code> <code>content</code><code>=</code><code>"医学,交流,讨论"</code> <code>/></code>

（2）html页面不缓存，每次数据都重新从服务端读取，在main.html中填写如下内容：

<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>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>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>

（3）设置页面编码为utf-8，在main.html中填写如下内容：

<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>

（4）为了在main.html页面显示导航菜单，需要把上节的common.js引进过来，同时由于common.js依赖于jquery.js和navigation.css，所以在引common.js之前引入jquery.js、navigation.css，在main.html中填写如下内容：

<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>script</code> <code>src</code><code>=</code><code>"js/common/jquery.js"</code><code>></</code><code>script</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>

（5）在d:\medical\war\js\main下生成main.html的动作交互文件main.js，并在main.html中引入此文件：

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

在main.html页面加载完之后，使用main.js把全局系统菜单绑定到id为system_navigation_menu的<div>块上，在main.js中填写如下内容：

<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>

（6）为main.html定义id为system_navigation_menu的<div>，在其中填写如下内容：

<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>

若没有出现，请仔细阅读前面几章相关联的内容，或者在下面给我留言。

2、设置“首页”菜单被选中

（1）修改common.js的generatesystemmenu()方法，为菜单的<li>标签指定id，其部分内容如下：

<code>systemmenu += '<</code><code>li</code> <code>id</code><code>=</code><code>"system_home_menu"</code><code>><</code><code>a</code> <code>href</code><code>=</code><code>"#"</code><code>>首页</</code><code>a</code><code>></</code><code>li</code><code>>';</code>

<code>systemmenu += '<</code><code>li</code> <code>id</code><code>=</code><code>"system_expert_menu"</code><code>><</code><code>a</code> <code>href</code><code>=</code><code>"#"</code><code>>专家</</code><code>a</code><code>></</code><code>li</code><code>>';</code>

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

（2）在common.js中增加selectsystemmenu(menuid)方法

<code> </code><code>* 设置指定的菜单项被选中</code>

<code>function</code> <code>selectsystemmenu(menuid)</code>

<code> </code><code>var</code> <code>menuarray = </code><code>new</code> <code>array(</code><code>"system_home_menu"</code><code>, </code><code>"system_expert_menu"</code><code>, </code><code>"system_login_menu"</code><code>);</code>

<code> </code><code>if</code><code>(menuarray[i] == menuid)</code>

<code> </code><code>$(</code><code>"#"</code> <code>+ menuarray[i]).css({</code><code>"background-color"</code><code>: </code><code>"#ff901d"</code><code>});</code>

<code> </code><code>$(</code><code>"#"</code> <code>+ menuarray[i]).css({</code><code>"background-color"</code><code>: </code><code>""</code><code>});</code>

（3）在main.js中调用selectsystemmenu()方法

<code> </code><code>// 生成系统菜单</code>

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

3、补充navigation.css样式

因为当鼠标放置到用户名或头像上时，它的下拉菜单“主页”、“设置”和“退出”并没有显示出来。当然使用js也可以控制其显示，这里使用css样式来控制。在navigation.css中增加下面内容：

<code>.system_menu_user:hover .system_menu_user_setting{</code>

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

它的意思是说当鼠标放置在用户名或头像上时，它下层的子菜单项所对应的div就显示出来，效果如下：

4、定义公共页面内容样式

一般的页面框架都都分为左右两部分或者左中右三部分，该系统的页面我想这样安排内容：左侧放置主题，右侧放置用户相关信息和系统动态。

（1）在main.html中追加如下内容：

<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>>xxxxx</code>

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

（2）在navigation.css中追加如下内容：

<code>.system_content{</code>

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

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

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

<code> </code><code>background-color</code><code>: </code><code>blue</code><code>;</code>

<code>.system_content_left, .system_content_right{</code>

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

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

<code>.system_content_left{</code>

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

<code>.system_content_right{</code>

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

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

【备注】：上面的css样式之所以放在navigation.css文件中，是因为想把这些样式全局使用

5、定义主页面左侧内容

（1）左侧内容效果图：

（2）为了快速完成效果图，个人建议先在main.html中直接定义标签

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

<code> </code><code><</code><code>i</code> <code>class</code><code>=</code><code>"main_item_icon"</code><code>></</code><code>i</code><code>></code>

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

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

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

<code> </code><code><</code><code>a</code> <code>href</code><code>=</code><code>"#"</code><code>>头病发热的中医药方</</code><code>a</code><code>></code>

<code> </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"main_item_time"</code><code>>2013年11月19日</code>

<code> </code><code><</code><code>label</code> <code>class</code><code>=</code><code>"main_item_author"</code><code>>陈许诺，</code>

<code> </code><code></</code><code>label</code><code>></code>

<code> </code><code><</code><code>label</code> <code>class</code><code>=</code><code>"main_item_nickname"</code><code>>中医拯救人类</code>

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

<code> </code><code>红糖30克、鲜姜、红枣30克。以水三碗煎至过半，顿服，服后出微汗即愈。驱风散寒</code>

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

<code> </code><code><</code><code>a</code> <code>href</code><code>=</code><code>"#"</code><code>><</code><code>i</code> <code>class</code><code>=</code><code>"main_item_attention"</code><code>></</code><code>i</code><code>>关注</</code><code>a</code><code>></code>

<code> </code><code><</code><code>a</code> <code>href</code><code>=</code><code>"#"</code><code>><</code><code>i</code> <code>class</code><code>=</code><code>"main_item_discuss"</code><code>></</code><code>i</code><code>>20人评论</</code><code>a</code><code>></code>

<code> </code><code><</code><code>a</code> <code>href</code><code>=</code><code>"#"</code><code>><</code><code>i</code> <code>class</code><code>=</code><code>"main_item_share"</code><code>></</code><code>i</code><code>>分享</</code><code>a</code><code>></code>

<code> </code><code><</code><code>a</code> <code>href</code><code>=</code><code>"#"</code><code>><</code><code>i</code> <code>class</code><code>=</code><code>"main_item_collection"</code><code>></</code><code>i</code><code>>收藏</</code><code>a</code><code>></code>

（3）定义css样式

<code>/* 主页记录项样式 */</code>

<code> </code><code>border-top</code><code>: </code><code>1px</code> <code>solid</code> <code>#ccc</code><code>;</code>

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

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

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

<code>.main_item_content{</code>

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

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

<code>.main_item_wrapper{</code>

<code> </code><code>/*清除孩子浮动对父div产生的影响*/</code>

<code> </code><code>overflow</code><code>: </code><code>hidden</code><code>;</code>

<code>/* 标题和日期样式 */</code>

<code>.main_item_title, .main_item_time{</code>

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

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

<code>.main_item_title{</code>

<code>.main_item_title a{</code>

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

<code> </code><code>font-weight</code><code>: </code><code>bold</code><code>;</code>

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

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

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

<code>.main_item_author, .main_item_nickname{</code>

<code>.main_item_substance{</code>

<code> </code><code>line-height</code><code>: </code><code>1.7</code><code>;</code>

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

<code>/* 附属内容样式 */</code>

<code>.main_item_attach, .main_item_attach *{</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>.main_item_attach span, .main_item_attach a{</code>

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

<code>.main_item_attach a:hover{</code>

<code> </code><code>color</code><code>: </code><code>#698ebf</code><code>;</code>

<code>.main_item_attention, .main_item_discuss, .main_item_share, .main_item_collection{</code>

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

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

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

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

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

<code> </code><code>/*使图片显示出来*/</code>

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

<code>.main_item_attention{</code>

<code> </code><code>background-position</code><code>: </code><code>-97px</code> <code>-23px</code><code>;</code>

<code>.main_item_discuss{</code>

<code> </code><code>background-position</code><code>: </code><code>-28px</code> <code>-22px</code><code>;</code>

<code>.main_item_share{</code>

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

<code> </code><code>background-position</code><code>: </code><code>-67px</code> <code>-22px</code><code>;</code>

<code>.main_item_collection{</code>

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

<code> </code><code>background-position</code><code>: </code><code>-56px</code> <code>-22px</code><code>;</code>

（4）删除掉main.html示例内容

把第（2）步中的html示例内容删除掉，改为使用js动态生成

【备注】：由于js生成内容时，需要从服务端读取数据，由于服务端处理还有写逻辑，所以这里暂时不实现，会在下一文实现

6、定义主页面右侧内容

（1）右侧内容效果

（2）在main.html中定义如下内容：

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

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

<code> </code><code><</code><code>li</code><code>><</code><code>a</code> <code>href</code><code>=</code><code>"#"</code><code>><</code><code>i</code> <code>class</code><code>=</code><code>"main_user_medical"</code><code>></</code><code>i</code><code>><</code><code>label</code><code>>我的药方</</code><code>label</code><code>></</code><code>a</code><code>></</code><code>li</code><code>></code>

<code> </code><code><</code><code>li</code><code>><</code><code>a</code> <code>href</code><code>=</code><code>"#"</code><code>><</code><code>i</code> <code>class</code><code>=</code><code>"main_user_favority"</code><code>></</code><code>i</code><code>><</code><code>label</code><code>>我的收藏</</code><code>label</code><code>></</code><code>a</code><code>></</code><code>li</code><code>></code>

<code> </code><code><</code><code>li</code><code>><</code><code>a</code> <code>href</code><code>=</code><code>"#"</code><code>><</code><code>i</code> <code>class</code><code>=</code><code>"main_user_answer"</code><code>></</code><code>i</code><code>><</code><code>label</code><code>>我的回答</</code><code>label</code><code>></</code><code>a</code><code>></</code><code>li</code><code>></code>

<code> </code><code><</code><code>li</code><code>><</code><code>a</code> <code>href</code><code>=</code><code>"#"</code><code>><</code><code>i</code> <code>class</code><code>=</code><code>"main_user_message"</code><code>></</code><code>i</code><code>><</code><code>label</code><code>>我的消息</</code><code>label</code><code>></</code><code>a</code><code>></</code><code>li</code><code>></code>

（3）在main.css中定义如下内容：

<code>.main_user_wrapper{</code>

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

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

<code>.main_user_wrapper + .main_user_wrapper{</code>

<code>.main_user_wrapper li{</code>

<code> </code><code>cursor</code><code>: </code><code>pointer</code><code>;</code>

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

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

<code>.main_user_wrapper a{</code>

<code>.main_user_wrapper a:hover{</code>

<code>.main_user_wrapper label{</code>

<code>.main_user_medical, .main_user_favority, .main_user_answer, .main_user_message{</code>

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

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

<code> </code><code>vertical-align</code><code>: </code><code>-2px</code><code>;</code>

<code>.main_user_medical{</code>

<code> </code><code>background-position</code><code>: </code><code>-217px</code> <code>-3px</code><code>;</code>

<code>.main_user_favority{</code>

<code> </code><code>background-position</code><code>: </code><code>-167px</code> <code>-4px</code><code>;</code>

<code>.main_user_answer{</code>

<code> </code><code>background-position</code><code>: </code><code>-200px</code> <code>-4px</code><code>;</code>

<code>.main_user_message{</code>

<code> </code><code>background-position</code><code>: </code><code>-251px</code> <code>-4px</code><code>;</code>

【备注】：对于一些常见的css样式，建议多看一些别人网站，记住其用法，如上面css样式的.main_user_wrapper + .main_user_wrapper就意味着两个class之间样式的定义。

这里把主页内容如何显示的样式和内容的大体设置出来了，但数据都是假数据，下文就涉及到数据库连接，及如何把数据从服务端读到客户端并展示。

【斗医】【7】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多任务上传添加进度条