跳到主要内容

后端接口配置地址


数据服务是一个应用的灵魂,它驱动着应用的各个功能模块的正常运转。我们在common/api(一以下简称api)模块封装了服务端交互,通过 API 的形式可以和任何技术栈的服务端应用一起工作。

服务交互流程

服务交互流程如下:

  • 1.组件内调用 api服务
  • 2.api服务封装请求数据,通过 request.js 发送请求
  • 3.组件获取 api返回的数据,更新视图数据或触发其它行为

自定义封装请求

以登录为例,login.vue 组件内,用户输入账号密码点击登录,接口地址为 /system/jwtLogin,调用自定义封装$http进行post请求,获取登录服务返回的数据,进行后续操作。

this.$http.post('/system/jwtLogin', {}, {
params: {},
header: {
'content-type': 'application/json'
},
custom: {auth: false}
}).then(res => {
if(res.statusCode == 200){  //登录成功
        ....
     } else {  //登录失败
....
     }
})

uni-app API请求

uni.request发起网络请求,是uni-app自己的API方法。

uni.request({
url: this.$baseUrl + '/mdata/user/getCurrentUserInfor',
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded',
},
success: res => { //请求成功
...
},
fail: function(err) { //请求失败
...
}
});

请求的 header 中 content-type 默认为 application/json。 避免在 header 中使用中文,或者使用 encodeURIComponent 进行编码。 网络请求的 超时时间 可以统一在 manifest.json 中配置 networkTimeout。

baseUrl配置

你可以在项目根目录下的应用配置文件(common/api/config.js)中配置你的 API 服务 base url 地址及其他地址。

const baseUrl = 'https://vue.misboot.com'                         //基础接口地址
const redirectUrl = 'https://app.misboot.com/#/' //回调地址
const upLoadUrl = 'https://vue.misboot.com/document/oss/upload' //图片上传地址


module.exports = {
baseUrl,
redirectUrl,
upLoadUrl
}

因为在main.js中已经对上述三个地址进行了全局挂载,所以在页面中使用时无需再次引入,直接使用即可

```main.js

Vue.prototype.$redirectUrl = redirectUrl; //回调地址
Vue.prototype.$baseUrl = baseUrl; //接口地址
Vue.prototype.$upLoadUrl = upLoadUrl; //图片上传地址

``` .vue
例如: let url = this.$baseUrl + '/system/qiyeweixin/qywxLogin.api'