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)
}
目录
相关文章
|
8天前
|
人工智能 开发框架 机器人
AstrBot:轻松将大模型接入QQ、微信等消息平台,打造多功能AI聊天机器人的开发框架,附详细教程
AstrBot 是一个开源的多平台聊天机器人及开发框架,支持多种大语言模型和消息平台,具备多轮对话、语音转文字等功能。
2127 13
AstrBot:轻松将大模型接入QQ、微信等消息平台,打造多功能AI聊天机器人的开发框架,附详细教程
|
25天前
|
小程序 前端开发 关系型数据库
uniapp跨平台框架,陪玩系统并发性能测试,小程序源码搭建开发解析
多功能一体游戏陪练、语音陪玩系统的开发涉及前期准备、技术选型、系统设计与开发及测试优化。首先,通过目标用户分析和竞品分析明确功能需求,如注册登录、预约匹配、实时语音等。技术选型上,前端采用Uni-app支持多端开发,后端选用PHP框架确保稳定性能,数据库使用MySQL保证数据一致性。系统设计阶段注重UI/UX设计和前后端开发,集成WebSocket实现语音聊天。最后,通过功能、性能和用户体验测试,确保系统的稳定性和用户满意度。
|
1月前
|
小程序 IDE PHP
圈子源码如何打包生成App小程序/开发一个圈子系统软件所需要的费用体现在哪里?
将PHP源码打包成App的过程涉及多个步骤和技术选择。以圈子源码为例,首先明确需求,确定App功能和目标用户群体,并根据需求开发小程序页面,如用户注册、圈子列表等。源码准备阶段确保源码适用于小程序开发,环境配置需安装IDE(如微信开发者工具)及依赖库。最后在IDE中打包小程序并上传至管理平台,通过审核后发布。费用方面,模板开发成本较低,定制开发则更高,具体取决于需求复杂度和第三方服务费用。
74 0
|
29天前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
27 0
|
4月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
973 7
|
4月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
925 1
|
4月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
278 7
ly~
|
5月前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
114 6
|
4月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
335 1
|
4月前
|
小程序 前端开发 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【10月更文挑战第3天】随着移动互联网的发展,微信小程序凭借便捷的用户体验和强大的社交传播能力,成为企业拓展业务的新渠道。本文探讨了小程序全栈开发中的身份认证与授权机制,包括手机号码验证、微信登录、第三方登录及角色权限控制等方法,并强调了安全性、用户体验和合规性的重要性,帮助开发者更好地理解和应用这一关键技术。
141 5

热门文章

最新文章