10分鐘快速搭建小程序管理后臺，借助云開發(fā)CMS搭建可視化的數(shù)據(jù)管理網(wǎng)頁平臺

時間：2023-05-27 16:12:02 | 來源：網(wǎng)站運(yùn)營

時間：2023-05-27 16:12:02 來源：網(wǎng)站運(yùn)營

10分鐘快速搭建小程序管理后臺，借助云開發(fā)CMS搭建可視化的數(shù)據(jù)管理網(wǎng)頁平臺：

我們之前用云開發(fā)時，想做個數(shù)據(jù)管理后臺，只能用小程序開發(fā)工具自帶的操作后臺，然后直接在數(shù)據(jù)庫里操作數(shù)據(jù)。這樣對程序員沒有什么，可是我們的程序開發(fā)出來也要給不懂程序的人使用的。如何讓這些人也可以很好的管理我們云開發(fā)的數(shù)據(jù)庫呢。這個時候我們就要用vue或者傳統(tǒng)web開發(fā)實(shí)現(xiàn)一個網(wǎng)頁管理后臺，通過這個直接管理云開發(fā)了。但是開發(fā)這樣一個網(wǎng)頁后臺，無疑會增加我們的工作量。所以我們今天借助云開發(fā)官方推出的CMS功能，來快速的搭建一個云開發(fā)的網(wǎng)頁管理后臺。

CMS的好處如下：



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

開通路徑如下圖



下面就來教大家如何快速的開通這個可視化的內(nèi)容管理平臺。

一，直接開通內(nèi)容管理系統(tǒng)(CMS)

點(diǎn)擊開通內(nèi)容管理，會有下面所示的彈窗。直接勾選協(xié)議，然后點(diǎn)擊確定即可



這里的按量付費(fèi)不用擔(dān)心，官方每月都會給我們一部分免費(fèi)額度的，我們學(xué)習(xí)的話，這個免費(fèi)額度基本上夠用了。
這里點(diǎn)擊確認(rèn)后，我們還要再次點(diǎn)擊內(nèi)容管理上面的開通按鈕，然后會出現(xiàn)下面的彈窗。直接點(diǎn)擊下一步即可。



然后需要初始化一個管理員賬號，這里自己定義即可，設(shè)置好以后，最好記到小本本上，后面會經(jīng)常用到。



設(shè)置好賬號以后，就會提示開通成功。



開通成功以后，我們需要耐心的等待系統(tǒng)為我們初始化環(huán)境，



開通成功以后，會顯示注銷的按鈕。

二，進(jìn)入cms管理后臺

我們上面開通好以后，接下來就要拿到進(jìn)入管理后臺的鏈接了。如果沒有下面所示的內(nèi)容，記得把自己的開發(fā)者工具升級到最新版本。

2-1，點(diǎn)擊工具欄頂部的更多，

2-2，然后選中內(nèi)容管理即可。

2-3，拿到后臺地址

拿到后臺地址后，直接在瀏覽器里打開。



輸入自己前面設(shè)置的用戶名和密碼即可。登錄后的頁面如下

三，創(chuàng)建項(xiàng)目

我們第一次進(jìn)入cms后臺，需要自己創(chuàng)建一個新的項(xiàng)目。



創(chuàng)建成功后，可以看到我們的項(xiàng)目。



進(jìn)入我們的項(xiàng)目



到這一步我們的cms管理后臺就已經(jīng)創(chuàng)建成功了，接下來我們要管理我們的數(shù)據(jù)了。

四，創(chuàng)建內(nèi)容模型(數(shù)據(jù)表)

我們上面項(xiàng)目初始化成功以后，我們就要創(chuàng)建我們的內(nèi)容模型了，內(nèi)容模型我們云開發(fā)里的集合（數(shù)據(jù)庫）是對應(yīng)的。
如我們這里已創(chuàng)建商品模型為例。

4-1，直接點(diǎn)擊創(chuàng)建模型

4-2，輸入展示名稱和數(shù)據(jù)庫名

點(diǎn)擊創(chuàng)建以后，可以看到我們云開發(fā)數(shù)據(jù)庫里增加了一個goods集合。



數(shù)據(jù)表創(chuàng)建成功以后，我們接下來就要往里面添加商品數(shù)據(jù)了。

五，添加商品數(shù)據(jù)

我們到內(nèi)容集合里找到我們上面創(chuàng)建的數(shù)據(jù)表，就可以往里面添加數(shù)據(jù)了。

5-1，新建數(shù)據(jù)

這個時候我們直接創(chuàng)建，可以看到只有兩個字段



到數(shù)據(jù)庫里看也是這樣，雖然成功的添加了一條數(shù)據(jù)，但是這個數(shù)據(jù)太簡單了吧。只有創(chuàng)建時間和修改時間



這肯定不是我們想要的，所以我們在上面第四步創(chuàng)建內(nèi)容模型的時候肯定少設(shè)置什么了。

5-2，往數(shù)據(jù)表里添加字段

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

• 商品名
• 商品價格
• 商品圖片
• 商品詳情

暫且就這些吧，接下來我們就要一個個往數(shù)據(jù)表里添加字段了。

5-3，添加商品名

我們的商品名，用單行字符串就，并且是必填字段。



然后點(diǎn)擊添加，可以看到我們的商品表里成功的多了一個商品名的字段。

5-4，添加商品價格

商品價格我們用數(shù)字類型，必填字段



添加成功

5-5，添加商品圖片

我們的商品圖片應(yīng)該是一組圖片，所以我們添加商品圖片字段時選擇圖片類型，然后允許有多個內(nèi)容，必填項(xiàng)。



添加成功

5-6，添加商品詳情頁

商品詳情頁，我們可以是純文字，也可以是圖文混合。為了讓詳情頁更加美觀，我們這里用富文本。



添加成功



完整的商品表創(chuàng)建成功以后，我們就可以去查看商品表里的具體數(shù)據(jù)了。



可以看到我們除了創(chuàng)建時間和修改時間有值外，其余的都沒有值。

5-7，修改表數(shù)據(jù)

那么我們可以點(diǎn)擊編輯按鈕，來為空字段添加值。



然后添加具體的數(shù)據(jù)

5-8，編輯商品詳情

我們商品詳情用的是富文本，那么我們最好弄個簡單的圖文混排。



編輯好以后，記得點(diǎn)擊一下更新



那么我們就創(chuàng)建了一條完整的數(shù)據(jù)



可以看出我們的修改時間也隨之發(fā)生了變化

5-9，添加一條新數(shù)據(jù)

我們上面的數(shù)據(jù)是通過修改的，那么我們再來演示一個新增數(shù)據(jù)。



其實(shí)新增數(shù)據(jù)很簡單，和我們上面修改數(shù)據(jù)一樣。無非修改是要先有數(shù)據(jù)，再去修改。新增是直接新加。
填好數(shù)據(jù)記得點(diǎn)創(chuàng)建



這樣我們就有兩條數(shù)據(jù)了



然后去到我們的數(shù)據(jù)庫，可以看到有兩條數(shù)據(jù)。



接下來我們要做的就是在小程序里請求數(shù)據(jù)，然后展示數(shù)據(jù)。

六，獲取商品列表

首先我們要獲取商品列表，新建一個商品列表頁面，然后在js的onload方法里請求數(shù)據(jù)。

6-1，獲取數(shù)據(jù)

結(jié)果報錯，因?yàn)槲覀儧]有做云開發(fā)環(huán)境的初始化。這一點(diǎn)我強(qiáng)調(diào)過無數(shù)遍了。



還不知道的同學(xué)，去看下我云開發(fā)入門的文章和視頻。



然后可以看到我們請求成功了，但是沒有數(shù)據(jù)，為什么呢？？



我們需要修改goods表的權(quán)限，為所有人可讀。



這樣就可以看到，我們成功的請求到了兩條數(shù)據(jù)。

6-2，把數(shù)據(jù)填充到頁面上

上面數(shù)據(jù)獲取到了，我們接下來就要把數(shù)據(jù)填充到頁面了，其實(shí)之前云開發(fā)有講過，我這里不再啰嗦，直接上代碼。

• wxml和wxss頁面比較簡單
  

• js頁面其實(shí)也沒有很復(fù)雜
  

6-3，點(diǎn)擊跳轉(zhuǎn)到商品詳情

我們這里的goDetail方法，主要是點(diǎn)擊列表的商品時，跳轉(zhuǎn)到商品詳情頁。



可以看到我們進(jìn)入詳情頁時成功的攜帶了商品id，我們請求詳情頁的數(shù)據(jù)，就主要靠這個id了。

七，請求并加載商品詳情頁

7-1，請求詳情頁數(shù)據(jù)

7-2，編寫wxml和js

7-3，效果圖

最好看下顯示的效果



當(dāng)然了，樣式比較丑，后面有機(jī)會再優(yōu)化吧。

到這里我們的cms可視化管理后臺就完整的搭建好了，也給大家簡單的演示了cms添加和修改數(shù)據(jù)，并且在小程序上展示了這些數(shù)據(jù)。