关于LayuiAdmin的登录、注册等模块，是有自己的规范的，还有些诸如登陆拦截获取凭证等小细节。所以专门把这块整理了出来。
另，各模块用的都是Layui自带的html代码，文章重心主要放在js部分，旨在给出一个实际样例。
Tip1. LayuAdmin对于登录、注册等模块有规定的返回数据格式，在src/config.js中可查看详情。
{
“code”: 0
,“msg”: “”
,“data”: { }
}
此外，在LayuiAdmin模板源码中start\json\user路径下，有各模块返回的数据格式样例。
Tip2. 在LayuiAdmin模板源码中src\controller\路径下，有一些封装好的js代码。
例如layui.use([‘admin’, ‘form’, ‘user’]中的user模块对应src\controller\user.js，在该文件中包含了“更换图形验证码”、“昵称密码的验证”等代码。
登录模块
1.前端代码
<style>
#LAY-user-login {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: url('images/7.jpg') no-repeat center center fixed;
background-size:cover;
}
</style>
<script type="text/html" template>
<link rel="stylesheet" href="{{ layui.setter.base }}style/login.css?v={{ layui.admin.v }}-1" media="all">
</script>
<div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login" style="display: none;">
<div class="layadmin-user-login-main">
<div class="layadmin-user-login-box layadmin-user-login-header">
<h2>XXX系统</h2>
</div>
<div class="layadmin-user-login-box layadmin-user-login-body layui-form">
<div class="layui-form-item">
<label class="layadmin-user-login-icon layui-icon layui-icon-username"
for="LAY-user-login-username"></label>
<input type="text" name="username" id="LAY-user-login-username" lay-verify="required"
placeholder="用户名"
class="layui-input">
</div>
<div class="layui-form-item">
<label class="layadmin-user-login-icon layui-icon layui-icon-password"
for="LAY-user-login-password"></label>
<input type="password" name="password" id="LAY-user-login-password" lay-verify="required"
placeholder="密码" class="layui-input">
</div>
<div class="layui-form-item">
<div class="layui-row">
<div class="layui-col-xs7">
<label class="layadmin-user-login-icon layui-icon layui-icon-vercode"
for="LAY-user-login-vercode"></label>
<input type="text" name="vercode" id="LAY-user-login-vercode" lay-verify="required"
placeholder="图形验证码" class="layui-input">
</div>
<div class="layui-col-xs5">
<div style="margin-left: 10px;">
<img src="https://www.oschina.net/action/user/captcha"
class="layadmin-user-login-codeimg"
id="LAY-user-get-vercode">
</div>
</div>
</div>
</div>
<div class="layui-form-item" style="margin-bottom: 20px;">
<a lay-href="/user/reg" class="layadmin-user-jump-change layadmin-link"
style="margin-top: 7px;float: left;margin-right: 40px">注册帐号 </a>
<a lay-href="/user/forget" class="layadmin-user-jump-change layadmin-link"
style="margin-top: 7px;float: left;margin-right: 46px"> 忘记密码？</a>
<input type="checkbox" name="remember" lay-skin="primary" title="记住密码">
</div>
<div class="layui-form-item">
<button class="layui-btn layui-btn-fluid" lay-submit lay-filter="LAY-user-login-submit">登 入
</button>
</div>
</div>
</div>
</div>
<script>
layui.use(['admin', 'form', 'user'], function () {
var $ = layui.$
, setter = layui.setter
, admin = layui.admin
, form = layui.form
, router = layui.router()
, search = router.search;
form.render();
//提交
form.on('submit(LAY-user-login-submit)', function (obj) {
console.log("123");
//请求登入接口
admin.req({
url: '/login' //实际使用请改成服务端真实接口
, data: obj.field//这里把数据封装成json的了，在springmvc里面会自己解析
, method: "post"
, success: function (res) {
if(res.code==0){
console.log(res);
//请求成功后，写入 access_token
layui.data(setter.tableName, {
key: setter.request.tokenName
, value: res.data.access_token
});
//写入用户名
layui.data(setter.tableName, {
key: 'name'
, value: res.data.name
});
//登入成功的提示与跳转
layer.msg('登录成功', {
offset: '15px'
, icon: 1
, time: 1000
}, function () {
location.hash = search.redirect ? decodeURIComponent(search.redirect) : '/';//解码url，跳转页面
});
}else{
layer.msg('登陆失败，请重新登陆', {
offset: '15px'
, icon: 2
, time: 1000
}, function () {
$("input[name='username']").val("");
$("input[name='password']").val("");
});
}
}
});
});
});
</script>
2.数据返回格式样例文件：start\json\user\login.js
{
"code": 0
,"msg": "登入成功"
,"data": {
"access_token": "c262e61cd13ad99fc650e6908c7e5e65b63d2f32185ecfed6b801ee3fbdd5c0a"
}
}
3.后台java代码
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;
import sun.misc.BASE64Encoder;
import java.io.UnsupportedEncodingException;
import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;
import java.util.HashMap;
import java.util.Map;
/**
* 1.使用layuiAdmin自带的拦截器进行拦截，访问首页或其他页面，会拦截到登录页面。
* 2.后台将登录信息进行Md5码加密，作为用户凭证access_token号返给前端。
* 3.前端接收到access_token后解码，进行页面跳转至首页。
* @author _Yuan
*/
@RestController
public class PageController {
@Autowired
private UserService userService;
/**
* 登录页面判断是否存在当前用户
* @param username
* @param password
* @return
*/
@RequestMapping(value="/login",method = RequestMethod.POST)
public Map<String,Object> login(String username,String password) throws UnsupportedEncodingException, NoSuchAlgorithmException {
Map<String,Object> result=new HashMap<>();//存储判断结果
Map<String,Object> map=new HashMap<>();
String id=userService.selectByName(username).getId().toString();
String userPwd=userService.selectPwdByName(username);//记得修改
if(userPwd!=null&&password.equals(userPwd)){
result.put("code",0);
//是否要将用户名存储在localStorage？
result.put("msg","登录成功");
map.put("access_token",EncodeerByMd5(id+username+System.currentTimeMillis()));//为跳过登陆拦截，返回access_token
map.put("name",username);
result.put("data",map);
System.out.println("用户 "+username+" 成功登陆！");
System.out.println("用户凭证access_token: "+map.get("access_token"));
return result;
}
result.put("code",1001);
result.put("msg","登录失败,请重新登录");
result.put("data",null);
return result;
}
/**
* Md5码加密（userid+username+时间戳）生成access_token
*/
public String EncodeerByMd5(String str) throws NoSuchAlgorithmException, UnsupportedEncodingException {
//确定计算方法
MessageDigest md5= null;
md5 = MessageDigest.getInstance("MD5");
BASE64Encoder base64en = new BASE64Encoder();
//加密后的字符串
String newstr=base64en.encode(md5.digest(str.getBytes("utf-8")));
return newstr;
}
}
登录凭证
打开登陆拦截：src\config.js，起到保护网站的作用。
开启拦截后，如果直接通过url路径访问其他页面，会被自动拦截，跳转至登录页面。只有正确登录，并获取到后台传送的access_token,才能进入其他页面。
Tip： 所有代码调试完毕后，一定要将自动拦截打开，并关闭调试模式。
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>跳转至顶部
注册模块
输入注册信息，经过后台验证为新用户后，会跳转至登录页面；否则页面值清空，弹出提示框“注册失败，请重新注册”。
1.前端代码
<script type="text/html" template>
<link rel="stylesheet" href="{{ layui.setter.base }}style/login.css?v={{ layui.admin.v }}-1" media="all">
</script>
<div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login" style="display: none;">
<div class="layadmin-user-login-main">
<div class="layadmin-user-login-box layadmin-user-login-header">
<h2>XXX系统</h2>
</div>
<div class="layadmin-user-login-box layadmin-user-login-body layui-form">
<div class="layui-form-item">
<label class="layadmin-user-login-icon layui-icon layui-icon-username"
for="LAY-user-login-nickname"></label>
<input type="text" name="nickname" id="LAY-user-login-nickname" lay-verify="nickname" placeholder="真实姓名"
class="layui-input">
</div>
<div class="layui-form-item">
<label class="layadmin-user-login-icon layui-icon layui-icon-tabs"
for="LAY-user-login-identity"></label>
<input type="text" name="identity" id="LAY-user-login-identity" lay-verify="identity" placeholder="身份证"
autocomplete="off" class="layui-input">
</div>
<div class="layui-form-item">
<label class="layadmin-user-login-icon layui-icon layui-icon-cellphone"
for="LAY-user-login-cellphone"></label>
<input type="text" name="cellphone" id="LAY-user-login-cellphone" lay-verify="phone" placeholder="手机"
class="layui-input">
</div>
<div class="layui-form-item">
<label class="layadmin-user-login-icon layui-icon layui-icon-password"
for="LAY-user-login-password"></label>
<input type="password" name="password" id="LAY-user-login-password" lay-verify="pass" placeholder="密码"
class="layui-input">
</div>
<div class="layui-form-item">
<label class="layadmin-user-login-icon layui-icon layui-icon-password"
for="LAY-user-login-repass"></label>
<input type="password" name="repass" id="LAY-user-login-repass" lay-verify="required" placeholder="确认密码"
class="layui-input">
</div>
<div class="layui-form-item">
<input type="checkbox" name="agreement" lay-skin="primary" title="同意用户协议" checked>
<a lay-href="/user/login" class="layadmin-user-jump-change layadmin-link layui-hide-xs">用已有帐号登入</a>
</div>
<div class="layui-form-item">
<button class="layui-btn layui-btn-fluid" lay-submit lay-filter="LAY-user-reg-submit">注 册</button>
</div>
<div class="layui-trans layui-form-item layadmin-user-login-other">
<a lay-href="/user/login"
class="layadmin-user-jump-change layadmin-link layui-hide-sm layui-show-xs-inline-block">登入</a>
</div>
</div>
</div>
</div>
</div>
<script>
layui.use(['admin', 'form', 'user'], function () {
var $ = layui.$
, setter = layui.setter
, admin = layui.admin
, form = layui.form
, router = layui.router();
form.render();
//提交
form.on('submit(LAY-user-reg-submit)', function (obj) {
var field = obj.field;
//确认密码
if (field.password !== field.repass) {
return layer.msg('两次密码输入不一致');
}
//是否同意用户协议
if (!field.agreement) {
return layer.msg('你必须同意用户协议才能注册');
}
//请求接口
admin.req({
url: '/regester' //实际使用请改成服务端真实接口
, data: field
,method:"post"
, success: function (res) {
if(res.code==0){
console.log(res);
layer.msg('注册成功', {
offset: '15px'
, icon: 1
, time: 1000
}, function () {
location.hash = '/login'; //跳转到登入页
});
}else{
layer.msg('注册失败，请重新注册', {
offset: '15px'
, icon: 2
, time: 1000
}, function () {
$("input[name='nickname']").val("");//清空内容
$("input[name='cellphone']").val("");
$("input[name='identity']").val("");
$("input[name='password']").val("");
});
}
}
});
return false;
});
});
</script>
2.后台代码
/**
* 注册新用户
* @param nickname 账号
* @param cellphone 手机号
* @param identity 身份证号
* @param password 密码
* @return
*/
@RequestMapping(value = "/regester", method = RequestMethod.POST)
public Map<String, String> regester(String nickname, String cellphone, String identity, String password) {
Map<String, String> result = new HashMap<>();//返回结果
if (userService.slectPwdByIdCard(identity) == null) {//根据身份证号，判断不存在该用户
SysUser user = new SysUser(nickname, password, cellphone, identity);
userService.insertUser(user);
result.put("code", "0");
result.put("msg", "注册成功");
result.put("data", "");
return result;
}
result.put("code", "1");
result.put("msg", "注册失败，请重新注册");
result.put("data", "");
return result;
}
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>跳转至顶部
忘记密码模块
该模块界面如下图所示,当输入身份证信息后，后台后进行验证，若存在该用户，则跳转至密码重置页面；否则弹出“查询失败,您可能未注册”。
1.前端代码
<script type="text/html" template>
<link rel="stylesheet" href="{{ layui.setter.base }}style/login.css?v={{ layui.admin.v }}-1" media="all">
</script>
<div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login" style="display: none;">
<div class="layadmin-user-login-main">
<div class="layadmin-user-login-box layadmin-user-login-header">
<h2>XXX系统</h2>
</div>
<div class="layadmin-user-login-box layadmin-user-login-body layui-form">
<script type="text/html" template>
{{# if(layui.router().search.type === 'resetpass'){ }}
<div class="layui-form-item">
<label class="layadmin-user-login-icon layui-icon layui-icon-password"
for="LAY-user-login-password"></label>
<input type="password" name="password" id="LAY-user-login-password" lay-verify="pass"
placeholder="新密码" class="layui-input">
</div>
<div class="layui-form-item">
<label class="layadmin-user-login-icon layui-icon layui-icon-password"
for="LAY-user-login-repass"></label>
<input type="password" name="repass" id="LAY-user-login-repass" lay-verify="required"
placeholder="确认密码" class="layui-input">
</div>
<div class="layui-form-item">
<button class="layui-btn layui-btn-fluid" lay-submit lay-filter="LAY-user-forget-resetpass">重置新密码
</button>
</div>
{{# } else { }}
<div class="layui-form-item">
<label class="layadmin-user-login-icon layui-icon layui-icon-tabs"
for="LAY-user-login-identity"></label>
<input type="text" name="identity" id="LAY-user-login-identity" lay-verify="identity"
placeholder="请输入身份证号码"
autocomplete="off" class="layui-input">
</div>
<div class="layui-form-item">
<div class="layui-row">
<div class="layui-col-xs7">
<label class="layadmin-user-login-icon layui-icon layui-icon-vercode"
for="LAY-user-login-vercode"></label>
<input type="text" name="vercode" id="LAY-user-login-vercode" lay-verify="required"
placeholder="图形验证码" class="layui-input">
</div>
<div class="layui-col-xs5">
<div style="margin-left: 10px;">
<img src="https://www.oschina.net/action/user/captcha"
class="layadmin-user-login-codeimg" id="LAY-user-get-vercode">
</div>
</div>
</div>
</div>
<div class="layui-form-item">
<button class="layui-btn layui-btn-fluid" lay-submit lay-filter="LAY-user-forget-submit">找回密码
</button>
</div>
{{# } }}
</script>
</div>
</div>
</div>
<script>
layui.use(['admin', 'form', 'user'], function () {
var $ = layui.$
, setter = layui.setter
, admin = layui.admin
, form = layui.form
, router = layui.router();
form.render();
//找回密码下一步
form.on('submit(LAY-user-forget-submit)', function (obj) {
var field = obj.field;
//请求接口
admin.req({
url: '/forget' //实际使用请改成服务端真实接口
, data: field
, method: "post"
, done: function (res) {
location.hash = router.href + '/type=resetpass';
}
});
return false;
});
//重置密码
form.on('submit(LAY-user-forget-resetpass)', function (obj) {
var field = obj.field;
console.log("obj2"+field.password);
//确认密码
if (field.password !== field.repass) {
return layer.msg('两次密码输入不一致');
}
//请求接口
admin.req({
url: '/resetpass' //实际使用请改成服务端真实接口
, data: field
, method: "post"
, done: function (res) {
layer.msg('密码已成功重置', {
offset: '15px'
, icon: 1
, time: 1000
}, function () {
location.hash = '/user/login'; //跳转到登入页
});
}
});
return false;
});
});
</script>
admin.req({}）和ajax请求的区别在于，它会自动传递access-token（访问凭证值），且只处理状态码为200的信息，不像ajax还可处理请求失败的情况。
2.后台java代码
private String identityNumber=null;
/**
* 根据身份证号码查询该用户是否注册过（忘记密码）
* @param identity
* @return
*/
@RequestMapping(value = "/forget", method = RequestMethod.POST)
public Map<String,String> forget(String identity){
identityNumber=identity;//赋值，用于转发参数给resetpass(String password)
Map<String, String> result = new HashMap<>();//返回结果
if(userService.slectPwdByIdentity(identity)!=null){//存在身份证为identity的用户
result.put("code", "0");
result.put("msg", "查询成功");
result.put("data", "");
return result;
}
result.put("code", "1");
result.put("msg", "查询失败,您可能未注册");
result.put("data", "");
return result;
}
/**
* 调用forget(String identity)成功后，执行重置密码操作
* @param password
* @return
*/
@RequestMapping(value = "/resetpass", method = RequestMethod.POST)
public Map<String,String> resetpass(String password){
Map<String, String> result = new HashMap<>();//返回结果
if(identityNumber!=null){
userService.updatePwdByIdentity(identityNumber,password);
identityNumber=null;
}
result.put("code", "0");
result.put("msg", "重置密码成功");
result.put("data", "");
return result;
}
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>跳转至顶部
修改密码模块
输入原密码和现密码，若无误弹出“密码修改成功”弹框；否则，清空所有表单值，bing弹出相应错误提示框。
1.前端代码
该页面的具体代码：
<title>设置我的密码</title>
<div class="layui-card layadmin-header">
<div class="layui-breadcrumb" lay-filter="breadcrumb">
<a lay-href="">主页</a>
<a><cite>设置</cite></a>
<a><cite>我的密码</cite></a>
</div>
</div>
<div class="layui-fluid">
<div class="layui-row layui-col-space15">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">修改密码</div>
<div class="layui-card-body" pad15>
<div class="layui-form" lay-filter="changePassword">
<div class="layui-form-item">
<label class="layui-form-label">当前密码</label>
<div class="layui-input-inline">
<input type="password" name="oldPassword" lay-verify="required" lay-verType="tips" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">新密码</label>
<div class="layui-input-inline">
<input type="password" name="password" lay-verify="pass" lay-verType="tips" autocomplete="off" id="LAY_password" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">6到16个字符</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">确认新密码</label>
<div class="layui-input-inline">
<input type="password" name="repassword" lay-verify="repass" lay-verType="tips" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="setmypass">确认修改</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
layui.use('set', layui.factory('set'));
</script>
2.修改html页面使用到的js模块“set”的代码
路径：src\controller\set.js
layui.define(['form', 'upload'], function (exports) {
var $ = layui.$
, layer = layui.layer
, laytpl = layui.laytpl
, setter = layui.setter
, view = layui.view
, admin = layui.admin
, form = layui.form
, upload = layui.upload;
var $body = $('body');
form.render();
//自定义验证
form.verify({
nickname: function (value, item) { //value：表单的值、item：表单的DOM对象
if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
return '用户名不能有特殊字符';
}
if (/(^\_)|(\__)|(\_+$)/.test(value)) {
return '用户名首尾不能出现下划线\'_\'';
}
if (/^\d+\d+\d$/.test(value)) {
return '用户名不能全为数字';
}
}
//我们既支持上述函数式的方式，也支持下述数组的形式
//数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
, pass: [
/^[\S]{6,12}$/
, '密码必须6到12位，且不能出现空格'
]
//确认密码
, repass: function (value) {
if (value !== $('#LAY_password').val()) {
return '两次密码输入不一致';
}
}
});
//设置密码
form.on('submit(setmypass)', function (obj) {
layer.msg(JSON.stringify(obj.field));
//提交修改
admin.req({
url: '/admin/changePwd'
, data: {
"oldPassword": obj.field.oldPassword
,"password": obj.field.repassword
,"name":layui.data('layuiAdmin').name
}
, type: 'post'
, success: function (res) {
if (res.code == 0) {
console.log(res);
layer.msg(res.msg, {
time: 2000 //2秒关闭（如果不配置，默认是3秒）
}
, function () {
});
} else {
layer.msg(res.msg);
$("input[name='oldPassword']").val("");
$("input[name='password']").val("");
$("input[name='repassword']").val("");
}
}
});
return false;
});
//对外暴露的接口
exports('set', {});
});
3.后台java代码
/**
* 修改个人信息-密码
* @param oldPassword
* @param password
* @param name
* @param session
* @return
*/
@RequestMapping(value = "/changePwd", method = RequestMethod.POST)
public Map<String, String> changePwd(String oldPassword, String password, String name,HttpSession session) {
Map<String, String> result = new HashMap<>();//返回结果
String pwd = sysUserService.selectPwdByName(name);
if (oldPassword.equals(pwd)) {
int res = sysUserService.updatePwdByName(name, password);
if (res == 1) {
result.put("code", "0");
result.put("msg", "密码修改成功");
result.put("data", null);
} else {
result.put("code", "1");
result.put("msg", "密码修改失败，请重新修改");
result.put("data", null);
}
} else {
result.put("code", "2");
result.put("msg", "请输入您正确的登录密码");
result.put("data", null);
}
return result;
}
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>跳转至顶部
退出模块
点击退出按钮，直接退出登录并跳转至登录页面。
1.前端代码
路径：src\views\layout.html
2.修改html页面使用到的js模块“common”的代码
路径：src\controller\common.js
layui.define(function(exports){
var $ = layui.$
,layer = layui.layer
,laytpl = layui.laytpl
,setter = layui.setter
,view = layui.view
,admin = layui.admin
//公共业务的逻辑处理可以写在此处，切换任何页面都会执行
//……
//退出
admin.events.logout = function(){
//执行退出接口
admin.req({
url: '/logout'
,type: 'get'
,data: {}
,done: function(res){ //这里要说明一下：done 是只有 response 的 code 正常才会执行。而 succese 则是只要 http 为 200 就会执行
//清空本地记录的 token，并跳转到登入页
admin.exit();
}
});
};
//对外暴露的接口
exports('common', {});
});
3.后台java代码
/**
* 退出账户
* @return
*/
@RequestMapping(value = "/logout",method =RequestMethod.GET)
public Map<String,String> logout(){
Map<String,String> result=new HashMap<>();
result.put("code","0");
result.put("msg","退出成功");
result.put("data",null);
return result;
}
827
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
