小程序服务器后端获取数据

在服务器项目右击添加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文件

配置参考 | Vue CLI (vuejs.org)

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:7788',
        ws: true,
        changeOrigin: true,  //允许跨域
        pathRewrite:{       //重写路径
            'api':''
        }
      },
      '/foo': {
        target: '<other_url>'
      }
    }
  }
}

最终运行成功结果为

如果运行不成功，首先检查代码单词是否有问题，检查完毕无误后，则重启服务器即可。

如果多次尝试还是不成功，则在HBuilder中直接进行H5配置