原来个人中心页面我是分为了两个页面,一个发布文章页一个收藏文章页,但是发现两个页面除了一点样式不同其余全部一样,干脆就直接改成了一个页面。页面逻辑就渲染和删除两个。
不一样的样式就是点击我的发布和我的收藏的一个active样式,使用v-bind绑定class点击改一下变量就可以。
<el-col :span="3" :xs="7" class="self-title word-center"><a :class="{'active':publishFlag}" @click="getPublishArticles(),publishFlag=true,collectFlag=false">我的发布</a></el-col>
<el-col :span="3" :xs="7" class="self-title"><a :class="{'active':collectFlag}" @click="getCollectArticles(),collectFlag=true,publishFlag=false">我的收藏</a></el-col>
渲染逻辑跟前面都差不多,点击我的发布调发布方法写数据,点击我的收藏调收藏方法写数据(写在同一个数组),如下:
getPublishArticles(){
axios.get('/users/publish').then((response)=>{
let res = response.data;
if(res.status=='0'){
this.displayArticles = res.msg.reverse();
}
})
},
getCollectArticles(){
axios.get('/users/collect').then((response)=>{
let res = response.data;
if(res.status=='0'){
this.displayArticles = res.msg.reverse();
}
})
}
这里要显示用户头像和昵称,这个之前就做成了vuex全局变量,所以直接如下就可以使用两个变量。
import { mapState } from 'vuex'
computed:{
...mapState(['globalNickName','globalHeadImg']),
},
删除文章
点击删除,判断“我的发布”“我的收藏”的active状态,判断删除所需要调用的接口,如果现在publishFlag是true,说明是我的发布,传articleId到后端,删除user表和article表两个表里的文章数据,如果collectFlag是true,说明是我的收藏,这时只需要删除user表里的collect文章数据即可。
这里有一个逻辑,其他用户如果将自己发布的文章删除了,可是你却收藏了这个文章,点击之后会进入到error页面,提示这篇文章已被删除。只需要在detail页判断一下根据articleId返回的article是否为空即可。
代码如下:
//删除自己发布的文章
router.post("/deletePublish",function(req,res,next){
var userId = req.session.user.userId;
var articleId = req.body.articleId;
User.update({'userId':userId},{
$pull:{
'publishArticle':{
'articleId':articleId
}
}
}).then(()=>{
Article.remove({'articleId':articleId},(err,doc)=>{
if(err){
res.json({
status:'1',
msg:err.message
})
}
res.json({
status:'0',
msg:'删除成功!'
})
})
}).catch((err1)=>{
res.json({
status:'2',
msg:err1.message
})
})
})
//删除收藏的文章
router.post("/deleteCollect",function(req,res,next){
var userId = req.session.user.userId;
var articleId = req.body.articleId;
User.update({'userId':userId},{
$pull:{
'collectArticle':{
'articleId':articleId
}
}
},(err,doc)=>{
if(err){
res.json({
status:'1',
msg:err.message
})
}
res.json({
status:'0',
msg:'删除成功!'
})
})
})
//前端
<a @click="confirmAndDelete(),articleId=article.articleId"><h5>删除</h5> </a>
confirmAndDelete(){
this.$confirm('确认删除吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if(this.publishFlag==true){
axios.post('/articles/deletePublish',{
articleId:this.articleId
}).then((response)=>{
let res = response.data;
if(res.status=='0'){
this.$message({
type: 'success',
message: '删除成功!'
});
this.getPublishArticles();
}else{
this.$message({
type: 'error',
message: '啊哦,哪里出错了!'
});
}
})
}else{
axios.post('/articles/deleteCollect',{
articleId:this.articleId
}).then((response)=>{
let res = response.data;
if(res.status=='0'){
this.$message({
type: 'success',
message: '删除成功!'
});
this.getCollectArticles();
}else{
this.$message({
type: 'error',
message: '啊哦,哪里出错了!'
});
}
})
}
})
},