代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue留言板實例</title>
<link rel="icon" type="image/x-icon" href="img/icon.jpg">
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<div class="container" id="app">
<h1 style="text-align: center;margin-top: 50px;">Vue分頁留言板</h1>
<form>
<div class="form-group">
<label for="title" class="h3">標(biāo)題</label>
<input type="text" class="form-control" id="title" name="title" placeholder="請輸入留言標(biāo)題" v-model="title">
</div>
<div class="form-group">
<label for="comment" class="h3">內(nèi)容</label>
<textarea name="comment" id="comment" class="form-control" placeholder="請輸入留言內(nèi)容" cols="30" rows="6" v-model="comment"></textarea>
</div>
<button type="button" class="btn btn-primary" @click="subData">提交留言</button>
</form>
<!--分頁區(qū)域-->
<ul class="pagination">
<li v-for="(item,index) in pageCount" :class={active:index===page}><a href="" @click.prevent="getPage(index)">{{item}}</a></li>
</ul>
<!--留言區(qū)域-->
<ul class="list-group">
<li class="list-group-item" v-for="(item,index) in dataAry">
<p>【標(biāo)題】：{{item.title}}</p>
<p>【內(nèi)容】：{{item.comment}}</p>
<p>【時間】：{{item.time}}</p>
<p><a :href='"/deldata?id="+item._id' class="btn btn-danger">刪除</a></p>
</li>
</ul>
</div>
<script src="js/vue.js"></script>
<script src="js/vue-resource.js"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
title:"",
comment:"",
dataAry:[],
pageamount:3,
pageCount:0,
page:0
},
methods:{
//1.發(fā)送post請求你虹，提交留言數(shù)據(jù)
subData(){
//判斷輸入框內(nèi)的內(nèi)容不能為空
this.$http.post("/subdata",{
title:this.title,
comment:this.comment
}).then(res=>{
this.title=this.comment="";
alert(res.body);
window.location.href="/";
})
},
//2.獲取數(shù)據(jù)的總個數(shù)
getCount(){
//需要傳參
this.$http.get("/getcount").then(res=>{
var count=res.body;//字符串類型的數(shù)字绘搞；
this.pageCount=Math.ceil(count/this.pageamount);
})
},
//3.獲取指定頁碼內(nèi)的數(shù)據(jù)
getData(){
this.$http.get(`/getdata?page=${this.page}&pageamount=${this.pageamount}`).then(res=>{
//獲取數(shù)組數(shù)據(jù)賦值給this.dataAry
this.dataAry=res.body;
})
},
//4.點擊頁碼，更新this.page值
getPage(index){
this.page=index;
this.getData();//重新獲取數(shù)據(jù)傅物，動態(tài)操作頁面夯辖；
}
},
beforeMount(){
this.getCount();
this.getData();
}
})
</script>
</body>
</html>
const express=require("express");
//引入自定義模塊
const router=require("./controller/router");
const app=express();
//設(shè)置靜態(tài)資源目錄，引入js文件
app.use(express.static("./public"));
//渲染html頁面
app.get("/",router.showindex);
//提交數(shù)據(jù)
app.post("/subdata",router.subData);
//獲取數(shù)據(jù)總個數(shù)
app.get("/getcount",router.getCount);
//獲取數(shù)據(jù)
app.get("/getdata",router.getData);
//刪除數(shù)據(jù)
app.get("/deldata",router.delData);
app.listen(2525);
const db=require("../model/db");
const formidable=require("formidable");
const sd=require("silly-datetime");
const ObjectId=require("mongodb").ObjectId;
exports.showindex=(req,res)=>{
res.sendFile("index.html",{root:"./"});
};
exports.subData=(req,res)=>{
//formidable接受post請求數(shù)據(jù)
var form= new formidable.IncomingForm();
form.parse(req,function (err, fields, files) {
//添加時間戳
fields.time=sd.format(new Date(), 'YYYY-MM-DD HH:mm:ss');
//插入數(shù)據(jù)庫
db.insertOne("comment",fields,function (err, result) {
if(err){
console.log(err);
return;
}
res.send("提交留言成功");
})
});
};
exports.getData=(req,res)=>{
//解構(gòu)賦值
var {page,pageamount}=req.query;
//從數(shù)據(jù)庫獲取數(shù)據(jù)
db.find("comment",{},{"sort":{"time":-1},page,pageamount},function (err, result) {
if(err){
console.log(err);
return;
}
res.send(result);
})
};
exports.getCount=(req,res)=>{
db.count("comment",{},function (err, count) {
//res.send()中不能放數(shù)字類型
res.send(count.toString());
})
};
exports.delData=(req,res)=>{
var id=req.query.id;
db.deleteMany("comment",{_id:ObjectId(id)},function (err, result) {
if(err){
console.log(err);
return;
}
res.redirect("/");
})
};
