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

  1. 云栖社区>
  2. 博客列表>
  3. 正文

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

shy丶gril 2016-05-24 14:15:55 浏览728 评论0

摘要: 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。http://qingkechina.blog.51cto.com/5552198/1330647 现在想想一下首页放置哪些内容?由于该WEB应用的聚集点在“斗”上,也就是对医术的探讨方面,个人认为应该是对展示较新的或评价较好的病症药方的展示方面。

原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。http://qingkechina.blog.51cto.com/5552198/1330647

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

对于第一个问题会涉及到数据库的访问和接口封装,会在下次专门处理,本文主要承接《【斗医】【6】Web应用开发50天介绍页面方面的处理。由于个人做C/S应用系统时间太长的原因,对系统的第一个页面是“登陆”有不同意见,所以该系统的首页决定设计为任何人都可以查看。


五、斗医系统首页

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

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

(1)为便于搜索引擎查询,在main.html中填写如下内容:

1
2
<meta name="description" content="斗医是一个医学交流平台" />
<meta name="keywords" content="医学,交流,讨论" />


(2)html页面不缓存,每次数据都重新从服务端读取,在main.html中填写如下内容:

1
2
3
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache,must-revalidate" />
<meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT" />


(3)设置页面编码为UTF-8,在main.html中填写如下内容:

1
<meta http-equiv="content-type" content="text/html;charset=utf-8" />


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

1
2
3
<link rel="stylesheet" type="text/css" href="theme/navigation/navigation.css">
<script src="js/common/jquery.js"></script>
<script src="js/common/common.js"></script>


(5)在D:\medical\war\js\main下生成main.html的动作交互文件main.js,并在main.html中引入此文件:

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

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

1
2
3
4
5
6
(function( window){
    $(document).ready(function()
    {
        generateSystemMenu();
    });
})( window );


(6)为main.html定义id为system_navigation_menu的<div>,在其中填写如下内容:

1
2
3
4
5
6
7
<body>
    <!--系统导航菜单-->
    <div id="system_navigation_menu"></div>
    <!--系统内容部分-->
    <div class="system_content">
    </div>
</body>


在测试之前修改D:\medical\war\WEB-INF\config\sm\system-action.xml文件,把名称为"index"的business-class配置项移除,同时删除Demo.java文件。启动Tomcat服务,在浏览器中输入http://localhost:8080/medical/index.act地址,正常情况下main.html页面可以正常显示,且出现导航菜单

221502214.png

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


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

(1)修改common.js的generateSystemMenu()方法,为菜单的<li>标签指定id,其部分内容如下:

1
2
3
4
systemMenu += '<li id="system_home_menu"><a href="#">首页</a></li>';
systemMenu += '<li id="system_expert_menu"><a href="#">专家</a></li>';
......
systemMenu += 'div class="system_menu_user_wrapper" id="system_login_menu">';


(2)在common.js中增加selectSystemMenu(menuId)方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/**
 * 设置指定的菜单项被选中
 */
function selectSystemMenu(menuId)
{
    var menuArray = new Array("system_home_menu""system_expert_menu""system_login_menu");
    for(var i = 0; i < menuArray.length; i++)
    {
        if(menuArray[i] == menuId)
        {
            $("#" + menuArray[i]).css({"background-color""#ff901d"});
        }
        else
        {
            $("#" + menuArray[i]).css({"background-color"""});
        }
    }
}


(3)在main.js中调用selectSystemMenu()方法

1
2
3
4
5
6
7
8
9
(function( window){
    $(document).ready(function()
    {
        // 生成系统菜单
        generateSystemMenu();
        // 设置"首页"菜单选中
        selectSystemMenu("system_home_menu");
    });
})( window );


启动Tomcat服务后在浏览器中输入http://localhost:8080/medical/,查看main.html页面

224049642.png


3、补充navigation.css样式

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

1
2
3
.system_menu_user:hover .system_menu_user_setting{
    displayblock;
}

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

223537174.png


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

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

(1)在main.html中追加如下内容:

1
2
3
4
5
6
7
<!--系统内容部分-->
<div class="system_content">
    <div class="system_content_left">xxxxx
    </div>
    <div class="system_content_right">yyy         
    </div>
</div>


(2)在navigation.css中追加如下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.system_content{
    width1000px;
    margin0 auto;
    clearboth;
    background-colorblue;
}
.system_content_left, .system_content_right{
    floatleft;
    margin-top0px;
}
.system_content_left{
   width660px;
}
                                                                                                                                                                                                                                                                                                                                         
.system_content_right{
    width330px;
    margin-left8px;
}


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



5、定义主页面左侧内容

(1)左侧内容效果图:

221230373.png

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div class="main_item">
    <i class="main_item_icon"></i>
    <div class="main_item_content">
        <div class="main_item_wrapper">
            <div class="main_item_title">
                <a href="#">头病发热的中医药方</a>
            </div>
            <div class="main_item_time">2013年11月19日
            </div>
        </div>
        <div class="main_item_wrapper">
            <label class="main_item_author">陈许诺,
            </label>
            <label class="main_item_nickname">中医拯救人类
            </label>
        </div>
        <div class="main_item_wrapper">
            <div class="main_item_substance">
                红糖30克、鲜姜、红枣30克。以水三碗煎至过半,顿服,服后出微汗即愈。驱风散寒
            </div>
        </div>
        <div class="main_item_wrapper">
            <div class="main_item_attach">
                <a href="#"><i class="main_item_attention"></i>关注</a>
                <a href="#"><i class="main_item_discuss"></i>20人评论</a>
                <a href="#"><i class="main_item_share"></i>分享</a>
                <a href="#"><i class="main_item_collection"></i>收藏</a>
            </div>
        </div>
    </div>
</div>


(3)定义CSS样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
/*************************************************************************/
/*                               主页记录项样式                          */
/*************************************************************************/
.main_item + .main_item{
    border-top1px solid #CCC;
}
.main_item_icon{
    width48px;
    height48px;
    floatleft;
    background-imageurl(./main.png);
}
.main_item_content{
    width600px;
    margin-left58px;
}
.main_item_wrapper{
    /*清除孩子浮动对父div产生的影响*/
    overflowhidden;
}
/*************************************************************************/
/*                               标题和日期样式                          */
/*************************************************************************/
.main_item_title, .main_item_time{
    height25px;
    line-height25px;
}
.main_item_title{
    floatleft;
    left0px
}
.main_item_title a{
    color#259;
    font-size15px;
    font-weightbold;
}
.main_item_time{
    floatright;
    right0px;
    color#999;
    font-size13px;
}
/*************************************************************************/
/*                            作者、昵称、内容样式                       */
/*************************************************************************/
.main_item_author, .main_item_nickname{
    font-size14px;
    font-weightbold;
    height25px;
    line-height25px;
}
.main_item_substance{
    font-size13px;
    line-height1.7;
    color#222;
}
/*************************************************************************/
/*                               附属内容样式                            */
/*************************************************************************/
.main_item_attach, .main_item_attach *{
    font-size13px;
    height30px;
    line-height30px;
    color#999;
}
.main_item_attach span, .main_item_attach a{
    margin-right10px;
}
.main_item_attach a:hover{
    color#698EBF;
}
.main_item_attention, .main_item_discuss, .main_item_share, .main_item_collection{
    background-imageurl(../navigation/navigation.png);
    background-repeatno-repeat;
    width9px;
    height9px;
    margin-right3px;
    /*使图片显示出来*/
    display: inline-block;
}
.main_item_attention{
    background-position-97px -23px;
}
.main_item_discuss{
    background-position-28px -22px;
}
.main_item_share{
    width11px;
    background-position-67px -22px;
}
.main_item_collection{
    width7px;
    background-position-56px -22px;
}


(4)删除掉main.html示例内容

把第(2)步中的html示例内容删除掉,改为使用JS动态生成


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



6、定义主页面右侧内容

(1)右侧内容效果

112857164.png

(2)在main.html中定义如下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="system_content_right">
    <div class="main_user_wrapper">
        <ul>
            <li><a href="#">能量币:200</a></li>
            <li><a href="#">智慧币:300</a></li>
            <li><a href="#">等级:副院长</a></li>
        </ul>
    </div>
    <div class="main_user_wrapper">
        <ul>
            <li><a href="#"><i class="main_user_medical"></i><label>我的药方</label></a></li>
            <li><a href="#"><i class="main_user_favority"></i><label>我的收藏</label></a></li>
            <li><a href="#"><i class="main_user_answer"></i><label>我的回答</label></a></li>
            <li><a href="#"><i class="main_user_message"></i><label>我的消息</label></a></li>
        </ul>
    </div>
</div>


(3)在main.css中定义如下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
.main_user_wrapper{
    margin-left20px;
    padding-left10px;
}
.main_user_wrapper + .main_user_wrapper{
    border-top1px solid #CCC;
}
.main_user_wrapper li{
    height30px;
    line-height30px;
    cursorpointer;
}
.main_user_wrapper li:hover{
    background-color#ff901d;
}
.main_user_wrapper a{
    color#999;
    font-size13px;
}
.main_user_wrapper a:hover{
    color#259;
}
.main_user_wrapper label{
    padding-left10px;
}
.main_user_medical, .main_user_favority, .main_user_answer, .main_user_message{
    background-imageurl(../navigation/navigation.png);
    background-repeatno-repeat;
    width14px;
    height14px;
    vertical-align-2px;
    /*使图片显示出来*/
    display: inline-block;
}
.main_user_medical{
    background-position-217px -3px;
}
.main_user_favority{
    background-position-167px -4px;
}
.main_user_answer{
    background-position-200px -4px;
}
.main_user_message{
    background-position-251px -4px;
}

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



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

本文出自 “青客” 博客,请务必保留此出处http://qingkechina.blog.51cto.com/5552198/1330647

用云栖社区APP,舒服~

【云栖快讯】诚邀你用自己的技术能力来用心回答每一个问题,通过回答传承技术知识、经验、心得,问答专家期待你加入!  详情请点击

网友评论

shy丶gril
文章2082篇 | 关注205
关注
基于云安全大数据能力实现,通过防御SQL注入、XSS跨站脚本、常见Web服务器插件漏洞、木马... 查看详情
大数据开发套件(Data IDE),提供可视化开发界面、离线任务调度运维、快速数据集成、多人... 查看详情
用配置管理(Application Configuration Management,简称 ... 查看详情
为您提供简单高效、处理能力可弹性伸缩的计算服务,帮助您快速构建更稳定、安全的应用,提升运维效... 查看详情
阿里云总监课正式启航

阿里云总监课正式启航