這篇文章主要給大家分析一下此博客系統前端的搭建，我會分析幾個我碰到的問題及一些常用的插件

具體的代碼我就不一一貼上來了，大家可以參考：博客系統的源碼。

整體的博客系統前端的效果如下圖：

效果圖

一：前端頁面的搭建

主要是通過bootstrap源碼下載中的docs/examples/文件下blog與dashboard兩個文件。

bootstrap1.png

bootstrap1.png

將這兩個主題中的index.html通過將html轉換為jade轉化為相應的jade，關于jade的規(guī)則大家可以參考jade官網，我們在public/css下對相應的css的編寫。

二：連接數據庫與設計表

首先需要安裝Mongodb，大家可以參考如何安裝MongoDB，相應相應的客戶端管理工具，我使用的是Robo 3T。

• 創(chuàng)建相應的數據庫

• 建表，即使用Mongoose建立相應的Schema

  我們會建立三個表，user，post，categories

  post表：

  post表

  user表：

  user表

  categories表：

  catagories表

  關于表的字段type，這里就不細講了，大家可以參考Mongoose簡要API中的字段類型解釋。

• 修改config下相應的數據庫的名字，填上我們剛剛的數據庫名，這樣我們就能連上我們的數據庫了。

三：使用node實現blog的后端邏輯

blog的路由如下圖：

前端路由表

這里主要就是對于mongoose的使用，我這里就提一下三個點，其他的我會附上相應的文檔，大家可以參考。

• populate的用法：與關系型數據庫中的外健作用一樣。

  拿post舉例，我們有post表與user表，mongodb是noSql，他沒有外鍵這一個定義，當我們查找post表的時候，如果要用到user表的數據的時候，就可以使用populate了。如下圖：

  posts數據

• mongoose對于數據庫的操作

  在代碼中使用到的最多的是model.find()，model.findOne()，model.save()，分別是查找所有的，查找一個，保存方法。

  對于mongoose的鏈接數據庫的方法，這篇文章大家可以參考：Mongoose簡要API。
  ?

• 分頁的實現

  后端的實現如下圖，我們在后臺默認設置的pageSize為10。

  分頁 node

  前端jade的寫法就是得到后端傳過來的pageNum、pageCount，即是第幾頁和總共有有幾頁，后臺我們默認設置的是每頁顯示10條。

  分頁 jade

四，碰到的問題

• 需要將config.js里面的文件指向修改一下

  之前：
  var controllers = glob.sync(config.root + '/app/controllers/*.js');
  現在
  var controllers = glob.sync(config.root + '/app/controllers/**/*.js');
  

  如下圖：

  express的控制器config

• 信息提示——connect-flash

  需要使用到相應的依賴。

  首先安裝：

  npm install connect-flash --save-dev
  

  然后在項目中引用依賴：

  var flash = require('connect-flash'); 
  app.use(flash());             //Express使用這個插件 
  

  在相應的jade模版引用：

  req.flash('info', '評論添加成功')
  

  提示插件

  ?

• 隨即數據生成，方便我們測試

  隨機數據生成

  這個data.js是為了幫助我們隨機插入大量文章數據，方便我們的測試。

  我們需要安裝幾個依賴:

  npm install lorem-ipsum slug --save-dev // 這兩個依賴是幫助我們生成隨機數據的。
  

  具體的實現方法大家可以參考代碼。

  然后進入相應的目錄，執(zhí)行如下語句就能隨機插入數據：

  node data.js
  

  效果如下圖：

  效果

結語：此篇文章是我參考網上的一個express課程，學習課上老師的思路做的，如果大家有什么不明白的地方，我們可以使用簡信交流哦。

文章中加了自己的一些思考以及一些常見的問題，希望能給大家?guī)硪稽c幫助。

來自一個奔跑在前端路上的前端小白。