這篇文章主要給大家分析一下此博客系統(tǒng)前端的搭建盒齿，我會(huì)分析幾個(gè)我碰到的問題及一些常用的插件
具體的代碼我就不一一貼上來了，大家可以參考：博客系統(tǒng)的源碼。
整體的博客系統(tǒng)前端的效果如下圖：
一：前端頁(yè)面的搭建
主要是通過bootstrap源碼下載中的docs/examples/文件下blog與dashboard兩個(gè)文件。
將這兩個(gè)主題中的index.html通過將html轉(zhuǎn)換為jade轉(zhuǎn)化為相應(yīng)的jade阅茶，關(guān)于jade的規(guī)則大家可以參考jade官網(wǎng)，我們?cè)?code>public/css下對(duì)相應(yīng)的css的編寫谅海。
二：連接數(shù)據(jù)庫(kù)與設(shè)計(jì)表
首先需要安裝Mongodb脸哀，大家可以參考如何安裝MongoDB，相應(yīng)相應(yīng)的客戶端管理工具扭吁，我使用的是Robo 3T撞蜂。
-
創(chuàng)建相應(yīng)的數(shù)據(jù)庫(kù)
-
建表，即使用
Mongoose建立相應(yīng)的Schema我們會(huì)建立三個(gè)表侥袜，
user蝌诡，post，categoriespost表：post表user表：user表categories表：catagories表關(guān)于表的字段
type枫吧，這里就不細(xì)講了浦旱，大家可以參考Mongoose簡(jiǎn)要API中的字段類型解釋。 -
修改
config下相應(yīng)的數(shù)據(jù)庫(kù)的名字九杂，填上我們剛剛的數(shù)據(jù)庫(kù)名颁湖，這樣我們就能連上我們的數(shù)據(jù)庫(kù)了。
三：使用node實(shí)現(xiàn)blog的后端邏輯
blog的路由如下圖：
這里主要就是對(duì)于mongoose的使用例隆，我這里就提一下三個(gè)點(diǎn)甥捺，其他的我會(huì)附上相應(yīng)的文檔，大家可以參考镀层。
-
populate的用法：與關(guān)系型數(shù)據(jù)庫(kù)中的外健作用一樣镰禾。拿
post舉例，我們有post表與user表，mongodb是noSql吴侦，他沒有外鍵這一個(gè)定義谷饿，當(dāng)我們查找post表的時(shí)候，如果要用到user表的數(shù)據(jù)的時(shí)候妈倔，就可以使用populate了。如下圖：posts數(shù)據(jù)
-
mongoose對(duì)于數(shù)據(jù)庫(kù)的操作在代碼中使用到的最多的是
model.find()绸贡，model.findOne()盯蝴，model.save()，分別是查找所有的听怕，查找一個(gè)捧挺，保存方法。對(duì)于
mongoose的鏈接數(shù)據(jù)庫(kù)的方法尿瞭，這篇文章大家可以參考：Mongoose簡(jiǎn)要API闽烙。
? -
分頁(yè)的實(shí)現(xiàn)
后端的實(shí)現(xiàn)如下圖，我們?cè)诤笈_(tái)默認(rèn)設(shè)置的
pageSize為10声搁。分頁(yè) node前端
jade的寫法就是得到后端傳過來的pageNum黑竞、pageCount，即是第幾頁(yè)和總共有有幾頁(yè)疏旨，后臺(tái)我們默認(rèn)設(shè)置的是每頁(yè)顯示10條很魂。分頁(yè) jade
四，碰到的問題
-
需要將
config.js里面的文件指向修改一下之前： var controllers = glob.sync(config.root + '/app/controllers/*.js'); 現(xiàn)在 var controllers = glob.sync(config.root + '/app/controllers/**/*.js');如下圖：
express的控制器config
-
信息提示——
connect-flash需要使用到相應(yīng)的依賴檐涝。
首先安裝：
npm install connect-flash --save-dev然后在項(xiàng)目中引用依賴：
var flash = require('connect-flash'); app.use(flash()); //Express使用這個(gè)插件在相應(yīng)的
jade模版引用：req.flash('info', '評(píng)論添加成功')提示插件?
-
隨即數(shù)據(jù)生成遏匆，方便我們測(cè)試
隨機(jī)數(shù)據(jù)生成這個(gè)
data.js是為了幫助我們隨機(jī)插入大量文章數(shù)據(jù)，方便我們的測(cè)試谁榜。我們需要安裝幾個(gè)依賴:
npm install lorem-ipsum slug --save-dev // 這兩個(gè)依賴是幫助我們生成隨機(jī)數(shù)據(jù)的幅聘。具體的實(shí)現(xiàn)方法大家可以參考代碼。
然后進(jìn)入相應(yīng)的目錄窃植，執(zhí)行如下語(yǔ)句就能隨機(jī)插入數(shù)據(jù)：
node data.js效果如下圖：
效果
結(jié)語(yǔ)：此篇文章是我參考網(wǎng)上的一個(gè)
express課程帝蒿，學(xué)習(xí)課上老師的思路做的，如果大家有什么不明白的地方撕瞧，我們可以使用簡(jiǎn)信交流哦陵叽。文章中加了自己的一些思考以及一些常見的問題，希望能給大家?guī)硪稽c(diǎn)幫助丛版。
來自一個(gè)奔跑在前端路上的前端小白巩掺。
