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

POOPE

在上文中有意埋了几个安全彩蛋，以便后面在聊网络安全时使用。

书接前言，对上文做过实践的朋友肯定会发现：当用户注册/登录成功后页面跳转到了系统首页，但首页的导航菜单并没有显示用户名。本文重点实现这个特性，同时也谈谈系统的编码问题。

　　

六、注册/登录成功后导航菜单显示当前用户名

    与JSP不同之处在于，《斗医》本着Web本质特点，让不了解Web的朋友在脑海中有一个整体思路，不要把Web应用想的过于神秘，所以页面展示部分放到了HTML中，服务端部分仅提供查询页面和提供数据，它们之间通过HTTP协议贯通。

    正是这个原因当用户注册/登录成功后跳转到系统首页，浏览器开始渲染main.html页面，由于此时还没有让Javascript去服务端读取用户信息，所以当前用户名没有显示。

    下面实现这个特性：

　　

　　1、系统首页调用common.js的公共接口
　　

(function(window){ 　　    $(document).ready(function(){ 　　        // 生成系统菜单 　　        generateSystemMenu(); 　　        // 设置首页菜单被选中 　　        selectSystemMenu("system_home_menu"); 　　        // 获取用户信息 　　        getBreifUserInfo(); 　　    }); 　　})(window);

　　
　　
　　

　　2、common.js中定义getBreifUserInfo()方法，以实现异步向服务端获取数据

/** 　　 * 获取用户的信息：用户名 　　 */ 　　function getBreifUserInfo(){ 　　    asyncRequest("userBrief.data", null, function(result){ 　　        var briefUser = eval(result); // 其中eval是JS的不安全方法，不建议使用，这里留个彩蛋 　　        $("#system_login_user_name").text(briefUser.userId); 　　    }); 　　}

　　

3、配置获取用户信息的业务

在war\WEB-INF\config\sm下定义system-data.xml文件，里面配置如下业务：

<?xml version="1.0" encoding="UTF-8" ?> 　　<business-config> 　　       <!--获取用户信息，导航菜单使用--> 　　       <business name="userBrief" business-class="com.medical.server.data.UserBriefDataAction" /> 　　 </business-config>

　　4、定义com.medical.server.data.UserBriefDataAction.java类，它继承FrameDefaultAction类，同时重写execute()方法

@Override 　　public String execute() throws FrameException 　　{ 　　    UserDAO loginUser = FrameCache.getInstance().getUserBySession(session); 　　    if(loginUser == null) 　　    { 　　         loginUser = new UserDAO(); 　　         loginUser.setUserId("游客"); 　　    } 　　 　　    return gson.toJson(loginUser); 　　}

　　
　　    这个方法中使用了FrameCache.getInstance().getUserBySession(session)方法，这个方法是从系统全局缓存中读取会话中的用户。既然有读取那么也有对应的设置，方法如下：

　　

public class FrameCache 　　{ 　　     public UserDAO getUserBySession(HttpSession session) 　　     { 　　          return (UserDAO)session.getAttribute(FrameConstant.SYSTEM_CURRENT_LOGIN_USER); 　　     } 　　 　　     public void setUserBySession(HttpSession session, UserDAO currentUser) 　　     { 　　          session.setAttribute(FrameConstant.SYSTEM_CURRENT_LOGIN_USER, currentUser); 　　     } 　　}

　　
　　
　　     这里又涉及到一个常量定义，其具体为：FrameConstant.SYSTEM_CURRENT_LOGIN_USER = “systemCurrentLoginUser”;
　　

　　5、在《【斗医】【11】Web应用开发50天》的注册和登录中没有把当前用户放入全局缓存，下面进行修改：
　　（1）修改UserUtil.isValideUser()方法，把它更名为getUserDAO()，同时返回值由原来的boolean改为UserDAO
　　

public static UserDAO getUserDAO(String userName, String userAuth) 　　{ 　　     Session session = FrameDBUtil.openSession(); 　　     Criteria criteria = session.createCriteria(UserDAO.class); 　　     criteria.add(Restrictions.eq("userId", userName)).add(Restrictions.eq("userAuth", userAuth)); 　　     List<?> userList = criteria.list(); 　　     FrameDBUtil.closeSession(); 　　 　　     if(FrameUtil.isEmpty(userList)) 　　     { 　　         return null; 　　     } 　　     return (UserDAO)userList.get(0); 　　}

　　
　　
　　

　　（2）修改UserLoginDataAction的用户注册方法
　　

private String doRegistAction(String userName, String userAuth) 　　{ 　　    // 1. 判断数据库中是否已存在该用户名 　　    UserDAO user = UserUtil.getUserByName(userName); 　　    if (user != null) 　　    { 　　        UserLoginBean loginBean = new UserLoginBean(); 　　        loginBean.setErrorCode(FrameErrorCode.USER_SAME_ERROR); 　　        loginBean.setErrorDesc(FrameUtil.getErrorDescByCode(loginBean.getErrorCode())); 　　        return gson.toJson(loginBean); 　　    } 　　 　　    // 2. 把用户入库 　　    UserUtil.insertUser(userName, userAuth); 　　 　　    // 3. 存入会话对应的内存 　　    user = new UserDAO(); 　　    user.setUserId(userName); 　　    FrameCache.getInstance().setUserBySession(session, user); 　　 　　    // 4. 返回用户注册成功JSON对象 　　    UserLoginBean loginBean = new UserLoginBean(); 　　    loginBean.setErrorCode(FrameErrorCode.USER_LOGIN_SUCCESS); 　　    loginBean.setErrorDesc(FrameUtil.getErrorDescByCode(loginBean.getErrorCode())); 　　    loginBean.setForwardPath("index.act"); 　　    return gson.toJson(loginBean); 　　}

　　

　　（3）修改UserLoginDataAction的用户登录方法
　　

private String doLoginAction(String userName, String userAuth) 　　{ 　　    // 1. 判断数据库中是否已存在该用户名 　　    UserDAO cacheUser = UserUtil.getUserDAO(userName, userAuth); 　　    if (cacheUser == null) 　　    { 　　        UserLoginBean loginBean = new UserLoginBean(); 　　        loginBean.setErrorCode(FrameErrorCode.USER_NOT_EXIST_ERROR); 　　        loginBean.setErrorDesc(FrameUtil.getErrorDescByCode(loginBean.getErrorCode())); 　　        return gson.toJson(loginBean); 　　    } 　　 　　    // 2. 存入会话对应的内存 　　    cacheUser.setUserAuth(null); 　　    FrameCache.getInstance().setUserBySession(session, cacheUser); 　　 　　    // 3. 返回用户登录成功JSON对象 　　    UserLoginBean loginBean = new UserLoginBean(); 　　    loginBean.setErrorCode(FrameErrorCode.USER_LOGIN_SUCCESS); 　　    loginBean.setErrorDesc(FrameUtil.getErrorDescByCode(loginBean.getErrorCode())); 　　    loginBean.setForwardPath("index.act"); 　　    return gson.toJson(loginBean); 　　}

　　
　　
【备注】：由于客户端并不需要用户的密码，因此没有必要把用户信息暴露，增加网络安全风险



　　（4）用例验证
　　用例1：
　　前提：系统中没有qingkechina用户
　　操作：进入系统的登录页面，注册名为qingkechina的用户
　　期望：注册成功且系统的菜单右上角能显示qingkechina用户名
　　

　　用例2：
　　前提：系统中已有qingkechina用户
　　操作：进入系统的登录页面，以qingkechina用户登录
　　期望：登录成功且系统的菜单右上角能显示qingkechina用户名
　　

　　用例3:
　　前提：系统中没有“陈许诺”用户
　　操作：进入系统的登录页面，注册名为“陈许诺”的用户
　　期望：注册成功且系统的菜单右上角能显示“陈许诺”用户名
　　

　　打开Eclipse启动Tomcat成功后，在浏览器中输入http://localhost:8080/medical回车，按上面的用户验证，会发现前两个英文用例成功，但中文用例存在乱码问题，如下图：  

　　

　　

　　七、系统的编码与乱码
　　
　　    系统出现乱码的原因简而言之是由于：输入与输出编码不一致，比如说浏览器在Windows中文操作系统下运行，Chrome、FireFox缺省是以GBK编码显示，此时若服务端传给浏览器的编码是UTF-8，则就会形成乱码。
　　    各个国家的程序开发人员为了让系统支持各国的语言，都会采用UTF-8编码来解决全球化的问题。今天在网上搜索时也发现一个比较好玩的文章《大话编码》，感兴趣的可以看一看，就本系统来言存在如下边界：

　　

　　解释：
　　IE浏览器根据操作系统缺省选择编码，可通过“查看 > 编码”来查看；FireFox浏览器在中文windows操作系统下缺省使用unicode编码，可通过“查看 > 字符编码”查看；Chrome浏览器在中文windows操作系统下缺省使用GBK编码，可通过选择“设置 > 高级设置 > 网络内容 > 自定义字体 > 编码”查看；
　　Tomcat在中文windows操作系统下缺省GBK编码；但Java依赖于JVM的具体环境，一般都是以unicode编码；
　　mysql安装时缺省以latin1编码；
　　properties文件当时设置时以utf-8编码；
　　

　　看着是不是有点晕了？所以若想不让其乱码，最好统一成同一个编码，这里使用UTF-8。
　　

　　1、浏览器显示使用UTF-8编码
　　这一点在前面写HTML页面时已指定页面的编码为UTF-8，如打开main.html在它的<head>中已说明
　　

<!--设置字符集--> 　　<meta http-equiv="content-type" content="text/html;charset=utf-8" />

　　

　　
　　2、浏览器与Tomcat之间可以通过filter过滤器的方式，让所有的请求和响应都使用UTF-8编码
　　（1）在war\WEB-INF\web.xml配置编码过滤器

　　

<filter> 　　    <filter-name>encoder</filter-name> 　　    <filter-class>com.medical.frame.FrameEncoderFilter</filter-class>          　　</filter> 　　<filter-mapping> 　　    <filter-name>encoder</filter-name> 　　    <url-pattern>/*</url-pattern> 　　</filter-mapping>

　　
　　【备注】：由于url-pattern配置为/*，它表明所有的请求都经过FrameEncoderFilter
　　
　　

　　（2）定义FrameEncoderFilter，让其实现Filter接口

　　

public class FrameEncoderFilter implements Filter 　　{ 　　    @Override 　　    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)                throws IOException, ServletException 　　    { 　　        request.setCharacterEncoding("utf-8"); 　　        response.setCharacterEncoding("utf-8"); 　　        chain.doFilter(request, response); 　　    } 　　}

　　

　　（3）查看Mysql的编码，发现它以latin1编码的（具体查看办法可以问google）
　　
　　I、关闭mysql进程。以我用的windows操作系统为例，进入“任务管理器 > 进程”，右键mysqld.exe结束进程树
　　II、打开C:\Program Files\MySQL\MySQL Server 5.5\my.ini文件，找到如下内容修改为utf8
　　

default-character-set=utf8 　　character-set-server=utf8

　　
　　【备注】：因为我安装在C盘，请读者根据自己的实际情况处理
　　
　　III、重启Mysql进程。进入C:\Program Files\MySQL\MySQL Server 5.5\bin，双击mysqld.exe可执行文件

　　

　　（4）重创建数据库medical和数据表usertable
　　I、打开所有程序 > MySQL > MySQL Server 5.5 > MySQL 5.5 Command Line Client命令工具
　　II、在窗口中输入密码进入
　　III、执行如下SQL语句，如图
　　
　　

　　（5）把Java的unicode转换为utf-8编码
　　

/** 　　 * 把ISO编码的字符串转换为UTF-8编码 　　 */ 　　public static String convert2UTF8(String resource) 　　{ 　　    String descStr = resource; 　　    try 　　    { 　　        byte[] resourceArray = resource.getBytes("ISO-8859-1"); 　　        descStr = new String(resourceArray, "utf-8"); 　　    } 　　    catch (UnsupportedEncodingException e) 　　    { 　　        e.printStackTrace(); 　　    } 　　 　　    return descStr; 　　} 　　 　　 　　/** 　　 * 由错误码获取错误描述信息 　　 */ 　　 public static String getErrorDescByCode(int errorCode) 　　 { 　　    String errorCodeStr = String.valueOf(errorCode); 　　    String errorDesc = FrameCache.getInstance().getResourceValue(errorCodeStr); 　　    if (isEmpty(errorDesc)) 　　    { 　　        return convert2UTF8("系统异常，错误码：" + errorCode); 　　    } 　　 　　    return convert2UTF8(errorDesc); 　　}

　　再测试一下用例三，结果如下：

　　

　　八、全局信息提示栏
　　    做过C/S架构开发的肯定知道模态对话框和非模态对话框的概念，提示信息正是通过对话框来展现给用户的；当然B/S架构也不离外，它也有模态和非模态的对话框。
　　    但细心的您肯定关注到了：现在的网站展现形式越来越“Web化”。以前大家都用翻页突然一天各大中型网站好像都不翻页了，而改为拖拽样式，像浏览百度图片等。
　　    这种样式的变化不是必然的，它更符合用户的操作习惯。
　　    全局信息提示框的大概思路，由showSystemGlobalInfo()方法生成一个div，并把它追加到<body> Dom元素上，然后由navigation.css全局样式渲染它，当使用时直接调用showSystemGlobalInfo()方法，5钞钟之后div自动隐藏掉。
　　1、在common.js中定义公共方法showSystemGlobalInfo()
　　

/** 　　 * 全局信息提示:在屏幕最下方显示 　　 */ 　　var sytemGlobalInfoDiv = null; 　　 　　function showSystemGlobalInfo(message) 　　{ 　　    // 只初始化一次 　　    if(!sytemGlobalInfoDiv) 　　    { 　　        sytemGlobalInfoDiv = $("<div />").attr("class", "system_global_info").text(message); 　　        sytemGlobalInfoDiv.appendTo($("body")); 　　    } 　　 　　    // 停留5s钟后提示框自动消失 　　    sytemGlobalInfoDiv.text(message).show(); 　　    setTimeout(function(){ 　　        sytemGlobalInfoDiv.hide(); 　　    }, 5000); 　　}

　　

　　2、在navigation.css中定义样式
　　

.system_global_info{ 　　    width: 100%; 　　    height: 45px; 　　    line-height: 45px; 　　    color: #FFF; 　　    font-size: 14px; 　　    font-weight: 600; 　　    text-align: center;    　　    background-color: #0767C8; 　　    position: absolute; 　　    bottom: 0; 　　}

　　

　　3、把用户注册/登录失败的地方更换为调用此方法，涉及login.js的systemUserLogin()方法
　　

var resultJson = eval(result); 　　if(resultJson.errorCode != 510) 　　{ 　　    alert(resultJson.errorDesc); 　　    showSystemGlobalInfo(resultJson.errorDesc); 　　    return; 　　}

　　

　　4、功能测试
　　（1）先在系统中创建名称为qingkechina的用户，确保创建成功
　　（2）再次创建名称为qingkechina的用户，此时应该有错误提示，如下图：
　　
　　
　　【备注】：截止目前登录部分算是完成，里面还涉及一些不安全的处理，一些没有考虑到的，这里暂时保留。接下来完成“下战书”部分业务。