前面《Express腳手架項目》篇基本實現了一個留言板登錄註冊和留言的一個功能，但是一旦留言很多就會破壞頁面結構，這裏需要一個分頁的效果。在說分頁之前，先讓留言能夠查看在detail.ejs頁面展示一下。
//detail.ejs
<!DOCTYPE html>
<html>
<head>
<title>詳情</title>
<link rel='stylesheet' href='/stylesheets/bootstrap.min.css' />
<script src="/javascripts/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<%- include('head.ejs')%>
<h2>詳情</h2>
<h1>歌曲名字：<%- detail2%></h1>
<h2>歌手：<%- detail1%></h2>
</html>
這裏面的數據通過點擊留言具體信息的時候，提交一個id去後臺數據庫查找，之後讓後臺把數據給前端頁面，也就是前端會得到detail1和detail2這兩條代表留言標題、留言內容的數據，在前端頁面展示。下面是在留言頁面去傳遞id和跳轉到詳情頁面的操作。
//liuyan.ejs
<table class="table table-striped">
<tr><th>序號</th><th>標題</th><th>內容</th></tr>
<% list.map(function(item,i){%>
<tr>
<td><%- i+1%></td>
//點擊跳轉，通過query傳參，search的方式，知道點擊的是哪一條留言
<td onclick="location.href='/detail?id=<%- item._id%>'"><%- item.title%></td>
<td><%- item.con%></td>
</tr>
<% })%>
</table>
然後需要在前端路由渲染detail頁面，還有通過req.query來接收前端傳參數據。
//index.js
var mongodb = require("mongodb").MongoClient;
//這裏引入mongodb模塊裏面的ObjectId是爲了在查找的時候能通過id查找，因爲前端傳來的id是字符串格式，
//{ id: '5b6bb56282685418c87bf5ce' }，而數據庫裏面的是處理過的
//{"_id": ObjectId('5b6bb56282685418c87bf5ce') }這樣格式，不處理肯定找不到
var ObjectId = require("mongodb").ObjectId;
var db_str = "mongodb://localhost:27017/html5";
//詳情
router.get("/detail",(req,res)=>{
//console.log(req.query)
var id = ObjectId(req.query.id)
mongodb.connect(db_str,(err,database)=>{
database.collection("liuyan",(err,coll)=>{
coll.find({_id:id}).toArray((err,data)=>{
//找到的留言信息傳給前端頁面
res.render("detail",{detail1:data[0].con,detail2:data[0].title})
database.close()
})
})
})
})
以上就實現了留言詳情的一個展示，下面來實現分頁。
在liuyan.ejs的發佈留言按鈕結構下面寫入分頁模塊，拿了bootstrap的組件裏面的分頁結構，主要代碼如下
//liuyan.ejs
<!--分頁-->
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="/liuyan?pageNum=<%-pageNum<1?1:parseInt(pageNum)-1%>" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<!--<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>-->
<% if(page>4){%>
<li><a href="/liuyan?pageNum=1">1</a></li>
<li><a href="/liuyan?pageNum=2">2</a></li>
<li><a href="#">...</a></li>
<li><a href="/liuyan?pageNum=<%-page-1%>"><%-page-1%></a></li>
<li><a href="/liuyan?pageNum=<%-page%>"><%-page%></a></li>
<%}else{%>
<%for(let i=0; i<page;i++){%>
<li><a href="/liuyan?pageNum=<%-i+1%>"><%-i+1%></a></li>
<%}%>
<%}%>
<li>
<a href="/liuyan?pageNum=<%-pageNum>page?page:parseInt(pageNum)+1%>" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
前端路由對接收到的由前端頁面用戶點擊的第幾頁即pageNum做的處理，如下
//index.js
//要安裝async依賴模塊（npm i async -D），然後引入
var async = require("async");
//留言
router.get("/liuyan",(req,res)=>{
//頁碼
var pageNum = req.query.pageNum;
//沒點擊時候，展示第一頁，點擊時候，點哪一頁展示哪一頁的數據
pageNum = pageNum?pageNum:1;
//總頁數
var page = 0;
//每頁數量
var size =5;
//總條數
var count = 0;
mongodb.connect(db_str,(err,database)=>{
database.collection("liuyan",(err,coll)=>{
async.series([
function(callback){
coll.find({}).toArray((err,data)=>{
count = data.length;
page = Math.ceil(count/size)
// 上一頁/下一頁
pageNum=pageNum<1?1:pageNum;
pageNum= pageNum.page?page:pageNum;
callback(null,"")
})
},
function(callback){
coll.find({}).sort({_id:-1}).limit(size).skip((pageNum-1)*size).toArray((err,data)=>{
callback(null,data)
})
}
],function(err,data){
res.render("liuyan",{list:data[1],pageNum:pageNum,page:page,count:count,size:size})
database.close()
})
// coll.find({}).sort({_id:-1}).toArray((err,data)=>{
// res.render("liuyan",{list:data})
// database.close()
// })
})
})
})
這裏用到異步流程模塊，主要是因爲兩個事件需要同時進行，沒有先後順序。
爲了完善留言板功能，添加了一個富文本編輯器，這裏需要引入幾個文件，可以參考富文本編輯器入門的用法。主要是在javascripts中引入xheditor文件夾和fwb.js（可以從我上傳的資源裏面下，也可以在官網即入門裏面下），然後再路由界面引入upload.js文件。
//liuyan.ejs
<script src="/javascripts/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script src="/javascripts/xheditor/xheditor-1.2.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/javascripts/xheditor/xheditor_lang/zh-cn.js" type="text/javascript" charset="utf-8"></script>
//修改一下input框爲多行文本輸入框，加上xheditor類名
<label for="con">內容</label>
<textarea type="text" class="form-control xheditor" id="con" placeholder="內容"></textarea>
到這裏可以實現富文本的表情、加粗、傾斜、字變色等功能，但是圖片不能上傳。下面配置一下，實現圖片上傳。
//liuyan.ejs
//在ajax事件的script上面調用一下，這裏面配有上傳圖片路徑upImgUrl: '/users/uploadImg',
<script src="/javascripts/fwb.js" type="text/javascript" charset="utf-8"></script>
然後看一下upload.js，它裏面引入了一個multiparty模塊，實現上傳圖片的。安裝一下依賴（npm i multiparty -D）,然後能看到這個upload.js文件封裝了一個函數實現了文件的上傳時候相關配置，最後作爲upload模塊暴露出去了，說明要在其他地方引用。下面是upload.js的代碼。
//upload.js
var multiparty=require('multiparty')
var fs=require('fs')
function upload(req,res){
// 創建表單
var form =new multiparty.Form()
// 編碼格式
form.encoding='utf-8';
// 文件大小
form.maxFilesSize=2*1024*1024;
// 文件上傳目錄
form.uploadDir='./uploadtem';
form.parse(req,function(err,fields,files){
var uploadurl='/images/upload';
// 獲取文件
file=files['filedata'];
// 文件的原始名字
originalFilename=file[0].originalFilename;
// 文件路徑
tempath=file[0].path;
var timestap=new Date().getTime()
uploadurl+=timestap+originalFilename;
newPath='./public/'+uploadurl;
var fsread=fs.createReadStream(tempath)
var fswrite=fs.createWriteStream(newPath)
fsread.pipe(fswrite)
fswrite.on('close',()=>{
fs.unlinkSync(tempath)
res.send('{"err":"","msg":"'+uploadurl+'"}')
})
})
}
module.exports=upload;
上面文件上傳目錄是根路徑下的uploadtem，需要去在項目根路徑創建一下這個目錄，還有上傳的路徑是'/images/upload'，所以要在images裏面去建一下upload文件目錄。再去看一下富文本fwb.js這個文件
//fwb.js
pageInit()
function pageInit() {
$.extend(XHEDITOR.settings, {shortcuts:{'ctrl+enter': submitForm}})
$('#con').xheditor({
html5Upload: false,
upMultiple: '1',
width:'100%',
upLinkUrl: 'upload.html',
upLinkExt: 'zip, rar, txt',
upImgUrl: '/users/uploadImg',
upImgExt: 'jpg,jpeg,gif,png',
upFlashUrl: 'upload.html',
upFlashExt: 'swf',
upMediaUrl: 'upload.html',
upMediaExt: 'wmv,avi,wma,mp3,mid'
})
}
// 富文本自動調用
function insertUpload(arrmsg){
var i ,msg;
for (i=0;i<arrmsg.length;i++) {
msg=arrmsg[i];
$('#uploadList').append('<option value="'+msg.id+'">'+msg.localname+'</option>')
}
}
function submitForm() {
$('#frmDemo').submit()
}
可以看到upImgUrl: '/users/uploadImg'----當我們上傳圖片時候，是在請求users路由裏面的/uploadImg，所以去uses路由裏面配置一下。
//user.js
//接收一下這個圖片處理模塊
var upload = require("./upload");
//圖片
router.post("/uploadImg",(req,res)=>{
upload(req,res);
})
以上就將相關配置工作做好了，啓動項目就可以實現登錄、註冊、富文本留言、查看詳情這些操作了。