Vue项目Axios配置不同baseUrl,请求不同服务器的接口
项目需求最近使用 Vue 开发后台管理系统项目,开发过程遇到一个特别闹心的事情,由于项目没有上线,所有接口地址都是后台人员的电脑做为服务器,这个项目有几个后台同时开发接口,每一个大模块对应的接口地址不一样。这样按照常规写接口地址,只能调用一个模块,这样很不方便,也不符合前端的设计理念下面我们就封装一个可以调用不同服务器的方法第一步、新建一个serviceList.js文件 /src/conf...
·
项目需求
最近使用 Vue 开发后台管理系统项目,开发过程遇到一个特别闹心的事情,由于项目没有上线,所有接口地址都是后台人员的电脑做为服务器,这个项目有几个后台同时开发接口,每一个大模块对应的接口地址不一样。这样按照常规写接口地址,只能调用一个模块,这样很不方便,也不符合前端的设计理念
下面我们就封装一个可以调用不同服务器的方法
第一步、新建一个serviceList.js文件 /src/config/service.js
const servicesList = {
dev: {
commonUpload: { url: 'http://192.168.1.195', port: 10060 }, // 上传文件
commonAuth: { url: 'http://192.168.1.32', port: 8777 }, // 用户登录授权
accountRole: { url: 'http://192.168.1.117', port: 8660 }, // 账户管理-角色、权限
financialBill: { url: 'http://192.168.1.155', port: 8805 }, // 票据管理
financialBuildProject: { url: 'http://192.168.1.158', port: 8800 }, // 在建工程
financialCashBank: { url: 'http://192.168.1.155', port: 8816 }, // 现金银行
financialCost: { url: 'http://192.168.1.32', port: 8817 }, // 成本费用
},
test: {},
production: {}
}
export default servicesList
第二步、新建一个config.js文件(跟main.js同一级目录)
import servicesList from './config/servicesList'
// 发布版本
const bundleVersion = '20191024'
// 环境模式 dev test production
const environment = 'dev'
// api默认地址
const baseUrl = {
dev: 'http://192.168.1.18',
test: 'http://192.168.1.195',
production: ''
}
// 服务接口地址
const services = {
dev: (() => {
return servicesList.dev
})(),
test: (() => {
let list = JSON.parse(JSON.stringify(servicesList.dev))
for (let name in list) {
list[name].url = baseUrl[environment]
}
return list
})(),
production: (() => {
let list = JSON.parse(JSON.stringify(servicesList.dev))
for (let name in list) {
list[name].url = baseUrl[environment]
}
return list
})()
}
export default {
version: bundleVersion,
apiUrl: baseUrl[environment],
apiConfig: services[environment],
netPrefix
}
第三步、新建封装各种调用接口api的文件
新建api文件夹
里面是各个模块的文件夹
api文件夹下有一个index.js
这边就写个模块的例子,在这js里面调用config.js里面引用的地址
account/index.js
import http from '../../services/http'
import config from '../../config'
// 账户管理 - 角色管理
// 调用服务
const services = config.apiConfig.accountRole
// body实体
let servicesRaw = JSON.parse(JSON.stringify(services))
servicesRaw.raw = true
const account = {
// 账户管理 - SURMAX - 列表
getSurmaxList: params => {
return http.get(
'userAccount/userAccount/userAccountListSearch',
params,
services
)
},
// 账户管理 - SURMAX - 新增
surmaxAccountAdd: params => {
return http.post(
'userAccount/userAccount/userAccountAdd',
params,
servicesRaw
)
}
}
export default account
引入的http.js是对axios请求的拦截封装处理
api/index.js
import account from './account/index' // 账户管理
import financial from './financial/index' // 财务管理
export {
account,
financial
}
第四步、在mian.js引用api
import Vue from 'vue'
import App from './App'
import router from './router'
import * as Api from './api'
import components from '@/components/index'
// api接口
Vue.prototype.api = Api
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
store,
components: {
App
},
template: '<App/>'
})
写到这里,基本封装就完成,剩最后调用接口了
第五步、在页面中调用
在vue页面中
/**
* 调用账户管理-列表
**/
getListDeal (params) {
let vm = this
vm.api.account.getSurmaxList(params).then(res => {
vm.$set(vm.listData, 'data', res.itemList)
let pages = {
pageIndex: res.pageIndex,
totalNumber: res.totalNumber,
totalPage: res.totalPage
}
vm.pages = pages
}, err => {
unit.msg.error({ vm, content: err })
})
},
总结
优点:
1,在不同的组件调用不同的方法就可以实现,不同的接口请求数据;
2,维护接口方便,以后上线之后,把config.js中的环境换成线上接口即可;
更多推荐
已为社区贡献1条内容
所有评论(0)