小作品（小項目？）技術總結(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