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

CMS的好處如下：

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

開(kāi)通路徑如下圖

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

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

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

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

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

設(shè)置好賬號(hào)以后，就會(huì)提示開(kāi)通成功。

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

開(kāi)通成功以后，會(huì)顯示注銷(xiāo)的按鈕。

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

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

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

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

2-3，拿到后臺(tái)地址

拿到后臺(tái)地址后，直接在瀏覽器里打開(kāi)。

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

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

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

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

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

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

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

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

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

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

點(diǎn)擊創(chuàng)建以后，可以看到我們?cè)崎_(kāi)發(fā)數(shù)據(jù)庫(kù)里增加了一個(gè)goods集合。

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

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

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

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

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

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

這肯定不是我們想要的，所以我們?cè)谏厦娴谒牟絼?chuàng)建內(nèi)容模型的時(shí)候肯定少設(shè)置什么了。

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

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

• 商品名

• 商品價(jià)格

• 商品圖片

• 商品詳情

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

5-3，添加商品名

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

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

5-4，添加商品價(jià)格

商品價(jià)格我們用數(shù)字類(lèi)型，必填字段

添加成功

5-5，添加商品圖片

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

添加成功

5-6，添加商品詳情頁(yè)

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

添加成功

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

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

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

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

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

5-8，編輯商品詳情

我們商品詳情用的是富文本，那么我們最好弄個(gè)簡(jiǎn)單的圖文混排。

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

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

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

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

我們上面的數(shù)據(jù)是通過(guò)修改的，那么我們?cè)賮?lái)演示一個(gè)新增數(shù)據(jù)。

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

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

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

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

六，獲取商品列表

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

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

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

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

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

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

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

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

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

• wxml和wxss頁(yè)面比較簡(jiǎn)單
  

• js頁(yè)面其實(shí)也沒(méi)有很復(fù)雜
  

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

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

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

七，請(qǐng)求并加載商品詳情頁(yè)

7-1，請(qǐng)求詳情頁(yè)數(shù)據(jù)

7-2，編寫(xiě)wxml和js

7-3，效果圖

最好看下顯示的效果

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

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