php实现按一下button显示的数字加1_24h只能加一次,vue框架下不知道怎么实现点击收藏后收藏人数自动加1，望赐教？...

于 2021-03-11 15:20:59 发布
阅读量91 收藏
点赞数
文章标签： php实现按一下button显示的数字加1_24h只能加一次
本文主要探讨了一个问题详细信息界面的实现，包括收藏、点赞、评论等用户交互功能。在用户收藏问题时，虽然后台接口成功响应，但前端收藏人数未自动更新。代码中展示了如何通过axios调用API进行登录验证、获取用户信息、展示问题及回答，并处理各种用户操作反馈，如收藏、退出、写回答、点赞和踩回答等。
摘要由CSDN通过智能技术生成

bVcO3p7

如上图，点击收藏后，收藏成功了，但是收藏人数不会自动加1，望不吝赐教，不胜感激。

style=""

sub-title="返回"

@back="exit"

/>

{{question_title}}

{{question_content}}

{{question_updated_time}}

收藏 {{question_collection_num}}

写回答

{{item.u_name}}

{{item.answer_content}}

{{item.updated_time}}

{{item.praise_num}} 

{{item.criticize_num}}

评论

export default {

name:"detailPage",

inject:['reload'],

data(){

return{

question_title:this.$route.params.question_title,//问题标题

question_content:this.$route.params.question_content,//问题内容

question_id: this.$route.params.question_id,//路由传值

question_state:this.$route.params.question_state,//问题状态

question_updated_time:this.$route.params.question_updated_time,//问题更新时间

question_collection_num: this.$route.params.question_collection_num,//收藏问题的人数

answerList:[],

answerId:'',

replyList:[],

a_id:3,

reply:'',//回复内容

searchItem:'',//搜索的内容

id:this.$route.params.id,//从登陆界面进行传值

img:this.$route.params.img,

token:this.$route.params.token,

count:'',

ifToken:localStorage.getItem('access_token'),

u_name:'',

question_user_id: this.$route.params.question_user_id

}

},

mounted() {

var _this = this;

console.log("传过来的question_title:"+this.$route.params.question_title)

console.log("从mainPage页面传过来的question_updated_time:"+this.$route.params.question_updated_time)

_this.$axios.post('/api/user/selectByUserId',

_this.$qs.stringify({

uId:_this.id,

}),

{headers:{access_token:_this.token}}

).then(function (response) {

console.log("主页获取登录用户信息：");

console.log(response.data);

console.log(response.data.data.u_img);

console.log(response.data.data.u_name);

_this.img = response.data.data.u_img;

_this.u_name=response.data.data.u_name;

}).catch(function (error) {

console.log(error);

//_this.$message.error('请求失败');

})

_this.$axios.post('/api/answer/showAnswerByTime',

_this.$qs.stringify({

questionId:_this.question_id,

}),{headers:{access_token:_this.token}}

).then(function (response) {

console.log("showAnswerByTime请求成功");

console.log(response.data);

console.log(response.data.data)

if(response.data.code === -1)

_this.$message.info('该问题还没有回答');

else

_this.answerList = response.data.data;

}).catch(function (error) {

console.log(error);

alert("请求失败");

})

_this.$axios.post('/api/msg/showMsgNum',

_this.$qs.stringify({

userId: _this.$route.params.id,//router传值！！！

}),{headers:{access_token:_this.token}}

).then(function (response) {

console.log(response.data.data);

_this.count = response.data.data;

//_this.list = response.data.data;

}).catch(function (error) {

console.log(error);

_this.$message.error('获取消息失败');

})

},//end getQuestion函数，得到问题的详细信息

methods:{

collect(){

var _this=this;

console.log("所收藏的问题id为："+this.question_id)

console.log("所收藏的问题的提出者为："+this.question_user_id)

_this.$axios.post('/api/quest/alterQuestCollectionState',

_this.$qs.stringify({

questionId:_this.question_id,

uId:_this.question_user_id, //提出该问题的人

operatorId:_this.id,

isDeleted:3

}),{headers:{access_token:_this.token}}

).then(function(response){

console.log("response.data.data:");

console.log(response.data)

if(response.data.code === 0){

_this.$message.success('收藏成功');

console.log("收藏人数："+_this.question_collection_num)

}

else

_this.$message.info(response.data);

_this.reload();

}).catch(function(error){

console.log(error);

_this.$message.error('请求失败');

})

},

logout(){

var _this = this;

_this.$axios.post('/api/user/leave',

_this.$qs.stringify({

uId: this.id,

}),{headers: {access_token:_this.token}}

).then(function (response) {

console.log(response.data);

localStorage.removeItem('access_token');

localStorage.clear();

_this.$router.push({

path:'/login',

name:'login',

})

}).catch(function (error) {

console.log(error);

_this.$message.error('请求失败');

})

},//end exit函数/*

onClick ({ key }) {

console.log(`Click on item ${key}`)

},

exit(){

var _this = this;

_this.$router.push({

path:'/mainPage',

name:'mainPage',

params:{

id:_this.id,

img:_this.img,

token:_this.token,

}

})

},

write(){

var _this = this;

_this.$router.push({

path:'/writeAnswer',

name:'writeAnswer',//路由命名

params:{

question_id:_this.question_id,//页面之间的传值

id:_this.id,

img:_this.img,

token:_this.token,

question_title:_this.question_title,

question_content:_this.question_content,

question_state:_this.question_state,

},

});

},//end write函数，写回答

like(record){

var _this = this;

//console.log(record);

_this.$axios.post('/api/answer/alterAnswerEvaluationState',

_this.$qs.stringify({

answerId: record.answer_id,//回答编号

uId: record.user_id,//用户账号

operatorId: _this.id,//操作者账号？？？？？需要进行修改

evaluationState: 4,//回答被赞

}),{ headers: { access_token: _this.token } }

).then(function (response) {

console.log(response);

if(response.data.code === 90)

_this.$message.error('不能进行重复操作');

else if(response.data.code === 90000)

_this.$message.error('请先登录再对该回答进行操作');

else

_this.$message.success('点赞成功');

}).catch(function (error) {

console.log(error);

_this.$message.error('请求失败');

})//end catch异常

},//end like函数，赞回答

dislike(record){

var _this = this;

_this.$axios.post('/api/answer/alterAnswerEvaluationState',

_this.$qs.stringify({

answerId: record.answer_id,//回答编号

uId: record.user_id,//用户账号

operatorId: _this.id,//操作者账号？？？？？需要进行修改

evaluationState: 5,//回答被赞

}),{ headers: { access_token: _this.token } }

).then(function (response) {

console.log(response.data);

if(response.data.code === 90)

_this.$message.error('不能进行重复操作');

else if(response.data.code === 90000)

_this.$message.error('请先登录再对该回答进行操作');

else

_this.$message.success('点踩成功');

}).catch(function (error) {

console.log(error);

_this.$message.error('请求失败');

})//end catch异常

},//end dislike函数。踩回答

showReplyByTime(answer_id){

var _this = this;

_this.$axios.post( '/api/showReplyByTime',

_this.$qs.stringify({

answer_id: answer_id,

})

).then(function (response) {

console.log(response.data);

_this.replyList = response.data.data();

}).catch(function (error) {

console.log(error);

_this.$notification.error({

message: '请求失败',

// description: '',

});

})

},//end showReplyByTime函数，按照时间顺序展示回复

info(record) {

var _this = this;

_this.$router.push({

path: '/getComments',

name: 'getComments',//路由命名

params: {

question_title:_this.question_title,

answer_content:record.answer_content,

answer_id:record.answer_id,

id:_this.id,

img:_this.img,

token:_this.token,

question_id:_this.question_id,

question_state:_this.question_state,

question_content: _this.question_content,

},

})

},//end info函数，提供弹窗功能

addReply(formName){

var _this = this;

_this.$axios.post('/api/addAnswer',

_this.$qs.stringify({

answerId: _this.answerId,

userId:2,//使用router

replyContent:_this.reply,

})

).then(function (response) {

console.log("请求成功");

console.log(response.data);

_this.$message.success('成功提交评论');

_this.$router.push({

path:'/detailpage',

name:'DetailPage',//路由命名

params:{

id:_this.id,

},

});

}).catch(function (error){

console.log(error);

console.log(formName.text);

_this.$message.error('请求失败，请重新提交评论');

})

},//end addReply函数,添加回复

onSearch(){

var _this = this;

_this.$axios.post('/api/quest/selectByTitle',

_this.$qs.stringify({

questionTitle:_this.searchItem,

}),{ headers: { access_token: _this.token } }

).then(function (response) {

console.log(response.data.data);

_this.$router.push({

path:'/searchPage',

name:'searchPage',//路由命名

params:{

list:response.data.data,

id:_this.id,

img:_this.img,

token:_this.token

},

});//end 页面跳转

}).catch(function (error) {

console.log(error);

_this.$message.error('请求失败');

})

},//end onSearch函数，进行查找问题

getMessage(){

var _this = this;

_this.$router.push({

path:'/messagePage',

name:'messagePage',

params:{

id:_this.id,

img:_this.img,

token:_this.token,

}

})

},//end getMessage函数，获取消息

}//end methods

}

 首页

 个人中心

搜索问题

{{ u_name }}

设置

退出

style=""

sub-title="返回"

@back="exit"

/>

{{question_title}}

{{question_content}}

{{question_updated_time}}

收藏 {{question_collection_num}}

写回答

{{item.u_name}}

{{item.answer_content}}

{{item.updated_time}}

{{item.praise_num}} 

{{item.criticize_num}}

评论

export default {

name:"detailPage",

inject:['reload'],

data(){

return{

question_title:this.$route.params.question_title,//问题标题

question_content:this.$route.params.question_content,//问题内容

question_id: this.$route.params.question_id,//路由传值

question_state:this.$route.params.question_state,//问题状态

question_updated_time:this.$route.params.question_updated_time,//问题更新时间

question_collection_num: this.$route.params.question_collection_num,//收藏问题的人数

answerList:[],

answerId:'',

replyList:[],

a_id:3,

reply:'',//回复内容

searchItem:'',//搜索的内容

id:this.$route.params.id,//从登陆界面进行传值

img:this.$route.params.img,

token:this.$route.params.token,

count:'',

ifToken:localStorage.getItem('access_token'),

u_name:'',

question_user_id: this.$route.params.question_user_id

}

},

mounted() {

var _this = this;

console.log("传过来的question_title:"+this.$route.params.question_title)

console.log("从mainPage页面传过来的question_updated_time:"+this.$route.params.question_updated_time)

_this.$axios.post('/api/user/selectByUserId',

_this.$qs.stringify({

uId:_this.id,

}),

{headers:{access_token:_this.token}}

).then(function (response) {

console.log("主页获取登录用户信息：");

console.log(response.data);

console.log(response.data.data.u_img);

console.log(response.data.data.u_name);

_this.img = response.data.data.u_img;

_this.u_name=response.data.data.u_name;

}).catch(function (error) {

console.log(error);

//_this.$message.error('请求失败');

})

_this.$axios.post('/api/answer/showAnswerByTime',

_this.$qs.stringify({

questionId:_this.question_id,

}),{headers:{access_token:_this.token}}

).then(function (response) {

console.log("showAnswerByTime请求成功");

console.log(response.data);

console.log(response.data.data)

if(response.data.code === -1)

_this.$message.info('该问题还没有回答');

else

_this.answerList = response.data.data;

}).catch(function (error) {

console.log(error);

alert("请求失败");

})

_this.$axios.post('/api/msg/showMsgNum',

_this.$qs.stringify({

userId: _this.$route.params.id,//router传值！！！

}),{headers:{access_token:_this.token}}

).then(function (response) {

console.log(response.data.data);

_this.count = response.data.data;

//_this.list = response.data.data;

}).catch(function (error) {

console.log(error);

_this.$message.error('获取消息失败');

})

},//end getQuestion函数，得到问题的详细信息

methods:{

collect(){

var _this=this;

console.log("所收藏的问题id为："+this.question_id)

console.log("所收藏的问题的提出者为："+this.question_user_id)

_this.$axios.post('/api/quest/alterQuestCollectionState',

_this.$qs.stringify({

questionId:_this.question_id,

uId:_this.question_user_id, //提出该问题的人

operatorId:_this.id,

isDeleted:3

}),{headers:{access_token:_this.token}}

).then(function(response){

console.log("response.data.data:");

console.log(response.data)

if(response.data.code === 0){

_this.$message.success('收藏成功');

console.log("收藏人数："+_this.question_collection_num)

}

else

_this.$message.info(response.data);

_this.reload();

}).catch(function(error){

console.log(error);

_this.$message.error('请求失败');

})

},

logout(){

var _this = this;

_this.$axios.post('/api/user/leave',

_this.$qs.stringify({

uId: this.id,

}),{headers: {access_token:_this.token}}

).then(function (response) {

console.log(response.data);

localStorage.removeItem('access_token');

localStorage.clear();

_this.$router.push({

path:'/login',

name:'login',

})

}).catch(function (error) {

console.log(error);

_this.$message.error('请求失败');

})

},//end exit函数/*

onClick ({ key }) {

console.log(`Click on item ${key}`)

},

exit(){

var _this = this;

_this.$router.push({

path:'/mainPage',

name:'mainPage',

params:{

id:_this.id,

img:_this.img,

token:_this.token,

}

})

},

write(){

var _this = this;

_this.$router.push({

path:'/writeAnswer',

name:'writeAnswer',//路由命名

params:{

question_id:_this.question_id,//页面之间的传值

id:_this.id,

img:_this.img,

token:_this.token,

question_title:_this.question_title,

question_content:_this.question_content,

question_state:_this.question_state,

},

});

},//end write函数，写回答

like(record){

var _this = this;

//console.log(record);

_this.$axios.post('/api/answer/alterAnswerEvaluationState',

_this.$qs.stringify({

answerId: record.answer_id,//回答编号

uId: record.user_id,//用户账号

operatorId: _this.id,//操作者账号？？？？？需要进行修改

evaluationState: 4,//回答被赞

}),{ headers: { access_token: _this.token } }

).then(function (response) {

console.log(response);

if(response.data.code === 90)

_this.$message.error('不能进行重复操作');

else if(response.data.code === 90000)

_this.$message.error('请先登录再对该回答进行操作');

else

_this.$message.success('点赞成功');

}).catch(function (error) {

console.log(error);

_this.$message.error('请求失败');

})//end catch异常

},//end like函数，赞回答

dislike(record){

var _this = this;

_this.$axios.post('/api/answer/alterAnswerEvaluationState',

_this.$qs.stringify({

answerId: record.answer_id,//回答编号

uId: record.user_id,//用户账号

operatorId: _this.id,//操作者账号？？？？？需要进行修改

evaluationState: 5,//回答被赞

}),{ headers: { access_token: _this.token } }

).then(function (response) {

console.log(response.data);

if(response.data.code === 90)

_this.$message.error('不能进行重复操作');

else if(response.data.code === 90000)

_this.$message.error('请先登录再对该回答进行操作');

else

_this.$message.success('点踩成功');

}).catch(function (error) {

console.log(error);

_this.$message.error('请求失败');

})//end catch异常

},//end dislike函数。踩回答

showReplyByTime(answer_id){

var _this = this;

_this.$axios.post( '/api/showReplyByTime',

_this.$qs.stringify({

answer_id: answer_id,

})

).then(function (response) {

console.log(response.data);

_this.replyList = response.data.data();

}).catch(function (error) {

console.log(error);

_this.$notification.error({

message: '请求失败',

// description: '',

});

})

},//end showReplyByTime函数，按照时间顺序展示回复

info(record) {

var _this = this;

_this.$router.push({

path: '/getComments',

name: 'getComments',//路由命名

params: {

question_title:_this.question_title,

answer_content:record.answer_content,

answer_id:record.answer_id,

id:_this.id,

img:_this.img,

token:_this.token,

question_id:_this.question_id,

question_state:_this.question_state,

question_content: _this.question_content,

},

})

},//end info函数，提供弹窗功能

addReply(formName){

var _this = this;

_this.$axios.post('/api/addAnswer',

_this.$qs.stringify({

answerId: _this.answerId,

userId:2,//使用router

replyContent:_this.reply,

})

).then(function (response) {

console.log("请求成功");

console.log(response.data);

_this.$message.success('成功提交评论');

_this.$router.push({

path:'/detailpage',

name:'DetailPage',//路由命名

params:{

id:_this.id,

},

});

}).catch(function (error){

console.log(error);

console.log(formName.text);

_this.$message.error('请求失败，请重新提交评论');

})

},//end addReply函数,添加回复

onSearch(){

var _this = this;

_this.$axios.post('/api/quest/selectByTitle',

_this.$qs.stringify({

questionTitle:_this.searchItem,

}),{ headers: { access_token: _this.token } }

).then(function (response) {

console.log(response.data.data);

_this.$router.push({

path:'/searchPage',

name:'searchPage',//路由命名

params:{

list:response.data.data,

id:_this.id,

img:_this.img,

token:_this.token

},

});//end 页面跳转

}).catch(function (error) {

console.log(error);

_this.$message.error('请求失败');

})

},//end onSearch函数，进行查找问题

getMessage(){

var _this = this;

_this.$router.push({

path:'/messagePage',

name:'messagePage',

params:{

id:_this.id,

img:_this.img,

token:_this.token,

}

})

},//end getMessage函数，获取消息

}//end methods

}

此为问题的详细信息界面，下为问题列表界面

 首页

 个人中心

提问题

{{ u_name }}

设置

退出

已终结
未终结

{{item.question_title}}

{{item.question_content}}

收藏 

{{item.collection_num}}

回答 

{{item.answer_num}}

回答  {{item.answer_num}}

export default {

name:"mainPage",

inject:['reload'],

data(){

return{

u_name:' ',

searchItem:'',

count:'',

list:[],

id:this.$route.params.id,//从登陆界面进行传值

img:'',

token:this.$route.params.token,

record: '',

ifToken: localStorage.getItem('access_token'),

}

},

mounted() {

var _this = this;

console.log("从login界面传过来的id为："+this.$route.params.id);

console.log("从login界面传过来的token为:"+_this.token);

_this.$axios.post('/api/quest/showQuestByTime',

{},

{ headers: { access_token: _this.token } }

).then(function (response) {

console.log("showQuestByTime:")

console.log(response.data);

_this.list = response.data.data;

}).catch(function (error) {

console.log(error);

_this.$message.error('请求失败');

})

//var _this = this;

_this.$axios.post('/api/user/selectByUserId',

_this.$qs.stringify({

uId:_this.id,

}),

{headers:{access_token:_this.token}}

).then(function (response) {

console.log("主页获取登录用户信息：");

console.log(response.data);

console.log(response.data.data.u_img);

console.log(response.data.data.u_name);

_this.img = response.data.data.u_img;

_this.u_name=response.data.data.u_name;

}).catch(function (error) {

console.log(error);

//_this.$message.error('请求失败');

})

_this.$axios.post('/api/msg/showMsgNum',

_this.$qs.stringify({

userId: _this.$route.params.id,//router传值！！！

}),{headers:{access_token:_this.token}}

).then(function (response) {

console.log(response.data.data);

/*console.log("回答数量："+response.data.data.answer_num);*/

_this.count = response.data.data;

//_this.list = response.data.data;

}).catch(function (error) {

console.log(error);

_this.$message.error('获取消息失败');

})

},//end mounted自动执行函数

methods:{

collect(record){

var _this=this;

console.log("所收藏的问题id为："+record.question_id)

console.log("所收藏的问题的提出者为："+record.user_id)

_this.$axios.post('/api/quest/alterQuestCollectionState',

_this.$qs.stringify({

questionId:record.question_id,

uId:record.user_id, //提出该问题的人

operatorId:_this.id,

isDeleted:3

}),{headers:{access_token:_this.token}}

).then(function(response){

console.log("response:"+response);

if(response.data.code === 0){

_this.$message.success('收藏成功');

_this.list = response.data.data;

}

else if(response.data.code === 90000)

_this.$message.error('请先登录再收藏');

else

_this.$message.info(response.data);

_this.reload();

}).catch(function(error){

console.log(error);

_this.$message.error('请求失败');

})

},

write(record){

var _this = this;

console.log(record);//打印问题详细信息

_this.$router.push({

path:'/writeAnswer',

name:'writeAnswer',//路由命名

params:{

question_id:record.question_id,//页面之间的传值

id:_this.id,

img:_this.img,

token:_this.token,

question_title:record.question_title,

question_content:record.question_content,

question_state:record.question_authority_state,

},

});

},//end write函数，写回答

logout(){

var _this = this;

_this.$axios.post('/api/user/leave',

_this.$qs.stringify({

uId: this.id,

}),{headers: {access_token:_this.token}}

).then(function (response) {

console.log(response.data);

localStorage.removeItem('access_token');

localStorage.clear();

_this.$router.push({

path:'/login',

name:'login',

})

}).catch(function (error) {

console.log(error);

_this.$message.error('请求失败');

})

},//end exit函数/*

onClick ({ key }) {

console.log(`Click on item ${key}`)

},

seeThisQuestion(record){

var _this = this;

console.log("record：");//打印问题详细信息

console.log(record)

console.log("问题的提出者为："+record.user_id)

_this.$router.push({

path:'/detailPage',

name:'detailPage',//路由命名

params:{

question_id:record.question_id,//页面之间的传值

id:_this.id,

img:_this.img,

token:_this.token,

question_state:record.question_authority_state,

question_title:record.question_title,

question_content:record.question_title,

question_updated_time:record.updated_time,

question_collection_num:record.collection_num,

question_user_id:record.user_id

},

});

},//end seeThisQuestion函数，查看这个问题的详细信息

onSearch(){

var _this = this;

_this.$axios.post('/api/quest/selectByTitle',

_this.$qs.stringify({

questionTitle:_this.searchItem,

}),{ headers: { access_token: _this.token } }

).then(function (response) {

console.log(response.data);

_this.$router.push({

path:'/searchPage',

name:'searchPage',//路由命名

params:{

list:response.data.data,

id:_this.id,

img:_this.img,

token:_this.token

},

});//end 页面跳转

}).catch(function (error) {

console.log(error);

_this.$message.error('请求失败');

})

},//end onSearch函数，进行查找问题

getMessage(){

var _this = this;

_this.$router.push({

path:'/messagePage',

name:'messagePage',

params:{

id:_this.id,

img:_this.img,

token:_this.token,

}

})

},//end getMessage函数，获取消息

}//end methods

}

@import "../assets/mainPage.css";

麻烦了！

weixin_39602280
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值