小作品（小项目？）技术总结(1)--用户注册、用户登录常用功能模块

一、前言

前几天帮一个学长做了一个Web端的作品，结合之前做的一些东西，总结发现很多东西的复用率还是挺高的，例如用户注册、用户登录这些任何项目中都要使用到的功能模块。所以，很有必要将它们进行总结，不断精化，日后用起来也会比较简单。
先贴几张前台的图：
1.首页

2.用户注册、用户登录页面


3.故障诊断页面

4.诊断结果页面

二、使用技术

JPA + JSF + HTML + CSS + JavaScript
前端部分是实验室小伙伴提供的技术支持。

三、大体设计

3.1 用户注册

用户注册部分大体可以分为以下步骤：

• 从前台获取用户信息，用户姓名、用户密码等
• 将用户实例化并存入到数据库

3.2 用户登录

用户登录部分大体可以分为以下步骤：

• 从前台获取用户信息，用户名、用户密码等
• 将获取到的用户信息与数据库进行核对
• 核对正确则实现登录，否则失败

四、细节处理

如何更好地增强用户体验，例如在用户注册时自动提醒用户注册用户名的长度、密码设计的长度、组成，用户登录时判断该用户名是否存在等。

4.1 使用技术

该部分主要使用JSF的验证器、ajax等技术。还需要系统学习。

4.2 用户注册时用户名是否已注册、长度判断

前台设计：

ajax事件类型为”blur”。

<h:inputText id="username" placeholder="5-20个英语，字符，数字，区分大小写"
                            validator="#{UserController.userNameValidate}"
                            value="#{UserController.user.username}" size="10">
                            <f:ajax event="blur" render="nameError" />
                        </h:inputText>
                        <br />
                        <h:message for="username" id="nameError"
                            style="color: red; font-size:75%" />

后台validator设计：

/*
     * * 用户名验证 长度 用户注册
     */
    public void userNameValidate(FacesContext context, UIComponent component, Object value)
            throws IllegalStateException, SecurityException, HeuristicMixedException, HeuristicRollbackException,
            RollbackException, SystemException {
        if (value.toString().length() < 5 || value.toString().length() > 20) {
            throw new ValidatorException(new FacesMessage("用户名长度应为5-20个字符"));
        }
        if (loginValidate1(value.toString())) {
            throw new ValidatorException(new FacesMessage("该用户名已注册"));
        }
    }

4.3 用户注册时用户密码长度判断

前台设计：
ajax事件类型为”keyup”。

<h:inputText id="password" placeholder="5-20个英语，字符，数字，区分大小写"
                            validator="#{UserController.passwordValidate}"
                            value="#{UserController.user.password}" size="10">
                            <f:ajax event="keyup" render="passwordError" />
                        </h:inputText>
                        <br />
                        <h:message for="password" id="passwordError"
                            style="color: red;font-size:75%" />

后台validator设计：

/*
     * s * 用户密码验证 长度 用户注册
     */
    public void passwordValidate(FacesContext context, UIComponent component, Object value)
            throws IllegalStateException, SecurityException, HeuristicMixedException, HeuristicRollbackException,
            RollbackException, SystemException {
        if (value.toString().length() < 5 || value.toString().length() > 12) {
            throw new ValidatorException(new FacesMessage("密码长度应为5-12个字符"));
        }
    }

效果图：

4.4 用户登录时用户名是否存在的判断

前台设计：
ajax事件类型为”blur”。

<h:inputText id="login-username"
                            validator="#{UserController.loginUserNameValidate}"
                            value="#{UserController.tempUser.username}" size="10">
                            <f:ajax event="blur" render="login-nameError" />
                        </h:inputText>
                        <h:message for="login-username" id="login-nameError"
                            style="color: red; font-size:75%" />

后台validator设计：

/*
     * * 用户名验证 用户登录
     */
    public void loginUserNameValidate(FacesContext context, UIComponent component, Object value)
            throws IllegalStateException, SecurityException, HeuristicMixedException, HeuristicRollbackException,
            RollbackException, SystemException {
        if (!loginValidate1(value.toString())) {
            throw new ValidatorException(new FacesMessage("该用户不存在"));
        }
    }

效果图：

五、代码设计

前台设计：
请移步：
https://github.com/GaoZiqiang/314DiagnosisSystem/blob/master/src/main/webapp/index.xhtml
后台设计：
请移步：
https://github.com/GaoZiqiang/314DiagnosisSystem/blob/master/src/main/java/cn/edu/sdut/softlab/controller/UserController.java