在本章中将讲解如何构建登录页面及验证码相关问题
登录页面实现代码：
<form class="layui-form">
<div class="layui-form-item logo-title">
<h1>未来商城系统</h1><h1>后台登录</h1>
</div>
<div class="layui-form-item">
<label class="layui-icon layui-icon-username"></label>
<input type="text" name="username" v-model="username" lay-verify="required" placeholder="工号" autocomplete="off" class="layui-input" value="">
</div>
<div class="layui-form-item">
<label class="layui-icon layui-icon-password"></label>
<input type="password" name="password" v-model="password" lay-verify="required" placeholder="密码" autocomplete="off" class="layui-input" value="">
</div>
<div class="layui-form-item">
<label class="layui-icon layui-icon-vercode"></label>
<input type="text" name="captcha" v-model="captcha" lay-verify="required" placeholder="图形验证码" autocomplete="off" class="layui-input captcha" value="">
<div class="captcha-img" @click="createCaptcha()">
<canvas id="captcha1" style="width: 100%;height: 36px;"></canvas>
</div>
</div>
<div class="layui-form-item">
<input type="checkbox" name="rememberMe" value="true" lay-skin="primary" title="记住密码">
</div>
<div class="layui-form-item">
<input class="layui-btn layui-btn-normal layui-btn-fluid" @click="login()" type="button" value="登录" />
</div>
</form>
需要用到下面的资源：
<script src="/future/util/layui/layui.js" charset="utf-8"></script>
<script src="/future/vue/vue.min.js"></script>
<script src="/future/vue/vue.resource.js"></script>
<script src="/future/captcha/captcha.min.js"></script>
<script src="/future/js/manager/login.js"></script>
captcha.js是一个生成验证码的工具
在html中想要生成验证码的位置：
<div class=“captcha-img” @click=“createCaptcha()”>
当第一次加载或点击验证码时会自动生成随机的验证码：
let vm = new Vue({
el: "#page",
data: {
yzm: '',//验证码：js生成
username:'',//用户名
password:'',//密码
captcha:'',//验证码：用户输入
NewPwd:'',
ConfirmPwd:'',
},
created(){
},
mounted() {
this.createCaptcha();
},
methods: {
//生成验证码
createCaptcha() {
let that = this;
let captcha = new Captcha({
lineWidth: 1, //线条宽度
lineNum: 3, //线条数量
dotR: 1, //点的半径
dotNum: 10, //点的数量
preGroundColor: [0,1], //前景色区间
backGroundColor: [200,255], //背景色区间
fontSize: 60, //字体大小
fontFamily: ['微软雅黑'], //字体类型
fontStyle: 'fill', //字体绘制方法，有fill和stroke
content: 'abcdefghigklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890', //验证码内容
length: 5 //验证码长度
});
captcha.draw(document.querySelector("#captcha1"), code => {
console.log(code, "验证码输出");
that.yzm = code;
})
}
});
上面这段代码可以写在new Vue({}) 的methods中供调用
需要注意的是：captcha.draw(这里面最好使用document.querySelector("#")，因为使用document.getElementById("#*")会出现问题)
通过打印输出获取到的验证码节点对象的值可以知道在mounted这个周期中下使用document.getElementById()无法获取到有效的值
需要注意的是：要确保dom加载完毕之后，再去调用captcha的draw方法（手动加载）
登录方法：采用正则验证，初次登陆需要修改密码（这是之前写的，以后可能要改动）
login(){
let that = this;
let pwdReg = new RegExp("^(?![a-zA-z]+$)(?!\\d+$)(?![!@#$%^&*]+$)[a-zA-Z\\d!@#$%^&*]+$");
let reg = /[\`~!@#$%^&*()_+-=<>?:"{},.\\\\/;'[\\]]/im;
if (this.username == '') {
layer.msg('用户名不能为空');
return false;
}else if(reg.test(this.username)){
layer.msg('不能包含非法字符');
return false;
}
if (this.password == '') {
layer.msg('密码不能为空');
return false;
}else if(reg.test(this.password)){
layer.msg('不能包含非法字符');
return false;
}
if (this.captcha == '') {
layer.msg('验证码不能为空');
return false;
} else if (this.captcha.toLowerCase() != this.yzm.toLowerCase()) {
layer.msg('验证码不正确');
return false;
}
let data = new FormData();
data.append("mno",that.username);
data.append("mpwd",that.password);
data.append("loginip",returnCitySN['cip']);
data.append("loginarea",returnCitySN['cname']);
this.$http.post('/future/manager/login',data).then(res=>{
let data = res.data.pojo;
if("000000"==res.data.code){
layer.msg("用户名或密码错误",{icon:2,time:3000});
}else if("000001"==res.data.code){
layer.alert(res.data.message);
}else if("111110"==res.data.code){
//初次登录
layer.open({
type: 1
,title: "修改密码" //不显示标题栏
,closeBtn: false
,area: ['40%','40%']
,shade: 0.8
,btn: ['确认','取消']
,moveType: 1 //拖拽模式，0或者1
,content: $('#openPage')
,success: function(layero){
$("#openPage").removeClass("layui-hide");
},
yes: function(index, layero){
console.log(vm.$data.NewPwd);
if(!pwdReg.test(vm.NewPwd)){
layer.alert("密码须为 字母+数字 / 字母+特殊字符 / 数字+特殊字符 组合");
return false;
}
if(that.ConfirmPwd!==that.NewPwd){
layer.alert("两次密码输入不一致");
return false;
}
$.ajax({
url: "/future/manager/setPwd",
type: "POST",
data:JSON.stringify({mid:res.data.pojo.mid,mpwd:that.NewPwd}),
contentType:"application/json;charset=utf-8",
dataType:"json",
async:false,
success(res){
console.log("返回码---",res.code);
if("200"!=res.code){
layer.alert(res.message);
return false;
}else{
layer.msg("登录成功",{icon:1,time:3000},()=>{
sessionStorage.setItem("manageInfo",JSON.stringify(data));
window.location.href="index.html";
});
}
},error(err){
layer.alert(err);
}
})
},
cancel: function(index) {
return true;
}
});
}else{
//登陆成功会将用户数据进行缓存
layer.msg("登录成功",{icon:1,time:3000},()=>{
sessionStorage.setItem("manageInfo",JSON.stringify(res.data.pojo));
window.location.href="index.html";
});
}
}).catch(e=>{
console.log(e);
})
}
后端代码很少：
登录之后对登陆状态进行修改： Integer row = managerService.saveLoginStatus(manager1);
@PostMapping("/login")
@ResponseBody
public Result login(@Validated Manager manager, HttpServletRequest request) throws Exception {
try {
Manager manager1 = managerService.login(manager);
if (null != manager1) {
manager1.setLogin_success(1);
Timestamp createTime = new Timestamp(new Date().getTime());
manager1.setLastlogintime(createTime);
manager1.setLoginarea(manager.getLoginarea());
manager1.setLoginip(manager.getLoginip());
Integer row = managerService.saveLoginStatus(manager1);
if (row > 0) {
if ("000000".equals(manager1.getMpwd())) {
manager1.setMpwd("");
return new RespUtil().JOK("111110", "管理员您好，您的密码仍为初始密码，请立即修改密码！", true, manager1);
} else {
manager1.setMpwd("");
return new RespUtil().JOK("111111", "查询成功，系统中存在该用户", true, manager1);
}
} else {
return new RespUtil().MOK("000000", "更新登陆状态失败", false);
}
} else {
return new RespUtil().JOK("000000", "查询成功，系统中不存在该用户", true, new Manager());
}
} catch (Exception e) {
e.printStackTrace();
return new RespUtil().MOK("000001", e.getStackTrace().toString(), false);
}
}
5328
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
