小白网站搭建教程_图片制作生成器_网络营销策划公司_企业网站建设原则是

axios请求

安装

npm install axios

全局自定义请求

集中处理设置 集体通用请求

example

const instance = axios.create({baseURL: 'https://some-domain.com/api/',timeout: 1000,headers: {'X-Custom-Header': 'foobar'}
});

请求前

请求后

拦截器

// 添加请求拦截器
axios.interceptors.request.use(function (config) {// 在发送请求之前做些什么return config;}, function (error) {// 对请求错误做些什么return Promise.reject(error);});// 添加响应拦截器
axios.interceptors.response.use(function (response) {// 2xx 范围内的状态码都会触发该函数。// 对响应数据做点什么return response;}, function (error) {// 超出 2xx 范围的状态码都会触发该函数。// 对响应错误做点什么return Promise.reject(error);});

前后端交互

@umijs/openai插件

可以由后端kf4j文档 自动生成前端代码

npm i --save-dev @umijs/openapi

在根目录添加配置文件

import { generateService } from '@umijs/openapi'generateService({requestLibPath: "import request from '@/request'",schemaPath: 'http://localhost:8123/api/v2/api-docs',serversPath: './src',
})

pack.json设置

//  what；
//  自己添加openapi服务 设置要执行哪些代码
//    使用 node 运行openapi.config.js js文件"openapi": "node openapi.config.js",

bug1 后端未启动

fetch openapi error: FetchError: request to http://localhost:8123/api/v2/api-docs failed, reason: at ClientRequest.<anonymous> (D:\project\pioneak-picture-frontend\node_modules\node-fetch\lib\index.js:1501:11)

bug2 axios基础网址设置错误

const myAxios = axios.create({baseURL: 'http://localhost:8123',timeout: 60000,withCredentials: true,
});

全局状态管理

某一个信息多个页面共享数据

Pinia更新与共享

import { defineStore } from "pinia";
import { ref } from "vue";export const useLoginUserStore = defineStore("loginUser", () => {const loginUser = ref<any>({userName: "未登录",});async function fetchLoginUser() {// todo 由于后端还没提供接口，暂时注释// const res = await getCurrentUser();// if (res.data.code === 0 && res.data.data) {//   loginUser.value = res.data.data;// }/*what:测试用户登录loginUser常量 设置对象内容 3s后设置app.vue 中 使用 LoginUserStore.fetchLoginUser() 设置loginUser value 在vue动态响应 <div v-if="loginUserStore.loginUser.id">判断到了id*/setTimeout(() =>{loginUser.value = {userName: "测试用户", id: 1}},3000)}function setLoginUser(newLoginUser: any) {loginUser.value = newLoginUser;}return { loginUser, setLoginUser, fetchLoginUser };
});

使用状态全局

const LoginUserStore = useLoginUserStore()
LoginUserStore.fetchLoginUser()

在组件中使用状态全局对象与对象信息

<div v-if="loginUserStore.loginUser.id">{{loginUserStore.loginUser.userName ?? '无名'}}</div><div v-else><a-button type="primary" href="/user/login">登录</a-button></div>

const loginUserStore = useLoginUserStore()