JFinal Web開發學習(五)註冊界面和後端驗證

時間 2019-11-16

原文原文鏈接

效果：html

直接點擊註冊後：前端

後端驗證是可靠地，前端js驗證是不可靠的。只須要在瀏覽器刪除js驗證代碼便可突破js驗證。
1.註冊界面
在WebRoot下新建regist.jspjava

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page isELIgnored="false" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>註冊</title>
</head>
<body>
    <form action="regist" method="post">
        用戶名：<input name="reg.name" type="text" >${nameErrMsg}<br>
        密碼：&nbsp;<input name="reg.pwd" type="password">${pwdErrMsg}<br>
        驗證碼：<input name="reg.yzm" type="text"><img src="/yzm"><br>${yzmErrMsg}
        <button type="submit">註冊</button>
    </form>
</body>
</html>

使用原生html書寫，可根據本身的需求美化，使用各類優秀前端框架.
2.寫後端驗證
在validate包中新建RegistValidator繼承JFinal的Validator
在重寫的validate方法中加入本身須要驗證的字段python

package cn.pangpython.validate;

import com.jfinal.core.Controller;
import com.jfinal.validate.Validator;

/**
 * @author pangPython
 *  註冊的驗證器
 */
public class RegistValidator extends Validator {

    @Override
    protected void handleError(Controller arg0) {
        // TODO Auto-generated method stub

    }

    @Override
    protected void validate(Controller arg0) {
        validateRequired("reg.name", "nameErrMsg", "請填寫用戶名！");
        validateRequired("reg.pwd", "pwdErrMsg", "請填寫密碼！");
        validateRequired("reg.yzm", "yzmErrMsg", "請填寫驗證碼！");
    }

}

3.新建公共控制器CommonController繼承JFinal的Controller
在裏邊寫一些先後端通用的方法，這裏先寫驗證碼生成後端

package cn.pangpython.controller;

import com.jfinal.core.ActionKey;
import com.jfinal.core.Controller;
import com.jfinal.render.CaptchaRender;

/**
 * @author pangPython
 *  通用控制器，寫一些通用的方法，驗證碼生成等
 */
public class CommonController extends Controller {
        @ActionKey("/yzm")
        public void verifycode(){
            render(new CaptchaRender());
        }
}

Jfinal的驗證碼生成很簡單，就這麼幾個單詞….驗證碼校驗是更簡單（在JFinal2.2中）
要把這個控制器在路由中綁定一個url
FrontRoutes.java瀏覽器

package cn.pangpython.routes;

import com.jfinal.config.Routes;

import cn.pangpython.controller.CommonController;
import cn.pangpython.controller.IndexController;
import cn.pangpython.controller.UserController;

/**
 * @author pangPython
 * 前臺路由
 */
public class FrontRoutes extends Routes {

    @Override
    public void config() {
        add("/",IndexController.class);
        add("/user",UserController.class);
        add("/common",CommonController.class);

    }

}

4.在首頁控制器中寫註冊方法
IndexController.java前端框架

package cn.pangpython.controller;

import com.jfinal.aop.Before;
import com.jfinal.core.Controller;

import cn.pangpython.validate.RegistValidator;

/**
 * @author pangPython
 * 主頁控制器
 */
public class IndexController extends Controller {
    public void index(){
        renderText("index");
    }

    //渲染註冊頁面
    public void regpage(){
        render("regist.html");
    }

    //處理註冊
    @Before(RegistValidator.class)
    public void regist(){
        renderText("註冊成功！");
    }

}

5.在MyJFinalConfig中的configConstant(Constants me)函數中添加映射視圖：框架

    @Override
    public void configConstant(Constants me) {
        // 開發模式
        me.setDevMode(true);
        //這裏能夠經過配置文件來讀取配置參數，更靈活
        
        //指定視圖
        me.setViewType(ViewType.JSP);
    }

具體功能實現後面系列博客中會繼續更新…jsp