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後全棧程序媛₍ᐢ •⌄• ᐢ₎一枚~ 熱愛學習！熱愛編程！
可關注【貓寧一】公衆號領取我所有全棧項目代碼哦~

點擊查看課程目錄：微信小程序全棧開發課程目錄