一、更新內容
數據庫重新設計，改成以用戶分組的subDocs數據庫結構
應數據庫改動，所有接口重新設計，并統一采用和立馬理財一致的接口風格
刪除原來游客模式，增加登錄注冊功能，支持彈窗登錄。
增加首頁，展示最新發布文章和注冊用戶
增加修改密碼，登出，注銷等功能。
優化pop彈窗組件，更加智能，更多配置項，接近網易$.dialog組件。并且一套代碼僅修改了下css，實現相同接口下pc端彈窗和wap端toast功能。
增加移動端適配
優化原來代碼，修復部分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參數，有內容則為truecss: 自定義彈窗的class, 默認為空showClose: 為false則不顯示關閉按鈕, 默認顯示closeFn: 彈窗點擊關閉按鈕之后的回調title: 彈窗的標題，默認’溫馨提示’, 如果不想顯示title, 直接傳空content（required）: 彈窗的內容，支持傳htmlbtn1: ‘按鈕1文案|按鈕1樣式class’, 格式化后為btn1Text和btn1Csscb1: 按鈕1點擊之后的回調，如果cb1沒有明確返回true，則默認按鈕點擊后關閉彈窗btn2: ‘按鈕2文案|按鈕2樣式class’, 格式化后為btn2Text和btn2Csscb2: 按鈕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中文網其它相關文章！