10分钟快速搭建小程序管理后台，借助云开发CMS搭建可视化的数据管理网页平台

咱们以前用云开发时，想作个数据管理后台，只能用小程序开发工具自带的操做后台，而后直接在数据库里操做数据。这样对程序员没有什么，但是咱们的程序开发出来也要给不懂程序的人使用的。如何让这些人也能够很好的管理咱们云开发的数据库呢。这个时候咱们就要用vue或者传统web开发实现一个网页管理后台，经过这个直接管理云开发了。可是开发这样一个网页后台，无疑会增长咱们的工做量。因此咱们今天借助云开发官方推出的CMS功能，来快速的搭建一个云开发的网页管理后台。

CMS的好处以下：

官方文档：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/extensions/cms/introduction.html

开通路径以下图

下面就来教你们如何快速的开通这个可视化的内容管理平台。

一，直接开通内容管理系统(CMS)

点击开通内容管理，会有下面所示的弹窗。直接勾选协议，而后点击肯定便可

这里的按量付费不用担忧，官方每个月都会给咱们一部分免费额度的，咱们学习的话，这个免费额度基本上够用了。
这里点击确认后，咱们还要再次点击内容管理上面的开通按钮，而后会出现下面的弹窗。直接点击下一步便可。

而后须要初始化一个管理员帐号，这里本身定义便可，设置好之后，最好记到小本本上，后面会常常用到。

设置好帐号之后，就会提示开通成功。

开通成功之后，咱们须要耐心的等待系统为咱们初始化环境，

开通成功之后，会显示注销的按钮。

二，进入cms管理后台

咱们上面开通好之后，接下来就要拿到进入管理后台的连接了。若是没有下面所示的内容，记得把本身的开发者工具升级到最新版本。

2-1，点击工具栏顶部的更多，

2-2，而后选中内容管理便可。

2-3，拿到后台地址

拿到后台地址后，直接在浏览器里打开。

输入本身前面设置的用户名和密码便可。登陆后的页面以下

三，建立项目

咱们第一次进入cms后台，须要本身建立一个新的项目。

建立成功后，能够看到咱们的项目。

进入咱们的项目

到这一步咱们的cms管理后台就已经建立成功了，接下来咱们要管理咱们的数据了。

四，建立内容模型(数据表)

咱们上面项目初始化成功之后，咱们就要建立咱们的内容模型了，内容模型咱们云开发里的集合（数据库）是对应的。
如咱们这里已建立商品模型为例。

4-1，直接点击建立模型

4-2，输入展现名称和数据库名

点击建立之后，能够看到咱们云开发数据库里增长了一个goods集合。

数据表建立成功之后，咱们接下来就要往里面添加商品数据了。

五，添加商品数据

咱们到内容集合里找到咱们上面建立的数据表，就能够往里面添加数据了。

5-1，新建数据

这个时候咱们直接建立，能够看到只有两个字段

到数据库里看也是这样，虽然成功的添加了一条数据，可是这个数据太简单了吧。只有建立时间和修改时间

这确定不是咱们想要的，因此咱们在上面第四步建立内容模型的时候确定少设置什么了。

5-2，往数据表里添加字段

想想咱们的商品须要什么字段。

• 商品名
• 商品价格
• 商品图片
• 商品详情

暂且就这些吧，接下来咱们就要一个个往数据表里添加字段了。

5-3，添加商品名

咱们的商品名，用单行字符串就，而且是必填字段。

而后点击添加，能够看到咱们的商品表里成功的多了一个商品名的字段。

5-4，添加商品价格

商品价格咱们用数字类型，必填字段

添加成功

5-5，添加商品图片

咱们的商品图片应该是一组图片，因此咱们添加商品图片字段时选择图片类型，而后容许有多个内容，必填项。

添加成功

5-6，添加商品详情页

商品详情页，咱们能够是纯文字，也能够是图文混合。为了让详情页更加美观，咱们这里用富文本。

添加成功

完整的商品表建立成功之后，咱们就能够去查看商品表里的具体数据了。

能够看到咱们除了建立时间和修改时间有值外，其他的都没有值。

5-7，修改表数据

那么咱们能够点击编辑按钮，来为空字段添加值。

而后添加具体的数据

5-8，编辑商品详情

咱们商品详情用的是富文本，那么咱们最好弄个简单的图文混排。

编辑好之后，记得点击一下更新

那么咱们就建立了一条完整的数据

能够看出咱们的修改时间也随之发生了变化

5-9，添加一条新数据

咱们上面的数据是经过修改的，那么咱们再来演示一个新增数据。

其实新增数据很简单，和咱们上面修改数据同样。无非修改是要先有数据，再去修改。新增是直接新加。
填好数据记得点建立

这样咱们就有两条数据了

而后去到咱们的数据库，能够看到有两条数据。

接下来咱们要作的就是在小程序里请求数据，而后展现数据。

六，获取商品列表

首先咱们要获取商品列表，新建一个商品列表页面，而后在js的onload方法里请求数据。

6-1，获取数据

结果报错，由于咱们没有作云开发环境的初始化。这一点我强调过无数遍了。

还不知道的同窗，去看下我云开发入门的文章和视频。

而后能够看到咱们请求成功了，可是没有数据，为何呢？？

咱们须要修改goods表的权限，为全部人可读。

这样就能够看到，咱们成功的请求到了两条数据。

6-2，把数据填充到页面上

上面数据获取到了，咱们接下来就要把数据填充到页面了，其实以前云开发有讲过，我这里再也不啰嗦，直接上代码。

• wxml和wxss页面比较简单
  
• js页面其实也没有很复杂
  

  6-3，点击跳转到商品详情

  咱们这里的goDetail方法，主要是点击列表的商品时，跳转到商品详情页。
  
  能够看到咱们进入详情页时成功的携带了商品id，咱们请求详情页的数据，就主要靠这个id了。

  七，请求并加载商品详情页

  7-1，请求详情页数据

  7-2，编写wxml和js

  7-3，效果图

  最好看下显示的效果
  
  固然了，样式比较丑，后面有机会再优化吧。

到这里咱们的cms可视化管理后台就完整的搭建好了，也给你们简单的演示了cms添加和修改数据，而且在小程序上展现了这些数据。