注册页面搞定之后就是登录了,登录要实现验证,验证成功之后要跳转主页。
前端代码:
<template>
<div class="body">
<div class="background">
<div id="contain">
<table></table>
<div class="title">温室种植管理与决策系统</div>
<div id="login_box">
<h2>登 录</h2>
<div class="input_box">
<input @blur="unameCheck" type="text" placeholder="请输入用户名" v-model="uname">
<div class="notice" v-if="isCUname">*用户名应该由4到16位的字母,数字,下划线,减号组成</div>
</div>
<div class="input_box">
<input @blur="upwdCheck" type="password" placeholder="请输入密码" v-model="upwd">
<div class="notice" v-if="isCUpwd">*密码最少6位,包括至少1个大写字母,1个小写字母,1个数字,1个特殊字符</div>
</div>
<button class="log" @click="log()">登录</button><br>
<button class="reg" @click="reg()">注册</button><br>
</div>
</div>
<!-- <div>foot</div> -->
</div>
</div>
</template>
<script>
export default {
name: 'LoginView',
data() {
return {
uname: '',
upwd:'',
isCUname: false,
isCUpwd:false
};
},
methods: {
reg(){
this.$router.push("/regist")
},
log(){
// console.log(url);
if(this.isCUname==false&& this.isCUpwd == false&&this.uname!=''&&this.upwd!=''){
var url = this.$store.state.url+"/login";
var params = {
uname: this.uname,
upwd: this.upwd
};
// console.log(params)
this.$axios.post(url,params)
.then(res => {
let data = res.data;
// console.log(data)
if(data.code == 200){
let userInfo = data.data[0];
this.$store.state.userInfo = userInfo;
localStorage.setItem("userInfo", JSON.stringify(userInfo));
// console.log(this.$store.state.userInfo[0])
this.$store.state.islogin = true;
localStorage.setItem("isLogin", true);
this.$message({
message: data.msg,
type: 'success'
});
setTimeout(()=>{
this.$router.push("/home")
}, 500)
}else if(data.code == 300){
this.$message({
message: data.msg,
type: 'warning'
});
}else if(data.code == 500){
this.$message.err(data.msg);
}else{
this.$message.err("对不起,服务器开小差了!");
}
})
.catch(err => {
console.error(err);
this.$message.err("对不起,服务器开小差了!");
})
}else{
this.$message.error('错误,请核对登录信息!');
}
// this.$router.push("/home")
},
unameCheck(){
var un = this.uname;
// console.log(un);
var uPattern = /^[a-zA-Z0-9_-]{4,16}$/;
let isCUname = uPattern.test(un);
if(!isCUname){this.isCUname = true;}
else this.isCUname = false;
// console.log(isCUname)
},
upwdCheck(){
var up = this.upwd;
var pPattern =
/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,}/;
let isCUpwd = pPattern.test(up);
if(!isCUpwd)this.isCUpwd = true;
else this.isCUpwd = false;
},
test(){
// console.log(this.uname);
}
},
mounted() {
this.test();
},
created() {
this.test();
},
}
</script>
<style scoped>
.notice{
color: red;
font-size: 12px;
width: 66%;
text-align: left;
margin-left: 17%;
height: 32px;
overflow: hidden;
/* position: absolute; */
}
.input_box {
margin-top: 0;
height: 65px;
/* margin-bottom: 200px; */
/* position: relative; */
}
.title{
color: #cc9;
font-family: KaiTi, 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
margin-top: 5%;
/* margin: 0 ;
*/
text-align: center;
font-size: 380%;
}
.background{
width: 100vw;
height: 100vh;
background-image: url("../assets/background.jpeg");
background-position: 50% 30%;
background-repeat: no-repeat;
min-height: 300px;
}
#contain{
background-color: rgba(0, 0, 0, 0.35);
height: 100%;
}
#login_box {
width: 30%;
height: 360px;
background-color: #00000060;
margin: auto;
margin-top: 8%;
text-align: center;
border-radius: 10px;
padding: 50px 50px;
}
h2 {
color: #ffffff90;
margin-top: 5%;
margin-bottom: 10%;
}
span {
color: #fff;
}
input {
border: 0;
width: 60%;
font-size: 15px;
color: #fff;
background: transparent;
border-bottom: 2px solid #fff;
padding: 5px 10px;
outline: none;
margin-top: 10px;
}
.log {
margin-top: 50px;
width: 60%;
height: 30px;
border-radius: 10px;
border: 0;
color: #fff;
text-align: center;
line-height: 30px;
font-size: 15px;
background-image: linear-gradient(to right, #30cfd0, #330867);
}
.reg{
margin-top: 20px;
width: 60%;
height: 30px;
border-radius: 10px;
border: 0;
color: #fff;
text-align: center;
line-height: 30px;
font-size: 15px;
background-image: linear-gradient(to right, #30cfd0, #330867);
transition-property: background-image font-size;
transition-duration: 500ms 1000ms;
}
.reg:hover{
cursor: pointer;
font-size: 18px;
background-image: linear-gradient(to right, #330867, #30cfd0);
background-color: #330867;
}
.log:hover{
font-size: 18px;
cursor: pointer;
background-image: linear-gradient(to right, #330867, #30cfd0);
}
.log:active{
width:50%;
}
.reg:active{
width:50%;
}
#sign_up {
margin-top: 45%;
margin-left: 60%;
}
a {
color: #b94648;
}
</style>
让我们看看效果如何:
![](https://i-blog.csdnimg.cn/blog_migrate/c5b3326146c0356d9907dea2a3cd19ed.png)
哎哟,不错哦~~~
后端代码:
@app.route('/login', methods=['GET', 'POST'])
def login():
if request.method == 'POST':
res = {}
r = request.json
u = User.query.filter(
and_(User.uname == r.get("uname"), User.upwd == r.get("upwd"))).all()
data = []
for row in u:
data.append(row.jsonformat())
# sql1 = "select * from users where uname = '" + r.get("uname") + "' and upwd = '" + r.get("upwd") + "';"
# data = sqlutl.sqlGet(db, sql1)
if (data != []):
res = {
'code': 200,
'data': data,
'msg': "恭喜你,登录成功!"
}
elif (data == []):
res = {
'code': 300,
'msg': "对不起,未查询到您的信息,请先注册!"
}
else:
res = {
'code': 500,
'msg': "对不起,服务器错误。"
}
else:
res = "get/login"
return make_response(res)
发送一个post请求,这样不容易暴露隐私信息,上一p也是忘记说了~