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

---

一、后端接口文档

二、前端代码

请求响应工具

/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