uniapp 前后端通信实现

一. request功能的封装

1. 新建utils目录，并在该目录下新建config.js与request.js两个文件

2. config.js地址参数配置

   export default {
   	host:'http://localhost:3002'
   }
   

3. request功能的封装，利用的是uni.request

   import config from './config'
   export default (url,data={},method="GET")=>{
   	return new Promise((reslove,reject)=>{
   		uni.request({
   			url:config.host + url,
   			data,
   			method,
   			success: (res) => {
   				reslove(res.data)
   			},fail: (err) => {
   				reject(err)
   			}
   		})
   	})
   }
   

二. 1. 利用Koa构建后台接口服务器

1. 新建后端项目目录guigushop_server

2. npm init项目初始化

4. npm i koa koa-router --save，安装koa以及koa路由模块

5. 新建servre.js接口服务文件

   let Koa = require('koa');
   let KoaRouter = require('koa-router');
   // 实例化koa以及router路由
   const app = new Koa();
   const router = new KoaRouter();
   // 利用ctx进行内容返回操作
   router.get('/', (ctx, next) => {
   	ctx.body = 'hello koa'
   })
   // 主页数据
   let indexData =  require('./datas/index.json');
   router.get('/getIndexData', (ctx, next) => {
   	ctx.body = indexData
   });
   // app实例使用router路由及限制allowedMethods请求方式的允许内容
   app
   	.use(router.routes())
   	.use(router.allowedMethods())
   
   app.listen('3002', () => {
   	console.log('服务器启动');
   	console.log('服务器地址： http://localhost:3002')
   })
   

6. 修改package.json的scripts节点信息，设置start启动方式

   {
   	"name": "wangyi_server",
   	"version": "1.0.0",
   	"dependencies": {
   		"koa": "^2.8.2",
   		"koa-router": "^7.4.0",
   		"nodemon": "^1.19.4"
   	},
   	"scripts": {
   		"start": "nodemon server.js"
   	}
   }
   

7. 运行npm start启动接口服务

三. 在页面中进行数据请求

<script>
import request from '../../utils/request.js'
export default {
	data() {
		return {};
	},
    // 生命周期钩子函数中一般不使用async，所以可以将获取数据操作单独封装于methods中
	mounted() {
		this.getIndexData()
	},
	methods:{
		async getIndexData(){
			let result = await request('/getIndexData')
			console.log(result)
		}
	}
};
</script>