装置npm依赖
npm install uview-ui 开发环境请将 http.interceptor.js 文件中的 baseUrl: appconfig.serverUrl, 加上条件编译,如下
// #ifndef H5
baseUrl: appconfig.serverUrl,
// #endif开发环境跨域配置vue.config.js
正式环境能够将 http.interceptor.js 文件中的 baseUrl: appconfig.serverUrl 条件编译去掉 变成如下模式
baseUrl: appconfig.serverUrl,
后续更换域名同样批改 vue.config.js 和 config.js 中的域名
-
main.js
import Vue from 'vue'
import App from './App'
import store from './store'
import * as utils from '@/common/utils.js'
import uView from "uview-ui";
Vue.use(uView);
import cuCustom from 'colorui/components/cu-custom.vue'
Vue.component('cu-custom',cuCustom)
Vue.config.productionTip = false
Vue.prototype.$store = store
Vue.prototype.$utils = utils
App.mpType = 'app'
const app = new Vue({
...App
})
// http拦截器，此为须要退出的内容，如果不是写在common目录，请自行批改引入门路
import httpInterceptor from '@/common/http.interceptor.js'
// 这里须要写在最初，是为了等Vue创建对象实现，引入"app"对象(也即页面的"this"实例)
Vue.use(httpInterceptor, app)
// http接口API集中管理引入局部
import httpApi from '@/common/http.api.js'
Vue.use(httpApi, app)
app.$mount()
-
config.js
//配置文件放这里吧
export default {
apiurl:'',
serverUrl:"",//服务器接口api地址,本地跨域配置临时用空
imageUrl:"",//服务图片加载地址
imgupload:"",//图片上传地址
appid:""//公众号appid
}-
http.api.js
import appconfig from './config.js'
// 如果没有通过拦截器配置域名的话，能够在这里写上残缺的URL(加上域名局部)
let loginUrl="" //登录
// 此处第二个参数vm，就是咱们在页面应用的this，你能够通过vm获取vuex等操作，更多内容详见uView对拦截器的介绍局部：
// https://uviewui.com/js/http.html#%E4%BD%95%E8%B0%93%E8%AF%B7%E6%B1%82%E6%8B%A6%E6%88%AA%EF%BC%9F
const install = (Vue, vm) => {
// 应用传入的params参数
let login = (params = {}) => vm.$u.post(loginUrl, {
username:params.username,
password:params.password
});
// 将各个定义的接口名称，对立放进对象挂载到vm.$u.api(因为vm就是this，也即this.$u.api)下
vm.$u.api = {login};
}
export default {
install
}-
http.interceptor.js
//引入配置文件
import appconfig from './config.js'
// 这里的vm，就是咱们在vue文件外面的this，所以咱们能在这里获取vuex的变量，比方寄存在外面的token变量
const install = (Vue, vm) => {
// 此为自定义配置参数，具体参数见上方阐明
Vue.prototype.$u.http.setConfig({
baseUrl: appconfig.serverUrl,
loadingText: '致力加载中~',
loadingTime: 800, // 在此工夫内，申请还没回来的话，就显示加载中动画，单位ms
originalData: false, // 是否在拦截器中返回服务端的原始数据 false时服务器状态码不为200，会modal弹框提醒
loadingMask: true, // 展现loading的时候，是否给一个通明的蒙层，避免触摸穿透
showLoading: true, // 是否显示申请中的loading
// 设置为json，返回后会对数据进行一次JSON.parse()
dataType: 'json',
// 配置申请头信息
header: {
'content-type': 'application/json',
}
});
// 申请拦挡，配置Token等参数
Vue.prototype.$u.http.interceptor.request = (config) => {
// 援用token
console.log("申请拦挡:",config);
// 形式一，寄存在vuex的token，假如应用了uView封装的vuex形式
// 见：https://uviewui.com/components/globalVariable.html
// config.header.token = vm.token;
// 形式二，如果没有应用uView封装的vuex办法，那么须要应用$store.state获取
// config.header.token = vm.$store.state.token;
// 形式三，如果token放在了globalData，通过getApp().globalData获取
// config.header.token = getApp().globalData.username;
// 形式四，如果token放在了Storage本地存储中，拦挡是每次申请都执行的
// 所以哪怕您从新登录批改了Storage，下一次的申请将会是最新值
const token = uni.getStorageSync('token');
config.header.token = token;
// 能够对某个url进行特地解决，此url参数为this.$u.get(url)中的url值
// if(config.url == '/user/login') config.header.noToken = true;
// 最初须要将config进行return
return config;
// 如果return一个false值，则会勾销本次申请
// if(config.url == '/user/rest') return false; // 勾销某次申请
}
// 响应拦挡，判断状态码是否通过
Vue.prototype.$u.http.interceptor.response = (res) => {
// console.log("响应拦挡:", res);
//临时就间接诶返回吧
return res;
// if(res.code == 200) {
// // res为服务端返回值，可能有code，result等字段
// // 这里对res.result进行返回，将会在this.$u.post(url).then(res => {})的then回调中的res的到
// // 如果配置了originalData为true，请注意这里的返回值
// return res.result;
// } else if(res.code == 201) {
// // 假如201为token生效，这里跳转登录
// vm.$u.toast('验证失败，请从新登录');
// setTimeout(() => {
// // 此为uView的办法，详见路由相干文档
// vm.$u.route('/pages/user/login')
// }, 1500)
// return false;
// } else {
// // 如果返回false，则会调用Promise的reject回调，
// // 并将进入this.$u.post(url).then().catch(res=>{})的catch回调中，res为服务端的返回值
// return false;
// }
}
}
export default {
install
}
发表回复