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

2024-09-17 12:31:56 浏览数 (1)

准备工作 ,下载好微信开发者工具
  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 一键生成数据管理应用

点击内容管理,生成应用

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

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

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

点击发布

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

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

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

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

0 人点赞