标签：baidu target rewrite function 基础 ade return os模块 app
1>如何将axios代码从main.js文件中独立出来(模块化开发类似node.js)?
.创建axios.js文件
.在main.js中引入axios.js代码(其他js代码的模块化以此类推)
import Axios from ‘./axios/axios‘//引入axios分离文件
2>奉上封装的axios.js模块代码
import Vue from "vue"; import axios from ‘axios‘ import Qs from ‘qs‘ Vue.prototype.$http = axios.create({ transformRequest: [function (data) {//调用时自动变成表单数据 data = Qs.stringify(data); return data; }], headers:{‘Content-Type‘:‘application/x-www-form-urlencoded‘}//默认请求头为表单数据 })
注:因为后台接收的是表单数据而不是json数据,因此将设置将传入的数据统一转化成表单数据;并将axios写入原型方便调用
3>在vue组件中发送请求直接 thsi.$http...
.post请求:
this.$http.post("后台接口地址",data).then((res)=>{//data是传给后台的对象 //.. }) .catch((err)=>{ })
3>补充:vue反向代理实现前端跨域
.在项目根目录下新建vue.config.js文件写入以下代码
module.exports = { devServer: { proxy: { ‘/api‘: { target: ‘后端接口根路径‘,//例如http://www.baidu.com ws: true, changeOrigin: true, pathRewrite: { ‘^/api‘: ‘/‘ //调用时用api替代根路径 } } } } }
.调用例子
this.$http.post("api/login",data).then((res)=>{//模拟访问登录接口,提交登录数据 //.. }) .catch((err)=>{ })
标签：baidu target rewrite function 基础 ade return os模块 app
原文地址：https://www.cnblogs.com/jinchange/p/11439268.html
