vue中实现登录与注册功能实现

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 目录

  一、登录功能

  二、注册功能

  三、引入接口数据

  ---

一、登录功能

首先，创建一个 Vue 组件 `Login.vue`，用于处理登录表单的提交：

<template>
  <div>
    <form @submit.prevent="handleSubmit">
      <label for="username">用户名:</label>
      <input type="text" id="username" v-model="username" required>

      <label for="password">密码:</label>
      <input type="password" id="password" v-model="password" required>

      <button type="submit">登录</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    handleSubmit() {
      // 提交表单数据到服务器进行验证
      // 这里只是一个示例，实际应用中需要将数据发送到后端服务器进行验证
      console.log('提交表单数据：', { username: this.username, password: this.password });
    },
  },
};
</script>

二、注册功能

<template>
  <div>
    <form @submit.prevent="handleSubmit">
      <label for="register-username">用户名:</label>
      <input type="text" id="register-username" v-model="registerUsername" required>

      <label for="register-password">密码:</label>
      <input type="password" id="register-password" v-model="registerPassword" required>

      <button type="submit">注册</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      registerUsername: '',
      registerPassword: '',
    };
  },
  methods: {
    handleSubmit() {
      // 提交表单数据到服务器进行注册操作，这里只是一个示例，实际应用中需要将数据发送到后端服务器进行注册操作并验证用户名和密码是否可用等逻辑处理。
      console.log('提交注册表单数据：', { registerUsername: this.registerUsername, registerPassword: this.registerPassword });
    },
  },
};
</script>

在上述代码中，我们创建了两个 Vue 组件 `Login.vue` 和 `Register.vue`，分别用于处理登录和注册表单的提交。在 `handleSubmit` 方法中，我们使用 `console.log` 将表单数据打印到控制台，以便于调试和查看。在实际应用中，您需要将表单数据发送到后端服务器进行验证或注册操作。这通常涉及到与后端 API 的交互，具体实现方式取决于您的后端架构和使用的技术栈。请确保您已经正确设置好后端接口，并配置好前端与后端的通信。

三、引入接口数据

首先先去配置引入import axios from 'axios'

随后去在data添加一个数组保存

 rules: {

        name: [{ required: true, message: "请输入用户名", trigger: "blur" }],

        password: [{ required: true, message: "请输密码", trigger: "blur" }],

      },

接着去判断登录功能

methods: {

    submitForm(formName) {

      this.$refs[formName].validate((valid) => {

        if (valid) {

          axios.post("http://106.52.94.26:3001/user/login", {

            username: this.ruleForm.name, //用户名

            password: this.ruleForm.password //密码

          })

            .then(res => {

              console.log(res)

              if (res.data.msg == "登录成功") {

                this.$router.push("/");

                this.$message({

                  message: '登录成功',

                  type: 'success'

                });

              }

            })

            .catch(err => {

              console.error('catch error', err);

              if (err.response.data.msg == "用户不存在") {

                this.$message.error('用户名错误')

              } else if (err.response.data.msg == "密码错误") {

                this.$message.error('密码错误')

              }

            })

        }

        else {

          console.log('error submit!!');

          return false;

        }

      })

    },

  }