在服务器项目右击添加json数据的文件夹
在router的index.js文件中加载和配置首页分类数据
//加载首页分类数据------滑块
const categoryData=require('../datas/index.json')
//注册index页接口
router.get('/getIndexData',(req,res)=>{
res.send({
status:200,
indexData
})
})
网络封装发请求方法
uni.request(OBJECT) | uni-app官网
在客户端项目中新建文件夹utils,新建request.js文件、base.js文件
request.js文件
import base from './base' //接收域名
//getIndexData
export default(url,data={},method='GET')=>{
return new Promise((resolve,reject)=>{
uni.request({
url:base.host+url, //仅为示例,并非真实接口地址。
data,
method,
header: {
'custom-header': 'hello' //自定义请求头信息
},
success: (res) => {
resolve(res.data);
},
fail:(err)=>{
reject(err)
}
});
})
}
base.js文件
export default{ //导出默认对象
host:http://localhost:7788 //域名
}
运行在浏览器中,再打开F12
发现没打印出数据,且显示错误!
该问题为跨域问题
你请求的端口是7788,而浏览器的端口是8080,服务器端不在一个域名下,处理跨域问题,需要跨域代理,在客户端项目根目录下新建vue.config.js文件
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:7788',
ws: true,
changeOrigin: true, //允许跨域
pathRewrite:{ //重写路径
'api':''
}
},
'/foo': {
target: '<other_url>'
}
}
}
}
最终运行成功结果为
如果运行不成功,首先检查代码单词是否有问题,检查完毕无误后,则重启服务器即可。
如果多次尝试还是不成功,则在HBuilder中直接进行H5配置