1.于axios进行二次封装 创建services>request.js文件
//对于axios进行二次封装
import axios from "axios";
//底下的代码也是创建axios实例
let requests = axios.create({
//基础路径
baseURL: "/api",
//请求不能超过5S
timeout: 5000,
});
export default requests;
2.封装接口,创建aip>common.js文件,
import request from '@/services/request'
export function getAllDBList(params) {
return request({
//请求的路径
url: '/risen/app/home/getAllDBList.action',
//请求方式
method: 'post',
//请求参数
params: params
})
}
3.页面调用接口
<script>
import {getAllDBList} from '@/api/common.js'
export default {
mounted(){
//使用接口
getAllDBList(传给后端的参数).then(res)=>{
console.log(res,后端响应或返回的数据)
}
}
}
</script>
3.代理配置,创建vue.config.js
//当请求的接口带有/api代理服务就会寻找真实服务要数据
module.exports = {
publicPath: './', // router hash 模式使用
productionSourceMap:false,
// 关闭ESLINT校验工具
lintOnSave: false,
//配置代理跨域
devServer: {
proxy: {
"/api": {
target: "http://39.98.123.211", //获取数据的IP地址
secure: false, // 如果是https接口,需要配置这个参数
pathRewrite: {
'^/api': '' //当每次请求时都会带有/api 路径重写
},
changeOrigin: true, // 是否跨域
},
},
},
};