LayuiAdmin的登录、注册、忘记密码、退出模块（源码实例）LayuiAdmin基本模块
关于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" >
<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>
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 >
<img src="www.oschina/action/user/captcha"
class="layadmin-user-login-codeimg"
id="LAY-user-get-vercode">
</div>
</div>
</div>
</div>
<div class="layui-form-item" >
<a lay-href="/user/reg"class="layadmin-user-jump-change layadmin-link"
>注册帐号 </a>
<a lay-href="/user/forget"class="layadmin-user-jump-change layadmin-link"
> ；忘记密码？</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 = uter()
, search = router.search;
//提交
<('submit(LAY-user-login-submit)',function(obj){
console.log("123");
//请求登⼊接⼝
url:'/login'//实际使⽤请改成服务端真实接⼝
, data: obj.field//这⾥把数据封装成json的了，在springmvc⾥⾯会⾃⼰解析
, method:"post"
, success:function(res){
de==0){
console.log(res);
//请求成功后，写⼊ access_token
layui.data(setter.tableName,{
key: kenName
, value: res.data.access_token
});
//写⼊⽤户名
layui.data(setter.tableName,{
key:'name'
, value: res.data.name
});
//登⼊成功的提⽰与跳转
layer.msg('登录成功',{
offset:'15px'
, icon:1
, time:1000
},function(){
},function(){
location.hash = direct ?direct):'/';//解码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;
asp查看源码配置ui/**
* 登录页⾯判断是否存在当前⽤户
* @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: "+("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 = Instance("MD5");
BASE64Encoder base64en =new BASE64Encoder();
//加密后的字符串
String de(md5.Bytes("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" >
<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>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论