login登录页

顶部导航条：复用head组件

在这里插入图片描述

<v-head goBack="true" title="登录"></v-head>

账号密码登录表单

在这里插入图片描述
label标签不会向用户呈现任何特殊效果。不过，如果你在label标签内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关（用for关联）的表单控件上。
密码显示与隐藏由passwordVisible控制。passwordVisible默认false，密码不可见（密码输入框的type为password），展示闭眼的图标。passwordVisible为true，密码可见（密码输入框的type为text），展示睁眼的图标。点击图标可改变passwordVisible的取值（passwordVisible=!passwordVisible）从而控制闭眼睁眼的图标。

<form action="" class="login-form"><label class="form-label" for="username"><span class="label">账号</span><input id="username" type="text" placeholder="请输入用户名" v-model="username"></label><label class="form-label" for="password"><span class="label">密码</span><!--passwordVisible默认false，密码不可见，文本框类型为password，反之文本框类型为text在password框中点击回车键，会调用login方法登录--><inputid="password":type="passwordVisible?'text':'password'"placeholder="请输入密码"v-model="password"@keyup.enter="login"><!--passwordVisible默认false，密码不可见，展示闭眼的图标，点击后改变passwordVisible的取值，从而控制闭眼睁眼的图标--><span @click="changeVisible"><!--闭眼的图标--><i class="iconfont icon" v-if="!passwordVisible">&#xe60a;</i><!--睁眼的图标--><i class="iconfont icon" v-else>&#xe6d0;</i></span></label><!--点击登录按钮后，使用.prevent组织表单原生的登录操作，而是调用login方法--><div class="button" @click.prevent="login();"><span>登录</span></div><span class="tip">未注册直接输入账号密码，自动注册！</span>
</form>
<script>changeVisible() {this.passwordVisible = !this.passwordVisible;}
</script>

在password框中点击回车键以及点击登录按钮，都会调用login()登录。login()先去判断用户名和密码是否为空，为空则弹出提示消息，不为空则调用异步login()登录，异步login()发送post请求调用后端的userLogin方法。userLogin先从请求体中获取username和password，对password进行md5加密，然后去数据库中查找这个用户名：

因为前端没有写注册功能，所以这里如果用户输入的账号名是不存在的，就创建一个新的账号：用户名、密码（MD5加密后的）、用户id（用户在数据库的id）、头像（默认）。将这个新账号保存在数据库中。然后给请求信息设置session（session为用户id）并返回给前端：{status: 200,success: '注册用户并登录成功'}。
如果数据库中用户的密码与现在用户输入的密码一致，注意这两个密码都是MD5加密后的，表示用户输入的账号存在并且密码正确，给请求信息设置session（session为用户id）并返回给前端：{status: 200,success: '登录成功',username: user.username,//用户名 avatar: user.avatar//用户头像}
否则的话返回给前端：{status: -1,message: '该用户已存在，密码输入错误'}

前端收到返回信息后，若返回信息的status为200，表示注册成功/登录成功，将用户名保存在cookie中并返回上一页。否则弹出错误消息：密码错误。

login() {if (!this.username) {this.alertText = '用户名输入不合法';this.showTip = true;return;} else if (!this.password) {this.alertText = '密码不能为空';this.showTip = true;return;}login({username: this.username, password: this.password}).then((response) => {if (response.data.status === 200) {// 注册成功/登录成功setInfo(this.username);// 将用户名保存在cookie中this.$router.go(-1);// 返回上一页} else {// 否则弹出错误消息：密码错误this.alertText = response.data.message;this.showTip = true;}});
}login = (data) => {let req = {data,url: 'admin/user_login'}return _post(req);
}
function setInfo(username) {return vue.$cookies.set(userInfo, username)
}