您当前的位置:首页 > 电脑百科 > 站长技术 > 网站

10分钟快速搭建小程序管理后台,云开发CMS搭建可视化后台

时间:2021-01-14 10:11:16  来源:  作者:

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

CMS的好处如下:

10分钟快速搭建小程序管理后台,云开发CMS搭建可视化后台

 


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

开通路径如下图

10分钟快速搭建小程序管理后台,云开发CMS搭建可视化后台

 


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

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

点击开通内容管理,会有下面所示的弹窗。直接勾选协议,然后点击确定即可

10分钟快速搭建小程序管理后台,云开发CMS搭建可视化后台

 


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

10分钟快速搭建小程序管理后台,云开发CMS搭建可视化后台

 


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

10分钟快速搭建小程序管理后台,云开发CMS搭建可视化后台

 


设置好账号以后,就会提示开通成功。

10分钟快速搭建小程序管理后台,云开发CMS搭建可视化后台

 


开通成功以后,我们需要耐心地等待系统为我们初始化环境,

10分钟快速搭建小程序管理后台,云开发CMS搭建可视化后台

 


开通成功以后,会显示注销的按钮。

10分钟快速搭建小程序管理后台,云开发CMS搭建可视化后台

 

二,进入cms管理后台

我们上面开通好以后,接下来就要拿到进入管理后台的链接了。如果没有下面所示的内容,记得把自己的开发者工具升级到最新版本。

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

10分钟快速搭建小程序管理后台,云开发CMS搭建可视化后台

 

2-2,然后选中内容管理即可。

10分钟快速搭建小程序管理后台,云开发CMS搭建可视化后台

 

2-3,拿到后台地址

10分钟快速搭建小程序管理后台,云开发CMS搭建可视化后台

 


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

10分钟快速搭建小程序管理后台,云开发CMS搭建可视化后台

 


输入自己前面设置的用户名和密码即可。登录后的页面如下

10分钟快速搭建小程序管理后台,云开发CMS搭建可视化后台

 

三,创建项目

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

10分钟快速搭建小程序管理后台,云开发CMS搭建可视化后台

 


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

10分钟快速搭建小程序管理后台,云开发CMS搭建可视化后台

 


进入我们的项目

10分钟快速搭建小程序管理后台,云开发CMS搭建可视化后台

 


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

四,创建内容模型(数据表)

我们上面项目初始化成功以后,我们就要创建我们的内容模型了,内容模型我们云开发里的集合(数据库)是对应的。
如我们这里以创建商品模型为例。

4-1,直接点击创建模型

10分钟快速搭建小程序管理后台,云开发CMS搭建可视化后台

 

4-2,输入展示名称和数据库名

10分钟快速搭建小程序管理后台,云开发CMS搭建可视化后台

 


点击创建以后,可以看到我们云开发数据库里增加了一个goods集合。

10分钟快速搭建小程序管理后台,云开发CMS搭建可视化后台

 


数据表创建成功以后,我们接下来就要往里面添加商品数据了。

五,添加商品数据

我们到内容集合里找到我们上面创建的数据表,就可以往里面添加数据了。

10分钟快速搭建小程序管理后台,云开发CMS搭建可视化后台

 

5-1,新建数据

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

10分钟快速搭建小程序管理后台,云开发CMS搭建可视化后台

 


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

10分钟快速搭建小程序管理后台,云开发CMS搭建可视化后台

 


这肯定不是我们想要的,所以我们在上面第四步创建内容模型的时候肯定少设置什么了。

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

10分钟快速搭建小程序管理后台,云开发CMS搭建可视化后台

 


想一想我们的商品需要什么字段。

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

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

5-3,添加商品名

我们的商品名,用单行字符串就,并且是必填字段。

10分钟快速搭建小程序管理后台,云开发CMS搭建可视化后台

 


然后点击添加,可以看到我们的商品表里成功的多了一个商品名的字段。

10分钟快速搭建小程序管理后台,云开发CMS搭建可视化后台

 

5-4,添加商品价格

商品价格我们用数字类型,必填字段

10分钟快速搭建小程序管理后台,云开发CMS搭建可视化后台

 


添加成功

10分钟快速搭建小程序管理后台,云开发CMS搭建可视化后台

 

5-5,添加商品图片

我们的商品图片应该是一组图片,所以我们添加商品图片字段时选择图片类型,然后允许有多个内容,必填项。

10分钟快速搭建小程序管理后台,云开发CMS搭建可视化后台

 


添加成功

10分钟快速搭建小程序管理后台,云开发CMS搭建可视化后台

 

5-6,添加商品详情页

商品详情页,我们可以是纯文字,也可以是图文混合。为了让详情页更加美观,我们这里用富文本。

10分钟快速搭建小程序管理后台,云开发CMS搭建可视化后台

 


添加成功

10分钟快速搭建小程序管理后台,云开发CMS搭建可视化后台

 


完整的商品表创建成功以后,我们就可以去查看商品表里的具体数据了。

10分钟快速搭建小程序管理后台,云开发CMS搭建可视化后台

 


可以看到我们除了创建时间和修改时间有值外,其余的都没有值。

5-7,修改表数据

那么我们可以点击编辑按钮,来为空字段添加值。

10分钟快速搭建小程序管理后台,云开发CMS搭建可视化后台

 


然后添加具体的数据

10分钟快速搭建小程序管理后台,云开发CMS搭建可视化后台

 

5-8,编辑商品详情

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

10分钟快速搭建小程序管理后台,云开发CMS搭建可视化后台

 


编辑好以后,记得点击一下更新

10分钟快速搭建小程序管理后台,云开发CMS搭建可视化后台

 


那么我们就创建了一条完整的数据

10分钟快速搭建小程序管理后台,云开发CMS搭建可视化后台

 


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

10分钟快速搭建小程序管理后台,云开发CMS搭建可视化后台

 

5-9,添加一条新数据

我们上面的数据是通过修改的,那么我们再来演示一个新增数据。

10分钟快速搭建小程序管理后台,云开发CMS搭建可视化后台

 


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

10分钟快速搭建小程序管理后台,云开发CMS搭建可视化后台

 


这样我们就有两条数据了

10分钟快速搭建小程序管理后台,云开发CMS搭建可视化后台

 


然后去到我们的数据库,可以看到有两条数据。

10分钟快速搭建小程序管理后台,云开发CMS搭建可视化后台

 


接下来我们要做的就是在小程序里请求数据,然后展示数据。

六,获取商品列表

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

6-1,获取数据

10分钟快速搭建小程序管理后台,云开发CMS搭建可视化后台

 


结果报错,因为我们没有做云开发环境的初始化。这一点我强调过无数遍了。

10分钟快速搭建小程序管理后台,云开发CMS搭建可视化后台

 


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

10分钟快速搭建小程序管理后台,云开发CMS搭建可视化后台

 


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

10分钟快速搭建小程序管理后台,云开发CMS搭建可视化后台

 


我们需要修改goods表的权限,为所有人可读。

10分钟快速搭建小程序管理后台,云开发CMS搭建可视化后台

 


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

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

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

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

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

我们这里的goDetail方法,主要是点击列表的商品时,跳转到商品详情页。

10分钟快速搭建小程序管理后台,云开发CMS搭建可视化后台

 


可以看到我们进入详情页时成功的携带了商品id,我们请求详情页的数据,就主要靠这个id了。

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

7-1,请求详情页数据

10分钟快速搭建小程序管理后台,云开发CMS搭建可视化后台

 

7-2,编写wxml和js

10分钟快速搭建小程序管理后台,云开发CMS搭建可视化后台

 

7-3,效果图

最好看下显示的效果

10分钟快速搭建小程序管理后台,云开发CMS搭建可视化后台

 


当然了,样式比较丑,后面有机会再优化吧。

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



Tags:小程序   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
支付宝拥有一系列城市便民服务功能,可以帮助我们在线查看各种信息,结婚状态也可以查询了,那么具体怎么操作?今天小编就为大家带来这篇教程,还不会的同学快来学习一下吧!支付宝怎么...【详细内容】
2021-12-24  Tags: 小程序  点击:(5)  评论:(0)  加入收藏
有不少同学学完Python后仍然很难将其灵活运用。我整理15个Python入门的小程序。在实践中应用Python会有事半功倍的效果。01 实现二元二次函数实现数学里的二元二次函数:f(x,...【详细内容】
2021-12-22  Tags: 小程序  点击:(32)  评论:(0)  加入收藏
微信小程序“无障碍急救平台”日前上线,解决听障人士120急救呼叫难题。听障人士在日常生活、工作中常有信息缺失、沟通不良的困难。如果自身或身边人突发急症,则需要依靠他人...【详细内容】
2021-12-15  Tags: 小程序  点击:(9)  评论:(0)  加入收藏
一、项目背景随着小程序在用户规模和商业化上取得的极大成功,各大平台都推出了自己的小程序。然而这些平台的小程序开发在语法上又不尽相同,不同平台小程序代码的维护需要投入...【详细内容】
2021-11-05  Tags: 小程序  点击:(65)  评论:(0)  加入收藏
现如今卖东西的渠道是越来越多,如今在微信小程序也能开店卖东西了,有的小伙伴想在小程序上卖东西但不知道该怎么做,下面就来讲讲微信小程序如何做店铺,利用微信小程序!但凡得到公...【详细内容】
2021-11-03  Tags: 小程序  点击:(32)  评论:(0)  加入收藏
作者:灰灰来源:JS每日一题 一、背景传统的web开发实现登陆功能,一般的做法是输入账号密码、或者输入手机号及短信验证码进行登录服务端校验用户信息通过之后,下发一个代表登录态...【详细内容】
2021-10-29  Tags: 小程序  点击:(43)  评论:(0)  加入收藏
一、微信服务号主要偏于服务交互(类似银行,114,提供服务查询),认证前后都是每个月可群发4条消息(不适用于个人)二、微信订阅号主要偏于为用户传达资讯(类似报纸杂志),认证前后都是每天...【详细内容】
2021-10-22  Tags: 小程序  点击:(82)  评论:(0)  加入收藏
总结列举微信小程序开放能力清单 硬件能力 蓝牙 NFC读写 连接WIFI设备 开放能力 ...【详细内容】
2021-09-27  Tags: 小程序  点击:(60)  评论:(0)  加入收藏
功能说明脱离公众号下的小程序,单独使用功能特点小程序:是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。也体现了“用...【详细内容】
2021-09-27  Tags: 小程序  点击:(46)  评论:(0)  加入收藏
随着人们生活水平的不断提高,如今智能电视的普及率已经非常高。然而大家在使用智能电视的时候经常会遇到“无法安装第三方应用”的情况。为了解决这个问题,今天我以市场占有率...【详细内容】
2021-09-15  Tags: 小程序  点击:(81)  评论:(0)  加入收藏
▌简易百科推荐
今天我们来聊一下北京地区的《ICP经营许可证》有多好办,现在的互联网上提供的商机越来越多,增值电信业务十分火爆,企业通过互联网突破地域的限制,把公司产品卖到更远的地方,同时...【详细内容】
2021-12-17  梦想理应飞翔Yy    Tags:《ICP经营许可证》   点击:(12)  评论:(0)  加入收藏
转自: https://blog.kermsite.com/p/blog-intro/由于格式问题,部分链接、表格可能会失效,若失效请访问原文此专题将详细介绍如何从零开始搭建一个个人博客。Dec 01, 2021阅读时...【详细内容】
2021-12-17  LaLiLi    Tags:个人博客   点击:(6)  评论:(0)  加入收藏
SP证是第二类增值电信业务经营许可证的简称。分为全网SP证和地网SP证。申请经营许可证是在工信部申请,全网SP经营许可证的有效期是5年,全网SP许可证在工信部办理全网SP续期,地...【详细内容】
2021-11-01  s陳述    Tags:sp证书   点击:(38)  评论:(0)  加入收藏
现在还有许多人不知道EDI许可证是什么东西今天我就来给大家讲解一下.EDI许可证就是一种增值电信业务经营许可证。是针对在线数据处理和交易处理业务需求的专业资格证书。 《...【详细内容】
2021-10-28  soberXx    Tags:edi许可证   点击:(75)  评论:(0)  加入收藏
元素的化学概念,如周期表中的化学元素,一切物质都是由元素构成的。对程序员而言,网站建设制作就是代码构成网站。企业网站设计者也收集了各种各样的元素,但并非所有元素都需要运...【详细内容】
2021-10-26  南宁云尚网络    Tags:企业网站   点击:(39)  评论:(0)  加入收藏
在运营网站的过程中,有一件不可忽略的事情。那就是网站上线之前需要完成 ICP 备案。说到这里,很多朋友就提出疑问了~· 什么是 ICP 备案呢?· ICP 备案需要哪些材...【详细内容】
2021-10-22  启测云    Tags:ICP备案   点击:(45)  评论:(0)  加入收藏
最近有朋友问我,我公司有外资就不能申请ICP许可证了么?外资的定义是什么?其实是可以的,但有一个特定条件必须满足,外资公司是指公司有外资股东,比如香港、加拿大、美国、韩国等等,...【详细内容】
2021-10-21  小白速看Z    Tags:ICP   点击:(51)  评论:(0)  加入收藏
自互联网出现以来,超文本传输协议http协议被广泛用于在Web浏览器和网站服务器之间传递信息,但随着互联网的发展,另一种协议——https出现,并与http一同服务于这个互联...【详细内容】
2021-10-20  我是FEIYA    Tags:https   点击:(44)  评论:(0)  加入收藏
Grafana Loki 是一个日志聚合工具,它是功能齐全的日志堆栈的核心。图片来自 包图网先看看结果有多轻量吧: Loki 是一个为有效保存日志数据而优化的数据存储。日志数据的高效索...【详细内容】
2021-09-14    51CTO  Tags:Loki日志   点击:(97)  评论:(0)  加入收藏
背景最近做微信小程序开发比较多,大家知道线上微信小程序为了安全起见,要求后端通信协议必须是HTTPS,这就要求需要安装证书。为了测试预发布线上环境,特地买了个最便宜的域名,为...【详细内容】
2021-09-14  小李子说程序    Tags:HTTPS证书   点击:(124)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条