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

简介: 数据库主要在后端操作,也就是server文件夹中


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


image.png


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)
        }
      }
    })
  })
}


(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)
}
目录
相关文章
|
6月前
|
人工智能 小程序 前端开发
一个小程序轻量AR体感游戏,开发实现解决方案
针对青少年运动兴趣不足问题,AR体感游戏凭借沉浸式互动体验脱颖而出。结合小程序“AI运动识别”插件与WebGL渲染技术,可实现无需外设的轻量化AR健身游戏,如跳糕、切水果等,兼具趣味性与锻炼效果,适用于儿童健身及职工团建,即开即玩,低门槛高参与。
|
6月前
|
移动开发 小程序 前端开发
小程序开发平台有哪些?哪个好
小程序的开发方式丰富多元,开发团队可根据自身的技术背景、项目具体需求以及资源状况,灵活挑选最为适宜的开发路径。以下将详细介绍几种主流的小程序开发方式。
606 1
|
7月前
|
消息中间件 人工智能 Java
抖音微信爆款小游戏大全:免费休闲/竞技/益智/PHP+Java全筏开源开发
本文基于2025年最新行业数据,深入解析抖音/微信爆款小游戏的开发逻辑,重点讲解PHP+Java双引擎架构实战,涵盖技术选型、架构设计、性能优化与开源生态,提供完整开源工具链,助力开发者从理论到落地打造高留存、高并发的小游戏产品。
|
自然语言处理 搜索推荐 小程序
微信公众号接口:解锁公众号开发的无限可能
微信公众号接口是微信官方提供的API,支持开发者通过编程与公众号交互,实现自动回复、消息管理、用户管理和数据分析等功能。本文深入探讨接口的定义、类型、优势及应用场景,如智能客服、内容分发、电商闭环等,并介绍开发流程和工具,帮助运营者提升用户体验和效率。未来,随着微信生态的发展,公众号接口将带来更多机遇,如小程序融合、AI应用等。
|
8月前
|
小程序 JavaScript API
uni-halo + 微信小程序开发实录:我的第一个作品诞生记
这篇文章介绍了使用uni-halo框架进行微信小程序开发的过程,包括选择该框架的原因、开发目标以及项目配置和部署的步骤。
449 0
uni-halo + 微信小程序开发实录:我的第一个作品诞生记
|
11月前
|
小程序 前端开发 Android开发
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
2160 29
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
3973 7
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
4496 1

热门文章

最新文章

下一篇
开通oss服务