新云网站内容管理系统(如何快速的搭建一个云开发的网页管理后台图)
优采云 发布时间: 2022-04-12 06:26新云网站内容管理系统(如何快速的搭建一个云开发的网页管理后台图)
之前我们用云开发的时候,想做一个数据管理后台。我们只能使用小程序开发工具自带的操作后台,然后直接在数据库中操作数据。这对程序员来说没什么,但我们的程序是为不懂程序的人开发的。这些人怎么也管好我们云开发的数据库。这时候我们就需要使用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添加和修改数据,并将这些数据展示在小程序上。