开发者社区> shy丶gril> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

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

在上文中完成用户注册/登录后显示用户名的功能,同时也谈了谈系统编码问题,本文重点聊聊“下战书”功能,里面涉及第三方在线HTML编辑器的问题。


一、Navicat for MySQL介绍

   由于4月8日微软正式放弃对Windows XP操作系统的支持,借此机会把斗医系统移到了Windows8操作系统上。由于Windows8与Windows XP的操作系统存在较大的差异,拿系统的开始菜单来讲:

   Windows XP进入MySQL命令行窗口的入口为:开始 > 所有程序 > MySQL > MySQL Server 5.5 > MySQL 5.5 Command Line Client

   Windows8我摸索出三种进入办法:

   (1)从搜索进入:把鼠标移到屏幕的右上角,选择“搜索”,在打开的“应用”中查找“MySQL 5.5 Command Line Client”,如下图所示:

wKiom1NNXKnAOcCZAAFr3pI4OIk864.jpg

   (2)使用“微软键 + R”,输入“cmd”打开命令行窗口,进入MySQL的bin路径,在窗口中输入mysql -u用户名 -p密码打开,如下图:

wKiom1NNXrWyfbGsAAJZV4foD28289.jpg

  (3)使用第三方Navicat for mysql工具


1、下载Navicat for Mysql

  进入http://www.navicat.com.cn/download/navicat-for-mysql用户根据自己的操作系统选择相应的试用版本。安装过程很简单,一路选择“下一步”即可。


2、试用版转正

   进入http://www.kuaipan.cn/file/id_46516780738283773.htm?f=www.yunvn.com下载补丁,下载后把PatchNavicat.exe复制到Navicat for Mysql的安装目录下,然后双击PatchNavicat.exe运行,在弹出的框中选择navicat.exe,如下图所示:wKiom1NNYVPR6vBjAAJjRvLFQME663.jpg


3、在

(1)在开始中打开Navicat for Mysql

(2)在工具栏中选择“连接 > MySQL”

(3)按下图配置数据库连接

wKioL1NNYtDBGW9OAAFVplMksNQ027.jpg

(4)配置完毕后选择“medical > medical > usertable”,即可查看数据表记录

wKioL1NNY_-jTZveAAJvHZwFLBw006.jpg



【备注】:从工具中可以看到用户的密码,这里是一种错误的设计,因为不安全。之所以前面没有处理,是为后续的安全保留的彩蛋



二、下战书功能

当游客进入一个景点时往往会在一个地方刻上XXX到此一游,这正符合了人的表现欲;从管理角度上讲若游客把自己的***号码也刻上,更有利于景点管理方确认当事人。对于一个网站也是如此,为了防止某些人破坏网站的纯洁性、正确性要求鉴别信息发表者的身份,如维基百科的编辑功能。斗医系统也是要求下战书的人先登录。

   古代战场上下战书,一般都是派一个机灵的人手持书信,到对方营地送到指定的人手中,对方明确给出不战或应战的信息后,送信人返回自己的营地。所以这里的就有三要素:战书的标题、战书的内容和挑战人。按此思路我们的下战书页面大致如下:

wKioL1NRSGnSO6deAABgqLiT9iQ470.jpg

1、下战书之前先登录

打开war\WEB-INF\config\sm\system-action.xml文件,定义跳转业务配置,如下:

<business name="challenge" mustlogin="true">

   <forward>

       <path name="success" path="/module/challenge/challenge.html" />

       <path name="failure" path="/module/challenge/challenge.html" />

   </forward>

</business>


2、处理必须登录业务

打开com.medical.frame.FrameDispatcher.java文件,抽象出getBusiness()方法

/**

* 由业务名称获取业务对象

*/

public FrameBusiness getBusiness(String busName, HttpServletRequest request)

   throws FrameException

{

   // 由动作名称获取业务对象

   FrameBusiness business = FrameCache.getInstance().getBusiness(busName);

   if (business == null)

   {

        throw new FrameException(FrameErrorCode.REQUEST_BUS_NOT_EXIST);

   }


   // 判断是否必须登录

   boolean isMustLogin = business.isMustLogin();

   if (isMustLogin == false)

   {

       return business;

   }


   // 若必须登录且用户已登录,则直接返回业务对象

   HttpSession session = request.getSession();

   UserDAO userDao = FrameCache.getInstance().getUserBySession(session);

   if (userDao != null)

   {

       return business;

   }

   else

   {

       FrameCache.getInstance().setPreActName(busName);

   }


   // 若必须登录且用户未登录,则返回登录业务对象

   return FrameCache.getInstance().getBusiness(FrameConstant.LOGIN_BUS_NAME);

}


3、修改com.medical.frame.FrameDispatcher.process()方法,调用上面的方法完成动作名称获取业务对象

// 由名称获取业务对象

FrameBusiness business = FrameCache.getInstance().getBusiness(busName);

FrameBusiness business = getBusiness(busName, request);


4、修改com.medical.server.data.UserLoginDataAction.execute()方法

// 4. 登录之前的前一个动作名称

String preActName = FrameCache.getInstance().getPreActName();

if (FrameUtil.isEmpty(preActName))

{

   preActName = "index.act?timestamp=" + System.currentTimeMillis();

}

else

{

   preActName += ".act?timestamp=" + System.currentTimeMillis();

}


// 5. 判断是注册还是登录

String isRegistUser = getParameter("isRegist");

if ("TRUE".equalsIgnoreCase(isRegistUser))

{

   return doRegistAction(userName, userAuth, preActName);

}

else

{

   return doLoginAction(userName, userAuth, preActName);

}


5、创建challenge.html文件

(1)在war\module\challenge下创建challenge.html文件

(2)在challenge.html文件的<head>元素中引入如下元素:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<title>斗医</title>
<!--利于搜索引擎查询-->
<meta name="description" content="斗医是一个医学交流平台" />
<meta name="keywords" content="医学,交流,讨论" />
<!--设置字符集-->
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<!--页面不缓存-->
<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" />
<!--引入外部文件-->
<link rel="stylesheet" type="text/css" href="theme/navigation/navigation.css">
<link rel="stylesheet" type="text/css" href="theme/challenge/challenge.css">
<script src="js/common/jquery.js"></script>
<script src="js/common/common.js"></script>
<script src="js/challenge/challenge.js"></script>

(3)在challenge.html文件的<body>元素中定义页面结构,如下:

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

在Eclipse中启动Tomcat后,在浏览器中输入http://localhost:8080/medical,点击“下战书”菜单,打开的页面如下:

wKioL1NVQ6LT-a2KAACnrNjpWKo393.jpg

仔细的您一定会发现“下战书”菜单背景颜色没有被选中,另外用户名是“登录”,这方面不用户体验极差。


6、选择菜单后菜单设置相关颜色值

(1)在war\js\common\common.js的generateSystemMenu()中对“下战书”菜单项绑定ID

systemMenu += '<li id="system_challenge_menu"><a href="challenge.act">下战书</a></li>';

(2)修改war\js\common\common.js的selectSystemMenu()方法,对其增加“下战书”ID

var menuArray = new Array("system_challenge_menu", "system_home_menu", "system_expert_menu", "system_login_menu");

(3)在war\js\challenge下创建challenge.js文件,并在文档加载完毕后调用selectSystemMenu()方法,如下:

(function( window){

   $(document).ready(function(){

       // 生成系统菜单

       generateSystemMenu();

       // 选择下战书系统菜单

       selectSystemMenu("system_challenge_menu");

   });

})( window );

在Eclipse中启动Tomcat后,在浏览器中输入http://localhost:8080/medical,点击“下战书”菜单,打开的页面如下:

wKioL1NWgTezZkLrAACmgc84ob4214.jpg


7、用户登录之后进入下战书页面,右上角显示用户名称

修改war\js\challenge\challenge.js文件,在文档加载完毕后调用common.js的getBreifUserInfo()方法,如下:

(function( window){

   $(document).ready(function(){

       // 生成系统菜单

       generateSystemMenu();

       // 选择下战书系统菜单

       selectSystemMenu("system_challenge_menu");

       // 获取用户简要信息

       getBreifUserInfo();

   });

})( window );

在Eclipse中启动Tomcat后,在浏览器中输入http://localhost:8080/medical,点击“下战书”菜单,打开的页面如下:

wKioL1NWhEiBmiVMAACqfOhMWNg816.jpg


8、下战书页面开发

(1)完善war\module\challenge\challenge.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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<html>
    <head>
        <title>斗医</title>
        <!--利于搜索引擎查询-->
        <meta name="description" content="斗医是一个医学交流平台" />
        <meta name="keywords" content="医学,交流,讨论" />
        <!--设置字符集-->
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <!--页面不缓存-->
        <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" />
        <!--引入外部文件-->
        <link rel="stylesheet" type="text/css" href="theme/navigation/navigation.css">
        <link rel="stylesheet" type="text/css" href="theme/challenge/challenge.css">
        <script src="js/common/jquery.js"></script>
        <script src="js/common/common.js"></script>
        <script src="js/challenge/challenge.js"></script>
    </head>
    <body>
        <!--系统导航菜单-->
        <div id="system_navigation_menu"></div>
        <!--系统内容部分-->
        <div class="system_content">
            <div class="challenge_content_wrapper">
                <div class="challenge_textarea_wrapper">
                    <textarea id="challenge_title_id" placeholder="写下您的问题"></textarea>
                </div>
                <div class="challenge_hint_info">
                    已超出<label class="challenge_hint_warn" id="challenge_title_hint_id"></label>字
                </div>
                <div class="challenge_text_desc">问题科室:</div>
                <div class="challenge_textarea_wrapper">
                    <textarea id="challenge_kind_id" placeholder="选择问题所属科室"></textarea>
                </div>
                <div class="challenge_text_desc">药方说明(可选):</div>
                <div class="challenge_textarea_wrapper">
                    <textarea id="challenge_prescript_id" placeholder="写下病人神、色、形、态、舌象等症状......"></textarea>
                </div>
                <div class="challenge_hint_info">
                    已超出<label class="challenge_hint_warn" id="challenge_prescript_hint_id"></label>字
                </div>
                <div class="challenge_text_desc">挑战人(可选):</div>
                <div class="challenge_textarea_wrapper">
                    <textarea id="challenge_challenger_id" placeholder="选择您的挑战人"></textarea>
                </div>
                <div class="challenge_text_desc">
                    <a href="#" class="challenge_confirm_publish">发布</a>
                    <a href="#" class="challenge_cancel_publish">取消</a>
                </div>
            </div>
        </div>
    </body>
</html>

(2)完善war\js\challenge\challenge.js文件,内容如下:

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
(function( window){
    $(document).ready(function(){
        // 生成系统菜单
        generateSystemMenu();
        // 选择下战书系统菜单
        selectSystemMenu("system_challenge_menu");
        // 获取用户简要信息
        getBreifUserInfo();
        // 初始化文本框监听器
        initInputListener();
    });
    /**
     * 初始化文本框监听器
     */
    function initInputListener(){
        var textareaArray = new Array("challenge_title_id""challenge_kind_id""challenge_prescript_id""challenge_challenger_id");
        $.each(textareaArray, function(i, item){
            var dynamicItem = $("#" + item);
            dynamicItem.bind("propertychange"function(event){
                this.style.height = this.scrollHeight -2 + "px";
            });
            dynamicItem.bind("input"function(event){
                this.style.height = this.scrollHeight - 2 + "px";
            });
        });
    }
})( window );

(3)在war\theme\challenge下创建challenge.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
/*********************************************************************/
/*                           系统下战书样式                          */
/*********************************************************************/
.challenge_content_wrapper{
    width710px;
    margin20px auto;
    font-size13px;
    border1px solid #CCC;
    overflowhidden;
}
.challenge_textarea_wrapper{
    margin5px;
    padding8px 5px;
    line-height15px;
    box-shadow: 0 1px 1px rgba(0,0,0,.1inset;
    border-radius: 3px;
    background#FFF;
    border1px solid #ccc;
    color#222;  
}
/*********************************************************************/
/*                       下战书TextArea公共样式                      */
/*********************************************************************/
.challenge_textarea_wrapper textarea{
    height20px;
    line-height20px;
    width100%;
    vertical-alignbottom;
    /*移除滚动条*/
    overflowhidden;
    /*自动换行*/
    word-wrap: break-word;
    /*移除边框*/
    border0;
    background-color#FFF;
    /*去除改变大小拖拽柄*/
    resize: none;
    font-size13px;
    border-radius: 5px;
}
.challenge_textarea_wrapper textarea:focus{
    outline0;
    outline-offset: -2px;
}
/*********************************************************************/
/*                            药方说明样式                           */
/*********************************************************************/
.challenge_text_desc{
    margin25px 5px 0 6px;
}
#challenge_prescript_id{
    height80px;
    min-height80px;
}
/*********************************************************************/
/*                            文本提示信息                           */
/*********************************************************************/
.challenge_hint_info{
    text-alignright;
    margin-right5px;
    font-size13px;
    color#999;
    displaynone;
}
.challenge_hint_warn{
    color#C33;
}
/*********************************************************************/
/*                             下战书按钮                            */
/*********************************************************************/
.challenge_cancel_publish, .challenge_confirm_publish{
    floatright;
    margin0 3px 10px 0;
    color#259;
    font-size13px;
    line-height1.7;
    padding4px 10px;
}
.challenge_cancel_publish:hover{
    text-decorationunderline;
}
.challenge_confirm_publish{
    font-size14px;
    color#FFF;
    display: inline-block;
    text-aligncenter;
    background-color#1575D5;
    border1px solid #0D6EB8;
    border-radius: 3px;
    text-shadow0 -1px 0 rgba(0,0,0,.5);
    box-shadow: 0 1px 0 rgba(255,255,255,.2inset,0 1px 0 rgba(0,0,0,.2);
}


【备注】:这里有一个技巧点,让TextArea自适应输入文本高度,感兴趣的朋友可以重点关注JS代码


在Eclipse中启动Tomcat后,在浏览器中输入http://localhost:8080/medical,点击“下战书”菜单,打开的页面如下:

wKioL1NfzjDxnE10AAC5selfbms733.jpg


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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
web应用开发线上联系(题解)
1.改一下css文件,index引用的css文件名不对;
0 0
Serverless 时代,这才是 Web 应用开发正确的打开方式
如同 iPhone 当年颠覆了诺基亚,Serverless 的出现也带来了一种全新的、颠覆式的云开发架构模式。
0 0
web 应用开发最佳实践之一:避免大型、复杂的布局和布局抖动
web 应用开发最佳实践之一:避免大型、复杂的布局和布局抖动
0 0
web 应用开发最佳实践之一:避免大型、复杂的布局和布局抖动
web 应用开发最佳实践之一:避免大型、复杂的布局和布局抖动
0 0
目标全平台的Flutter支持Web应用开发了!
Flutter作为一个可移植的UI框架,已经支持现代Web应用开发了!我们很开心已经发布了SDK预览版,这样你可以在Web浏览器里直接运行你的Flutter UI代码。 原文链接:Flutter Web - 目标全平台开发的Flutter再下一城!- 汇智网 Flutter Web的目标 从去年Beta版发布以来,客户们已经使用Flutter来创建可以运行在iOS和Android上的移动应用了。
2357 0
基于阿里云打造『云原生』Web应用——『懒猪行』Web应用开发实践
『懒猪行』专注于境外自由行S2B业务,涉及分销、终端用户服务、供应链等多个服务环节,随着业务规模的不端增加,我们一直在探索Web应用开发的最佳实践,以加快Web应用的迭代效率,为B/C端用户创造更多价值。
2588 0
基于SSM的Java Web应用开发原理初探
SSM开发Web的框架已经很成熟了,成熟得以至于有点落后了。虽然如今是SOA架构大行其道,微服务铺天盖地的时代,不过因为仍有大量的企业开发依赖于SSM,本文简单对基于SSM的Java开发做一快速入门,方便读者尽快把握脉络,理解Java Web开发的主轴,便于做进一步深入学习。
1017 0
spring boot 2.0之web应用开发
web应用开发 简介 spring boot 非常适合进行web程序开发。可以通过使用spring-boot-starter-web快速创建一个内嵌tomcat或Jetty,或netty的应用。
8645 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
边缘安全,让Web加速有保障
立即下载
使用CNFS搭建弹性Web服务
立即下载
WEB框架0day漏洞的发掘及分析经验分享
立即下载