VSCode创建VUE项目（三）使用axios调用后台服务
1. 安装axios,执行命令
npm install axios
2. 在 main.ts 中引入并全局挂载 Axios 实例
修改后的 代码（也可以单独建一个页面处理Axios相关信息等，然后全局进行挂载）
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
//引入axios
import Axios from 'axios'
//创建一个 axios 实例
const axios=Axios.create({
baseURL:"http://10.101.21.1:9921",
timeout:6000,
headers:{"Content-Type":"application/json;charset=UTF-8;"}
})
//请求拦截器
axios.interceptors.request.use(
(config) => {
// 在发送请求之前做些什么，例如添加请求头的token什么的
// const token = localStorage.getItem('token');
// if (token) {
// config.headers.Authorization = `Bearer ${token}`;
// }
return config;
},
(error) => {
// 对请求错误做些什么
console.error('请求错误:', error);
return Promise.reject(error);
}
);
//响应拦截器
axios.interceptors.response.use(
(response) => {
// 对响应数据做点什么
if(response&&response.data){
return response.data;
}
else{
return response;
}
},
(error) => {
// 对响应错误做点什么
console.error('响应错误:', error);
return Promise.reject(error);
}
);
export default axios;
const app =createApp(App);
// 将 axios 实例挂载到全局
app.config.globalProperties.$axios = axios;
app.use(ElementPlus).use(store).use(router).mount('#app');3.修改LoginView.vue的commit方法
我直接调用的我现有的一个后台服务，出参如下
{
"code": 0,
"data": {
"pwd": "string",
"emplCode": "string",
"emplName": "string"
}
}注意：在 Vue 3 的 script setup 语法里，this 并不指向组件实例，所以无法直接使用 this.$axios。需要借助 getCurrentInstance 函数来获取当前组件实例，进而访问全局的 Axios 实例
修改后的代码
<script setup>
import { ref, getCurrentInstance } from "vue"
import router from '@/router';
import { ElMessage } from 'element-plus';
const { appContext } = getCurrentInstance()
const axios = appContext.config.globalProperties.$axios;
var loginform = ref({
username: "",
pwd: ""
})
var commit = async () => {
try {
var response = await axios.get('/v1/employee?emplCode=' + loginform.value.username);
//保存日志信息
console.log("--------------调用后台出参{"+loginform.value.username+"}--------------------");
console.log(response);
if (response && response.data) {
if (response.data.pwd == loginform.value.pwd) {
ElMessage.success("YES,成功啦啦啦啦啦！");
router.replace("./about")
}
else {
ElMessage.error("Sorry,请检查用户名和密码！失败！" );
}
}
else {
ElMessage.error("Sorry,请检查用户名！没有该用户！");
}
} catch (error) {
//登录失败,提示错误信息
console.log(error);
ElMessage.error("Sorry,失败！" + error);
}
}
</script>如果后台服务允许跨域访问结束，这就成功啦啦啦啦
4. 跨域问题处理
4.1 前端处理跨域
在vue.config.js配置代理规则(修改该文件后需要重新启动服务才会生效)
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
proxy: {
'/api': {
target: 'http://10.101.21.1:9921', // 目标 API 服务器地址
changeOrigin: true, // 允许跨域
pathRewrite: {
'^/api': '' // 去掉请求路径中的 `/api` 前缀
}
}
}
}
})修改全局axios配置的baseURL为 /api
4.2 后端彻底解决
举例：Java使用Spring Boot 框架使用 @CrossOrigin 注解
5.其他问题
解决警告：runtime-core.esm-bundler.js:4570 Feature flag __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ is not explicitly defined. You are running the esm-bundler build of Vue, which expects these compile-time feature flags to be globally injected via the bundler config in order to get better tree-shaking in the production bundle. For more details, see core/packages/vue at main · vuejs/core · GitHub.
解决方案：在vue.config.js配置configureWebpack
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
proxy: {
'/api': {
target: 'http://10.101.17.31:9921', // 目标 API 服务器地址
changeOrigin: true, // 允许跨域
pathRewrite: {
'^/api': '' // 去掉请求路径中的 `/api` 前缀
}
}
}
},
//configureWebpack:这是 Vue CLI 提供的一个配置选项，用于对内部的 Webpack 配置进行扩展。
configureWebpack: {
plugins: [
//DefinePlugin:它是 Webpack 的一个插件，用于在编译时创建全局常量。这里使用它来定义 Vue 的特性标志
new (require('webpack')).DefinePlugin({
'__VUE_PROD_HYDRATION_MISMATCH_DETAILS__': JSON.stringify(false), //将其设置为 false 表示在生产环境中不包含详细的 hydration 不匹配信息。
'__VUE_OPTIONS_API__': JSON.stringify(true), // 如果你使用了 Options API，通常设置为 true
'__VUE_PROD_DEVTOOLS__': JSON.stringify(false) // 通常在生产环境关闭 DevTools 支持
})
]
}
})