部落格內容管理系統詳解
- 小云云原創
- 2018-02-22 13:36:051750瀏覽
一、更新內容
資料庫重新設計，改成以使用者分組的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參數，有內容則為true#css: 自訂彈出式的class , 預設為空showClose: 為false則不顯示關閉按鈕, 預設顯示closeFn: 彈跳視窗點擊關閉按鈕之後的回呼title: 彈跳視窗的標題，預設'溫馨提示', 如果不想顯示title, 直接傳空content（required）: 彈出視窗的內容，支援傳htmlbtn1: '按鈕1文案|按鈕1樣式class', 格式化後為btn1Text和btn1Css#cb1: 按鈕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中文網其他相關文章！