当前位置：首页 > news >正文

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

news 来源：原创 2025/5/23 0:27:35

文章目录

一、后端接口文档
二、前端代码
- 请求响应工具
- 调用后端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 : '注册成功')
}