项目实训：登录注册——前端实现与交互（vue）

南曦xi

已于 2024-05-30 15:36:20 修改

阅读量1.4k

点赞数 32

文章标签：前端交互 vue.js

于 2024-05-30 15:31:25 首次发布

本文链接：https://blog.csdn.net/m0_61661094/article/details/139325443

版权

项目实训：登录注册——前端实现与交互

任务

后端已经实现了登录注册的接口，需要开发前端的登录注册界面。

前后端交互使用request即封装好的axios，初步开发登录注册。

具体工作

首先需要在src-api文件夹下，新建文件user.js文件，封装后端接口，示例如下
```
import request from '@/utils/request'

export function login(data) {
  return request({
    url: '/api/user/login',
    method: 'post',
    data
  })
}

export function logout() {
  return request({
    url: '/api/user/logout',
    method: 'post',
  })
}

export function register(data) {
  return request({
    url: '/api/user/register',
    method: 'post',
    data
  })
}
```
login(data): 用于向后端发送登录请求。它接受一个data参数，包含了用户的登录信息，比如用户名和密码。在内部，它调用了request函数，并传入了一个包含了请求URL(/api/user/login)、请求方法(post)和数据(data)的对象。这个函数最终返回了request函数的调用结果，即发送了一个POST请求到/api/user/login。

logout(): 用于向后端发送登出请求。它不接受任何参数，只是调用了request函数，并传入了一个包含了请求URL(/api/user/logout)和请求方法(post)的对象。与login函数类似，它最终返回了request函数的调用结果，即发送了一个POST请求到/api/user/logout。

register(data): 用于向后端发送注册请求。它接受一个data参数，包含了用户的注册信息，比如用户名、密码等。它也调用了request函数，并传入了一个包含了请求URL(/api/user/register)、请求方法(post)和数据(data)的对象。最终返回了request函数的调用结果，即发送了一个POST请求到/api/user/register。
在src-store-modules下修改user.js中的actions,将数据名称与后端进行统一，示例如下
```
// user login
login({ commit }, userInfo) {
const { userAccount, password } = userInfo
return new Promise((resolve, reject) => {
  login({ data:{userAccount: userAccount.trim(), password: password} }).then(response => {
    const { data } = response
    commit('SET_TOKEN', data.token)
    setToken(data.token)
    resolve()
  }).catch(error => {
    reject(error)
  })
})
},
```
接收用户的登录信息，向后端发送登录请求，处理后端返回的登录结果，将用户的 token 存储到 Vuex 和浏览器的本地存储中，并通过 Promise 返回登录结果。
return new Promise((resolve, reject) => { … })创建了一个 Promise 对象，用于处理异步操作。在 Promise 的执行函数中，进行登录操作。
login({ data:{userAccount: userAccount.trim(), password: password} })调用了名为login的函数，传入了一个对象作为参数，对象中包含了用户的账号和密码信息。需要注意的是，这里的login函数是之前定义的一个用于发送登录请求的函数。
.then(response => { … })当登录请求成功后，执行.then()中的回调函数，其中response是从后端返回的响应数据。
const { data } = response 从响应数据中解构出data字段，这里假设后端返回的数据中包含了一个data字段，里面包含了用户的 token 信息。
commit(‘SET_TOKEN’, data.token) 调用 Vuex 的commit方法，提交一个名为SET_TOKEN的 mutation，将用户的 token 存储到 Vuex 的状态管理中。
setToken(data.token) 调用一个名为setToken的函数，将用户的 token 存储到浏览器的本地存储中，通常用于实现持久化登录。
resolve() 执行 Promise 中的resolve方法，表示登录操作成功。
.catch(error => { … }) 如果登录请求失败，则执行.catch()中的回调函数，其中error包含了错误信息。
reject(error) 执行 Promise 中的reject方法，表示登录操作失败，将错误信息传递给调用者。

views下新建login.vue文件，并将其路由添加到router中

页面示例

<template>
  <div class="main-box">
    <div :class="['container', 'container-register', { 'is-txl': isLogin }]">
      <div>
      <el-form ref="registerForm" :model="registerForm" :rules="registerRules">
        <h2 class="title">注册界面</h2>
        <el-form-item prop="userAccount">
        <input class="form__input" type="text" ref="userAccount" placeholder="Username" v-model="registerForm.userAccount"/>
        </el-form-item>
        <el-form-item prop="password">
        <input class="form__input" type="password" ref="password" placeholder="Password" v-model="registerForm.password"/>
      </el-form-item>
      <el-form-item prop="email">
        <input class="form__input"  ref="password" placeholder="Email" v-model="registerForm.email"/>
      </el-form-item>
      <el-button :loading="loading" type="primary" round @click="Register()">注册</el-button>
      </el-form>
    </div>
    </div>
    <div
      :class="['container', 'container-login', { 'is-txl is-z200': isLogin }]"
    >
    <div>
      <el-form ref="loginForm" :model="loginForm" :rules="loginRules">
        <h2 class="title">登录界面</h2>
        <el-form-item prop="userAccount">
        <input class="form__input" type="text" ref="username" placeholder="Username" v-model="loginForm.userAccount"/>
        </el-form-item>
        <el-form-item prop="password">
        <input class="form__input" type="password" ref="password" placeholder="Password" v-model="loginForm.password"/>
      </el-form-item>
      <el-button :loading="loading" type="primary" round @click="Login()">登录</el-button>
      </el-form>
    </div>
    </div>
    <div :class="['switch', { login: isLogin }]">
      <div class="switch__circle"></div>
      <div class="switch__circle switch__circle_top"></div>
      <div class="switch__container">
        <h2>{{ isLogin ? 'Hello friend!' : 'Welcome back !' }}</h2>
        <p>
          {{
            isLogin
              ? '输入你的个人信息，加入我们！'
              : 'To keep connected with us please login with your personal info'
          }}
        </p>
        <div class="primary-btn" @click="isLogin = !isLogin">
          {{ isLogin ? '立即注册' : '立即登录' }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { register } from '@/api/user'

export default {
  name: 'Login',
  data() {
// 密码长度验证
  const validatePassword = (rule, value, callback) => {
  if (value.length < 6) {
    callback(new Error('密码长度不能少于6位'))
  } else {
    callback()
  }
}
// 邮箱验证
const validateEmail = (rule, value, callback) => {
  const emailReg = /^([a-zA-Z0-9]+[-_]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
  if (emailReg.test(value)){
    callback()
  }else{
    callback(new Error('邮箱格式不正确'))
  }
}
return {
  loading: false,
  isLogin: true,
  loginForm: {
    userAccount: 'admin',
    password: '123456',
  },
  loginRules: {
    password: [{ required: true, trigger: 'blur', validator: validatePassword }],
    userAccount: [
        // 用户名验证
        { required: true, message: '请输入用户名称', trigger: 'blur' },
        { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
      ],
  },
  registerForm: {
    userAccount: '',
    password: '',
    email:'',
  },
  registerRules: {
    password: [{ required: true, trigger: 'blur', validator: validatePassword }],
    username: [
        { required: true, message: '请输入用户名称', trigger: 'blur' },
        { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
      ],
    email: [{ required: true, message: '请填写电子邮箱', trigger: 'change',validator: validateEmail }],
  },
}
},
methods: {
Login() {
  this.$refs.loginForm.validate(valid => {
    if (valid) {
      //验证通过后，使用vuex，调用后端接口进行登录
      this.loading = true
      this.$store.dispatch('user/login', this.loginForm).then(() => {
        this.$router.push({ path: this.redirect || '/' }) //重定向到首页
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    }
  })
},
Register() {
  this.$refs.registerForm.validate(valid => {
    if(valid){
    register({data:{userAccount:this.registerForm.userAccount,password:this.registerForm.password,email:this.registerForm.email}}).then(response=>{
      this.$notify({
      title: '成功',
      message: '注册成功,自动登录',
      type: 'success'
    });
    // 注册成功自动进行登录
    this.$store.dispatch('user/login',this.registerForm).then(() => {
        this.$router.push({ path: this.redirect || '/' })
      })
      const { data } = response
      console.log(response)
    })
    }
  })
},
},
}
</script>
<style lang="scss" scoped>
</style>

这里是对于前端界面的一个简单编辑，包含登陆与注册界面以及部分信息的验证：
在data()方法中，定义了登录和注册表单的数据结构，包括用户名、密码、邮箱等字段，以及与其对应的验证规则。定义了两个验证规则函数validatePassword和validateEmail，用于验证密码和邮箱的格式。这些函数接收三个参数：rule（验证规则对象）、value（当前输入的值）、callback（回调函数），根据输入的值是否符合规则，调用callback来返回验证结果或错误信息。在data()方法中，定义了登录和注册表单的验证规则对象loginRules和registerRules，其中包含了对密码、用户名和邮箱的验证规则配置，包括是否必填、长度范围以及触发验证的事件等。在Login()方法中，通过this…validate()方法来触发表单验证。当验证通过时，调用 Vuex 的dispatch方法发送登录请求，并在验证通过后重定向到首页。
原理: Vue.js 提供了refs来访问组件内的子组件或元素，其中this.refs.loginForm引用了登录表单组件，并调用了其validate()方法来进行表单验证。在验证过程中，根据定义的验证规则，会依次调用验证规则函数进行验证，验证结果通过回调函数返回给调用者。
最后的注册新用户如果注册请求成功，使用notify来显示一个成功提示，告知用户注册成功，会自动调用 Vuex 的dispatch方法发送登录请求，将注册的用户信息作为参数传递给登录操作。如果登录成功，会重定向用户到指定的页面（通常是首页）。
注册新用户如果注册请求成功，使用this.$notify来显示一个成功提示，告知用户注册成功，会自动调用 Vuex 的dispatch方法发送登录请求，将注册的用户信息作为参数传递给登录操作。如果登录成功，会重定向用户到指定的页面（通常是首页）。

前端页面以及实现效果展示
心得体会
在一个项目中，前端和后端的分工合作是非常重要的。代码是前端部分，而后端已经实现了登录注册的接口。这种分工可以提高开发效率，允许成员专注于自己的领域。在代码中使用了密码长度和邮箱格式的验证函数。这种验证能够帮助用户在输入数据时避免常见的错误，提高用户体验。通过 Vue.js 的 data 方法，定义了登录和注册表单的数据结构和验证规则。这样的做法使得代码结构清晰，易于维护和扩展。在验证过程中，通过 callback 函数处理错误，并给出相应的提示信息。这种做法有助于用户理解输入错误的原因，提高交互友好性。
待完善之处：考虑到用户体验，可以在登录失败时给出友好的提示信息，帮助用户理解失败的原因并尝试修正。并且后续加入人机验证机制等