vue访问后端接口，实现用户注册

文章目录

• 一、后端接口文档
• 二、前端代码
• • 请求响应工具
  • 调用后端API接口
  • 页面函数绑定单击事件，调用/api/user.js中的函数
• 三、参考视频

---

一、后端接口文档

二、前端代码

请求响应工具

/src/utils/request.js

//定制请求的实例

//导入axios  npm install axios
import axios from 'axios';
//定义一个变量,记录公共的前缀  ,  baseURL
const baseURL = 'http://localhost:8080';
const instance = axios.create({baseURL})


//添加响应拦截器
instance.interceptors.response.use(
    result=>{
        return result.data;
    },
    err=>{
        alert('服务异常');
        return Promise.reject(err);//异步的状态转化成失败的状态
    }
)

export default instance;

调用后端API接口

src/api/user.js

//导入request.js请求工具
import request from '@/utils/request'

//提供调用注册接口的函数
export const userRegisterService = (registerData) => {
    //借助URLSearchParams完成传递
    const params = new URLSearchParams()
    for(let key in registerData) {
        params.append(key, registerData[key])
    }
    return request.post('/user/register',params)
}

页面函数绑定单击事件，调用/api/user.js中的函数

views/Login.vue

● 创建 register 函数

//调用后台接口完成注册
import { userRegisterService } from '@/api/user.js'
const register = async () => {
    let result = await userRegisterService(registerData.value)
    if (result.code === 0) {
        //注册成功
        alert(result.msg ? result.msg : '注册成功')
    } else {
        //注册失败
        alert('注册失败')
    }
    alert(result.msg ? result.msg : '注册成功')
}

● 注册按钮绑定 register 函数

如果遇到跨域问题，请参考文章：vue配置代理解决前端跨域的问题

三、参考视频

https://www.bilibili.com/video/BV14z4y1N7pg?spm_id_from=333.788.player.switch\&vd_source=0467ab39cc5ec5940fee22a0e7797575\&p=74