2024/04/01（2024春季）

学习时长：2小时

代码行数：100多行；

博客数量：1篇

今天主要是练习了vue连接后端spring boot中的一些基本的js语句，还学习了vue中浏览器要获取后端数据中的代理，也就是通过前端服务访问后端服务器再返回浏览器

//导入request.js工具
import request from '@/util/request.js'

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

//定制请求的实例

//导入axios  npm install axios
import axios from 'axios';

//配置代理路径

const baseURL = '/api';

//定义一个变量,记录公共的前缀  ,  baseURL
const instance = axios.create({baseURL})


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

export default instance;

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server:{
    proxy:{
      '/api':{//获取路径中包含了/api请求的请求
        target:'http://localhost:8080',//后台服务器所在的源
        changeOrigin:true,//修改源,
        rewrite:(path)=>path.replace(/^\/api/,'')///api替换为''
      }
    }
  }
})