新能力 | 云开发CMS内容管理系统,5分钟搞定小程序管理后台

小程序·云开发 同时被 3 个专栏收录
130 篇文章 3 订阅
114 篇文章 1 订阅
76 篇文章 0 订阅

小程序·云开发的云调用能力,让用户可以免鉴权快速调用微信的开放能力,极大节约了开发成本。现在,大家期待已久的云开发 CMS 内容管理系统,终于上线啦!顺便提示,接下来还可以二次开发哦!

云开发 CMS 管理系统是什么?

云开发 CMS 内容管理系统是云开发提供的一个扩展程序,可以在云开发控制台一键安装在自己的云开发环境中,方便开发人员和内容运营者随时随地管理小程序 / Web 等多端云开发内容数据。不用编写代码就可以使用,还提供了 PC /移动端浏览器访问支持,支持文本、富文本、图片、文件、关联类型等多种类型的可视化编辑。

WechatIMG685

先来看看云开发CMS的"庐山真面目"

首先我们通过几张截图来直观感受一下 CMS 内容管理系统扩展:

图1 云开发控制台的安装界面截图

图2 安装并配置好内容的 CMS 内容管理系统界面演示

图3 CMS 内容管理系统界面的移动端演示

云开发 CMS 内容管理系统有哪些功能特性 ?

特性介绍
免开发基于后台建模配置生成内容管理界面,无须编写代码
多端适配支持 PC/移动端访问和管理内容
功能丰富支持文本、富文本、图片、文件 等多种类型内容的可视化编辑,并且支持内容关联
权限控制系统基于管理员/运营者两种身份角色的访问控制
外部系统集成支持 Webhook 接口,可以用于在运营修改修改内容后通知外部系统,如自动构建静态网站、发送通知等
数据源兼容支持管理小程序/ Web / 移动端的云开发数据,支持管理已有数据集合,也可以在 CMS 后台创建新的内容和数据集合
部署简单可在云开发控制台扩展管理界面一键部署和升级

什么场景下适合使用 CMS ?

1. 适用于需要为小程序应用增加一个运营管理后台的业务

小程序应用有偏运营方面的文章编辑和发布、运营活动配置、素材管理等数据管理需求,使用 CMS 扩展之后,不用手动线上修改 db 数据,也不用投入人力物力开发管理后台,可以随时随地使用自己环境下部署的 CMS 内容管理系统来管理,同时还支持区分管理员和运营者的身份权限。

2. 适用于快速开发内容型的网站应用、小程序应用等场景

CMS 内容管理系统还可以帮助开发者提升开发网站应用、小程序应用的效率,省去一部分后端开发工作。例如安装了CMS 扩展之后,解决了内容和数据的管理和生产问题,直接可以结合前端应用框架读取 db 数据进行渲染。例如基于 CMS 可以快速开发博客、企业官网等小程序/网站应用,最后悄悄透露一下,云开发的官网 (http://cloudbase.net/) 就是基于 CMS 扩展 + Next.js + 云开发静态托管搭建和部署的

如何安装和使用 CMS ?

第一步:切换为按量付费

由于 CMS 扩展需要用到静态网站托管资源,必须在按量计费的环境下才可以部署,因此首先要切换计费方式为按量付费。

1. 微信小程序开发者
  • 登录微信开发者工具-云开发控制台

  • 在【云开发控制台】-【设置】-【环境设置】-【支付方式】中点击切换【按量付费】即可。

注意:这里需要先保证腾讯云账户中是有充值金额的哦~

img

2. 腾讯云开发者
  • 登录腾讯云云开发控制台

  • 在【云开发 CloudBase 控制台】-【环境】-【资源购买】-【计费模式】中点击【切换按量付费】即可。

image-20200518074405398

第二步:在腾讯云控制台安装扩展

  • 登录腾讯云控制台
    微信小程序开发者需要使用微信公众号登录image-20200518075106598
  • 在【云开发 CloudBase 控制台】-【扩展能力】-【扩展管理】中找到 CMS内容管理系统 扩展进行安装
  • 安装时需要进行资源的授权和扩展程序的配置,比如管理员和运营者的账号密码配置等,同时需要提供自定义登录的密钥,可以点击自定义登录密钥旁边的小图标了解如何填写。

image-20200518074852765

第三步:使用 CMS 内容管理系统

完成【CMS内容管理系统】的安装以后,然后访问该扩展的管理页,可以在【扩展运行方式】Tab 查看使用指引,依照文档完成 CMS 的使用,下面简单介绍一下快速上手的步骤,更多细节可以参考运行方式。

image-20200519094241387

访问 CMS 系统

CMS 扩展已经部署在当前环境下的静态网站托管中,访问路径为“静态托管的默认域名+安装设置的部署路径”

访问地址的格式如下:

云开发静态托管默认域名/部署路径,例如 https://xxxx.tcloudbaseapp.com/tcb-cms/

账号登录

打开 CMS 系统后首先会提示需要登录,我们首先使用使用安装扩展时设置的管理员账号和密码进行登录

内容建模

登录成功后,首先需要进行内容的建模设置,例如我们想为自己的博客应用(小程序/网站)来生成管理界面。

假设当前已有一个管理 文章的数据库集合 articles,我们可以在 CMS 管理后台新建一个 “文章” 内容(如果新建内容的时候指定的集合名不存在,CMS 扩展会自动新建集合)来生成“文章”类型的内容管理界面。

假设数据库集合 articles 的结构如下:

字段名类型描述
_idID文章唯一 id
nameString文章标题
coverString封面图,这里存放云开发的存储的文件的 cloudID
contentString文章内容,采用 markdown 格式
authorID作者的用户 id
createTimeDateTime创建时间
updateTimeDateTime更新时间
tagString[]标签,例如 ["serverless","cms"]
categoryString[]分类,例如 ["前端","开发"]

我们在“内容设置”中点击“新建”来创建“文章”类型时,可以对照上面的集合数据把字段类型和字段的限制进行配置,例如封面图可以直接选择 “图片”字段类型,文章内容可以直接选择 “Markdown” 类型,这样在生成的管理界面里可以直接上传图片和通过编辑器编写文章,保存在数据库集合的时候,依然会保存为数据库支持的类型,图片会存储为云存储的 CloudID, 内容会存储为字符串等。

image-20200518100000744

创建并保存之后会自动刷新生成”文章“的运营界面

管理内容

接下来就可以进行运营管理内容操作了,可以使用运营者身份登录,对新创建的“文章”进行操作,我们可以新建一篇文章。

文章发布成功后,即可在文章列表中看到这篇文章

使用内容数据

采用 CMS 管理的内容,依然可以通过云开发各端 SDK 进行访问(需要注意的是在前端访问时,需要正确设置数据库的安全规则设置,例如设置为所有用户可读,仅创建者可写)。

例如,在上面的例子里,我们需要在云函数中获取文章的标签是 CloudBase 的最新 10 条文章,可以采用以下代码来获取数据:

db.collection("articles")
  .where({ tag: "CloudBase" })
  .orderBy("createTime", "desc")
  .limit(10)
  .get();

获取到内容数据就可以在各种场景使用了,比如在小程序/ Web 中构建应用和网站,具体的CMS + 应用开发的实践可以关注后期我们的实践教程。

后续,云开发CMS内容管理系统将支持二次开发,用户可以自由定制自己的管理后台。云开发将始终坚持,为开发者提供一站式云服务!

image-20200519093538332

最后,小编赠上《5分钟部署云开发CMS系统》教程,帮助大家快快上车!

视频链接:

5分钟搭建一个云开发CMS内容管理系统

文档链接 :(CMS 内容管理系统链接)

https://cloud.tencent.com/document/product/876/44547

  • 7
    点赞
  • 3
    评论
  • 66
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

<h1> 技术选型 </h1> <h3> 1,前端 </h3> <p> 微信小程序原生框架 </p> <p> css </p> <p> JavaScript </p> <h3> 2,管理后台 </h3> <p> 云开发Cms内容管理系统 </p> <p> web网页 </p> <h3> 3,数据后台 </h3> <p> 小程序云开发 </p> <p> 函数 </p> <p> 数据库 </p> <p> 存储 </p> <p>   </p> <h1> 1,小程序端 </h1> <p> 1-1,首页 </p> <p> 首页有以下几个功能点 </p> <ol> <li> 点餐 </li> <li> 菜单浏览 </li> <li> 排号等位 </li> <li> 拨打电话 </li> <li> 顶部轮播图 </li> <li> 搜索菜品 </li> </ol> <p> <img src="https://img-blog.csdnimg.cn/20210215134004183.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpdXNoaV8xOTkw,size_16,color_FFFFFF,t_70" /> </p> <p> 这里点餐分两种 </p> <p> 1,可以设置直接点餐 </p> <p> 直接点餐:适合型饭店,或者奶茶类的快餐店。直接就可以下单,不用识别桌号 </p> <p> 2,也可设置扫码点餐 </p> <p> 扫码点餐适合中大型饭店,可以区分桌号,方便管理 </p> <p> <img src="https://img-blog.csdnimg.cn/20210215134222996.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpdXNoaV8xOTkw,size_16,color_FFFFFF,t_70" /> </p> <p> 我后面会教大家如何生成桌号二维码,只需要把对应桌号的二维码贴在餐桌上,用户点击 扫码点餐 识别二维码,即可获取到桌号信息。 </p> <p> 1-2,菜品浏览页 </p> <p> 菜品浏览分两种 </p> <p> 1,不带分类 </p> <p> 适合菜品少的时候 </p> <p> 2,带分类 </p> <p> 菜品多的时候,带分类更方便客户选择 </p> <p> 不带分类 </p> <p> <img src="https://img-blog.csdnimg.cn/20210215141637393.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpdXNoaV8xOTkw,size_16,color_FFFFFF,t_70" /> </p> <p>   </p> <p> 带分类 </p> <p>   </p> <p> <img src="https://img-blog.csdnimg.cn/20210215141502455.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpdXNoaV8xOTkw,size_16,color_FFFFFF,t_70" /> </p> <p> 1-3,搜索功能 </p> <p> 我们这里搜索有两个触发方式 </p> <p> 1,直接点击搜索图标 </p> <p> 2,点击键盘上的搜索键 </p> <p> <img src="https://img-blog.csdnimg.cn/20210215141852542.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpdXNoaV8xOTkw,size_16,color_FFFFFF,t_70" /> </p> <p> 1-4,搜索结果,支持模糊查询 </p> <p> 如我这里只搜‘鱼’,那么菜品中所有包含鱼的都可以搜索到 </p> <p> <img src="https://img-blog.csdnimg.cn/20210215142041898.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpdXNoaV8xOTkw,size_16,color_FFFFFF,t_70" /> </p> <p>   </p> <p> 1-5,购物车 </p> <p> 首先菜品列表页可以直接添加商品到购物车 </p> <p> <img src="https://img-blog.csdnimg.cn/20210215142147749.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpdXNoaV8xOTkw,size_16,color_FFFFFF,t_70" /> </p> <p> 购物车弹起后可以做如下操作 </p> <p> 1,增删单个菜品 </p> <p> 2,清空购物车 </p> <p> 3,删除菜品 </p> <p> 这些操作都和菜品列表是联动的,也就是菜品列表和购物车里增删个数,都是可以同步的。我会在项目预览章节的视频里做具体演示。 </p> <p> <img src="https://img-blog.csdnimg.cn/20210215142211467.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpdXNoaV8xOTkw,size_16,color_FFFFFF,t_70" /> </p> <p> 1-6,下单页 </p> <p> 下单页就是确认订单后进行下单支付的。有以下功能 </p> <ul> <li> 1,点餐明细 </li> <li> 2,价格计算 </li> <li> 3,桌号地址 </li> <li> 4,就餐人数 </li> <li> 5,添加备注 </li> <li> 6,点击下单 </li> </ul> <p> <img src="https://img-blog.csdnimg.cn/20210215142604579.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpdXNoaV8xOTkw,size_16,color_FFFFFF,t_70" /> </p> <p> 1-7,支付页 </p> <p> 支付页分两种方式 </p> <ul> <li> 1,模拟支付 </li> </ul> <p> 适合前期学习,毕业设计等演示类的场景。 </p> <ul> <li> 2,真实微信支付 </li> </ul> <p> 适合商用,但是使用微信支付必须要有营业执照,所以前期如果只是学习的话,建议使用模拟支付。 </p> <p> <img src="https://img-blog.csdnimg.cn/20210215142932366.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpdXNoaV8xOTkw,size_16,color_FFFFFF,t_70" /> </p> <p>   </p> <p> 1-8,我的订单页 </p> <p> 我的订单页分以下几个状态 </p> <ul> <li> 1,下单待上餐 </li> <li> 2,已上餐待评价 </li> <li> 3,订单完成 </li> <li> 4,订单取消 </li> </ul> <p> <img src="https://img-blog.csdnimg.cn/20210215143331534.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpdXNoaV8xOTkw,size_16,color_FFFFFF,t_70" /> </p> <p> 1-9,提交评论页 </p> <p> 我们可以对店家进行评论。 </p> <p> <img src="https://img-blog.csdnimg.cn/20210215143806687.png" /> </p> <p>   </p> <p> 1-10,评价列表页 </p> <p> 可以查看所有评价和自己的评价 </p> <p> <img src="https://img-blog.csdnimg.cn/20210215143905617.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpdXNoaV8xOTkw,size_16,color_FFFFFF,t_70" /> </p> <p>   </p> <p> 1-11,排号等位 </p> <p> <img src="https://img-blog.csdnimg.cn/20210215144255324.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpdXNoaV8xOTkw,size_16,color_FFFFFF,t_70" /> </p> <p> 可以看出,我们可以选择就餐人数,排大桌或者桌。我这里已排桌为例 </p> <p> <img src="https://img-blog.csdnimg.cn/20210215144359822.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpdXNoaV8xOTkw,size_16,color_FFFFFF,t_70" /> </p> <p> 通过上图可以看出 </p> <ul> <li> 1,当前排号情况 </li> <li> 2,我的排号 </li> <li> 3,可以重排号 </li> <li> 4,到号时会有到号提示 </li> </ul> <p> 后面我会把订阅消息功能加进来,这样到号后会有订阅消息提示。 </p> <p>   </p> <p> 1-12,个人中心 </p> <p> 个人中心分登录和未登录两种状态 </p> <p> 未登录 </p> <p> <img src="https://img-blog.csdnimg.cn/20210215144655159.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpdXNoaV8xOTkw,size_16,color_FFFFFF,t_70" /> </p> <p> 已登录 </p> <p> <img src="https://img-blog.csdnimg.cn/20210215144816439.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpdXNoaV8xOTkw,size_16,color_FFFFFF,t_70" /> </p> <p>   </p> <p> 1-13,微信授权登录小程序 </p> <p> <img src="https://img-blog.csdnimg.cn/20210215144754936.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpdXNoaV8xOTkw,size_16,color_FFFFFF,t_70" /> </p> <p>   </p> <h1> 2,后厨端和排号管理端 </h1> <p> 2-1,后厨端主要供后厨的厨师使用 </p> <ul> <li> 1,可以查看当前下单 </li> <li> 2,完成后可以操作菜品完成 </li> <li> 3,可以监听用户下单 </li> <li> 4,有订单时会有语音提示 </li> <li> 5,厨师登录页 </li> </ul> <p> 语音提示我会在视频课里具体演示 </p> <p> 厨师登录页 </p> <p> <img src="https://img-blog.csdnimg.cn/20210215145137398.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpdXNoaV8xOTkw,size_16,color_FFFFFF,t_70" /> </p> <p>   </p> <p> 厨师管理页 </p> <p> 可以查看待制作订单 </p> <p> <img src="https://img-blog.csdnimg.cn/20210215145217753.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpdXNoaV8xOTkw,size_16,color_FFFFFF,t_70" /> </p> <p> 用户下单后,会有语音提示 </p> <p> <img src="https://img-blog.csdnimg.cn/20210215145330324.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpdXNoaV8xOTkw,size_16,color_FFFFFF,t_70" /> </p> <p>   </p> <p> 2-2,排号管理页 </p> <p> 同样也有登录页,和上面厨师登录一样,这里重点看下排号管理页 </p> <p> 管理员可以查看当前排号情况,可以叫号。 </p> <p> <img src="https://img-blog.csdnimg.cn/20210215145528136.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpdXNoaV8xOTkw,size_16,color_FFFFFF,t_70" /> </p> <h1> 3,cms管理后台 </h1> <p> 我们这里的可视化网页后台使用的时云开发自带的cms(内容管理) </p> <p> 3-1,登录页 </p> <p> <img src="https://img-blog.csdnimg.cn/20210215151020437.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpdXNoaV8xOTkw,size_16,color_FFFFFF,t_70" /> </p> <p>   </p> <p> 3-2,管理后台 </p> <p> <img src="https://img-blog.csdnimg.cn/20210215151101851.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpdXNoaV8xOTkw,size_16,color_FFFFFF,t_70" /> </p> <p> 我们可以在这里 </p> <p>   </p> <ul> <li> 1,添加轮播图,删除轮播图,修改轮播图 </li> <li> 2,添加菜品,删除菜品,修改菜品,上架下架菜品 </li> <li> 3,管理订单 </li> <li> 4,查看评价 </li> <li> 5管理后厨和排号管理员 </li> <li> 6,查看排号数据 </li> </ul> <p>   </p> <p>   </p> <p> <img src="https://img-blog.csdnimg.cn/20210215151322490.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpdXNoaV8xOTkw,size_16,color_FFFFFF,t_70" /> </p> <p> 比如我查询某个用户的所有订单 </p> <p> <img src="https://img-blog.csdnimg.cn/20210215151413808.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpdXNoaV8xOTkw,size_16,color_FFFFFF,t_70" /> </p> <p>   </p> <p> 查询所有下单还未上菜的订单 </p> <p> <img src="https://img-blog.csdnimg.cn/20210215151510269.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpdXNoaV8xOTkw,size_16,color_FFFFFF,t_70" /> </p> <p>   </p> <p> 还有更多的功能,我会在视频课里给大家用视频来演示,这样更直观。 </p> <p>   </p> <p> 4,数据库 </p> <p> 数据库我们这里用云开发自带的数据库 </p> <p> <img src="https://img-blog.csdnimg.cn/2021021515161616.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpdXNoaV8xOTkw,size_16,color_FFFFFF,t_70" /> </p> <p>   </p>
©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值