【斗医】【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_wrapper" id="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，查看此时的效果：

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不生效，这里给出一个通用的解决方法。

/**

 * 为组件绑定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