数据模型图文详解，让新手小白也能做个月饼礼盒管理系统

1. 官方下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

云开发数据模型实战

一、创建空白项目

1-1 首先是创建新项目

需要提前去注册一个属于自己的小程序，必须使用自己的appid，测试号无法创建环境。

1-2 获取appid

登录小程序管理后台，进入开发与服务目录下的开发管理，查看appid获取

1-3 创建项目

填入自己的appid，后端服务默认选择微信云开发

模板选择 全部来源，本次选择不使用模板

数据模型实战

2-1 开通云开发

进入开发者工具以后，云开发目前提供一个月的免费使用。

2-2 开通云后台

进入云开发控制台然后点击云后台或者云模板，开通后进入云后台

到这里只是开通了云后台和云模板，接下来还要继续开通cms

2-3 升级到基础版

默认的套餐只能创建5个数据表，不够我们使用，所以要升级下，选择基础版。

2-4 开通cms内容管理和新版数据管理

点击模板中心，也可以点击我的应用，然后再点击创建应用。

会跳转到微信云开发云后台网页里，需要点击模板中心。

点击模板市场，或者直接点击从模板市场安装

点击管理后台，就可以找到内容管理系统（CMS）

然后点击，可以看到两个选项，老用户可任意选择，新用户可选择使用新版数据管理

打开数据管理面板，直接打开新版数据管理或者内容管理，选择任一入口都可以创建新的数据模型

2-5 创建数据模型

先自己来创建一个数据模型，先从最简单的开始。默认是如下路径

2-5-1 对接已有数据库表并生成数据模型

2-5-2 可选择创建数据并配置数据模型

支持从使用模板创建，目前内置电商、项目管理、进销存、会员管理、博客模板

2-5-3 选择导入存量内容管理CMS模型

这里我们选择从空白创建，然后选择云数据库。

先创建一个good商品表的数据模型

然后点击添加字段

添加一个商品名和商品价格字段，数据类型要选数字

添加完字段以后，点击完成

good数据模型就创建好了

云数据库里也自动多了good表

2-6 在数据模型里添加数据

在数据模型里添加数据有以下几种方式：可以直接点击添加一行。

添加成功后，可以看到数据

可以去云数据库里刷新看到数据

还可以在内容管理里直接新增

在编辑页中，添加成功，提交

提交成功后，可以对内容进行筛选跟排序

也可在原有数据管理中直接修改数据，双击内容区域即可编辑修改

2-7 添加图片和多媒体数据

点开模型，然后点击配置模型，编辑字段

可以看出类型我们可以选择图片和多媒体。而多媒体又包含音视频文件等。

以图片和富文本为例，添加好以后记得点下保存。再去点内容管理，点击商品图片和商品介绍。

提交数据到数据库

数据库里就可以看到这个图片链接和富文本信息。

2-8 自动生成增删改查的代码

数据模型可以自动生成增删改查的代码。点开数据管理，选中一个数据模型，然后点击右上角的展开指引，就可以看到自动生成的代码了。在云函数，小程序，web网页里的增删改查代码都可以自动生成，直接展开使用。

2-9 支持在vue3或者web网页引用

支持web端网页也可以操作云数据库。还是点右上角的展开指引，可以看到web端引入和使用数据模型的代码。

2-9-1 npm安装依赖包

看上面自动生成的代码，要求我们先用npm安装依赖包。我这里以vue3项目为例。在vscode里打开命令行终端

然后执行，等待依赖包下载

2-9-2 引入依赖包请求数据

我们随便找一个页面引入依赖包

然后我们在页面初始化的地方进行云开发数据模型的初始化

运行下vue3项目，可以看到请求到了数据模型里的数据。

打印一条数据试试，看看得到的数据

2-9-4 添加数据

我们不仅可以查询数据，也可以使用自动生成的添加数据的代码。可以看到添加成功。

可看到完整代码如下：

2-10 一键生成数据管理应用

点击内容管理，生成应用

选择数据模型，选择要生成的场景，这里选择增删改查的页面，选择页面布局为无

选择修改为正式数据，点击预览

就可以查看测试发布后的正式应用效果了

点击发布

发布后，先对用户角色权限进行发布，在去配置应用列表展示

选中生成的应用，检查当前用户角色状态，点击发布角色

根据提示在工作台设置的应用管理中开启列表展示

最后，在云后台的的应用管理，可以看到一个基础的中秋月饼礼盒管理应用啦🎉