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

一、前言

前几天帮一个学长做了一个Web端的作品,结合之前做的一些东西,总结发现很多东西的复用率还是挺高的,例如用户注册、用户登录这些任何项目中都要使用到的功能模块。所以,很有必要将它们进行总结,不断精化,日后用起来也会比较简单。
先贴几张前台的图:
1.首页
小作品(小项目?)技术总结(1)--用户注册、用户登录常用功能模块_第1张图片
2.用户注册、用户登录页面
小作品(小项目?)技术总结(1)--用户注册、用户登录常用功能模块_第2张图片
小作品(小项目?)技术总结(1)--用户注册、用户登录常用功能模块_第3张图片
3.故障诊断页面
小作品(小项目?)技术总结(1)--用户注册、用户登录常用功能模块_第4张图片
4.诊断结果页面
小作品(小项目?)技术总结(1)--用户注册、用户登录常用功能模块_第5张图片

二、使用技术

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个字符"));
        }
    }

效果图:
小作品(小项目?)技术总结(1)--用户注册、用户登录常用功能模块_第6张图片

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("该用户不存在"));
        }
    }

效果图:
小作品(小项目?)技术总结(1)--用户注册、用户登录常用功能模块_第7张图片

五、代码设计

前台设计:
请移步:
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

你可能感兴趣的:(Web)