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)
}
目录
相关文章
|
3月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
772 7
|
3月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
784 1
|
3月前
|
开发框架 小程序 JavaScript
小程序代码丢失!反编译找回
小程序源代码的容易获取问题确实存在一些潜在的安全隐患。然而,现在的小程序开发框架采用像 Babel 这样的打包工具,将 JavaScript 逻辑代码混合在一个文件中并进行转编译,使其变得难以理解。
63 0
小程序代码丢失!反编译找回
|
3月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
267 1
|
3月前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
1233 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
3月前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
563 0
|
3月前
|
小程序
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
713 0
|
3月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
183 7
ly~
|
4月前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
93 6
|
3月前
|
小程序 前端开发 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【10月更文挑战第3天】随着移动互联网的发展,微信小程序凭借便捷的用户体验和强大的社交传播能力,成为企业拓展业务的新渠道。本文探讨了小程序全栈开发中的身份认证与授权机制,包括手机号码验证、微信登录、第三方登录及角色权限控制等方法,并强调了安全性、用户体验和合规性的重要性,帮助开发者更好地理解和应用这一关键技术。
99 5