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

CMS的好處如下：

 

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

開通路徑如下圖

 

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

一，直接開通內容管理系統(CMS)

點擊開通內容管理，會有下面所示的彈窗。直接勾選協議，然后點擊確定即可

 

這里的按量付費不用擔心，官方每月都會給我們一部分免費額度的，我們學習的話，這個免費額度基本上夠用了。
這里點擊確認后，我們還要再次點擊內容管理上面的開通按鈕，然后會出現下面的彈窗。直接點擊下一步即可。

 

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

 

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

 

開通成功以后，我們需要耐心地等待系統為我們初始化環境，

 

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

 

二，進入cms管理后臺

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

2-1，點擊工具欄頂部的更多，

 

2-2，然后選中內容管理即可。

 

2-3，拿到后臺地址

 

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

 

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

 

三，創建項目

我們第一次進入cms后臺，需要自己創建一個新的項目。

 

創建成功后，可以看到我們的項目。

 

進入我們的項目

 

到這一步我們的cms管理后臺就已經創建成功了，接下來我們要管理我們的數據了。

四，創建內容模型(數據表)

我們上面項目初始化成功以后，我們就要創建我們的內容模型了，內容模型我們云開發里的集合（數據庫）是對應的。
如我們這里以創建商品模型為例。

4-1，直接點擊創建模型

 

4-2，輸入展示名稱和數據庫名

 

點擊創建以后，可以看到我們云開發數據庫里增加了一個goods集合。

 

數據表創建成功以后，我們接下來就要往里面添加商品數據了。

五，添加商品數據

我們到內容集合里找到我們上面創建的數據表，就可以往里面添加數據了。

 

5-1，新建數據

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

 

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

 

這肯定不是我們想要的，所以我們在上面第四步創建內容模型的時候肯定少設置什么了。

5-2，往數據表里添加字段

 

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

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

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

5-3，添加商品名

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

 

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

 

5-4，添加商品價格

商品價格我們用數字類型，必填字段

 

添加成功

 

5-5，添加商品圖片

我們的商品圖片應該是一組圖片，所以我們添加商品圖片字段時選擇圖片類型，然后允許有多個內容，必填項。

 

添加成功

 

5-6，添加商品詳情頁

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

 

添加成功

 

完整的商品表創建成功以后，我們就可以去查看商品表里的具體數據了。

 

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

5-7，修改表數據

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

 

然后添加具體的數據

 

5-8，編輯商品詳情

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

 

編輯好以后，記得點擊一下更新

 

那么我們就創建了一條完整的數據

 

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

 

5-9，添加一條新數據

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

 

其實新增數據很簡單，和我們上面修改數據一樣。無非修改是要先有數據，再去修改。新增是直接新加。
填好數據記得點創建

 

這樣我們就有兩條數據了

 

然后去到我們的數據庫，可以看到有兩條數據。

 

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

六，獲取商品列表

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

6-1，獲取數據

 

結果報錯，因為我們沒有做云開發環境的初始化。這一點我強調過無數遍了。

 

還不知道的同學，去看下我云開發入門的文章和視頻。

 

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

 

我們需要修改goods表的權限，為所有人可讀。

 

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

6-2，把數據填充到頁面上

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

• wxml和wxss頁面比較簡單
• js頁面其實也沒有很復雜

6-3，點擊跳轉到商品詳情

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

 

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

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

7-1，請求詳情頁數據

 

7-2，編寫wxml和js

 

7-3，效果圖

最好看下顯示的效果

 

當然了，樣式比較丑，后面有機會再優化吧。

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