代码：
<!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">标题</label>
<input type="text" class="form-control" id="title" name="title" placeholder="请输入留言标题" v-model="title">
</div>
<div class="form-group">
<label for="comment" class="h3">内容</label>
<textarea name="comment" id="comment" class="form-control" placeholder="请输入留言内容" cols="30" rows="6" v-model="comment"></textarea>
</div>
<button type="button" class="btn btn-primary" @click="subData">提交留言</button>
</form>
<!--分页区域-->
<ul class="pagination">
<li v-for="(item,index) in pageCount" :class={active:index===page}><a href="" @click.prevent="getPage(index)">{{item}}</a></li>
</ul>
<!--留言区域-->
<ul class="list-group">
<li class="list-group-item" v-for="(item,index) in dataAry">
<p>【标题】：{{item.title}}</p>
<p>【内容】：{{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.发送post请求，提交留言数据
subData(){
//判断输入框内的内容不能为空
this.$http.post("/subdata",{
title:this.title,
comment:this.comment
}).then(res=>{
this.title=this.comment="";
alert(res.body);
window.location.href="/";
})
},
//2.获取数据的总个数
getCount(){
//需要传参
this.$http.get("/getcount").then(res=>{
var count=res.body;//字符串类型的数字；
this.pageCount=Math.ceil(count/this.pageamount);
})
},
//3.获取指定页码内的数据
getData(){
this.$http.get(`/getdata?page=${this.page}&pageamount=${this.pageamount}`).then(res=>{
//获取数组数据赋值给this.dataAry
this.dataAry=res.body;
})
},
//4.点击页码，更新this.page值
getPage(index){
this.page=index;
this.getData();//重新获取数据，动态操作页面；
}
},
beforeMount(){
this.getCount();
this.getData();
}
})
</script>
</body>
</html>
const express=require("express");
//引入自定义模块
const router=require("./controller/router");
const app=express();
//设置静态资源目录，引入js文件
app.use(express.static("./public"));
//渲染html页面
app.get("/",router.showindex);
//提交数据
app.post("/subdata",router.subData);
//获取数据总个数
app.get("/getcount",router.getCount);
//获取数据
app.get("/getdata",router.getData);
//删除数据
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请求数据
var form= new formidable.IncomingForm();
form.parse(req,function (err, fields, files) {
//添加时间戳
fields.time=sd.format(new Date(), 'YYYY-MM-DD HH:mm:ss');
//插入数据库
db.insertOne("comment",fields,function (err, result) {
if(err){
console.log(err);
return;
}
res.send("提交留言成功");
})
});
};
exports.getData=(req,res)=>{
//解构赋值
var {page,pageamount}=req.query;
//从数据库获取数据
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()中不能放数字类型
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("/");
})
};
