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

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

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

   一般医院都会设置内科、外科、妇产科、儿科、眼科、口腔科、耳鼻喉科、皮肤科、麻醉科、传染科、美容科等,从而可以根据病人的不同情况进和分流,每当进入医院时就想起了门面模式,有点扯远了。当下战书时为了描述清楚具体症状,所以想先设置科室,从而使症状描述更准确。下面来实现科室选择。

1、创建科室数据库

CREATE TABLE DEPARTMENT(depId int PRIMARY KEY NOT NULL, depName VARCHAR(64)) ENGINE=InnoDB DEFAULT CHARSET=UTF8


2、插入科室记录

INSERT INTO DEPARTMENT VALUES(1, '内科')

INSERT INTO DEPARTMENT VALUES(2, '外科')

INSERT INTO DEPARTMENT VALUES(3, '妇产科')

INSERT INTO DEPARTMENT VALUES(4, '儿科')

INSERT INTO DEPARTMENT VALUES(5, '眼科')

INSERT INTO DEPARTMENT VALUES(6, '口腔科')

INSERT INTO DEPARTMENT VALUES(7, '耳鼻喉科')

INSERT INTO DEPARTMENT VALUES(8, '皮肤科')

INSERT INTO DEPARTMENT VALUES(9, '麻醉科')

INSERT INTO DEPARTMENT VALUES(10, '传染科')

INSERT INTO DEPARTMENT VALUES(11, '美容科')


3、新建DepartDAO类,通过Hibernate把DepartDAO对象与DEPARTMENT表对应起来,为了简单起见,这里不再列出DepartDAO类的具体代码,里面只是有depId和depName两个字段,以及这两个字段的get()&set()方法


4、创建DepartUtil类

package com.medical.server.util;


import java.util.List;

import org.hibernate.Criteria;

import org.hibernate.Session;

import org.hibernate.criterion.Restrictions;

import com.medical.frame.util.FrameDBUtil;

import com.medical.frame.util.FrameUtil;

import com.medical.server.dao.DepartDAO;


/**

 * 斗医系统服务端科室工具类

 * @author qingkechina 2014-03-28

 */

public class DepartUtil

{

    /**

     * 获取所有科室DAO对象集合

     */

    @SuppressWarnings("unchecked")

    public static List<DepartDAO> getDepartList()

    {

        Session session = FrameDBUtil.openSession();

        Criteria criteria = session.createCriteria(DepartDAO.class);

        List<?> depList = criteria.list();

        FrameDBUtil.closeSession();

        

        if (FrameUtil.isEmpty(depList))

        {

            return null;

        }

        return (List<DepartDAO>)depList;

    }

    

    /**

     * 通过科室ID查找科室DAO对象

     */

    public static DepartDAO getDepartById(int depId)

    {

        Session session = FrameDBUtil.openSession();

        Criteria criteria = session.createCriteria(DepartDAO.class);

        criteria.add(Restrictions.eq("depId", depId));

        List<?> depList = criteria.list();

        FrameDBUtil.closeSession();

        

        if (FrameUtil.isEmpty(depList))

        {

            return null;

        }

        

        DepartDAO depDao = (DepartDAO)depList.get(0);

        return depDao;

    }

}


6、定义获取科室数据配置信息

在war\WEB-INF\config\challenge下创建challenge-data.xml文件,里面填充如下内容:

<?xml version="1.0" encoding="UTF-8"?>

<business-config>

    <!--获取部门科室类别信息-->

    <business name="gainDepart" business-class="com.medical.server.data.DepartDataAction" />

</business-config>


7、创建DepartDataAction类

package com.medical.server.data;


import java.util.List;

import com.google.gson.Gson;

import com.medical.frame.FrameDefaultAction;

import com.medical.frame.FrameException;

import com.medical.server.dao.DepartDAO;

import com.medical.server.util.DepartUtil;


/**

 * 斗医系统获取科室信息处理类

 * @author qingkechina 2014-05-28

 */

public class DepartDataAction extends FrameDefaultAction

{

    /**

     * 全局Gson对象

     */

    private final static Gson gson = new Gson();

    

    @Override

    public String execute()

        throws FrameException

    {

        List<DepartDAO> departList = DepartUtil.getDepartList();

        return gson.toJson(departList);

    }

}


8、创建DepartDAO对象的数据表映射文件

在war\etc\mapping下创建depart.hbm.xml文件,里面填充如下内容:

<?xml version="1.0" encoding="utf-8"?>  

<!DOCTYPE hibernate-mapping PUBLIC  

        "-//Hibernate/Hibernate Mapping DTD 3.0//EN"  

        "http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd">  

  

<hibernate-mapping package="com.medical.server.dao">

    <class name="DepartDAO" table="DEPARTMENT">

        <id name="depId" column="depId" type="int" />

        <property name="depName" column="depName" />

    </class>

</hibernate-mapping>


9、修改challenge.js文件,在该文件加载后从服务端读取科室数据并渲染到HTML页面上

/**

 * 初始化科室类别数据

 */

 function initDepartData(){

    asyncRequest("gainDepart.data", null, function(result){

        var resultJson = eval(result);

        if(!resultJson){

            return;

        }


        $("#challenge_depart_id").empty();

   

        $.each(resultJson, function(i, item){

            var departItem = $("<div />").attr("class", "challenge_depart_item").attr("id", "challenge_depart_id_" + item.depId).text(item.depName);

            departItem.click(function(){

                if(CURRENT_SELECTED_ITEM != -1){

                    $("challenge_depart_id_" + CURRENT_SELECTED_ITEM).attr("class", "challenge_depart_item");

                }

                CURRENT_SELECTED_ITEM = item.depId;

                $("#challenge_depart_id_" + item.depId).attr("class", "challenge_depart_item_selected");

            });


            $("#challenge_depart_id").append(departItem);

        });

    });

}


10、渲染科室类别的页面样式

(1)修改challenge.html内容

<div class="challenge_text_desc">问题科室:</div>

<div class="challenge_text_desc">选择所属科室(必填):</div>

<div class="challenge_depart_wrapperid="challenge_depart_id">

     <textarea id="challenge_kind_id" placeholder="选择问题所属科室"></textarea>

</div>


(2)在challenge.css文件中增加如下CSS定义

.challenge_depart_wrapper{

    margin: 5px;

    line-height: 15px;

    background-color: #FFF;

    color: #222;

    overflow: hidden;

}


.challenge_depart_item, .challenge_depart_item_selected{

    float: left;

    min-width: 55px;

    width: auto;

    height: 22px;

    line-height: 22px;

    font-size: 13px;

    text-align: center;

    margin-right: 8px;

    background-color: #E1EAF2;

    border-radius: 6px;

    cursor: pointer;

}


.challenge_depart_item:hover, .challenge_depart_item_selected{

    color: #FFF;

    background-color: #225599;

}

在Eclipse中启动Tomcat后,在浏览器中输入http://localhost:8080/medical/challenge.act,查看此时的效果:

wKiom1OF7d2BnmiAAAD8eJagRvQ761.jpg


11、当用户没有登录时直接选择“下战书”菜单,此时会先让用户登录(这个功能是上篇博文实现),但用户的习惯是输入用户名和密码后直接回车,而不是用鼠标点击登录,所以这里还需要对“登录”按钮绑定回车事件

在login.js文件中增加绑定回车事件方法bindEvent4Login(),并在文档加载完后的方法中调用它。s

/**

 * 登录界面"确定"按钮绑定回车键盘事件

 */

function bindEvent4Login(){

    $(document).keydown(function(event){

        if(event.keycode == 13){

            systemUserLogin(false);

        }

    });

}


12、在IE9浏览器下进入“下战书”页面,发现内容并没有居中,这个是由于challenge.html中没有设置文档类型,解决办法在challenge.html最上面添加<!DOCTYPE HTML>的原因

13、在IE9浏览器下placeholder不生效,这里给出一个通用的解决方法。


【备注】:IE10已支持HTML5的placeholder属性


(1)在common.js中定义bindPlaceHolder()方法

/**

 * 为组件绑定placeholder属性,主要为了兼容IE

 */

function bindPlaceHolder(component){

    var isSupport = 'placeholder' in document.createElement('input');

    if(!isSupport){

        component.blur(function(){

            if(!component.val() || component.val() == component.attr("placeholder")){

                component.val(component.attr("placeholder"));

                component.css("color", "#999");

            }

        }).focus(function(){

            if(component.val() == component.attr("placeholder")){

                component.val("");

            }

            component.css("color", "");

        });


        // 使其失去焦点

        component.blur();

    }

}


(2)修改challenge.js文件,把initInputListener()重命名为initInputComponent(),修改内容如下:

/**

 * 初始化文本框

 */

function initInputComponent(){

    var textareaArray = new Array("challenge_title_id", "challenge_prescript_id", "challenge_challenger_id");

    $.each(textareaArray, function(i, item){

        var dynamicItem = $("#" + item);

        // 绑定PlaceHolder

        bindPlaceHolder(dynamicItem);


        // 设置textArea高度自适应

        dynamicItem.bind("input", function(event){

            this.style.height = this.scrollHeight - 2 + "px";

        });

    });

}



【备注】:待续.......

由于一篇完成一个功能点存在困难,所以会把一个功能点切为几个博文。同时由于工作和家庭原因,所以更改时间周期较长,请大家见谅







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

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

相关文章
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漏洞的发掘及分析经验分享
立即下载