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

优采云 发布时间: 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添加和修改数据,并将这些数据展示在小程序上。

0 个评论

要回复文章请先登录注册


官方客服QQ群

微信人工客服

QQ人工客服


线