页面搭建关联好后,接下来就是做对接接口请求数据了。
(一)请求接口,获取数据
接口请求用的是axios,并稍微封装了下,这样才能对登录失效等一些情况做统一处理,减少代码编写。
执行:npm install axios --save 安装依赖包,然后在assets/js文件夹下新建一个request.js文件,最后引入axios进行封装,如下:
import axios from 'axios'
import qs from 'qs'
if(process.env.NODE_ENV === 'production') { //设置生产环境域名,开发环境不需要域名
//axios.defaults.baseURL = process.env.API_ROOT;
axios.defaults.baseURL = '自己的域名';
}
axios.defaults.withCredentials = true; //允许携带cookie
let request = function(options) {
if(!options.method) {
options.method = 'post';
}
/*if(options.loading)
this.$indicator.open()*/
if(!options.header) {
if(options.method.toLowerCase() == 'post') {
options.header = {
"Content-Type": "application/x-www-form-urlencoded",
}
}
}
if(!options.data)
options.data = {}
options.data.device = getDevice()
options.data.qtime = new Date().getTime()/1000;
if(window.localStorage.getItem('userInfo') && options.header['Content-Type'] != 'multipart/form-data'){
let userinfo = JSON.parse(window.localStorage.getItem('userInfo'));
options.data.userid = userinfo.id;
options.data.token = userinfo.token;
}
if(options.method.toLowerCase() == 'get') {
axios.get(options.url, {
headers: options.header,
params: options.data
}).then(res => {
requestOk(res, options,this)
}).catch(error => {
requestError(error,options,this)
})
} else if(options.method.toLowerCase() == 'post') {
if(options.header['Content-Type'] != 'multipart/form-data')
options.data = qs.stringify(options.data)
axios.post(options.url, options.data, {
headers: options.header
}).then(res => {
requestOk(res, options,this)
}).catch(error => {
requestError(error, options,this)
})
}
}
function getDevice(){
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if(isAndroid){
return '2'
}else if(isiOS){
return '1'
}
}
function requestOk(res, options,that) {
/*if(options.loading)
that.$indicator.close()*/
if(res.data.code === 1) {
if(options.successFn && typeof options.successFn == 'function') {
options.successFn(res.data)
}
} else {
console.log(res, '+++++++++获取数据失败!!')
if(options.failFn && typeof options.failFn == 'function') {
options.failFn(res)
return false
}
if(res.data.code === 1002) { //登录失效
window.localStorage.removeItem('userInfo')
alert('登录已失效')
}
}
}
function requestError(error, options,that) {
console.log('请求超时')
/*if(options.errorFn && typeof options.errorFn == 'function')
options.errorFn()
if(options.loading)
that.$indicator.close()
if(error.message.includes('timeout') || error.message.includes('504') || error.message === 'Network Error')
that.$toast('请求超时,请稍后重试')*/
}
export default request
然后在index.js中引入request文件并挂载到react原型上,这样就可以直接在组建中调用this.request()方法进行接口请求了,如下:
import request from './assets/js/request'
React.Component.prototype.request = request
(二)本地测试
本地测试需要解决跨域的问题,那么就需要配置Nginx反向代理,具体就是在package.json文件中增加proxy属性,如下:
"proxy": "自己的域名",
页面调用接口:
getUsdtList(){ //获取数字货币种类
let that = this;
this.request({
url: '/api/v1/currency/lists',
data: {type: 'digital'},
successFn(res){
console.log(res,'获取usdt种类')
that.setState({
usdt: res.data
})
that.getUsdtData('all')
}
})
}
效果:
(三)项目打包部署
执行:npm run build 进行打包然后部署到服务器即可。
注意:布署的时候你必须把build里的文件直接放到服务器的根路径下,比如,你的服务器IP是47.96.134.256,应用服务器端口为8080,你应该保证http://47.96.134.256:8080这种访问方式,访问到的是你的build下的文件。如果你希望以http://47.96.134.256:8080/build/index.htm这种方式访问应用,那么你可以在package.json文件中增加一个homepage字段:
"homepage": ".",