通过小程序云搭建电商后台服务

上一章已经讲述了小程序云及其使用方法，在这里，本章主要讲解如何通过小程云搭建一个电商的后台服务。本章不会拘泥于每个数据集合的具体字段或是具体代码，而是主要介绍一个电商后台搭建思路，以及前后端的交互方式。正所谓授人以鱼不如授人以渔。

后台服务搭建思路

首先，我们知道一个最简单的后端程序就是，开启一个HTTP服务，连接上数据库，然后根据收到的请求进行相关操作，例如数据库的增删查改，返回HTML，返回接口数据之类，如果要外网访问还要部署上线等等。

而用上了小程序云之后，因为云函数这个概念，我们免去了开启服务器和部署的步骤。同时，小程序是天然前后端分离的，也不需要返回HTML。所以在这种情况下，我们所搭建的后台服务最主要为了实现两个部分的内容，分别是数据库的建立和前后端的数据交互。

数据库建立

数据库建立，指的是数据集合及一些初始数据的创建。在我们搭建的这个 Demo 里，主要是有以下数据集合。

17实战篇 3：通过小程序云搭建电商后台服务 - 图1

  • Information - 首页的资讯数据集，主要是以一个资讯为单位的数据集合，一个资讯可能含有商店图片，商店介绍，商品介绍等，主要作导购作用，点击后引导至相关页面。
  • Shop - 商店页的数据集，以商店为单位，一个商店页面里主要是各种楼层数据。
  • Commodity - 商品的数据集，显然，一个商品数据自然就是该商品所需要的各种信息。
  • Cart - 购物车的数据集，以用户为单位存放购物车数据。
  • Order - 订单的数据集，以用户为单位存放订单数据。
  • User - 用户信息的数据集，存放用户信息数据。

上面所讲述的 6个数据集，基本就涵盖了一个最简单的电商所需要的各种数据，可以构成一个完整的购物流程。

同时如下图，还可以设置数据集权限。例如将Information、Shop、Commodity设置为所有用户可读、仅管理员可写；将Cart、Order、User改成仅创建者及管理员可读写。通过权限限制，增加了数据集的可靠性。

17实战篇 3：通过小程序云搭建电商后台服务 - 图2

数据交互

数据集建立起来后，再往里面填充一些假数据，基本的数据就有了，那么在小程序中如何进行数据交互？

如果不是用小程序云，自然是通过request拉取接口数据，进行展示。而在使用了小程序云的情况下，通过官方提供的sdk，主要有两种办法进行数据拉取：

  1. 直接在小程序端操作数据库，获取所需数据，并进行增删查改等操作
  2. 使用云函数，把数据库的操作放到云端；然后在小程序端调用云函数，达到类似调用接口的效果

第一种方法其实比较适合一些简单的，对数据要求不高，量也不大的小程序。不然在小程序的代码中混合着数据库操作，实践起来不太优雅，也不利于维护。

这里重点说下第二种方法。上篇文章有提到了云函数的概念，这里再回顾一下，所谓云函数，就是将一个函数放在 Node.js（即服务端）环境下运行。因此，我们可以将数据库的操作放到云函数中执行，然后在小程序中调用云函数，达到一种类似调用接口的效果。先看云函数的目录：

  1. ├── demo                          代码目录
  2. |   ├── client                    小程序代码目录
  3. |       ├── ...            
  4. |   ├── cloud                     小程序云相关代码目录
  5. |       ├── functions             云函数相关目录 
  6. |           ├── shop              shop 云函数目录
  7. |               ├── index.js      入口函数
  8. |               ├── getShop.js    getShop.js
  9. |               ├── package.json
  10. |               ├── ...
  11. |   ├── project.config.json       小程序配置文件
  12. |   ├── tcb.json                  小程序云配置文件
  13. └── README.md                     readme 文件

这是这个整个 Demo 的目录结构，名字叫 shop 的云函数的具体目录在cloud/functions/shop下，可以见到有一个入口文件index.js，还有其它的子函数。下面看具体代码：

  1. // index.js
  2. const app = require('tcb-admin-node')   // 官方提供的node-sdk
  4. const { getInformation } = require('./getInformation.js')
  5. const { getShop } = require('./getShop.js')
  7. app.init({
  8.   envName: 'taro-ebook-23bbcb',
  9.   mpAppId: 'wx9504f077bdc24ea2',
  10. })
  12. exports.main = async (event) => {
  13.   const db = app.database()
  14.   const { func, data } = event
  15.   let res
  16.   if (func === 'getInformation') {
  17.     res = await getInformation(db)
  18.   } else if (func === 'getShop') {
  19.     res = await getShop(db, data)
  20.   }
  22.   return {
  23.     data: res
  24.   }
  25. }
  1. // 入口函数引用到的getShop函数
  2. // getShop.js
  3. async function getShop (db, venderId) {
  4.   const shopColl = db.collection('shop')
  5.   const commColl = db.collection('commodity')
  6.   const _ = db.command
  8.   const res = await shopColl.where({
  9.     venderId: _.eq(Number(venderId))
  10.   }).get()
  12.   const shopData = res.data[0]
  13.   const floors = await Promise.all(shopData.floors.map(async (floor) => {
  14.     let res = await commColl.where({
  15.       skuId: _.in(floor.commodities)
  16.     }).get()
  17.     floor.commodities = res.data
  18.     return floor
  19.   }))
  20.   shopData.floors = floors
  22.   return shopData
  23. }
  25. exports.getShop = getShop

在这个例子中，笔者将一个云函数当成一个模块相关函数的入口，根据函数传入的参数来决定调用哪个函数。而被具体调用的函数，执行的是一些数据的操作，返回数据。也就是说，在这个 Demo 里一个云函数是一个数据模块的入口，里面引用了许多待被调用的具体函数，视入参而定。

以数据模块为单位分割云函数，是笔者觉得比较好的做法。一来云函数不必分割得太细，毕竟每个云函数都是独立部署的，省去了一些繁琐的操作；二来以数据模块为单位，就有点类似我们传统后端的 MVC 模式，易于开发者无缝接入。当然，这只是其中的一种云函数代码组织方式，并不代表就一定要遵循这样的方式，具体情况具体分析，还是要结合业务的实际情况。

而具体到小程序的调用，就更简单了，只是想请求接口的操作改为调用云函数的操作。比如：

  1. // 在小程序端，假如请求接口，我们是这样调用
  2. const res = await wx.request({
  3.     url: 'https://api.test.com/shop/xxx',
  4.     data: {
  5.         a: 'foo',
  6.         b: 'bar'
  7.     }
  8. })
  10. // 这是调用云函数的情况，调用刚才说到的shop云函数
  11. const res = await wx.cloud.callFunction({
  12.     name: 'shop',
  13.     data: {
  14.         func: 'getShop',
  15.         data: {
  16.             a: 'foo',
  17.             b: 'bar'
  18.         }
  19.     }
  20. })

可以见到，仅仅是将调用wx.request改为调用wx.cloud.callFunction，其它的地方并不需要多改变什么。返回的数据也是可以自己定义的，所以说是达到了调用接口的效果。

不过云函数有一个缺点，就是每次都要上传部署后才能被小程序端调用，调试测试起来略显麻烦。一个比较好的调试方法是添加一个测试函数，在本地环境中使用 Node.js 进行测试。

17实战篇 3：通过小程序云搭建电商后台服务 - 图3

而官方也在 IDE 中提供了一个测试的方法，同时可以自行定制模板，左边还能看到每次云函数的调用状态。

17实战篇 3：通过小程序云搭建电商后台服务 - 图4

综上，使用小程序云进行数据交互并不复杂，甚至可以说是简单快捷，极大地加速了开发一整套全栈小程序的效率。

小结

使用小程序云开发电商后台服务与传统的开发方式相比，优势是显而易见的。免去了服务器部署，运维等步骤，为一些不太熟悉后台开发方面的前端开发者提供了一个快速上手，搭建后台服务的方式。有需求的读者可以使用起来。