新云网站内容管理系统(如何快速的搭建一个云开发的网页管理后台图)

　　新云网站内容管理系统(如何快速的搭建一个云开发的网页管理后台图)

　　之前我们用云开发的时候，想做一个数据管理后台。我们只能使用小程序开发工具自带的操作后台，然后直接在数据库中操作数据。这对程序员来说没什么，但我们的程序是为不懂程序的人开发的。这些人怎么也管好我们云开发的数据库。这时候我们就需要使用vue或者传统的web开发实现一个网页管理后台，通过它直接管理云开发。但是开发这样的网页背景无疑会增加我们的工作量。所以今天我们利用云开发官方推出的cms功能快速搭建云开发的web管理后台。

　　cms 的好处如下：

　　官方文档：

　　开启路径如下图

　　下面就教大家如何快速打开这个可视化内容管理平台。

　　1.直接激活内容管理系统（cms）

　　点击打开内容管理，会弹出如下图所示的窗口。只需勾选协议，然后单击确定。

　　这里不用担心按量付费，官方每个月都会给我们一部分免费额度。如果我们学习的话，这个免费名额基本就够了。

　　点击此处确认后，我们要再次点击内容管理上方的打开按钮，然后会出现如下弹窗。只需单击下一步。

　　然后需要初始化一个管理员账号，这里可以自己定义。设置好后最好记在小本子里，以后会经常用到。

　　账号设置好后会提示激活成功。

　　开启成功后，我们需要耐心等待系统为我们初始化环境。

　　激活成功后，将显示注销按钮。

　　2.进入cms管理后台

　　上面我们打开之后，接下来就是获取进入管理后台的链接了。如果下面未显示，请记住将您的开发人员工具升级到最新版本。

　　2-1，单击工具栏顶部的更多，2-2，然后选择内容管理。2-3、获取后台地址

　　获取后台地址后，直接在浏览器中打开。

　　输入您之前设置的用户名和密码。登录后的页面如下

　　三、创建项目

　　第一次进入cms后台，我们需要自己新建一个项目。

　　创建成功后就可以看到我们的项目了。

　　进入我们的项目

　　至此，我们的cms管理后台已经创建成功，接下来就需要对我们的数据进行管理了。

　　四、创建内容模型（数据表）

　　上述项目初始化成功后，我们将创建我们的内容模型，它对应于我们云开发中的集合（数据库）。

　　例如，我们在这里创建了一个商品模型。

　　4-1、直接点击创建模型 4-2、输入显示名和数据库名

　　点击创建后，可以看到我们的云开发数据库中已经添加了一个商品集合。

　　数据表创建成功后，接下来我们需要添加产品数据。

　　五、添加商品数据

　　我们去内容集合中找到我们上面创建的数据表，我们可以往里面添加数据。

　　5-1、新数据

　　这时候我们直接创建，可以看到只有两个字段

　　查看数据库时也是如此。虽然已经成功添加了一条数据，但是数据太简单了。只有创建时间和修改时间

　　这绝对不是我们想要的，所以我们在上面第 4 步中创建内容模型时一定少了一些设置。

　　5-2、给数据表添加字段

　　想想我们的产品需要哪些领域。

　　暂时就这些了，接下来我们将字段一一添加到数据表中。

　　5-3、添加产品名称

　　我们的产品名称，单行字符串，是必填字段。

　　然后点击添加，可以看到我们已经成功在我们的产品表中添加了一个产品名称字段。

　　5-4、添加商品价格

　　商品价格我们使用数字类型，必填项

　　添加成功

　　5-5、添加产品图片

　　我们的产品图片应该是一组图片，所以我们在添加产品图片字段的时候选择图片类型，然后允许多个内容，这个是必须的。

　　添加成功

　　5-6、添加产品详情页面

　　对于产品详情页面，我们可以使用纯文本或者图文结合的方式。为了让详情页更加美观，我们这里使用富文本。

　　添加成功

　　完整的商品表创建成功后，我们可以去查看商品表中的具体数据。

　　可以看到我们除了创建时间和修改时间没有任何价值。

　　5-7、修改表数据

　　然后我们可以单击编辑按钮为空字段添加值。

　　然后添加具体数据

　　5-8、编辑产品详情

　　我们使用富文本作为我们的产品细节，所以我们最好得到一个简单的图形和文本混合。

　　编辑好后记得点击更新

　　然后我们创建一个完整的数据

　　可以看出我们的修改时间也发生了变化。

　　5-9、添加新数据

　　上面的数据被修改了，我们来演示一个新的数据。

　　其实添加新数据很简单，就像修改上面的数据一样。修改无非就是先有数据，再修改。添加是直接添加。

　　填写数据记得点击创建

　　所以我们有两个数据

　　然后进入我们的数据库，可以看到有两条数据。

　　接下来我们要做的就是在小程序中请求数据，然后显示数据。

　　六、获取产品列表

　　首先我们需要获取商品列表，新建商品列表页面，然后在js的onload方法中请求数据。

　　6-1、获取数据

　　结果是一个错误，因为我们没有初始化云开发环境。我已经无数次强调了这一点。

　　对于那些还不知道的人，看看我的 文章 和有关云开发入门的视频。

　　然后可以看到我们的请求成功了，但是没有数据，为什么？?

　　我们需要修改商品表的权限才能被所有人阅读。

　　这样，我们可以看到我们成功请求了两条数据。

　　6-2、填写页面数据

　　以上数据已经获取，接下来我们将数据填充到页面中。事实上，云开发之前已经提到过。我这里就不啰嗦了，直接上代码。

　　至此，我们的cms可视化管理后台搭建完成，我们也简单演示了cms添加和修改数据，并将这些数据展示在小程序上。