10分鐘快速搭建小程序管理後臺，藉助雲開發CMS搭建可視化的數據管理網頁平臺

咱們以前用雲開發時，想作個數據管理後臺，只能用小程序開發工具自帶的操做後臺，而後直接在數據庫裏操做數據。這樣對程序員沒有什麼，但是咱們的程序開發出來也要給不懂程序的人使用的。如何讓這些人也能夠很好的管理咱們雲開發的數據庫呢。這個時候咱們就要用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添加和修改數據，而且在小程序上展現了這些數據。