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方法登录
        -->
        <input
          	id="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加密，然后去数据库中查找这个用户名：

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