【实战】云开发菜谱小程序 —— 数据篇

上一篇文章已经介绍完了前端所需要用到的技术以及环境的搭建，然后静态页面基本已经编写完了;

现在开始进行前后端的联调之前，我们需要进行数据库的设计以及云函数的编写，这样我们才能动态的进行数据的读写。

数据库

步骤

• 打开云开发环境

• 建立集合（也就是表）

• 插入数据

表设计

这里我用到了三张表：食物表，菜系表，菜单表

表设计如下所示：

food_list

字段	类型	说明
_id	string
title	string	食物名称

category_list

字段	类型	说明
_id	string
title	string	菜系名称

menu_list

字段	类型	说明
_id	string
categoryType	string	菜系类型（关联菜系表）
desc	string	做法介绍（富文本）
flavor	string	调味品
foodDesc	string	食材
foodType	string	食物类型（关联食物表）
order	number	排序
pic	string	图片
readed	number	已读量
title	string	名称

sql

这里跟我们常规的 mysql 语句编写还是有很大不同，并不是简单地编写一句sql语句，然后通过api调用获取结果就可以了

这里用到的是小程序提供的云数据库，需要结合云端提供一系列函数进行拼接：模糊查询，插入，连表查询等等；这里只列出项目中用到的一些sql，有兴趣的可以参考小程序文档：云数据库

菜单sql举例

• 获取菜单列表

db.collection('menu_list').get()

• 根据id获取菜单（菜单详情页）

db.collection.('menu_list').doc('f10018335eaa51ab002239cf4c705b38').get()

• 根据名称模糊搜索菜单（菜单搜索页）

db.collection('menu_list').where({
  title: db.RegExp({
    regexp: '菜品',
    options: 'i',
  })
}).get()

• 根据某种食物下的菜单列表

db.collection('menu_list').where({
  foodType: '1',
}).get()

云函数

云函数即在云端（服务器端）运行的函数。在物理设计上，一个云函数可由多个文件组成，占用一定量的 CPU 内存等计算资源；各云函数完全独立；可分别部署在不同的地区。开发者无需购买、搭建服务器，只需编写函数代码并部署到云端即可在小程序端调用，同时云函数之间也可互相调用。

详细流程可以参考小程序文档：云函数

本地调试

下面的官方提供的例子就十分详细了，大家可以看看：云函数本地调试

云函数举例

• 在 cloudfunction 目录下创建子目录 food

• 初始化 npm

npm init

• 安装云函数包

npm install --save wx-server-sdk

• 编写云函数

const cloud = require('wx-server-sdk')

cloud.init()

exports.main = async (event, context) => {
  const { id = '' } = event

  const db = cloud.database()
  const params = id ? { _id: id } : null

  if (params) {
    let result = await db.collection('food_list').where(params).get()
    result = result.data.length > 0 ? result.data[0] : null

    return {
      code: 200,
      message: 'ok',
      data: {
        data: result
      }
    }
  }

  const result = await db.collection('food_list').get()
  return {
    code: 200,
    message: 'ok',
    data: {
      list: result.data
    }
  }
}

• 开启本地调试

• 客户端调用云函数

// 通用调用方法
const request = (cloudName, data) => {
  return new Promise((resolve, reject) => {
    wx.cloud.callFunction({
      name: cloudName,
      data,
    }).then(res => {
      const { code, message } = res.result
      if (code == 200) {
        return resolve(res.result.data)
      } else {
        return reject({ code, message })
      }
    }).catch(err => {
      return reject(err)
    })
  })
}

// 执行
const fetchMenuList = ({ id } = {}) => {
  return request(
    'food', 
    {
      _id: id
    }
  )
}

结尾

本文到这里基本就告一段落了，简单的一期功能从前端设计，到数据库设计，到云函数编写，我们接下来就可以进行将项目前后端进行联调起来；

后期我把项目完善以后，会把源码地址发出来；

点关注，不迷路，谢谢大家支持。