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)
}
目录
相关文章
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
3550 1
|
10月前
|
人工智能 自然语言处理 小程序
技术小白如何利用DeepSeek半小时开发微信小程序?
通过通义灵码的“AI程序员”功能,即使没有编程基础也能轻松创建小程序或网页。借助DeepSeek V3和R1满血版模型,用户只需用自然语言描述需求,就能自动生成代码并优化程序。例如,一个文科生仅通过描述需求就成功开发了一款记录日常活动的微信小程序。此外,通义灵码还提供智能问答模式,帮助用户解决开发中的各种问题,极大简化了开发流程,让普通人的开发体验更加顺畅。
3169 11
技术小白如何利用DeepSeek半小时开发微信小程序?
|
9月前
|
小程序 Java 关系型数据库
weixin163基于微信小程序的校园二手交易平台系统设计与开发ssm(文档+源码)_kaic
本文介绍了一款基于微信小程序的校园二手物品交易平台的开发与实现。该平台采用Java语言开发服务端,使用MySQL数据库进行数据存储,前端以微信小程序为载体,支持管理员和学生两种角色操作。管理员可管理用户、商品分类及信息、交易记录等,而学生则能注册登录、发布购买商品、参与交流论坛等。系统设计注重交互性和安全性,通过SSM框架优化开发流程,确保高效稳定运行,满足用户便捷交易的需求,推动校园资源共享与循环利用。
|
9月前
|
小程序 关系型数据库 Java
weixin168“返家乡”高校暑期社会实践微信小程序设计与开发ssm(文档+源码)_kaic
本文探讨高校暑期社会实践微信小程序的开发与应用,旨在通过信息化手段提升活动管理效率。借助微信小程序技术、SSM框架及MySQL数据库,实现信息共享、流程规范和操作便捷。系统涵盖需求分析、可行性研究、设计实现等环节,确保技术可行、操作简便且经济合理。最终,该小程序可优化活动发布、学生信息管理和心得交流等功能,降低管理成本并提高工作效率。
|
10月前
|
小程序 JavaScript 前端开发
微信小程序开发全流程:从注册到上线的完整指南
这篇文章详细记录了微信小程序的完整开发到最终上线的每一个步骤。适合对小程序开发感兴趣的个人开发者或希望了解完整流程的学习者,涵盖了云开发、事件绑定、生命周期管理、组件使用等关键内容。
9248 12
|
11月前
|
JSON 缓存 小程序
微信小程序组件封装与复用:提升开发效率
本文深入探讨了微信小程序的组件封装与复用,涵盖组件的意义、创建步骤、属性与事件处理,并通过自定义弹窗组件的案例详细说明。组件封装能提高代码复用性、开发效率和可维护性,确保UI一致性。掌握这些技能有助于构建更高质量的小程序。
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
2511 0
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
576 0
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
316 0
在线课堂+工具组件小程序uniapp移动端源码
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
3296 3

热门文章

最新文章