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,处理文件进行读取或者修改等操作后,返回处理信息到前端,这就是整个前后端联系的过程

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

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后全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~ 热爱学习!热爱编程!
可关注【猫宁一】公众号领取我所有全栈项目代码哦~

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

你可能感兴趣的:(微信小程序全栈开发课程)