在views文件下新建login.vue 使用v-model绑定数据,点击登录会把用户名和密码发送至服务器验证,如果验证成功会返回一个token,保存在sessionStorage. 退出登录就是把本地存储的token删除,会自动退出,因为有一个计时器,每1s都会检查token是否存在,如果没有就会退出账号,导航栏的已经登录会换成登录按钮 Login.vue如下

<template>
  <div class="plane">
    <h2>登录</h2>
    <br>
    <row>
        <input v-model.trim="username" prefix="ios-contack" placeholder="请输入用户名" style="width:auto">
    </row>
    <br>
    <row>
        <input type="password" v-model="password" icon="ios-clock-outline" placeholder="输入密码" style="width:auto">
    </row>
    <br>
    <Button @click="login" type="primary">登录</Button>
    <Button @click="register">注册</Button>

  </div>
</template>

<script>
export default {
    name:'login',
    data(){
      return{
        username:'',
        password:''
      }
    },
    methods:{
      login(){
        let data={"username":this.username,"password":this.password}
        this.$api.post('users/login',data).then(res=>{
          this.$Notice.info({
            title:'提示',
            desc:res.message
          });
          if(res.code===0){
              sessionStorage.setItem('token',res.data.token)
              sessionStorage.setItem('username',this.username)
              this.$router.push({path:'/'})
          }else{
            sessionStorage.removeItem('token')
          }
        })
      },
      register(){
        this.$router.push({path:'register'})
      }
    }
}
</script>

<style scoped>
  .plane{
   
    padding:10vw 20vw;
    
  }
  
  .ivu-row{
      justify-content: center;
  }
</style>

注册

用户注册的时候需要填信息,比如用户名,密码等等.在前端会对这些进行校验,必填项和密码和重复密码 Register.vue

<template>
  
    <div class="plane">
    <h2>注册</h2>
    <br>
    <Row class="text-item">
        <i-col span="12">
            输入用户名:
        </i-col>
        <i-col span="12">
            <input v-model="username"  style="width:auto">
        </i-col>
        
        
    </Row>
    <br>
    <Row class="text-item">

         <i-col span="12">
            输入密码:
        </i-col>
         <i-col span="12">
            <input type="password" v-model="password"  style="width:auto">
        </i-col>
        
    </Row>
    <br>
     <Row class="text-item">
         <i-col span="12">
            重新输入密码:
        </i-col>
         <i-col span="12">
            <input type="password" v-model="repassword" style="width:auto">
        </i-col>
        
    </Row>
    <br>
    <Row class="text-item">
         <i-col span="12">
            输入用户昵称:
        </i-col>
         <i-col span="12">
            
             <input type="text" v-model="nickname"  style="width:auto">
        </i-col>
    </Row>
    <br>
    <Row class="text-item">
         <i-col span="12">
            
             输入电话:
        </i-col>
         <i-col span="12">
            <input type="text" v-model="phone" style="width:auto">
        </i-col>
    </Row>
    <br>
    <Row class="text-item">
         <i-col span="12">
            输入年龄:
        </i-col>
         <i-col span="12">
            
             <input type="number" v-model.number="age" icon="ios-clock-outline" style="width:auto">
        </i-col>
    </Row>
    <br>
     <Row class="text-item">
         <i-col span="12">
             选择性别:
        </i-col>
         <i-col span="12">
            <input name="sex" value="male" v-model="sex" type="radio">男
            <input name="sex" value="female" v-model="sex" type="radio">女
        </i-col>
       
    </Row>
    <Button @click="register" type="primary">注册</Button>

  </div>
  
</template>

<script>
export default {
  name: "Register",
  data() {
    return {
      sex: "",
      username: "",
      password: "",
      repassword: "",
      age: 0,
      nickname: "",
      phone: "",
    };
  },
  methods: {
    register() {
      if (this.username && this.password && this.repassword) {
        if (this.password === this.repassword) {
          let data = {
            phone: this.phone ? this.phone : "未知",
            sex: this.sex ? this.sex : "未知",
            age: this.age ? this.age : "未知",
            nickname: this.nickname ? this.nickname : "未知",
            username: this.username,
            password: this.password,
          };
          this.$api.post("users/register", data).then((res) => {
            this.$Notice.info({
              title: "提示",
              desc: res.message,
            });
            if (res.code === 0) {
              sessionStorage.setItem("token", res.data.token);
              this.$router.push({ path: "/login" });
            }
          });
        } else {
          this.$Notice.info({
            title: "错误",
            desc: "内容输入错误,密码输入错误",
            deration: 5,
          });
        }
      } else {
        this.$Notice.info({
          title: "错误",
          desc: "内容输入错误,请输入必要性信息",
          duration: 5,
        });
      }
    },
  },
};
</script>

<style scoped>
.plane {
  padding: 5vw 20vw;
  margin-bottom: -5vw;
}
.text-item {
  padding-top: 10px;
}
Button {
  margin-top: 10px;
}
</style>

4.登陆注册

登录

注册