直播做网站,国家企业信息公示网(广东),成都网站设计建设,网站建设ppt方案模板下载#xff08;以下的接口地址链接换成自己的写#xff01;#xff01;#xff01;#xff09;
首先在项目中src的目录下创建一个api的文件夹#xff0c;在api的文件下在穿件两个文件用于二次封装 别忘了先安装axios#xff1a;#xff08;在根目录下安装axios#xff0…以下的接口地址链接换成自己的写
首先在项目中src的目录下创建一个api的文件夹在api的文件下在穿件两个文件用于二次封装 别忘了先安装axios在根目录下安装axios如果安装过了就不用看蓝色字体安装过程
npm install --save axios
然后在main.js中引用axios
// 引入axios
import {apiGet,apiPost} from ./api/api
Vue.prototype.$apiGet apiGet
Vue.prototype.$apiPost apiPostapi下的第一个api.js:
import axios from axios;axios.defaults.timeout 30000;
// 这个是环境测试配置不知道可以搜索我的csdn中的Vue测试打包test
axios.defaults.baseURL process.env.VUE_APP_API_URL// 添加响应拦截器
axios.interceptors.response.use(function (response) {//可以写if判断提前拦截错误信息return response;}, function (err) {return Promise.reject(err);
});export function apiGet(url, params){ return new Promise((resolve, reject) { axios.get(url, { params: params,headers:{token:sessionStorage.getItem(token)}}).then(res {resolve(res.data);}).catch(err {reject(err.data) }) });
}export function apiPost(url, params){return new Promise((resolve, reject) {axios({method: post,url:url,data:params}).then(res {resolve(res.data);}).catch(err {reject(err.data)})});}
api下的第二个https.js:
//这个是二次封装(用到apiPost的时候把下面接口那也改成这个用不到就把apiPost去掉)
import {apiGet,apiPost} from ./api;export function jindutiao(){return new Promise((resolve){apiGet(/index.php/index/admin/getNum).then(res{resolve(res)
})});// .catch(err{// reject(err)// })}
然后按照“jindutiao().这个是https.js中二次封装中你取的函数名字”
先引用import {jindutiao} from ../api/https
在使用jindutiao().then(res{ console.log(res); }
二次封装在页面上的使用以上说的以下示例代码在script中
// 这个是二次封装后https.js中封装后直接写函数在这个页面使用
import {jindutiao} from ../api/https
export default {data() {return {};},mounted() {// 这个是进度条接口jindutiao().then(res{// console.log(res);this.percentage res.data.cssnum;this.percentage1 res.data.htmlnum;this.percentage2 res.data.jsnum;this.percentage3 res.data.vuenum;}),},methods: {}}/script如果有跨域问题可以在最后在vue.config.js中添加以下代码解决用注释下面的
const { defineConfig } require(vue/cli-service)
module.exports defineConfig({publicPath:./,transpileDependencies: true,lintOnSave:false,// 跨域问题devServer: {proxy:{/api1:{target:http://47.94.4.201/,pathRewrite:{^/api1:},ws:true,changeOrigin:true,}}}
})
