mpvue自定义小程序登录的后台验证

<template>
    <div class="container">

        <div class="login-icon">
            <img class="login-img" src="/static/images/login.jpg">
        </div>
        <div class="login-from">

            <!--账号-->
            <div class="inputdiv">
                <img class="nameImage" src="/static/images/username.png">
                <label class="loginLab">职工姓名：</label>
                <input class="inputText"  autofocus="true" placeholder="请输入职工姓名" v-model="username"  />
            </div>
            <div class="line"></div>

            <!--工号-->
            <div class="inputdiv">
                <img class="keyImage" src="/static/images/userId.png">
                <label class="loginLab">职工工号：</label>
                <input class="inputText" autofocus="true" password="true" placeholder="请输入职工工号" v-model="userid" />
            </div>

            <!--按钮-->
            <div class="loginBtndiv">
                <button class="loginBtn"  v-on:click="toLogin">登录</button>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "login",
        data(){
            return{
                username:'',
                userid:''
            }
        },
        methods:{
            toLogin(){
                let validUserName=''
                if(!this.username){
                    wx.showToast({
                        title:"请输入用户名！",
                        icon:"none",
                        mask:true
                    });
                    return;
                }
                if(!this.userid){
                    wx.showToast({
                        title:"请输入职工号！",
                        icon:"none",
                        mask:true
                    });
                    return;
                }
                //验证姓名和卡号
                wx.request({
                    url: 'http://localhost:3030/user/login',
                    method: 'POST',
                    data: {
                        userid: this.userid //通过id去查找name，防止重名
                    },
                    //判断逻辑必须放在这里面
                    success: res =>{
                        const dataInfo = res.data.data;//根据用户id获取到的信息
                        if (dataInfo===null){
                            this.username='';
                            this.userid='';
                            wx.showToast({
                                title:"用户名或工号不正确·！",
                                icon:"none",
                                mask:true
                            });
                            return;
                        }

                        this.validUserName=dataInfo.username;

                        if(this.validUserName==this.username){
                            wx.setStorageSync("username",this.username);
                            wx.setStorageSync("userid",this.userid);
                            wx.showToast({
                                title:"登录成功！",
                                icon:"none",
                                mask:true
                            });
                            wx.reLaunch({
                                url:'/pages/mine/main'  //不用参数传值，用户名是常用属性，直接设置缓存
                            })
                        }else{
                            this.username='';
                            this.userid='';
                            wx.showToast({
                                title:"用户名或工号不正确·！",
                                icon:"none",
                                mask:true
                            });
                        }
                    }
                })
            }
        }
    }
</script>

<style scoped>
    page{
        height: 100%;
    }

    .container {
        height: 100%;
        display: flex;
        flex-direction: column;
        padding: 0;
        box-sizing: border-box;
        /* background-color: rgb(156, 23, 78) */
    }

    /*登录图片*/
    .login-icon{
        flex: none;
    }

    .login-img{
        width: 750rpx;
    }

    /*表单内容*/
    .login-from {
        margin-top: 20px;
        flex: auto;
        height:100%;
    }

    .inputdiv {
        /* background-color: #fff;  */
        line-height: 45px;
        border-radius:20px;
        border:1px solid #999999;
    }

    /*输入框*/
    .nameImage, .keyImage {
        margin-left: 22px;
        width: 18px;
        height: 16px
    }

    .loginLab {
        margin: 15px 15px 15px 10px;
        color: #545454;
        font-size: 14px
    }

    .inputText {
        flex: block;
        float: right;
        text-align: right;
        margin-right: 22px;
        margin-top: 11px;
        color: #cccccc;
        font-size: 14px
    }
    .line {
        margin-top: 8px;
    }

    /* .line {
     width: 100%;
     height: 1px;
     background-color: #cccccc;
     margin-top: 1px;
    }  */

    /*按钮*/
    .loginBtndiv {
        width: 100%;
        height: auto;
        /* background-color:#DCDCDC;  */
        margin-top: 0px;
        margin-bottom: 0px;
        padding-bottom: 0px;
    }

    .loginBtn {
        width: 90%;
        margin-top: 40px;
        border-radius:10px;
    }
</style>