部落格內容管理系統詳解

一、更新內容

1. 資料庫重新設計，改成以使用者分組的subDocs資料庫結構

2. 應資料庫改動，所有介面重新設計，並統一採用和立刻理財一致的介面風格

3. 刪除原來遊客模式，增加登入註冊功能，支援彈窗登入。

4. 增加首頁，展示最新發布文章和註冊用戶

5. #增加修改密碼，登出，登出等功能。

6. 優化pop彈窗元件，更智能，更多組態項，接近網易$.dialog元件。且一套程式碼僅修改了下css，實現相同介面下pc端彈跳窗和wap端toast功能。

7. 增加行動端適配

8. 優化原先程式碼，修復部分bug。

更多的更新內容請移步項目CMS-of-Blog_Production和CMS-of-Blog。

二、核心程式碼分析

1.資料庫

對原始資料庫重新設計，改成以使用者分組的subDocs資料庫結構。這樣以使用者為一個整體的資料庫結構更加清晰，同時也更方便操作和讀取。程式碼如下：

程式碼一開始新定義了三個Schema：articleSchema、linkSchema和userSchema。而userSchema裡又嵌套了articleSchema和linkSchema，構成了以使用者分組的subDocs資料庫結構。 Schema是一種以檔案形式儲存的資料庫模型骨架，不具備資料庫的操作能力。然後將該Schema發佈為Model。 Model由Schema發布產生的模型，具有抽象屬性和行為的資料庫操作對。由Model可以建立的實體，例如新註冊一個使用者就會建立一個實體。

資料庫創建了之後需要去讀取和操作，可以看下註冊時發送郵箱驗證碼的這段程式碼感受下。

後台接受到發送郵箱驗證碼的請求後，會初始化一個tmp的使用者。透過new db.User()會建立一個User的實例，然後執行save()作業會將這資料寫到資料庫裡。如果在半小時內沒有註冊成功，透過符合郵箱，然後db.User.remove()將此資料刪除。更多具體用法請移步官方文件。

2. 後台

將所有請求分為三種：

• ajax非同步請求，統一路徑：/web/

• 公共頁面部分，如部落格首頁、登入、註冊等，統一路徑：/

• 與部落格使用者id相關的部落格部分，統一路徑：/:id/

#這樣每個使用者都可以擁有自己的部落格頁面，具體程式碼如下：

具體的ajax介面程式碼大家可以看server資料夾下的index.js檔。

3. pop/toast元件

#3.1 pop/toast元件設定參數說明

• pop: 彈出視窗的顯示與否, 根據content參數，有內容則為true

• #css: 自訂彈出式的class , 預設為空

• showClose: 為false則不顯示關閉按鈕, 預設顯示

• closeFn : 彈跳視窗點擊關閉按鈕之後的回呼

• title: 彈跳視窗的標題，預設'溫馨提示', 如果不想顯示title, 直接傳空

• content（required）: 彈出視窗的內容，支援傳html

• btn1: '按鈕1文案|按鈕1樣式class', 格式化後為btn1Text和btn1Css

• #cb1: 按鈕1點擊之後的回調，如果cb1沒有明確返回true，則預設按鈕點擊後關閉彈跳窗

• btn2: '按鈕2文案|按鈕2樣式class', 格式化後為btn2Text和btn2Css

• cb2: 按鈕2點擊之後的回調，如果cb2沒有明確回傳true，則預設按鈕點擊後關閉彈窗。按鈕參數不傳，文案預設'我知道了'，點擊關閉彈窗

• #init: 彈窗建立後的初始化函數，可以用來處理複雜互動（注意彈出視窗一定要是從pop為false變成true才會執行）

• #destroy: 彈窗消失之後的回呼函數

• wapGoDialog: 在行動端時，要不要走彈窗，預設false，走toast

3.2 pop/toast元件代碼

3.3 pop/toast元件參數格式化程式碼

為了使用方便，我們在使用的時候進行了簡寫。為了讓組件能識別，需要在vuex的action中對傳入的參數格式化。

為了讓行動裝置相容於pop彈窗組件，我們採用mediaQuery對行動端樣式進行了更改。增加參數wapGoDialog，表示我們在移動端時，要不要走彈窗，預設false，走toast。這樣可以一套程式碼就可以相容於pc和wap。

後記

這裡主要分析了下後台和資料庫，而且比較簡單，大家可以去看原始碼。總之，這是一個不錯的前端入手後台和資料庫的範例。功能比較豐富，可以學習下vue.js。

相關推薦：

最完整的PHP開源內容管理系統CMS

20 個PHP CMS開源內容管理系統

基於laravel框架內容管理系統

以上是部落格內容管理系統詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！