温室种植管理与决策系统开发与设计（七）——Login

注册页面搞定之后就是登录了，登录要实现验证，验证成功之后要跳转主页。

前端代码：

<template>
<div class="body">
  <div class="background">
    <div id="contain">
      <table></table>
        <div class="title">温室种植管理与决策系统</div>
        <div id="login_box">
            <h2>登&nbsp;&nbsp;录</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>

让我们看看效果如何：

哎哟，不错哦~~~

后端代码：

@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也是忘记说了~