4.8【微信小程序全栈开发课程】小程序前后端的联系以及get、post代码封装

数据库主要在后端操作，也就是server文件夹中

1、koa路由

（1）koa路由介绍

Koa我们前面讲过，是后端的框架

路由管理就是接收不同的api请求，找到相应处理的文件，查到或者修改数据，返回处理的信息。

koa路由，统一在server/routes/index.js文件中管理

比如我们在前面配置过登录链接http://localhost:5757/weapp/login，

通过http://localhost:5757域名找到服务器，在这里是本地电脑作为服务器

通过/weapp/login这两个参数，会找到server/controllers名为login.js文件，在这个文件里面处理数据

（2）koa路由管理文件

也就是server/routes/index.js文件，我们打开这个文件，查看里面包含的下面这两段代码

第一段代码的意思是每个路由的前缀都是/weapp。比如登录就是/weapp/login

const router = require('koa-router')({
    prefix: '/weapp'
})

第二段代码里面包含的信息，请求方法(get)、路由的名称(/login)、对应处理的文件(controllers.login)

// 登录接口
router.get('/login', authorizationMiddleware, controllers.login)

2、前后端联系过程

当我们在小程序界面（前端）点击授权登录按钮时，就调用了http://localhost:5757/weapp/login登录路由，通过这个链接找到后端服务器。

后端服务器接收到链接后，通过server/routes/index.js文件中的信息，找到请求链接对应的处理文件，在这里是server/controllers/login.js，处理文件进行读取或者修改等操作后，返回处理信息到前端，这就是整个前后端联系的过程

3、get、post代码封装

通过路由请求数据时，我们要用到get、post请求方法。我们在src/util.js工具文件中封装一下这两个方法

（1）打开src/util.js文件，我们先在第一行引入src/config.js文件

import config from './config'

（2）将wx.request请求API包装成一个Promise对象，然后将Promise对象封装在request()函数中

//参考代码，无需粘贴
//export function showSuccess (text) {
//...
//}


//需要添加的部分
//将Promise对象封装在request()函数中
function request (url, method, data) {
  //将wx.request请求API包装成一个Promise对象
  return new Promise((resolve, reject) => {
    //wx.request是微信的API
    wx.request({
      url: config.host + url,
      method,
      data,
      success: function (res) {
        console.log('请求返回到前端的信息：',res)
        //当返回信息中res.data.code为0时，说明执行成功，将状态变成resolved
        //如果为-1说明执行失败，将状态变成rejected
        if (res.data.code === 0) {
          resolve(res.data.data)
        } else {
          reject(res.data)
        }
      }
    })
  })
}

wx.request是微信一个发起 HTTPS 网络请求的API，打开小程序文档—API—网络–发起请求可以看到具体应用
https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html

（3）代码解析：res.data.code === 0

后面我们完善后端代码后，会打印一下调用成功后，返回的res的值，当res.data.code为0时，说明后端返回数据成功，当res.data.code为-1时，说明后端遇到了错误，导致不能成功返回数据，

（4）添加get、post工具函数

在其他文档中引用import {get,post} from '@/util'，就可以直接使用get、post请求方法

//参考代码，无需粘贴
//function request (url, method, data) {
   ...
//}


// get工具函数
export function get (url, data) {
  //返回的是一个Promise对象
  return request(url, 'GET', data)
}
// post工具函数
export function post (url, data) {
  //返回的是一个Promise对象
  return request(url, 'POST', data)
}

作者：猫宁一
95后全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~ 热爱学习！热爱编程！
可关注【猫宁一】公众号领取我所有全栈项目代码哦~

点击查看课程目录：微信小程序全栈开发课程目录