搭建后台管理系统框架
网络请求封装
相较于微信小程序的网络请求封装，后台管理系统的网络请求封装更为简单——不涉及文件上传和下载的网络请求。所以直接删掉微信小程序中的文件上传和下载网络请求的封装，保留基础网络请求的封装即可。
同时考虑到该系统是后台管理系统，所以网络请求设计方面不使用双token机制，而是使用单token机制——单token机制就能满足用户体验，因为管理系统不涉及大批量内容填写等情况。
由于网络请求封装在介绍微信小程序的时候有详细介绍过，这里便不再详细介绍了。
/**
* 通用uni-app网络请求
* 基于 Promise 对象实现更简单的 request 使用方式，支持请求和响应拦截
*/
export default {
config: {
// 项目服务器访问路径
// baseUrl: "http://xxx.xxx.xxx.xxx:xxx/",
// 测试服务器访问路径
baseUrl: "http://xxx.xxx.xxx.xxx:xxx/",
// 本机访问路径
// baseUrl: "http://localhost:8088/",
header: {
"Content-Type":"application/json"
},
data: {
},
method: "GET",
/* 如设为json，会对返回的数据做一次 JSON.parse */
dataType: "json",
responseType: "text",
success() {
},
fail() {
},
complete() {
}
},
interceptor: {
refreshTokenInvaild() {
uni.removeStorageSync("token")
uni.showToast({
icon: 'none',
title: '账号权限失效,请重新登录',
mask: true,
})
return new Promise((resolve) => {
setTimeout(function() {
resolve(1)
uni.reLaunch({
url: '/pages/index/index'
})
}, 1000)
})
},
request(config) {
if(config.url == config.baseUrl+'admin/login') {
config.header = {
}
} else {
config.header = {
"token": uni.getStorageSync("token")
}
}
},
async response(response,config,_this) {
// 设置请求结束后拦截器
if(response.data) {
if (response.data.code == 200) {
// 通过
} else if (response.data.code == 505) {
// bad credited
setTimeout(function() {
uni.showToast({
title: '用户名或密码错误',
icon: 'none',
mask: true
})
}, 10);
} else if (response.data.code == 402) {
// 单 token 失效
await this.refreshTokenInvaild()
}
else {
// 未知错误
setTimeout(function() {
uni.showToast({
title: response.data.msg,
icon: 'none',
mask: true
})
}, 10);
}
}
return await new Promise((resolve) => {
resolve(response)
})
}
},
request(options) {
if (!options) {
options = {
}
}
options.baseUrl = options.baseUrl || this.config.baseUrl
options.dataType = options.dataType || this.config.dataType
options.url = options.baseUrl + options.url
options.data = options.data || {
}
options.method = options.method || this.config.method
return new Promise((resolve, reject) => {
let _config = null
options.complete = (response) => {
let statusCode = response.statusCode
response.config = _config
if (this.interceptor.response) {
let newResponse = this.interceptor.response(response,_config,this)
if (newResponse) {
response = newResponse
}
}
if (statusCode === 200) {
//成功
resolve(response);
} else {
setTimeout(function() {
uni.showToast({
title: '服务器异常',
icon: 'error',
mask: true
})
}, 10);
reject(response)
}
}
_config = Object.assign({
}, this.config, options)
_config.requestId = new Date().getTime()
if (this.interceptor.request) {
this.interceptor.request(_config)
}
uni.request(_config);
});
}
}
实现后台管理系统登录
这里笔者直接使用的是微信小程序的登录界面（实现逻辑基本一致），进行了一些样式的修改，以及对应接口的修改。
视图代码及视图效果
登录逻辑代码
因为和微信小程序的登录逻辑代码很类似，只修改对应的url就可以实现相应的功能。登录功能后进入后台管理主页。
