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

news2025/5/11 23:58:05

文章目录

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