VUE实现注册与登录效果

下面是关于“VUE实现注册与登录效果”的完整攻略。

一、注册功能

1. 在HTML中设计注册表单

首先，在HTML页面中设计一个注册表单。可以使用v-model指令实现输入框的数据绑定：

<template>
  <div>
    <h2>注册</h2>
    <form>
      <label>用户名：</label>
      <input type="text" v-model="username">
      <br><br>
      <label>密码：</label>
      <input type="password" v-model="password">
      <br><br>
      <label>确认密码：</label>
      <input type="password" v-model="confirmPassword">
      <br><br>
      <button type="button" @click="register">注册</button>
    </form>
  </div>
</template>

2. 在Vue组件中添加注册方法

接下来，在Vue组件中添加一个register方法实现注册功能。在这个方法中，我们需要首先验证用户名和密码是否符合要求，例如密码长度应不少于6位等等。如果符合要求，就可以将用户信息发送到后台进行注册。这里，我们可以使用axios发送POST请求。如果注册成功，就可以提示用户注册成功并跳转到登录页面。

<script>
  import axios from 'axios';
  export default {
    data() {
      return {
        username: '',
        password: '',
        confirmPassword: ''
      };
    },
    methods: {
      register() {
        if (this.username === '' || this.password === '' || this.confirmPassword === '') {
          alert('请输入用户名和密码');
          return;
        }
        if (this.password.length < 6) {
          alert('密码长度不能少于6位');
          return;
        }
        if (this.password !== this.confirmPassword) {
          alert('两次密码输入不一致');
          return;
        }
        axios.post('/api/register', {
          username: this.username,
          password: this.password
        }).then(response => {
          if (response.data.code === 0) {
            alert('注册成功，请登录');
            this.$router.push('/login');
          } else {
            alert(response.data.msg);
          }
        }).catch(error => {
          console.log(error);
        });
      }
    }
  };
</script>

这里使用了axios发送POST请求，将注册信息发送到后台。如果返回的code为0，说明注册成功，就可以提示用户注册成功并跳转到登录页面。否则，就提示注册失败。

二、登录功能

1. 在HTML中设计登录表单

在HTML页面中设计一个登录表单，可以使用v-model指令实现输入框数据的绑定，并且添加一个按钮来触发登录操作。

<template>
  <div>
    <h2>登录</h2>
    <form>
      <label>用户名：</label>
      <input type="text" v-model="username">
      <br><br>
      <label>密码：</label>
      <input type="password" v-model="password">
      <br><br>
      <button type="button" @click="login">登录</button>
    </form>
  </div>
</template>

2. 在Vue组件中添加登录方法

在Vue组件中添加login方法实现登录功能。在这个方法中，我们需要首先验证用户名和密码是否符合要求。如果符合要求，就可以将用户信息发送到后台进行登录验证。同样，这里我们也可以使用axios发送POST请求。

如果登录成功，就可以将返回的token保存到本地，并提示用户登录成功。如果登录失败，就提示用户登录失败。

<script>
  import axios from 'axios';
  export default {
    data() {
      return {
        username: '',
        password: ''
      };
    },
    methods: {
      login() {
        if (this.username === '' || this.password === '') {
          alert('请输入用户名和密码');
          return;
        }
        axios.post('/api/login', {
          username: this.username,
          password: this.password
        }).then(response => {
          if (response.data.code === 0) {
            localStorage.setItem('token', response.data.token);
            alert('登录成功');
            this.$router.push('/');
          } else {
            alert(response.data.msg);
          }
        }).catch(error => {
          console.log(error);
        });
      }
    }
  };
</script>

这里使用了axios发送POST请求，将登录信息发送到后台。如果返回的code为0，说明登录成功，就可以将返回的token保存到本地，并提示用户登录成功。否则，就提示登录失败。

以上就是VUE实现注册与登录功能的完整攻略，示例代码仅供参考，开发者需要根据实际情况进行修改。