JFinal Web开发学习使用layUI美化的登录功能
Posted wyhluckydog
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JFinal Web开发学习使用layUI美化的登录功能相关的知识，希望对你有一定的参考价值。
效果：
验证码还是没有布局好.背景比较怀古.
1.写前端html
login.jsp
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>登录</title> <link rel="stylesheet" href="/static/css/layui.css"> <link rel="stylesheet" href="/static/css/login.css"> </head> <body> <div class="clear box layui-main login"> <form class="layui-form layui-form-pane1" action="ulogin" method="post"> <div class="layui-form-item"> <label class="layui-form-label">用户名：</label> <div class="layui-input-block"> <input type="text" name="user.name" lay-verify="uname" required placeholder="请输入用户名" autocomplete="off" class="layui-input">${UnameErrMsg?if_exists} </div> </div> <div class="layui-form-item"> <label class="layui-form-label">密码：</label> <div class="layui-input-block"> <input type="password" name="user.pwd" lay-verify="" required placeholder="请输入密码" autocomplete="off" class="layui-input">${PwdErrMsg?if_exists} </div> </div> <div class="layui-form-item"> <label class="layui-form-label">验证码：</label> <div class="layui-input-block"> <input type="text" name="yzm" lay-verify="" required placeholder="请输入验证码" autocomplete="off" class="layui-input">${yzmErrMsg?if_exists}<br> <a href="/login.html"><img alt="验证码" src="/yzm"></a> </div> </div> <div class="layui-form-item"> <label class="layui-form-label"></label> <button class="layui-btn layui-btn-normal btn-center" type="submit">登录</button> </div> </form> </div> <script src="/static/js/layui.js"></script> </body> </html>
登录界面样式
@CHARSET "UTF-8";
body{
background-image:url(/static/images/login-bg.png);
}
.login {
padding-top: 15%;
width: 26%;
}
.btn-center{
text-center:center;
margin:0 auto;
}
2.写控制器
其中就是login方法与ulogin方法
controller包下IndexController类
package cn.pangpython.controller; import com.jfinal.aop.Before; import com.jfinal.core.Controller; import com.jfinal.ext.kit.SessionIdKit; import cn.pangpython.model.User; import cn.pangpython.utils.DateUtils; import cn.pangpython.utils.MD5; import cn.pangpython.validate.RegistValidator; import cn.pangpython.validate.UserLoginValidator; /** * @author pangPython * 主页控制器 */ public class IndexController extends Controller { public void index(){ renderText("index"); } //渲染注册页面 public void regpage(){ render("regist.html"); } //处理注册 @Before(RegistValidator.class) public void regist(){ String pwd = getPara("user.pwd"); String confirm = getPara("reg.confirm"); //验证码验证 boolean result = validateCaptcha("reg.yzm"); if(!result){ setAttr("yzmErrMsg", "验证码错误！"); render("regist.html"); return; } //确认密码验证 if(!pwd.equals(confirm)){ setAttr("confirmErrMsg", "请正确填写确认密码！"); render("regist.html"); return; } String uname = getPara("user.name"); User user = getModel(User.class); String reg_time = DateUtils.dateToUnixTimestamp(DateUtils.getNowTime())+""; //使用用户注册日期作为md5密码加密的盐值,可节省一个salt数据库字段 pwd = MD5.GetMD5Code(pwd+reg_time); //给user实体类填充数据 user.setName(uname); user.setPwd(pwd); user.setRegTime(reg_time); //使用jfinal的保存操作 user.save(); renderText("注册成功！"); } public void login(){ render("login.html"); } @Before(UserLoginValidator.class) public void ulogin(){ // 验证码结果 boolean result = validateCaptcha("yzm"); if (!result) { setAttr("yzmErrMsg", "验证码错误！"); render("login.html"); return; } String uname = getPara("user.name"); String sql = "select * from user where name = ? limit 1"; User user = User.dao.findFirst(sql, uname); if (user != null) { String pwd = MD5.GetMD5Code(getPara("user.pwd") + user.getRegTime()); if (user.getPwd().equals(pwd)) { // 生成唯一标识 String sessionId = SessionIdKit.me().generate(getRequest()); // 设置服务器端session setSessionAttr(sessionId, user); // 设置用户端cookie setCookie("cuser", sessionId, 60000); //redirect("/user"); renderText("登录成功！"); } else { // 密码不正确 setAttr("UnameErrMsg", "用户名或密码不正确！"); render("login.html"); } } else { // 用户名不存在 setAttr("UnameErrMsg", "用户名不存在！"); render("login.html"); } } }
3.写登录验证器
validator包下的UserLoginValidator继承JFinal的Validator
package cn.pangpython.validate; import com.jfinal.core.Controller; import com.jfinal.validate.Validator; public class UserLoginValidator extends Validator { @Override protected void handleError(Controller controller) { controller.keepPara(); } @Override protected void validate(Controller arg0) { validateRequired("user.name", "UnameErrMsg", "请输入用户名！"); validateRequired("user.pwd", "PwdErrMsg", "请输入密码！"); validateRequired("yzm", "yzmErrMsg", "请输入验证码！"); } }
注：验证码的校验也可以在验证器中进行验证
到此就完成了登录功能.运行config文件，访问
http://localhost/login
原文：https://blog.csdn.net/u012995856/article/details/52927053
以上是关于JFinal Web开发学习使用layUI美化的登录功能的主要内容，如果未能解决你的问题，请参考以下文章