vue+vant制作登录登出个人页面

本文讲解，如何结合vue和vant制作登录，注册，还有个人页面功能。

首先是如何创建vant项目：vue创建vant项目

登录页面编写

编写登录注册页面

在router中配置路由

LoginView.vue

这里重点是看，这个用户的信息是如何存储到localStorage里面的

<template>
    <div>
        <van-nav-bar title="登录" />
        <van-form @submit="onSubmit">
  <van-cell-group inset>
    <van-field
      v-model="user.username"
      name="用户名"
      label="用户名"
      placeholder="用户名"
      :rules="[{ required: true, message: '请填写用户名' }]"
    />
    <van-field
      v-model="user.password"
      type="password"
      name="密码"
      label="密码"
      placeholder="密码"
      :rules="[{ required: true, message: '请填写密码' }]"
    />
  </van-cell-group>
  <div style="margin: 16px;">
    <van-button round block type="primary" @click="Login">
      提交
    </van-button>
    <van-button round block type="danger" @click="toRegister">注册</van-button>
  </div>
  
</van-form>

    </div>
</template>

<script>
import axios from 'axios'
export default {
  computed:{
   
  },
  data () {
    return {
      user: {
        username: 'zhangsan',
        password: '123456'
      }
    }
  },
  mounted () {
    
  },
  methods: {
    Login(){
        // 创建一个 axios 实例
     const instance = axios.create({
        baseURL: 'http://localhost:8083',
        withCredentials: true // 这个参数表示在跨域请求时是否需要使用凭证，默认是 false。
      });
      const params = {
        username: this.user.username,
        password: this.user.password
      }

      instance.post('/user/login', params)
        .then(response => {          
          localStorage.setItem('login_user', JSON.stringify(response.data.data))
          this.$router.push('/index')
        })
        .catch(error => {
          console.log(error.response);
        });
    },
    toRegister () {
      this.$router.push('/register')
    }
  }
}
</script>

<style>

</style>

运行效果：

RegisterView.vue

这里主要看这个年级怎么选，怎么绑定这个属性。

```html
<template>
  <div>
    <van-nav-bar title="注册" />
    <van-form >
      <van-cell-group inset>
        <van-field
          v-model="user.username"
          name="用户名"
          label="用户名"
          placeholder="请输入用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="user.password"
          type="password"
          name="密码"
          label="密码"
          placeholder="请输入密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        
      </van-cell-group>

      <div class="container">
        <van-radio-group v-model="user.grade" @change="onChange" direction="horizontal">
        <van-radio name="7">七年级</van-radio>
        <van-radio name="8">八年级</van-radio>
        <van-radio name="9">九年级</van-radio>
      </van-radio-group>

    </div>


      <div style="margin: 16px;">
        <van-button round block type="primary" @click="onRegister">
          提交
        </van-button>
        <van-button round block type="danger" @click="toLogin">登录</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {

      user: {
        username: "",
        password: "",
        grade: ""
      },
    };
  },
  methods: {
    onChange(event){
      this.user.grade = event
    },
    onRegister(){
  // 发送post请求
  axios.post("http://localhost:8083/user/register", this.user)
          .then(response => {
            console.log(response);
            if (response.data.code === 1){
              alert("注册失败，用户名重复");
            } else{
              alert("注册成功，请登录");
              // 注册成功，跳转到登录页面
               this.$router.push('/');
            }
            
          })
          .catch(error => {
            console.log(error.response);
            alert("注册失败，请检查用户名和密码是否正确！");
          });
      },
    toLogin() {
      this.$router.push("/");
    }
  }
};
</script>
<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

运行结果：

MyView.vue

这里主要是看这个头像是怎么做的，还有就是这个登出功能是怎么做的。

<template>
  <div>
    
      <van-nav-bar title="我的" />      
    
      <div class="top">
          <van-image
          round
          width="10rem"
          height="10rem"
          fit="cover"
          position="center"
          :src="user.avatar"
        />
    </div>
    
    <van-contact-card type="edit" v-model:name="user.username" tel="13000000000" :editable="false" />
    
    <van-cell-group>
      <van-cell title="知识点" value=">" />
      <van-cell title="考试" value=">" />
      <van-cell title="错题本" value=">" />
      <van-cell title="历史分数" value=">" />
    </van-cell-group>
    <br />
    <van-text-ellipsis
      rows="3"
      :content="text"
      expand-text="展开"
      collapse-text="收起"
    />
    <div class="top">
      <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" style="width: 100%;" @click="LogOut">
  退出
</van-button>
    </div>
    
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Tabbar from '../../components/common/TabbarView.vue'

export default {
  data() {
    return {
      user: {},
      text:
        '那一天我二十一岁，在我一生的黄金时代。我有好多奢望。我想爱，想吃，还想在一瞬间变成天上半明半暗的云。后来我才知道，生活就是个缓慢受锤的过程，人一天天老下去，奢望也一天天消失，最后变得像挨了锤的牛一样。可是我过二十一岁生日时没有预见到这一点。我觉得自己会永远生猛下去，什么也锤不了我。',
    }
  },
  mounted() {
  const loginUserStr = localStorage.getItem("login_user");
  if (loginUserStr) {
    this.user = JSON.parse(loginUserStr);
    localStorage.setItem("login_user", JSON.stringify(this.user));
  } else {
    // 如果从 local storage 中获取不到用户信息，则使用默认值
    this.user = {
      id: 0,
      username: "default",
      password: "",
      avatar: "",
      grade: "",
      role: "",
    };
  }
  // 检查用户是否为 null。如果是 null，重定向到主页。
  if (!this.user) {
    this.$router.push("/");
  }
},

  methods: {
    LogOut(){
      this.$router.push('/')
      localStorage.removeItem('login_user')
    }
  },
  components: {
    Tabbar,
  },
}
</script>

<style>
.top {
  display: flex;
  justify-content: center;
}

</style>

运行结果：