重点到了，文章详情页！
这个页面的逻辑应该是最多的了，渲染、收藏、私信、评论……
页面渲染（这个是文章详情的渲染，还有文章评论的渲染跟这个类似就不写了，两个方法都在mounted周期里）
还是一样请求后端接口，需要把页面url的参数传到后端，这个参数在首页渲染的时候已经给详情页了，是articleId，后端接收到这个参数即将这篇文章的所有数据返回给前端，前端依然是用一个数组接收，然后渲染。
//后端
router.post("/details",function(req,res,next){
var articleId = req.body.articleId;
Article.findOne({'articleId':articleId},(err,doc)=>{
if(err){
res.json({
status:'1',
msg:err.message
})
}
res.json({
status:'0',
msg:doc
})
})
})
//前端
getDetails(){
axios.post('/articles/details',{
articleId:this.$route.query.id
}).then((response)=>{
var res=response.data;
this.articleDetails=res.msg
})
}
这里发现数据库设计上有一个问题，没有在article里设计用户头像字段，把model和上传数据加上headImg即可。
收藏功能
点击收藏，前端post文章信息到后端，后端接收并写入数据库user表。
这里后端需要验证数据是否已存在，查询数据库，若存在返回status2，前端通知已存在，若不存在则写入表中。
//后端接口
router.post("/collect", (req,res,next) => {
var userId = req.session.user.userId;
var articleId = req.body.articleId;
User.findOne({'userId':userId,'collectArticle.articleId':articleId},(err,doc)=>{
if(err)throw err;
if(doc){ //如果找到文章返回2，表示数据库中已经有这条数据
res.json({
status:'2',
msg:'文章已收藏'
})
}else{ //如果没有这条数据，则插入
User.update({'userId':userId},{
$push:{
collectArticle:{
articleId,
articleGoTime:req.body.articleGoTime,
articleDestination:req.body.articleDestination,
articleDescription:req.body.articleDescription
}
}
},(err1,doc1)=>{
if(err1){
res.json({
status:'1',
msg:err1.message
})
}else{
res.json({
status:'0',
msg:'收藏成功'
})
}
})
}
})
})
评论/留言
留言这边因为后面要做消息提示功能，所以不光要写到article表，还要根据回复给谁这个字段来决定插入到哪个用户表中。
前端如果点击回复，会在输入框里显示“回复给 xxx：”，用户在其后输入文字，我将文本使用split处理一下截取xxx这个字段，根据空格分隔判断第一项数组是否是“回复给”，如果是，截取后面的名字传给后端，若不是，传空给后端。
后端判断传来的参数决定写入哪个用户的表，如果是空，写入发布者表的文章评论项，有值，根据这个值找到用户，写入他的表文章回复项。
这里因为后面根据这个值来做消息提示功能，所以写进用户表里需要有作者，文章id，评论内容。
这里数据库有一点是写入集合中一个数组中的一个数组，这么写的（publishArticle.$.comment）：
User.update({'userId':req.body.articleOwnerId,'publishArticle.articleId':articleId},{
$push:{
'publishArticle.$.comment':{
from:userNickName,
articleId,
commentContent
}
}
}
所有代码如下：
//发布评论
router.post("/comment",function(req,res,next){
var articleId = req.body.articleId,
commentToWhom = req.body.commentToWhom,
commentContent = req.body.remark,
userNickName = req.session.user.userNickName;
Article.update({'articleId':articleId},{
$push:{
'articleComment':{
commentOwnerHeadImg:req.session.user.userHeadImg,
commentContent,
commentOwnerName:userNickName,
commentOwnerSchool:req.session.user.userSchool,
commentToWhom,
commentPublishTime:req.body.date,
}
}
}).then(()=>{
if(commentToWhom==''){ //回复文章作者，写入作者表的文章评论项
User.update({'userId':req.body.articleOwnerId,'publishArticle.articleId':articleId},{
$push:{
'publishArticle.$.comment':{
from:userNickName,
articleId,
commentContent
}
}
},(err1,doc1)=>{
if(err1){
res.json({
status:'1',
msg:err1.message
})
}
res.json({
status:'2',
msg:'成功写入作者评论表'
})
})
}else{ //回复回复者，写入回复者表的toMeReply项
User.update({'userNickName':commentToWhom},{
$push:{
toMeReply:{
from:userNickName,
replyContent: commentContent,
articleId
}
}
},(err2,doc2)=>{
if(err2){
res.json({
status:'1',
msg:err2.message
})
}
res.json({
status:'3',
msg:'成功写入回复者回复表'
})
})
}
}).catch((err)=>{
res.json({
status:'1',
msg:err.message
})
})
})
//前端
submit(){
if(this.remark==''){
this.$message({
showClose:true,
message:'输入不可以为空!',
type:'error'
})
}else{
var date = new Date();
var min;
var sec;
//格式化发布日期，形如2018.6.5 13：13:13
if(date.getMinutes()>=0 && date.getMinutes()<=9)min='0'+date.getMinutes();
else{min=date.getMinutes()}
if(date.getSeconds()>=0 && date.getSeconds()<=9)sec='0'+date.getSeconds();
else{sec=date.getSeconds()}
axios.post('/articles/comment',{
date:date.getFullYear()+'.'+(date.getMonth()+1)+'.'+date.getDate()+' '+date.getHours()+':'+min+':'+sec,
remark:this.remark,
articleId:this.$route.query.id,
commentToWhom:(this.remark.split(':')[0]).split(' ')[0]=='回复给'?(this.remark.split(':')[0]).split(' ')[1].trim():'',
articleOwnerId:this.articleDetails.articleOwnerId
}).then((response)=>{
let res = response.data;
if(res.status=='2'||res.status=='3'){
this.$message({
showClose:true,
message:'success',
type:'success'
})
this.remark=''
this.getComments()
}else{
this.$message({
showClose:true,
message:'啊哦，发生了错误',
type:'error'
})
}
})
}
}
私信功能
专门开一篇来讲吧，比较复杂
