node.js搭建Web服務器

時間 2019-11-11

標籤 node.js node 搭建 web 服務器欄目 Node.js 简体版

原文原文鏈接

Node.js 博客搭建javascript

一. 學習需求css

Node 的安裝運行html

會安裝node，搭建node環境前端

會運行node。java

基礎模塊的使用node

Buffer：二進制數據處理模塊jquery

Event：事件模塊linux

fs：文件系統模塊git

Net：網絡模塊github

Http：http模塊

...

NPM（node包管理工具）

第三方node模塊（包）的管理工具，可使用該下載工具安裝第三方模塊。，固然也能夠建立上傳本身的模塊。

參考

假定已經理解並掌握了入門教程的全部內容。在易出錯的地方將進行簡要的說明。

其它

這是最不起眼，但也是最必不可少的——你得準備一個博客的靜態文件。

博客的後臺界面，登陸註冊界面，文章展現界面，首頁等。

二. 項目需求分析

一個博客應當具有哪些功能？

前臺展現
•點擊下一頁，能夠點擊分類導航。
•能夠點擊進入到具體博文頁面
•下方容許評論。顯示發表時間。容許留言分頁。
•右側有登陸註冊界面。

後臺管理
•管理員帳號：登錄後看到頁面不同，有後臺頁面。
•容許添加新的分類。從後臺添加新的文章。
•編輯容許markdown寫法。
•評論管理。

三. 項目建立，安裝及初始化

技術框架

本項目採用瞭如下核心技術：
•Node版本：6.9.1——基礎核心的開發語言

（安裝後查看版本：cmd窗口：node -v）

（查看方式：cmd窗口：node -v）
•Express

一個簡潔靈活的node.js WEB應用框架，提供一系列強大的特性幫助咱們建立web應用。
•Mongodb

用於保存產生的數據

還有一系列第三方模塊和中間件：
•bodyParser，解析post請求數據
•cookies：讀寫cookie
•swig：模板解析引擎
•mongoose：操做Mongodb數據
•markdown：語法解析生成模塊

...

初始化

在W ebStorm建立一個新的空工程，指定文件夾。

打開左下角的Terminal輸入：
npm init

回車。而後讓你輸入name:(code)，輸入項目名稱，而後後面均可以不填，最後在Is it OK?處寫上yes。

完成這一步操做以後，系統就會在當前文件夾建立一個package.json的項目文件。

項目文件下面擁有剛纔你所基本的信息。後期須要更改的話可直接在這裏修改。

第三方插件的安裝
•以Express爲例

在命令行輸入：

npm install --save express

耐心等待一段時間，安裝完成後，json文件夾追加了一些新的內容：

json { //以前內容........ "author": "", "license": "ISC", "dependencies": { "express": "^4.14.0" }

表示安裝成功。

同理，使用npm install --save xxx的方法安裝下載如下模塊：
•body-parser
•cookies
•markdown
•mongoose
•swig

因此安裝完以後的package.json文件是這樣的。

{
"name": "blog",
"version": "1.0.0",
"description": "this is my first blog.",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"body-parser": "^1.15.2",
"cookies": "^0.6.2",
"express": "^4.14.0",
"markdown": "^0.5.0",
"mongoose": "^4.7.5",
"swig": "^1.4.2"
}
}

在這個json中，就能經過依賴模塊（dependencies）看到各個第三方模塊的版本信息

切記：依賴模塊安裝，要聯網！

安裝完成以後

第二個文件夾放的是你的第三方模塊。

此外還須要別的文件，完整的結構是這樣的——

接下來就把缺失的文件目錄本身創建起來。

完成着一系列操做以後，就把app.js做爲應用程序的啓動（入口頁面）。

建立應用

如下代碼建立應用，監聽端口

// 加載express
var express=require('express');
//建立app應用，至關於=>Node.js Http.createServer();
var app=express();
//監聽http請求
app.listen(9001);

運行（ctrl+shift+c）以後就能夠經過瀏覽器訪問了。

用戶訪問：
•用戶經過URL訪問web應用，好比http://localhost:9001/

這時候會發現瀏覽器呈現的內容是這樣的。

•web後端根據用戶訪問的url處理不一樣的業務邏輯。

•路由綁定——

在Express框架下，能夠經過app.get()或app.post()等方式，把一個url路徑和（1-n）個函數進行綁定。當知足對應的規則時，對應的函數將會被執行，該函數有三個參數——

javascript app.get('/',function(req,res,next){ // do sth. }); // req:request對象，保存客戶請求相關的一些數據——http.request // res：response對象，服務端輸出對象，停工了一些服務端相關的輸出方法——http.response // next：方法，用於執行下一個和路徑相匹配的函數(行爲)。
•內容輸出

經過res.send(string)發送內容到客戶端。

app.get('/',function(req,res,next){
res.send('<h1>歡迎光臨個人博客！</h1>');
});

運行。這時候網頁就打印出了h1標題的內容。

注意，js文件編碼若是不爲UTF-8，網頁文件顯示中文會受到影響。

三. 模板引擎的配置和使用

使用模板

如今，我想向後端發送的內容可不是一個h1標題那麼簡單。還包括整個博客頁面的html內容，若是仍是用上面的方法，麻��就大了。

怎麼辦呢？關鍵步驟在於html和js頁面相分離（相似結構和行爲層的分離）。

模板的使用在於後端邏輯和前端表現的分離（先後端分離）。

模板配置

基本配置以下

// 定義模板引擎，使用swig.renderFile方法解析後綴爲html的文件
var swig=require('swig');
app.engine('html',swig.renderFile);

// 設置模板存放目錄
app.set('views','./views');
// 註冊模板引擎
app.set('view engine','html');

swig.setDefaults({cache:false});

配置模板的基本流程是：

請求swig模塊=>定義模板引擎=>註冊模板引擎=>設置調試方法

咱們可使用var swig=require('swig');定義了swig方法。

如下進行逐行解析——

定義模板引擎

app.engine('html',swig.renderFile);

第一個參數：模板引擎的名稱，同時也是模板引擎的後綴，你能夠定義打開的是任何文件格式，好比json，甚至tdl等。
第二個參數表示用於解析處理模板內容的方法。
第三個參數：使用swig.renderFile方法解析後綴爲html的文件。

設置模板目錄

如今就用express組件提供的set方法標設置模板目錄：

app.set('views','./views');

定義目錄時也有兩個參數，注意，第一個參數必須爲views！第二個參數能夠是咱們所給出的路徑。由於以前已經定義了模板文件夾爲views。因此，使用對應的路徑名爲./views。

註冊模板引擎

app.set('view engine','html');

仍是使用express提供了set方法。
第一個參數必須是字符串'view engine'。
第二個參數和app.engine方法定義的模板引擎名稱（第一個參數）必須是一致的（都是「html」）。

重回app.get

如今咱們回到app.get()方法裏面，使用res.render()方法從新渲染指定內容

app.get('/',function(req,res,next){

/* * 讀取指定目錄下的指定文件，解析並返回給客戶端 * 第一個參數：模板文件，相對於views目錄,views/index.html * */

res.render('index');
});

這時候，咱們定義了返回值渲染index文件，就須要在views文件夾下新建立一個index.html。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>歡迎來到個人第一個博客！<h1>
</body>
</html>

render方法還能夠接受第二個參數，用於傳遞模板使用的第二個數據。

好了。這時候再刷新頁面，就出現了index的內容。

調試方法

咱們在不中止服務器的狀況下，從新修改index的文件內容，發現並無刷新。

什麼問題呢？出於性能上考慮，node把第一次讀取的index放到了內容中，下次訪問時，就是緩存中的內容了，而不是真正的index文件。所以須要重啓。

開發過程當中，爲了減小麻煩，須要取消模板緩存。

swig.setDefaults({cache:false});

固然，當項目上線時，能夠把這一段刪除掉。

四. 靜態文件託管

在寫模板文件時，常常引入一些外鏈的css，js和圖片等等。

css怎麼引入？

若是咱們直接在首頁的head區域這麼寫：

再刷新，發現對css.css的引用失敗了。

問題不在於css.css是否存在，而在於請求失敗。由於外鏈文件本質也是一個請求，可是在app.js中尚未對應設置。

若是這麼寫：

app.get('/css.css', function (req,res,next) {
res.send('body {background: red;}');
});

發現沒有效果。

打開http://localhost:9001/css.css發現內容是這樣的：

搞笑了。默認發送的是一個html。所以須要設定一個header

app.get('/css.css', function (req,res,next) {
res.setHeader('content-type','text/css');
res.send('body {background: red;}');
});

ctrl+F5，就解析了紅色背景了。

一樣的，靜態文件須要徹底分離，所以這種方法也是不行的。

靜態文件託管目錄

最好的方法是，把全部的靜態文件都放在一個public的目錄下，劃分並存放好。

而後在開頭就經過如下方法，把public目錄下的全部靜態文件都渲染了：

app.use('/public',express.static(__dirname+'/public'));

以上方法表示：當遇到public文件下的文件，都調用第二個參數裏的方法(注意是兩個下劃線)。

當用戶訪問的url以public開始，那麼直接返回對應__dirname+'public'下的文件。所以咱們的css應該放到public下。

引用方式爲：

而後到public文件下建立一個css.css，設置body背景爲紅色。原來的app.get方法就不要了。

至此，靜態文件什麼的均可以用到了

小結

在以上的內容中，咱們實現了初始化項目，能夠調用html和css文件。基本過程邏輯是：

用戶發送http請求（url）=>解析路由=>找到匹配的規則=>指定綁定函數，返回對應內容到用戶。

訪問的是public：靜態——直接讀取指定目錄下的文件，返回給用戶。

=>動態=>處理業務邏輯

那麼整個基本雛形就搭建起來了。

五. 分模塊開發與實現

把整個網站放到一個app.js中，是不利於管理和維護的。實際開發中，是按照不一樣的功能，管理代碼。

根據功能劃分路由（routers）

根據本項目的業務邏輯，分爲三個模塊就夠了。
•前臺模塊
•後臺管理模塊
•API模塊:經過ajax調用的接口。

或者，使用app.use（路由設置）劃分：
•app.use('/admin',require('./routers/admin'));

解釋：當用戶訪問的是admin文件下的內容，這調用router文件夾下admin.js文件。下同。

•app.use('/api',require('./routers/api'));後臺

•app.use('/',require('./routers/main'));前臺

好了。重寫下之前的代碼，去掉多餘的部分。

// 加載express
var express=require('express');
//建立app應用，至關於=>Node.js Http.createServer();
var app=express();

// 設置靜態文件託管
app.use('/public',express.static(__dirname+'/public'))

// 定義模板引擎，使用swig.renderFile方法解析後綴爲html的文件
var swig=require('swig');
app.engine('html',swig.renderFile);

// 設置模板存放目錄
app.set('views','./views');
// 註冊模板引擎
app.set('view engine','html');
// 調試優化
swig.setDefaults({cache:false});

//app.use('/admin',require('./routers/admin'));
//app.use('/api',require('./routers/api'));
//app.use('/',require('./routers/main'));

//監聽http請求
app.listen(9001);

在routers建立一個admin.js，同理再建立一個api.js，一個main.js

怎麼訪問不一樣文件夾下的文件？

好比，我想訪問一個如http://localhost:9001/admin/user這樣的地址，這樣按理來講就應該調用admin.js（分路由）。

因此編輯admin.js

var express=require('express');

// 建立一個路由對象，此對象將會監聽admin文件下的url
var router=express.Router();

router.get('/user',function(req,res,next){
res.send('user');
});

module.exports=router;//把router的結果做爲模塊的輸出返回出去！

注意，在分路由中，不須要寫明路徑，就當它是在admin文件下的相對路徑就能夠了。

儲存，而後回到app.js，應用app.use('/admin',require('./routers/admin'));

再打開頁面，就看到結果了。

同理，api.js也如法炮製。

var express=require('express');

// 建立一個路由對象，此對象將會監聽api文件夾下的url
var router=express.Router();

router.get('/user',function(req,res,next){
res.send('api-user');
});

module.exports=router;//把router的結果做爲模塊的輸出返回出去！

再應用app.use('api/',require('./routers/api'))。重啓服務器，結果以下

首頁也如法炮製

路由的細分

前臺路由涉及了至關多的內容，所以再細化分多若干個路由也是不錯的選擇。

每一個內容包括基本的分類和增刪改
•main模塊

/——首頁

/view——內容頁
•api模塊

/——首頁

/login——用戶登錄

/register——用戶註冊

/comment——評論獲取

/comment/post——評論提交
•admin模塊

/——首頁

•用戶管理

/user——用戶列表

•分類管理

/category——分類目錄

/category/add——分類添加

/category/edit——分類編輯

/category/delete——分類刪除

•文章管理

/article——內容列表

/article/add——添加文章

/article/edit——文章修改

/article/delete——文章刪除

•評論管理

/comment——評論列表

/comment/delete——評論刪除

開發流程

功能開發順序

用戶——欄目——內容——評論

一切操做依賴於用戶，因此先須要用戶。

欄目也分爲先後臺，優先作後臺。

內容和評論相互關聯。

編碼順序
•經過Schema定義設計數據儲存結構
•功能邏輯
•頁面展現

六. 數據庫鏈接，表結構

好比用戶，在SCHEMA文件夾下新建一個users.js

如何定義一個模塊呢？這裏用到mongoose模塊

var mongoose=require('mongoose');//引入模塊

除了在users.js請求mongoose模塊之外，在app.js也須要引入mongoose。

// 加載express
var express=require('express')

//建立app應用，至關於=>Node.js Http.createServer();
var app=express();

// 加載數據庫模塊
var mongoose=require('mongoose');

// 設置靜態文件託管
app.use('/public',express.static(__dirname+'/public'))

// 定義模板引擎，使用swig.renderFile方法解析後綴爲html的文件
var swig=require('swig');
app.engine('html',swig.renderFile);

// 設置模板存放目錄
app.set('views','./views');
// 註冊模板引擎
app.set('view engine','html');
// 調試優化
swig.setDefaults({cache:false});

/** 根據不一樣的內容劃分路由器* */
app.use('/admin',require('./routers/admin'));
app.use('/api',require('./routers/api'));
app.use('/',require('./routers/main'));

//監聽http請求
mongoose.connect();
app.listen(9001);

創建鏈接數據庫（每次運行都須要這樣）

mongoose使用須要安裝mongodb數據庫。

mongodb安裝比較簡單，在官網上下載了，制定好路徑就能夠了。

找到mongodb的bin文件夾。啓動mongod.exe——經過命令行

命令行依次輸入：
f:
cd Program Files\MongoDB\Server\3.2\bin

總之就是根據本身安裝的的路徑名來找到mongod.exe就好了。

開啓數據庫前須要指定參數，好比數據庫的路徑。我以前已經在項目文件夾下建立一個db文件夾，而後做爲數據庫的路徑就能夠了。

除此以外還得指定一個端口。好比27018
mongod --dbpath=G:\node\db --port=27018

而後回車

信息顯示：等待連接27018,證實開啓成功

下次每次關機後開啓服務器，都須要作如上操做。

接下來要開啓mongo.exe。

命令行比較原始，仍是可使用一些可視化的工具進行鏈接。在這裏我用的是robomongo。

直接在國外網站上下載便可，下載不通可能須要科學上下網。

名字隨便寫就好了，端口寫27018

點擊連接。

回到命令行。發現新出現如下信息：

表示正式創建鏈接。

數據保存

連接已經創建起來。但裏面空空如也。

接下來使用mongoose操做數據庫。

能夠上這裏去看看文檔。文檔上首頁就給出了mongoose.connect()方法。

var mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/test');

var Cat = mongoose.model('Cat', { name: String });

var kitty = new Cat({ name: 'Zildjian' });
kitty.save(function (err) {
if (err) {
console.log(err);
} else {
console.log('meow');
}
});

connect方法接收的第一個參數，就是這個'mongodb://localhost:27018'。第二個參數是回調函數。

數據庫連接失敗的話，是不該該開啓監聽的，因此要把listen放到connect方法裏面。

mongoose.connect('mongodb://localhost:27018/blog',function(err){
if(err){
console.log('數據庫鏈接錯誤！');
}else{
console.log('數據庫鏈接成功！');
app.listen(9001);
}
});

運行，console顯示，數據庫連接成功。

注意，若是出現錯誤，仍是得看看編碼格式，必須爲UTF-8。

回到users.js的編輯上來，繼續看mongoose文檔。

var mongoose = require('mongoose');
var Schema = mongoose.Schema;

var blogSchema = new Schema({
title: String,
author: String,
body: String,
comments: [{ body: String, date: Date }],
date: { type: Date, default: Date.now },
hidden: Boolean,
meta: {
votes: Number,
favs: Number
}
});

經過mongoose.Schema構造函數，生成一個Schema對象。

new出的Schema對象包含不少內容，傳入的對象表明數據庫中的一個表。每一個屬性表明表中的每個字段，每一個值表明該字段存儲的數據類型。

在這裏，users.js須要暴露的內容就是用戶名和密碼。

// 加載數據庫模塊
var mongoose=require('mongoose');

// 返回用戶的表結構
module.exports= new mongoose.Schema({

// 用戶名
username: String,
// 密碼
password: String

});

而後在經過模型類來操做表結構。在項目的models文件夾下建立一個User.js

var mongoose=require('mongoose');

var usersSchema=require('../schemas/users');

module.exports=mongoose.model('User',usersSchema);

這樣就完成了一個模型類的建立。

模型怎麼用？仍是看看文檔給出的使用方法。

// 建立一個表結構對象
var schema = new mongoose.Schema({ name: 'string', size: 'string' });
// 根據表結構對象建立一個模型類
var Tank = mongoose.model('Tank', schema);

構造函數如何使用：

var Tank = mongoose.model('Tank', yourSchema);

var small = new Tank({ size: 'small' });
small.save(function (err) {
if (err) return handleError(err);
// saved!
})

// or

Tank.create({ size: 'small' }, function (err, small) {
if (err) return handleError(err);
// saved!
})

七. 用戶註冊的前端邏輯

引入首頁

用戶註冊首先得加載一個首頁。

在views下面新建一個main文件夾，而後把你以前寫好的index.html放進去。

因此回到main.js中。渲染你已經寫好的博客首頁。

var express=require('express');

// 建立一個路由對象，此對象將會監聽前臺文件夾下的url
var router=express.Router();

router.get('/',function(req,res,next){
res.render('main/index');
});

module.exports=router;//把router的結果做爲模塊的輸出返回出去！

保存，而後重啓app.js，就能在localhost:9001看到首頁了。

固然這個首頁很醜，你能夠本身寫一個。

原來的路徑所有按照項目文件夾的結構進行修改。

邏輯

註冊登陸一共有三個狀態。

一開始就是註冊，若是已有帳號就點擊登陸，出現登陸彈窗。

若是已經登陸，則顯示已經登陸狀態。並有註銷按鈕。

jquery能夠這麼寫：

$(function(){
// 登陸註冊的切換
$('#register a').click(function(){
$('#login').show();
$('#register').hide();
});

$('#login a').click(function(){
$('#login').hide();
$('#register').show();
});
});

當點擊註冊按鈕，應該容許ajax提交數據。地址應該是api下的user文件夾的register，該register文件暫時沒有建立，因此不理他照寫便可。

// 點擊註冊按鈕，經過ajax提交數據
$('#register .submit').click(function(){
// 經過ajax提交交
$.ajax({
type:'post',
url:'/api/user/register',
data:{
username:$('#register').find('[name="username"]').val(),
password:$('#register').find('[name="password"]').val(),
repassword:$('#register').find('[name="repassword"]').val()
},
dataType:'json',
success:function(data){
console.log(data);
}
});
});

容許網站，輸入用戶名密碼點擊註冊。

雖然報錯，可是在chrome的network下的header能夠看到以前提交的信息。

挺好，挺好。

八. body-paser的使用：後端的基本驗證

後端怎麼響應前臺的ajax請求？

首先，找到API的模塊，增長一個路由，回到api.js——當收到前端ajax的post請求時，路由打印出一個register字符串。

var express=require('express');

// 建立一個路由對象，此對象將會監聽api文件夾下的url
var router=express.Router();

router.post('/user/register',function(req,res,next){
console.log('register');
});

module.exports=router;//把router的結果做爲模塊的輸出返回出去！

這時候，就不會顯示404了。說明路由處理成功。

如何獲取前端post的數據？

這就須要用到新的第三方模塊——body-parser。

相關文檔地址：https://github.com/expressjs/body-parser

bodyParser.urlencoded(options)

Returns middleware that only parses urlencoded bodies. This parser accepts only UTF-8 encoding of the body and supports automatic inflation of gzip and deflate encodings.

A new body object containing the parsed data is populated on the request object after the middleware (i.e. req.body). This object will contain key-value pairs, where the value can be a string or array (when extended is false), or any type (when extended is true).

var bodyParser=require('body-parser');

app.use(bodyParser.urlencoded(extended:true));

在app.js中，加入body-parser。而後經過app.use()方法調用。此時的app.js是這樣的：

// 加載express
var express=require('express');

//建立app應用，至關於=>Node.js Http.createServer();
var app=express();

// 加載數據庫模塊
var mongoose=require('mongoose');

// 加載body-parser，用以處理post提交過來的數據
var bodyParser=require('body-parser');

// 設置靜態文件託管
app.use('/public',express.static(__dirname+'/public'))

// 定義模板引擎，使用swig.renderFile方法解析後綴爲html的文件
var swig=require('swig');

app.engine('html',swig.renderFile);

// 設置模板存放目錄
app.set('views','./views');
// 註冊模板引擎
app.set('view engine','html');
// 調試優化
swig.setDefaults({cache:false});

// bodyParser設置
app.use(bodyParser.urlencoded({extended:true}));

/* * 根據不一樣的內容劃分路由器 * */
app.use('/admin',require('./routers/admin'));
app.use('/api',require('./routers/api'));
app.use('/',require('./routers/main'));

//監聽http請求
mongoose.connect('mongodb://localhost:27018/blog',function(err){
if(err){
console.log('數據庫鏈接錯誤！');
}else{
console.log('數據庫鏈接成功！');
app.listen(9001);
}
});

配置好以後，回到api.js，就能在router.post方法中，經過req.body獲得提交過來的數據。

router.post('/user/register',function(req,res,next){
console.log(req.body);
});

重啓app.js，而後網頁再次提交數據。

出現console信息：

後端的表單驗證

拿到數據以後，就是進行基本的表單驗證。好比
•用戶名是否符合規範（空？）
•是否被註冊
•密碼是否符合規範
•重複密碼是否一致

其中，檢測用戶名是否被註冊須要用到數據庫查詢。

因此按照這個邏輯，從新歸下類：
// 基本驗證=>用戶不得爲空(錯誤代碼1)，密碼不得爲空（錯誤代碼2），兩次輸入必須一致（錯誤代碼3）
// 數據庫查詢=>用戶是否被註冊。

返回格式的初始化

咱們要對用戶的請求進行響應。對於返回的內容，應該作一個初始化，指定返回信息和錯誤代碼

// 統一返回格式
var responseData=null;

router.use(function(req,res,next){
responseData={
code:0,
message:''
}

next();
});

寫出判斷邏輯，經過res.json返回給前端

res.json方法就是把響應的數據轉化爲一個json字符串。再直接return出去。後面代碼再也不執行。

router.post('/user/register',function(req,res,next){
var username=req.body.username;
var password=req.body.password;
var repassword=req.body.repassword;

//用戶名是否爲空
if(username==''){
responseData.code=1;
responseData.message='用戶名不得爲空！';
res.json(responseData);
return;
}

if(password==''){
responseData.code=2;
responseData.message='密碼不得爲空！';
res.json(responseData);
return;
}

if(repassword!==password){
responseData.code=3;
responseData.message='兩次密碼不一致！';
res.json(responseData);
return;
}

responseData.message='註冊成功！';
res.json(responseData);
});

基本運行就成功了。

基於數據庫的查重驗證

以前已經完成了簡單的驗證，基於數據庫怎麼驗證呢？

首先得請求模型中的user.js。

var User=require('../model/User');

這個對象有很是多的方法，再看看mongoose文檔：http://mongoosejs.com/docs/api.html#model-js

其中

// #方法表示必須new出一個具體對象才能使用
Model#save([options], [options.safe], [options.validateBeforeSave], [fn])

在這裏，咱們實際上就使用這個方法就夠了。

Model.findOne([conditions], [projection], [options], [callback])

在router.post方法內追加：

// 用戶名是否被註冊？
User.findOne({
username:username
}).then(function(userInfo){
console.log(userInfo);
});

重啓運行發現返回的是一個null——若是存在，表示數據庫有該記錄。若是爲null，則保存到數據庫中。

因此完整的驗證方法是：

router.post('/user/register',function(req,res,next){
var username=req.body.username;
var password=req.body.password;
var repassword=req.body.repassword;

//基本驗證
if(username==''){
responseData.code=1;
responseData.message='用戶名不得爲空！';
res.json(responseData);
return;
}

if(password==''){
responseData.code=2;
responseData.message='密碼不得爲空！';
res.json(responseData);
return;
}

if(repassword!==password){
responseData.code=3;
responseData.message='兩次密碼不一致！';
res.json(responseData);
return;
}

// 用戶名是否被註冊？
User.findOne({
username:username
}).then(function(userInfo){
if(userInfo){
responseData.code=4;
responseData.message='該用戶名已被註冊！';
res.json(responseData);
return;
}else{//保存用戶名信息到數據庫中
var user=new User({
username:username,
password:password,
});
return user.save();
}
}).then(function(newUserInfo){
console.log(newUserInfo);
responseData.message='註冊成功！';
res.json(responseData);
});

});

再查看console內容

若是你再次輸入該用戶名。會發現後臺console信息爲undefined，網頁控制檯顯示該用戶名已被註冊。

回到久違的Robomongo，能夠看到數據庫中多了一條註冊用戶的內容。

裏面確確實實存在了一條記錄。

在實際工做中，應該以加密的形式存儲內容。在這裏就不加密了。

前端對後臺返回數據的處理

如今後端的基本驗證就結束了。前端收到數據後應當如何使用？

回到index.js

我要作兩件事：
•把信息經過alert的形式展示出來。
•若是註冊成功，在用戶名處（#loginInfo）展示用戶名信息。這裏我把它加到導航欄最右邊。

暫時就這樣寫吧：

$(function(){
// 登陸註冊的切換
$('#register a').click(function(){
$('#login').show();
$('#register').hide();
});

$('#login a').click(function(){
$('#login').hide();
$('#register').show();
});

// 點擊註冊按鈕，經過ajax提交數據
$('#register .submit').click(function(){
// 經過ajax移交
$.ajax({
type:'post',
url:'/api/user/register',
data:{
username:$('#register').find('[name="username"]').val(),
password:$('#register').find('[name="password"]').val(),
repassword:$('#register').find('[name="repassword"]').val()
},
dataType:'json',
success:function(data){
alert(data.message);
if(!data.code){
// 註冊成功
$('#register').hide();
$('#login').show();
}
}
});
});
});

九. 用戶登陸邏輯

用戶登陸的邏輯相似，當用戶點擊登陸按鈕，一樣發送ajax請求到後端。後端再進行驗證。

基本設置

因此在index.js中，ajax方法也如法炮製：

// 點擊登陸按鈕，經過ajax提交數據
$('#login .submit').click(function(){
// 經過ajax提交
$.ajax({
type:'post',
url:'/api/user/login',
data:{
username:$('#login').find('[name="username"]').val(),
password:$('#login').find('[name="password"]').val(),
},
dataType:'json',
success:function(data){
console.log(data);
}
});
});

回到後端api.js，新增一個路由：

// 登陸驗證
router.post('/user/login',function(res,req,next){
var username=req.body.username;
var password=req.body.password;

if(username==''||password==''){
responseData.code=1;
responseData.message='用戶名和密碼不得爲空！';
res.json(responseData);
return;
}

});

數據庫查詢：用戶名是否存在

一樣也是用到findOne方法。

router.post('/user/login',function(req,res,next){
//console.log(req.body);
var username=req.body.username;
var password=req.body.password;

if(username==''||password==''){
responseData.code=1;
responseData.message='用戶名和密碼不得爲空！';
res.json(responseData);
return;
}

// 查詢用戶名和對應密碼是否存在，若是存在則登陸成功
User.findOne({
username:username,
password:password
}).then(function(userInfo){
if(!userInfo){
responseData.code=2;
responseData.message='用戶名或密碼錯誤！';
res.json(responseData);
return;
}else{
responseData.message='登陸成功！';
res.json(responseData);
return;
}
});

});

獲取登陸信息

以前登錄之後在#userInfo裏面顯示內容。

如今咱們來從新設置如下前端應該提示的東西：
•提示用戶名，若是是admin，則提示管理員，並增長管理按鈕
•註銷按鈕

這一切都是在導航欄面板上完成。

後端須要把用戶名返回出來。在後端的userInfo參數裏，已經包含了username的信息。因此把它也加到responseData中去。

導航的結構大體如是，而後有一個註銷按鈕，display爲none。

因而index.js能夠這麼寫：

這一套簡單的邏輯也完成了。

十. cookie設置

當你登錄成功以後再刷新頁面，發現並非登陸狀態。這很蛋疼。

記錄登陸狀態應該反饋給瀏覽器。

cookie模塊的調用

在app.js中引入cookie模塊——

var Cookies=require('cookies');

app.use(function(req,res){
req.cookies=new Cookies(req,res);
next();
});

回到api.js，在登錄成功以後，還得作一件事情，就是把cookies發送給前端。

}else{
responseData.message='登陸成功！';
responseData.userInfo=userInfo.username;

//每當用戶訪問站點，將保存用戶信息。
req.cookies.set('userInfo',JSON.stringify({
_id:userInfo._id,
username:userInfo.username
});
);//把id和用戶名做爲一個對象存到一個名字爲「userInfo」的對象裏面。

res.json(responseData);
return;
}

重啓服務器，登陸。在network上看cookie信息

再刷新瀏覽器，查看headers

也多了一個userInfo，證實可用。

處理cookies信息

//設置cookie
app.use(function(req,res,next){
req.cookies=new Cookies(req,res);

// 解析cookie信息把它由字符串轉化爲對象
if(req.cookies.get('userInfo')){
try {
req.userInfo=JSON.parse(req.cookies.get('userInfo'));;
}catch(e){}
}
next();
});

調用模板去使用這些數據。

回到main.js

var express=require('express');

var router=express.Router();

router.get('/',function(req,res,next){
res.render('main/index',{
userInfo:req.userInfo
});
});

module.exports=router;

而後就在index.html中寫模板。

模板語法

模板語法是根據從後端返回的信息在html裏寫邏輯的方法。

全部邏輯內容都在{%%}裏面

簡單的應用就是if else

{% if userInfo._id %}
<div id="div1"></div>
{% else %}
<div id="div2"></div>
{% endif %}

若是後端返回的內容存在，則渲染div1，不然渲染div2，這個語句到div2就結束。

因此，如今咱們的渲染邏輯是：
•如userInfo._id存在，則直接渲染導航欄裏的我的信息
•不然，渲染登陸註冊頁面。
•博客下面的內容也是如此。最好讓登陸的人才看得見。

若是我須要顯示userInfo裏的username，須要雙大括號{{userInfo.username}}

登陸後的邏輯

這樣一來，登錄後的效果就不必了。直接重載頁面。

if(!data.code){
window.location.reload();
}

而後順便把註銷按鈕也作了。

註銷無非是把cookie設置爲空，而後前端所作的事情就是一個一個ajax請求，一個跳轉。

index.js

// 註銷模塊
$('#logout').click(function(){
$.ajax({
type:'get',
url:'/api/user/logout',
success:function(data){
if(!data.code){
window.location.reload();
}
}
});
});

在api.js寫一個退出的方法

// 退出方法
router.get('/user/logout',function(req,res){
req.cookies.set('userInfo',JSON.stringify({
_id:null,
username:null
}));
res.json(responseData);
return;
});

十一. 區分管理員和普通用戶

建立管理員

管理員用戶表面上看起來也是用戶，可是在數據庫結構是獨立的一個字段，

打開users.js,新增一個字段

var mongoose=require('mongoose');

// 用戶的表結構
module.exports= new mongoose.Schema({

username: String,
password: String,

// 是否管理員
isAdmin:{
type:Boolean,
default:false
}

});

爲了記錄方便，我直接在RoboMongo中設置。

添加的帳號這麼寫：

保存。

那麼這個管理員權限的帳戶就建立成功了。

cookie設置

注意，管理員的帳戶最好不要記錄在cookie中。

回到app.js，重寫cookie代碼

//請求User模型
var User=require('./models/User');

//設置cookie
app.use(function(req,res,next){
req.cookies=new Cookies(req,res);

// 解析cookie信息
if(req.cookies.get('userInfo')){
try {
req.userInfo=JSON.parse(req.cookies.get('userInfo'));

// 獲取當前用戶登陸的類型，是否管理員
User.findById(req.userInfo._id).then(function(userInfo){
req.userInfo.isAdmin=Boolean(userInfo.isAdmin);

next();
});
}catch(e){
next();
}
}else{
next();
}

});

整體思路是，根據isAdmin判斷是否爲真，

管理員顯示判斷

以前html顯示的的判斷是：{{userInfo.username}}。

如今把歡迎信息改寫成「管理員」，並提示「進入後臺按鈕」

<li>
<a id="loginInfo">
{% if userInfo.isAdmin %}
<span id="admin" style="cursor:pointer;">管理員你好，進入管理</span>
{% else %}
<span>{{userInfo.username}}</span>
{% endif %}
</a>
</li>

很棒吧！

十二. 後臺管理功能及界面

打開網站，登陸管理員用戶，以前已經作出了進入管理連接。

基本邏輯

咱們要求打開的網址是：http://localhost:9001/admin。後臺管理是基於admin.js上進行的。

先對admin.js作以下測試：

var express=require('express');

var router=express.Router();

router.use(function(req,res,next){
if(!req.userInfo.isAdmin){
// 若是當前用戶不是管理員
res.send('不是管理員！');
return;
}else{
next();
}
});

router.get('/',function(res,req,next){
res.send('管理首頁');
});

module.exports=router;

當登陸用戶不是管理員。直接顯示「不是管理員」

後臺界面的前端實現

後臺意味着你要寫一個後臺界面。這個index頁面放在view>admin文件夾下。因此router應該是：

router.get('/',function(req,res,next){
res.render('admin/index');
});

因此你還得在admin文件夾寫一個index.html

後臺管理基於如下結構：
•首頁
•設置
•分類管理
•文章管理
•評論管理

由於是臨時寫的，湊合着看大概是這樣。

<header>
<h1>後臺管理系統</h1>

</header>
<span class="userInfo">你好，{{userInfo.username}}！ <a href="javascript:;">退出</a></span>
<aside>
<ul>
<li><a href="javascript:;">首頁</a></li>
<li><a href="javascript:;">設置</a></li>
<li><a href="/admin/user">用戶管理</a></li>
<li><a href="javascript:;">分類管理</a></li>
<li><a href="javascript:;">文章管理</a></li>
<li><a href="javascript:;">評論管理</a></li>
</ul>
</aside>
<section>
{% block main %}{% endblock %}
</section>
<footer></footer>

父類模板

這個代碼應該是可複用的。所以可使用父類模板的功能。

繼承

在同文件夾下新建一個layout.html。把前端代碼所有剪切進去。這時候admin/index.html一個字符也不剩了。

怎麼訪問呢？

在index下面，輸入：

{% extends 'layout.html' %}

再刷新localhost:9001/admin，發現頁面又回來了。

有了父類模板的功能，咱們能夠作不少事情了。

非公用的模板元素

相似面向對象的繼承，右下方區域是不一樣的內容，不該該寫進layout中，所以能夠寫爲

<section>
{% block 佔位區塊名稱 %}{% endblock %}
</section>

而後回到index.html，定義這個區塊的內容

{% block main %}

{% endblock %}

十三. 用戶管理

需求：點擊「用戶管理」，右下方的主體頁面顯示博客的註冊用戶數量。

因此連接應該是：

其實作到這塊，應該都熟悉流程了。每增長一個新的頁面，意味着寫一個新的路由。在路由裏渲染一個新的模板。在渲染的第二個參數裏，以對象的方式寫好你準備用於渲染的信息。

回到admin.js

router.get('/user/',function(req,res,next){
res.render('admin/user_index',{
userInfo:req.userInfo
})
});

爲了和index區分，新的頁面定義爲user_index。所以在view/admin文件夾下建立一個user_index.html

先作個簡單的測試吧

{% extends 'layout.html' %}

{% block main %}
用戶列表
{% endblock %}

點擊就出現了列表。

接下來就是要從數據庫中讀取全部的用戶數據。而後傳進模板中。

讀取用戶數據

model下的User.js輸出的對象含有咱們須要的方法。

咱們的User.js是這樣的

var mongoose=require('mongoose');

// 用戶的表結構
var usersSchema=require('../schemas/users');

module.exports=mongoose.model('User',usersSchema);

回到admin.js

var User=reuire('/model/User.js');

User有一個方法是find方法，返回的是一個promise對象

試着打印出來：

User.find().then(function(user){
console.log(user);
});

結果一看，厲害了：

當前博客的兩個用戶都打印出來了。

接下來就是把這個對象傳進去了，就跟傳ajax同樣：

var User=require('../models/User');
//用戶管理

User.find().then(function(user){
router.get('/user/', function (req,res,next) {
res.render('admin/user_index',{
userInfo:req.userInfo,
users:user
})
})
});

模板就能使用用戶數據了。

模板如何使用後臺傳進來的用戶對象數據

main的展現區中，應該是一個標題。下面是一串表格數據。

大體效果如圖

這須要模板中的循環語法

{% extends 'layout.html' %}

{% block main %}
<h3>用戶列表</h3>

<table class="users-list">
<thead>
<tr>
<th>id</th>
<th>用戶名</th>
<th>密碼</th>
<th>是否管理員</th>
</tr>
</thead>
<tbody>
{% for user in users %}
<tr>
<td>{{user._id.toString()}}</td>
<td>{{user.username}}</td>
<td>{{user.password}}</td>
<td>
{% if user.isAdmin %}
是
{% else %}
不是
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endblock %}

顯示結果如圖

分頁顯示（limit方法）

實際上用戶多了，就須要分頁

假設咱們分頁只須要對User對象執行一個limit方法。好比我想每頁只展現1條用戶數據：

router.get('/user/', function (req,res,next) {
User.find().limit(1).then(function(user){
res.render('admin/user_index',{
userInfo:req.userInfo,
users:user
});
});
});

分頁展現設置（skip）

User的skip方法用於設置截取位置。好比skip(2)，表示從第3條開始取。

好比我想每頁設置兩條數據：
•第一頁：1=> skip(0)
•第二頁：2=>skip(1)
•所以，當我要在第page頁展現limit條數據時，skip方法裏的數字參數爲：（page-1）*limit

好比我要展現第二頁數據：

router.get('/user/', function (req,res,next) {
var page=2;
var limit=1;
var skip=(page-1)*limit;

User.find().limit(limit).skip(skip).then(function(user){
res.render('admin/user_index',{
userInfo:req.userInfo,
users:user
});
});
});

可是究竟有多少頁不是咱們所能決定的。

有多少頁？（req.query.page）

首先要解決怎麼用戶怎麼訪問下一頁的問題，通常來講，在網頁中輸入http://localhost:9001/admin/user?pages=數字

就能夠經過頁面訪問到。

既然page不能定死，那就把page寫活。

var page=req.query.page||1;

這樣就解決了

分頁按鈕

又回到了前端。

分頁按鈕是直接作在表格的後面。

到目前爲止，寫一個「上一頁」和「下一頁」的邏輯就行了——當在第一頁時，上一頁不顯示，當在第最後一頁時，下一頁不顯示

首先，把page傳到前端去：

router.get('/user/', function (req,res,next) {
var page=req.query.page||1;
var limit=1;
var skip=(page-1)*limit;

User.find().limit(limit).skip(skip).then(function(user){
res.render('admin/user_index',{
userInfo:req.userInfo,
users:user,
page:page
});
});
});

注意，傳到前端的page是個字符串形式的數字，因此使用時必須轉化爲數字。

查詢總頁數（User.count）

user.count是一個promise對象，

User.count().then(function(count){
console.log(count);
})

這個count就是總記錄條數。把這個count獲取到以後，計算出須要多少頁（向上取整），傳進渲染的對象中。注意，這些操做都是異步的。因此不能用變量儲存count。而應該把以前的渲染代碼寫到then的函數中

還有一個問題是頁面取值。不該當出現page=200這樣不合理的數字。因此用min方法取值。

router.get('/user/', function (req,res,next) {
var page=req.query.page||1;
var limit=1;
var count=0;

User.count().then(function(_count){
count=_count;
var pages=Math.ceil(count/limit);
console.log(count);

page=Math.min(page,pages);
page=Math.max(page,1);

var skip=(page-1)*limit;

User.find().limit(limit).skip(skip).then(function(user){
res.render('admin/user_index',{
userInfo:req.userInfo,
users:user,
page:page,
pages:pages
});
});
});//獲取總頁數
});

添加表格信息

須要在表頭作一個簡單的統計，包括以下信息
•一共有多少條用戶記錄
•每頁顯示：多少條
•共多少頁
•當前是第多少頁

所以應該這麼寫：

router.get('/user/', function (req,res,next) {
var page=req.query.page||1;
var limit=1;
var count=0;

User.count().then(function(_count){
count=_count;
var pages=Math.ceil(count/limit);

page=Math.min(page,pages);
page=Math.max(page,1);

var skip=(page-1)*limit;

User.find().limit(limit).skip(skip).then(function(user){
res.render('admin/user_index',{
userInfo:req.userInfo,
users:user,
page:page,
pages:pages,
limit:limit,
count:count
});
});
});//獲取總頁數
});

前端模板能夠這樣寫：

{% extends 'layout.html' %}

{% block main %}
<h3>用戶列表 <small>（第{{page}}頁）</small></h3>

<ul class="page-btn">
{% if Number(page)-1!==0 %}
<li><a href="/admin/user?page={{Number(page)-1}}">上一頁</a></li>
{% else %}
<li>再往前..沒有了</li>
{% endif %}
{% if Number(page)+1<=pages %}
<li><a href="/admin/user?page={{Number(page)+1}}">下一頁</a></li>
{% else %}
<li>已經是最後一頁</li>
{% endif %}
</ul>

{% endblock %}

效果如圖

封裝

分頁是一個極其經常使用的形式，能夠考慮把它封裝一下。

同目錄下新建一個page.html

把按鈕組件放進去。

{%include 'page.html'%}

結果有個問題，裏面有一條寫死的url（admin/xxx），爲了解決，能夠設置爲...admin/{{type}}?page=yyy，而後把回到admin.js，把type做爲一個屬性傳進去。

那麼用戶管理部分就到此結束了。

十四. 博客分類管理

前面已經實現了那麼多頁面，如今嘗試實現博客內容的分類管理。

基本設置

首先把分類管理的連接修改成/category/，在admin.js中增長一個對應的路由。渲染的模板爲admin/category_inndex.html。

路由器基本寫法：

router.get('/category/',function(req,res,next){

res.render('admin/category_index',{
userInfo:req.userInfo
});
});

模板基本結構：

{% extends 'layout.html' %}

{% block main %}

{% endblock %}

點擊「分類管理」，請求的頁面就出來了。固然仍是一個空模板。

分類管理的特殊之處在於，它下面有兩個子菜單（分類首頁，管理分類）。對此咱們能夠用jQuery實現基本動效。

html結構

$('#category').hover(function(){
$(this).find('.dropdown').stop().slideDown(400);
},function(){
$(this).find('.dropdown').stop().slideUp(400);
});

仍是得佈局。

佈局的基本設置仍是遵循用戶的列表——一個大標題，一個表格。

添加分類頁面

分類頁面下面單獨有個頁面，叫作「添加分類「。

基本實現

根據上面的邏輯再寫一個添加分類的路由

admin.js：

// 添加分類
router.get('/category/add',function(req,res,next){
res.render('admin/category_add',{
userInfo:req.userInfo
});
});

同理，再添加一個category_add模板，大體這樣：

{% extends 'layout.html' %}

{% block main %}

{%include 'page.html'%}
{% endblock %}

目前還很是簡陋可是先實現功能再說。

添加邏輯

添加提交方式爲post。

因此路由器還得寫個post形式的函數。

// 添加分類及保存方法：post
router.post('/category/add',function(req,res,next){

});

post提交的結果，仍是返回當前的頁面。

post提交到哪裏？固然仍是數據庫。因此在schemas中新建一個提交數據庫。categories.js

var mongoose=require('mongoose');

// 博客分類的表結構
module.exports= new mongoose.Schema({
// 分類名稱
name: String,

});

好了。跟用戶註冊同樣，再到model文件夾下面添加一個model添加一個Categories.js：

var mongoose=require('mongoose');

// 博客分類的表結構
var categoriessSchema=require('../schemas/categories');

module.exports=mongoose.model('Category',categoriessSchema);

文件看起來不少，但思路清晰以後至關簡單。

完成這一步，就能夠在admin.js添加Category對象了。

admin.js的路由操做：處理前端數據

還記得bodyparser麼？前端提交過來的數據都由它進行預處理：

// app.js
app.use(bodyParser.urlencoded({extended:true}));

有了它，就能夠經過req.body來進行獲取數據了。

刷新，提交內容。

在post方法函數中打印req.body：

在這裏我點擊了兩次，其中第一次沒有提交數據。記錄爲空字符串。這在規則中是不容許的。因此應該返回一個錯誤頁面。

// 添加分類及保存方法：post
var Category=require('../models/Categories');
router.post('/category/add',function(req,res,next){

//處理前端數據
var name=req.body.name||'';
if(name===''){
res.render('admin/error',{
userInfo:req.userInfo
});
}
});

錯誤頁面，最好寫一個返回上一步（javascript:window.history.back()）。

{% extends 'layout.html' %}}

{% block main %}
<h3>出錯了</h3>
<h4>你必定有東西忘了填寫！</h4>
<a href="javascript:window.history.back()">返回上一步</a>
{% endblock %}

錯誤頁面應該是可複用的。但的渲染須要傳遞哪些數據？
•錯誤信息（message）
•操做，返回上一步仍是跳轉其它頁面？
•url，跳轉到哪裏？

就當前項目來講，大概這樣就好了。

res.render('admin/error',{
userInfo:req.userInfo,
message:'提交的內容不得爲空！',
operation:{
url:'javascript:window.history.back()',
operation:'返回上一步'
}
});

模板頁面：

{% extends 'layout.html' %}}

{% block main %}
<h3>出錯了</h3>
<h4>{{message}}</h4>
<a href={{operation.url}}>{{operation.operation}}</a>
{% endblock %}

若是名稱不爲空（save方法）

顯然，這個和用戶名的驗證是同樣的。用findOne方法,在返回的promise對象執行then。返回一個新的目錄，再執行then。進行渲染。

其次，須要一個成功頁面。基本結構和錯誤界面同樣。只是h3標題不一樣

// 查詢數據是否爲空
Category.findOne({
name:name
}).then(function(rs){
if(rs){//數據庫已經有分類
res.render('admin/error',{
userInfo:req.userInfo,
message:'數據庫已經有該分類了哦。',
operation:{
url:'javascript:window.history.back()',
operation:'返回上一步'
}
});
return Promise.reject();
}else{//不然表示數據庫不存在該記錄，能夠保存。
return new Category({
name:name
}).save();
}
}).then(function(newCategory){
res.render('admin/success',{
userInfo:req.userInfo,
message:'分類保存成功！',
operation:{
url:'javascript:window.history.back()',
operation:'返回上一步'
}
})
});
});

接下來的事就又交給前端了。

數據可視化

顯然，渲染的分類管理頁面應該還有一個表格。如今順便把它完成了。其實基本邏輯和以前的用戶分類顯示是同樣的。並且代碼極度重複：

// 添加分類及保存方法
var Category=require('../models/Categories');

router.get('/category/', function (req,res,next) {
var page=req.query.page||1;
var limit=2;
var count=0;

Category.count().then(function(_count){
count=_count;
var pages=Math.ceil(count/limit);

page=Math.min(page,pages);
page=Math.max(page,1);

var skip=(page-1)*limit;

Category.find().limit(limit).skip(skip).then(function(categories){

res.render('admin/category_index',{
type:'category',
userInfo:req.userInfo,
categories:categories,
page:page,
pages:pages,
limit:limit,
count:count
});
});
});//獲取總頁數
});

能夠封裝成函數了——一下就少了三分之二的代碼量。

functionrenderAdminTable(obj,type,limit){
router.get('/'+type+'/', function (req,res,next) {
var page=req.query.page||1;

var count=0;

obj.count().then(function(_count){
count=_count;
var pages=Math.ceil(count/limit);

page=Math.min(page,pages);
page=Math.max(page,1);

var skip=(page-1)*limit;

obj.find().limit(limit).skip(skip).then(function(data){

res.render('admin/'+type+'_index',{
type:type,
userInfo:req.userInfo,
data:data,
page:page,
pages:pages,
limit:limit,
count:count
});
});
});//獲取總頁數
});
}
//調用時，
//用戶管理首頁
var User=require('../models/User');
renderAdminTable(User,'user',1);
//分類管理首頁
// 添加分類及保存方法
var Category=require('../models/Categories');
renderAdminTable(Category,'category',2);

模板

{% extends 'layout.html' %}

{% block main %}

<table class="users-list">
<thead>
<tr>
<th>id</th>
<th>分類名</th>
<th>備註</th>
<th>操做</th>
</tr>
</thead>
<tbody>
{% for category in data %}
<tr>
<td>{{category._id.toString()}}</td>
<td>{{category.name}}</td>
<td>
<a href="/admin/category/edit">修改 </a>
|<a href="/admin/category/edit"> 刪除</a>
</td>
<td></td>
</tr>
{% endfor %}
</tbody>
</table>

{%include 'page.html'%}
{% endblock %}

博客分類的修改與刪除

基本邏輯

刪除的按鈕是/admin/category/delete?id={{category._id.toString()}}，同理修改的按鈕是/admin/category/edit?id={{category._id.toDtring()}}（帶id的請求）。

這意味着兩個新的頁面和路由：

分類修改，分類刪除。

刪除和修改都遵循一套比較嚴謹的邏輯。其中修改的各類判斷至關麻煩，可是，修改和刪除的邏輯基本是同樣的。

當一個管理員在進行修改時，另外一個管理員也可能修改（刪除）了數據。所以須要嚴格判斷。

修改（update）

修改首先作的是邏輯，根據發送請求的id值進行修改。若是id不存在則返回錯誤頁面，若是存在，則切換到新的提交頁面

// 分類修改
router.get('/category/edit',function(req,res,next){

// 獲取修改的分類信息，並以表單的形式呈現，注意不能用body，_id是個對象，不是字符串
var id=req.query.id||'';

// 獲取要修改的分類信息
Category.findOne({
_id:id
}).then(function(category){
if(!category){
res.render('admin/error',{
userInfo:req.userInfo,
message:'分類信息不存在！'
});
return Promise.reject();
}else{
res.render('admin/edit',{
userInfo:req.userInfo,
category:category
});
}
});
});

而後是一個提交頁，post返回的是當前頁面

{% extends 'layout.html' %}

{% block main %}

仍是以post請求保存數據。

•提交數據一樣也須要判斷id，當id不存在時，跳轉到錯誤頁面。

•當id存在，並且用戶沒有作任何修改，就提交，直接跳轉到「修改爲功」頁面。實際上不作任何修改。

•當id存在，並且用戶提交過來的名字和非原id（{$ne: id}）下的名字不一樣時，作兩點判斷：

•數據庫是否存在同名數據？是則跳轉到錯誤頁面。

•若是數據庫不存在同名數據，則更新同id下的name數據值，並跳轉「保存成功」。

更新的方法是

Category.update({
_id:你的id
},{
要修改的key:要修改的value
})

根據此邏輯能夠寫出這樣的代碼。

//分類保存
router.post('/category/edit/',function(req,res,next){
var id=req.query.id||'';

var name=req.body.name||name;
Category.findOne({
_id:id
}).then(function(category){

if(same){
res.render('admin/error',{
userInfo:req.body.userInfo,
message:'已經存在同名數據！'
});
return Promise.reject();
}else{

Category.update({
_id:id
},{
name:name
}).then(function(){
res.render('admin/success',{
userInfo:req.body.userInfo,
message:'修改爲功！',
operation:{
url:'/admin/category',
operation:'返回分類管理'
}
});
});

}
});
}
}
});
});

爲了防止異步問題，能夠寫得更加保險一點。讓它每一步都返回一個promise對象，

//分類保存
router.post('/category/edit/',function(req,res,next){
var id=req.query.id||'';

var name=req.body.name||name;
Category.findOne({
_id:id
}).then(function(category){

if(!category){
res.render('admin/error',{
userInfo:req.body.userInfo,
message:'分類信息不存在！'
});
return Promise.reject();
}else{
// 若是用戶不作任何修改就提交
if(name==category.name){
res.render('admin/success',{
userInfo:req.body.userInfo,
message:'修改爲功！',
operation:{
url:'/admin/category',
operation:'返回分類管理'
}
});
return Promise.reject();
}else{
// 再查詢id：不等於當前id
return Category.findOne({
_id: {$ne: id},
name:name
});
}
}
}).then(function(same){
if(same){
res.render('admin/error',{
userInfo:req.body.userInfo,
message:'已經存在同名數據！'
});
return Promise.reject();
}else{
return Category.update({
_id:id
},{
name:name
});
}
}).then(function(resb){
res.render('admin/success',{
userInfo:req.body.userInfo,
message:'修改爲功！',
operation:{
url:'/admin/category',
operation:'返回分類管理'
}
});
});
});

這樣就能實現修改了。

刪除（remove）

刪除的邏輯相似。可是要簡單一些，判斷頁面是否還存在該id，是就刪除，也不須要專門去寫刪除界面。，只須要一個成功或失敗的界面就OK了。

刪除用的是remove方法——把_id屬性爲id的條目刪除就行啦

// 分類的刪除
router.get('/category/delete',function(req,res){
var id=req.query.id;

Category.findOne({
_id:id
}).then(function(category){
if(!category){
res.render('/admin/error',{
userInfo:req.body.userInfo,
message:'該內容不存在於數據庫中！',
operation:{
url:'/admin/category',
operation:'返回分類管理'
}
});
return Promise.reject();
}else{
return Category.remove({
_id:id
})
}
}).then(function(){
res.render('admin/success',{
userInfo:req.body.userInfo,
message:'刪除分類成功！',
operation:{
url:'/admin/category',
operation:'返回分類管理'
}
});
});
});

前臺分類導航展現與排序

前臺的導航分類是寫死的，如今是時候把它換成咱們須要的內容了。

由於我我的項目的關係，我一級導航是固定的。因此就在文章分類下實現下拉菜單。

從數據庫讀取前臺首頁內容，基於main.js

爲此還得引入Category

var Category=require('../models/Categories');
router.get('/',function(req,res,next){
// 讀取分類信息
Category.find().then(function(rs){
console.log(rs)
});

res.render('main/index',{
userInfo:req.userInfo
});
});

運行後打印出來的信息是：

就成功拿到了後臺數據。

接下來就是把數據加到模板裏面去啦

var Category=require('../models/Categories');

router.get('/',function(req,res,next){

// 讀取分類信息
Category.find().then(function(categories){
console.log(categories);
res.render('main/index',{
userInfo:req.userInfo,
categories:categories
});
});

});

前端模板這麼寫：

<ul class="nav-article">
{% if !userInfo._id %}
<li><a href="javascript:;">僅限註冊用戶查看！</a></li>{%else%}{%for category in categories %}<li><a href="javascript:;">{{category.name}}</a></li>{% endfor %}{% endif %}</ul>

你在後臺修改分類，

結果就出來了。挺好，挺好。

然而有一個小問題，就是咱們拿到的數據是倒序的。

思路1：在後端把這個數組reverse一下。就符合正常的判斷邏輯了。

res.render('main/index',{
userInfo:req.userInfo,
categories:categories.reverse()
});

但這不是惟一的思路，從展現後端功能的考慮，最新添加的理應在最後面，因此有了思路2

思路2：回到admin.js對Category進行排序。

id表面上看是一串毫無規律的字符串，然而它確實是按照時間排列的。

那就好了，根據id用sort方法排序

obj.find().sort({_id:-1})......
//-1表示降序，1表示升序

博客分類管理這部分到此結束了。

十五. 文章管理（1）：後臺

文章管理仍是基於admin.js

<li><a href="/admin/content">文章管理</a></li>

增長一個管理首頁

{% extends 'layout.html' %}

{% block main %}

<h3>文章管理 </h3>
<a href="content/add">添加新的文章！</a>

{% endblock %}

再增長一個編輯文章的界面，其中，要獲取分類信息

{% extends 'layout.html' %}

{% block main %}

<span>標題</span>
<input type="text" name="title"/>
<span>分類</span>
<select name="categories">
{% for category in categories %}
<option value="{{category._id.toString()}}">{{category.name}}</option>
{% endfor %}
</select>
<button type="submit">提交</button><br>
<span style="line-height: 30px;">內容摘要</span><br>
<textarea id="description" cols="150" rows="3" placeholder="請輸入簡介" name="description">

</textarea>
<br>
<span style="line-height: 20px;">文章正文</span><br>
<textarea id="article-content">

</textarea>

</form>

{% endblock %}

效果以下

再寫兩個路由。

// admin.js
// 內容管理
router.get('/content',function(req,res,next){

res.render('admin/content_index',{
userInfo:req.userInfo
});
});

// 添加文章
router.get('/content/add',function(req,res,next){
Category.find().then(function(categories){
console.log(categories)
res.render('admin/content_add',{
userInfo:req.userInfo,
categories:categories
});
})
});

獲取數據

仍是用到了schema設計應該存儲的內容。

最主要的固然是文章相關——標題，簡介，內容，發表時間。

還有一個不可忽視的問題，就是文章隸屬分類。咱們是根據分類id進行區分的

// schemas文件夾下的content.js

var mongoose=require('mongoose');

module.exports=new mongoose.Schema({
// 關聯字段 -分類的id
category:{
// 類型
type:mongoose.Schema.Tpyes.ObjectId,
// 引用，其實是說，存儲時根據關聯進行索引出分類目錄下的值。而不是存進去的值。
ref:'Category'
},

// 標題
title:String,

// 簡介
description:{
type:String,
default:''
},

// 文章內容
content:{
type:String,
default:''
},

// 當前時間
date:String

});

接下來就是建立一個在models下面建立一個Content模型

// model文件夾下的Content.js

var mongoose=require('mongoose');
var contentsSchema=require('../schemas/contents');

module.exports=mongoose.model('Content',contentsSchema);

內容保存是用post方式提交的。

所以再寫一個post路由

//admin.js
// 內容保存
router.post('/content/add',function(req,res,next){

console.log(req.body);
});

在後臺輸入內容，提交，就看到提交上來的數據了。

不錯。

表單驗證

簡單的驗證規則：不能爲空

驗證不能爲空的時候，應該調用trim方法處理以後再進行驗證。

// 內容保存
router.post('/content/add',function(req,res,next){
console.log(req.body)
if(req.body.category.trim()==''){
res.render('admin/error',{
userInfo:req.userInfo,
message:'分類信息不存在！'
});
return Promise.reject();
}

if(req.body.title.trim()==''){
res.render('admin/error',{
userInfo:req.userInfo,
message:'標題不能爲空！'
});
return Promise.reject();
}

if(req.body.content.trim()==''){
res.render('admin/error',{
userInfo:req.userInfo,
message:'內容忘了填！'
});
return Promise.reject();
}

});

還有個問題。就是簡介（摘要）

保存數據庫數據

保存和渲染相關的方法都是經過引入模塊來進行的。

var Content=require('../models/Contents');
····

new Content({
category:req.body.category,
title:req.body.title,
description:req.body.description,
content:req.body.content,
date:new Date().toDateString()
}).save().then(function(){
res.render('admin/success',{
userInfo:req.userInfo,
message:'文章發佈成功！'
});
});
····

而後你發佈一篇文章，驗證無誤後，就會出現「發佈成功」的頁面。

而後你就能夠在數據庫查詢到想要的內容了

這個對象有當前文章相關的內容，也有欄目所屬的id，也有內容本身的id。還有日期

爲了顯示內容，能夠用以前封裝的renderAdminTable函數

{% extends 'layout.html' %}

{% block main %}

<h3>文章管理 </h3>
<a href="content/add">添加新的文章！</a>

<table class="users-list">
<thead>
<tr>
<th>標題</th>
<th>所屬分類</th>
<th>發佈時間</th>
<th>操做</th>
</tr>
</thead>
<tbody>
{% for content in data %}

<tr>
<td>{{content.title}}</td>
<td>{{content.category}}</td>
<td>
{{content.date}}
</td>
<td>
<a href="/admin/content/edit?id={{content._id.toString()}}">修改 </a>
|<a href="/admincontent/delete?id={{content._id.toString()}}"> 刪除</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>

{%include 'page.html'%}
{% endblock %}

分類名顯示出來的是個object

分類名用的是data.category。

但若是換成data.category.id就能獲取到一個buffer對象，這個buffer對象轉換後，應該就是分類信息。

可是直接用的話，又顯示亂碼。

這就有點小麻煩了。

回看schema中的數據庫，當存儲後，會自動關聯Category模對象（注意：這裏的Category固然是admin.js的Category）進行查詢。查詢意味着有一個新的方法populate。populate方法的參數是執行查詢的屬性。在這裏咱們要操做的屬性是category。

// 這是一個功能函數
functionrenderAdminTable(obj,type,limit,_query){
router.get('/'+type+'/', function (req,res,next) {
var page=req.query.page||1;
var count=0;

obj.count().then(function(_count){
count=_count;
var pages=Math.ceil(count/limit);
page=Math.min(page,pages);
page=Math.max(page,1);

var skip=(page-1)*limit;
/* * sort方法排序，根據id， * */
var newObj=_query?obj.find().sort({_id:-1}).limit(limit).skip(skip).populate(_query):obj.find().sort({_id:-1}).limit(limit).skip(skip);
newObj.then(function(data){
console.log(data);

res.render('admin/'+type+'_index',{
type:type,
userInfo:req.userInfo,
data:data,
page:page,
pages:pages,
limit:limit,
count:count
});
});
});//獲取總頁數
});
}

diao調用時寫法爲：renderAdminTable(Content,'content',2,'category');

打印出來的data數據爲：

發現Category的查詢結果就返回給data的category屬性了

很棒吧！那就把模板改了

不錯不錯。

修改和刪除

修改和刪除基本上遵守同一個邏輯。

修改

請求的文章id若是在數據庫查詢不到，那就返回錯誤頁面。不然渲染一個編輯頁面（content_edit）——注意，這裏得事先獲取分類。

// 修改
router.get('/content/edit',function(req,res,next){
var id=req.query.id||'';

Content.findOne({
_id:id
}).then(function(content){
if(!content){
res.render('admin/error',{
userInfo:req.userInfo,
message:'該文章id事先已被刪除了。'
});
return Promise.reject();
}else{
Category.find().then(function(categories){
// console.log(content);
res.render('admin/content_edit',{
userInfo:req.userInfo,
categories:categories,
data:content
});
});
}
});
});

把前端頁面顯示出來以後就是保存。

保存的post邏輯差很少，但實際上能夠簡化。

// 保存文章修改
router.post('/content/edit',function(req,res,next){
var id=req.query.id||'';

Content.findOne({
_id:id
}).then(function(content){
if(!content){
res.render('admin/error',{
userInfo:req.body.userInfo,
message:'文章id事先被刪除了！'
});
return Promise.reject();
}else{
return Content.update({
_id:id
},{
category:req.body.category,
title:req.body.title,
description:req.body.description,
content:req.body.content
});
}
}).then(function(){
res.render('admin/success',{
userInfo:req.body.userInfo,
message:'修改爲功！',
operation:{
url:'/admin/content',
operation:'返回分類管理'
}
});
});
});

刪除

基本差很少。

router.get('/content/delete',function(req,res,next){
var id=req.query.id||'';

Content.remove({
_id:id
}).then(function(){
res.render('admin/success',{
userInfo:req.userInfo,
message:'刪除文章成功！',
operation:{
url:'/admin/content',
operation:'返回分類管理'
}
});
});
});

信息擴展（發佈者，點擊量）

能夠在數據表結構中再添加兩個屬性

user: {
//類型
type:mongoose.Schema.Types.objectId,
//引用
ref:'User'
},

views:{
type:Number,
default:0
}

而後在文章添加時，增添一個user屬性，把req.userInfo._id傳進去。

顯示呢？實際上populate方法接受一個字符串或者有字符串組成的數組。因此數組應該是xxx.populate(['category','user'])。這樣模板就能拿到user的屬性了。

而後修改模板，讓它展示出來：

十六. 文章管理（2）：前臺

先給博客寫點東西吧。當前的文章確實太少了。

當咱們寫好了文章，內容就已經存放在服務器上了。前臺怎麼渲染是一個值得考慮的問題。顯然，這些事情都是main.js完成的。

這時候注意了，入門一個領域，知道本身在幹什麼是很是重要的。

獲取數據集

因爲業務邏輯，個人博客內容設置爲不在首頁展現，須要在/article頁專門展現本身的文章，除了所有文章，分類連接渲染的是：/article?id=xxx。

先看所有文章下的/article怎麼渲染吧。

文章頁效果預期是這樣的：

•文章頁須要接收文章的信息。
•文章須要接收分頁相關的信息。

文章頁須要接收的信息比較多，因此寫一個data對象，把這些信息放進去，到渲染時直接用這個data就好了。

//main.js
var express=require('express');

var router=express.Router();

var Category=require('../models/Categories');
var Content=require('../models/Content');
/**省略首頁路由**/
router.get('/article',function(req,res,next){
var data={
userInfo:req.userInfo,
categories:[],
count:0,
page:Number(req.query.page||1),
limit:3,
pages:0
};

// 讀取分類信息
Category.find().then(function(categories){
data.categories=categories;

return Content.count();
}).then(function(count){
data.count=count;
//計算總頁數
data.pages=Math.ceil(data.count/data.limit);
// 取值不超過pages
data.page=Math.min(data.page,data.pages);
// 取值不小於1
data.page=Math.max(data.page,1);
// skip不須要分配到模板中，因此忽略。
var skip=(data.page-1)*data.limit;

return Content.find().limit(data.limit).skip(skip).populate(['category','user']).sort(_id:-1);

}).then(function(contents){
data.contents=contents;
console.log(data);//這裏有你想要的全部數據
res.render('main/article',data);
})
});

該程序反映了data一步步獲取內容的過程。

前臺應用數據
•我只須要對文章展現作個for循環，而後把數據傳進模板中就能夠了。

```javascript
{% for content in contents %}

<p>{{content.description}}</p>
<address>推送於{{content.date}}</address>
</div>
{% endfor %}

```

•側邊欄有一個文章內容分類區，把數據傳進去就好了。

•分頁按鈕能夠這樣寫

```html

◦第一頁

{% if page-1!==0 %}
◦上一頁

{%endif%}

{% if page+1<=pages %}
<li><a href="/article?page={{page+1}}">下一頁</a></li>
{% endif %}
<li><a href="/article?page={{pages}}">最後頁</a></li>
</ul>
</div>

```

效果：

你會發現，模板的代碼越寫越簡單。

獲取分類下的頁面（where方法）

如今來解決分類的問題。

以前咱們寫好的分類頁面地址爲/article?category={{category._id.toString()}}

因此要對當前的id進行響應。若是請求的category值爲不空，則調用where顯示。

router.get('/article',function(req,res,next){
var data={
userInfo:req.userInfo,
category:req.query.category||'',
categories:[],
count:0,
page:Number(req.query.page||1),
limit:3,
pages:0
};
var where={};
if(data.category){
where.category=data.category
}
//...
return Content.where(where).find().limit(data.limit).skip(skip).sort({_id:-1}).populate(['category','user']);

這樣點擊相應的分類，就能獲取到相應的資料了。

可是頁碼仍是有問題。緣由在於count的獲取，也應該根據where進行查詢。

return Content.where(where).count();

另一個頁碼問題是，頁碼的連接寫死了。

只要帶上category就好了。

因此比較完整的頁碼判斷是：

<ul>
{% if pages>0 %}
<li><a href="/article?category={{category.toString()}}&page=1">第一頁</a></li>
{% if page-1!==0 %}
<li><a href="/article?category={{category.toString()}}&page={{page-1}}">上一頁</a></li>
{%endif%}

<li style="background:rgb(166,96,183);"><a style="color:#fff;" href="javascript:;">{{page}}/{{pages}}</a></li>

{% if page+1<=pages %}
<li><a href="/article?category={{category.toString()}}&page={{page+1}}">下一頁</a></li>
{% endif %}
<li><a href="/article?category={{category.toString()}}&page={{pages}}">最後頁</a></li>
{% else %}
<li style="width: 100%;text-align: center;">當前分類沒有任何文章！</li>
{% endif %}
</ul>

而後作一個當前分類高亮顯示的判斷

<ul>
{% if category=='' %}
<li><a style="border-left: 6px solid #522a5c;" href="/article">所有文章</a></li>
{%else%}
<li><a href="/article">所有文章</a></li>
{% endif %}
{% for _category in categories %}
{% if category.toString()==_category._id.toString() %}
<li><a style="border-left: 6px solid #522a5c;" href="/article?category={{_category._id.toString()}}">{{_category.name}}</a></li>
{% else %}
<li><a href="/article?category={{_category._id.toString()}}">{{_category.name}}</a></li>
{% endif %}
{% endfor %}
</ul>

展現文章詳細信息

同理內容詳情頁須要給個連接,而後就再寫一個路由。在這裏我用的是/view?contentid={{content._id}}。

基本邏輯

須要哪些數據？
◾userInfo
◾所有分類信息
◾文章內容（content）——包括當前文章所屬的分類信息

查詢方式：contentId

router.get('/view/',function(req,res,next){
var contentId=req.query.contentId||'';
var data={
userInfo:req.userInfo,
categories:[],
content:null
};

Category.find().then(function(categories){
data.categories=categories;
return Content.findOne({_id:contentId});
}).then(function(content){
data.content=content;
console.log(data);
res.render('main/view',data);
});
});

發現能夠打印出文章的主要內容了。

接下來就是寫模板。

新建一個article_layout.html模板，把article.html的全部內容剪切進去。

博客展現頁的主要區域在於以前的內容列表。因此把它抽離出來。

把一個個內容按照邏輯加上去，大概就是這樣。

閱讀數的實現

很簡單，每當用戶點擊文章，閱讀數就加1.

router.get('/view/',function(req,res,next){
var contentId=req.query.contentId||'';
var data={
userInfo:req.userInfo,
categories:[],
content:null
};

Category.find().then(function(categories){
data.categories=categories;
return Content.findOne({_id:contentId});
}).then(function(content){
data.content=content;
content.views++;//保存閱讀數
content.save();
console.log(data);
res.render('main/view',data);
});
});

內容評論

先把評論的樣式寫出來吧！大概是這樣

評論是經過ajax提交的。是在ajax模塊——api.js

評論的post提交到數據庫，應該放到數據庫的contents.js中。

// 評論
comments: {
type:Array,
default:[]
}

每條評論包括以下內容：

評論者，評論時間，還有評論的內容。

在api.js中寫一個post提交的路由

// 評論提交
router.post('/comment/post',function(req,res,next){
// 文章的id是須要前端提交的。
var contentId=req.body.contentId||'';
var postData={
username:req.userInfo.username,
postTime: new ConvertDate().getDate(),
content: req.body.content
};

// 查詢當前內容信息
Content.findOne({
_id:contentId
}).then(function(content){
content.comments.push(postData);
return content.save()
}).then(function(newContent){//最新的內容在newContent！
responseData.message='評論成功！';
res.json(responseData);
})

});

而後在你的view頁面相關的文件中寫一個ajax方法，咱們要傳送文章的id

可是文章的id最初並無發送過去。能夠在view頁面寫一個隱藏的input#contentId，把當前文章的id存進去。而後經過jQuery拿到數據。

});

很簡單吧！

評論提交後，清空輸入框，而後下方出現新增長的內容。

最新的內容從哪來呢？在newContent處。因此咱們只須要讓responseData存進newContent，就能實現內容添加。

// api.js
//...
// 查詢當前內容信息
Content.findOne({
_id:contentId
}).then(function(content){
content.comments.push(postData);
return content.save()
}).then(function(newContent){
responseData.message='評論成功！';
responseData.data=newContent;
res.json(responseData);
})

//...

看，這樣就拿到數據了。

接下來就在前端渲染頁面：

用這個獲取內容。

functionrenderComment(arr){
var innerHtml='';
for(var i=0;i<arr.length;i++){
innerHtml='<li><span class="comments-user">'+arr[i].username+' </span><span class="comments-date">'+arr[i].postTime+'</span><p>'+arr[i].content+'</p></li>'+innerHtml;
}
return innerHtml;
}

// 評論提交
$('#messageComment').click(function(){
$.ajax({
type:'POST',
url:'/api/comment/post',
data:{
contentId:$('#contentId').val(),
content:$('#commentValue').val(),
},
success:function(responseData){
console.log(responseData);
alert(responseData.message);
var arr= responseData.data.comments;
//console.log(renderComment(arr));
$('.comments').html(renderComment(arr));
}
});
return false;

});

這樣就能夠顯示出來了。可是發現頁面一刷新，內容就又沒有了——加載時就調用ajax方法。

api是提供一個虛擬地址，ajax可以從這個地址獲取數據。

重新寫一個路由：

//api.js
// 獲取指定文章的全部評論
router.get('/comment',function(req,res,next){
var contentId=req.query.contentId||'';
Content.findOne({
_id:contentId
}).then(function(content){
responseData.data=content;
res.json(responseData);
})
});

注意這裏是get方式

//每次文章重載時獲取該文章的全部評論
$.ajax({
type:'GET',
url:'/api/comment',
data:{
contentId:$('#contentId').val(),
content:$('#commentValue').val(),
},
success:function(responseData){
console.log(responseData);
var arr= responseData.data.comments;
//console.log(renderComment(arr));
$('.comments').html(renderComment(arr));
$('#commentValue').val('');
$('#commentsNum').html(arr.length)
}
});

評論分頁

分由於是ajax請求到的數據，因此徹底能夠在前端完成。

評論分頁太老舊了。不如作個僞瀑布流吧！

預期效果：點擊加載更多按鈕，出現三條評論。

之因此說是僞，由於評論一早就拿到手了。只是分段展現而已。固然你也能夠寫真的。每點擊一次都觸發新的ajax請求。只請求三條新的數據。

評論部分徹底能夠寫一個對象。重置方法，加載方法，獲取數據方法。

寫下來又是一大篇文章。

// 加載評論的基本邏輯
functionComments(){
this.count=1;
this.comments=0;
}

在ajax請求評論內容是時，給每條評論的li加一個data-index值。

// 獲取評論內容
Comments.prototype.getComment=function(arr){
var innerHtml='';
this.comments=arr.length;//獲取評論總數
for(var i=0;i<arr.length;i++){
innerHtml=
'<li data-index='+(arr.length-i)+'><span class="comments-user">'+
arr[i].username+
' </span><span class="comments-date">'+
arr[i].postTime+
'</span><p>'+
arr[i].content+
'</p></li>'+innerHtml;
}

return innerHtml;
};

在每次加載頁面,每次發完評論的時候，都初始化評論頁面。首先要作的是解綁加載按鈕可能的事件。當評論數少於三條，加載按鈕變成「沒有更多了」。超過三條時，數據自動隱藏。

Comments.prototype.resetComment=function (limit){
this.count=1;
this.comments=$('.comments').children().length;//獲取評論總數
$('#load-more').unbind("click");

if(this.comments<limit){
$('#load-more').text('..沒有了');
}else{
$('#load-more').text('加載更多');
}

for(var i=1;i<=this.comments;i++){
if(i>limit){
$('.comments').find('[data-index='+ i.toString()+']').css('display','none');
}
}
};

點擊加載按鈕，根據點擊計數加載評論

Comments.prototype. loadComments=function(limit){
var _this=this;
$('#load-more').click(function(){
//console.log([_this.comments,_this.count]);
if((_this.count+1)*limit>=_this.comments){
$(this).text('..沒有了');

}
_this.count++;

for(var i=1;i<=_this.comments;i++){
if(_this.count<i*_this.count&&i<=(_this.count)*limit){
$('.comments').find('[data-index='+ i.toString()+']').slideDown(300);
}
}
});
};

而後就是在網頁中應用這些方法：

$(function(){
//每次文章重載時獲取該文章的全部評論
$.ajax({
type:'GET',
url:'/api/comment',
data:{
contentId:$('#contentId').val(),
content:$('#commentValue').val(),
},
success:function(responseData){

var arr= responseData.data.comments;
//渲染評論的必要方法
var renderComments=new Comments();

//獲取評論內容
$('.comments').html(renderComments.getComment(arr));

//清空評論框
$('#commentValue').val('');

//展現評論條數
$('#commentsNum').html(arr.length);

//首次加載展現三條，每點擊一次加載3條
renderComments.resetComment(3);
renderComments.loadComments(3);

alert(responseData.message);
var arr= responseData.data.comments;
$('.comments').html(renderComments.getComment(arr));
$('#commentValue').val('');
$('#commentsNum').html(arr.length);

renderComments.resetComment(3);
renderComments.loadComments(3);
}
});
return false;
});

}
});

});

發佈者信息和文章分類展現

get方式獲取的內容中雖然有了文章做者id，可是沒有做者名。也缺失當前文章的內容。因此在get獲取以後，須要發送發佈者的信息。

另外一方面，因爲view.html繼承的是article的模板。而article是須要在在發送的一級目錄下存放一個category屬性，才能在模板判斷顯示。

所以須要把data.content.category移到上層數性來。

}).then(function(content){
//console.log(content);
data.content=content;
content.views++;
content.save();

return User.find({
_id:data.content.user
});

}).then(function(rs){
data.content.user=rs[0];
data.category=data.content.category;
res.render('main/view',data);
});

markdown模塊的使用

如今的博客內容是混亂無序的。

那就用到最後一個模塊——markdown

按照邏輯來講，內容渲染不該該在後端進行。儘管你也能夠這麼作。可是渲染以後，編輯文章會發生很大的問題。

因此我仍是採用熟悉的marked.js，由於它能比較好的兼容hightlight.js的代碼高亮。

// ajax方法
success:function(responseData){
// console.log(responseData);
var a=responseData.data.content;

var rendererMD = new marked.Renderer();
marked.setOptions({
renderer: rendererMD,
gfm: true,
tables: true,
breaks: false,
pedantic: false,
sanitize: false,
smartLists: true,
smartypants: false
});

marked.setOptions({
highlight: function (code,a,c) {
return hljs.highlightAuto(code).value;
}
});
//後文略...

在經過ajax請求到數據集以後，對內容進行渲染。而後插入到內容中去。

那麼模板裏的文章內容就不要了。

可是，瀏覽器自帶的html標籤樣式實在太醜了！在引入樣式庫吧

highlight.js附帶的樣式庫提供了多種基本的語法高亮設置。

而後你能夠參考bootstrap的code部分代碼。再改改行距，自適應圖片等等。讓文章好看些。

十七. 收尾

到目前爲止，這個博客就基本實現了。

前端須要一些後端的邏輯，才能對產品有較爲深入的理解

本篇文章來源於 Linux公社網站(www.linuxidc.com) 原文連接：https://www.linuxidc.com/Linux/2017-02/140115.htm