投稿
问答

vue框架下不知道怎么实现点击收藏后收藏人数自动加1，望赐教？

作者：admin 2021-04-21 我要评论

如上图，点击收藏后，收藏成功了，但是收藏人数不会自动加1，望不吝赐教，不胜感激。 template a-layout id="components-layout-demo-top" class="layout" style...

（在说正事之前，我要推荐一个福利：你还在原价购买阿里云、腾讯云、华为云服务器吗？那太亏啦！来这里，新购、升级、续费都打折，能够为您省60%的钱呢！2核4G企业级云服务器低至69元/年，点击进去看看吧>>>)

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

<template>
  <a-layout id="components-layout-demo-top" class="layout" style="min-height: 100%">
    <div id="header">
      <div class="logo">知&nbsp;否</div>

      <div id="title">

        <router-link :to="{name:'mainPage',params:{'id':this.id,'img':this.img,'token':this.token}}" style="color:white">
          <a-icon type="home" />&nbsp;首页
        </router-link>
      </div>

      <div id="title1">
        <router-link :to="{name:'personSpace',params:{'id':this.id,'img':this.img,'token':this.token}}" style="color:white">
          <a-icon type="user" />&nbsp;个人中心
        </router-link>
      </div>



      <a-input-search placeholder="请输入要搜索的问题" v-model="searchItem" style="width: 300px;margin: 15px 20px 10px 90px;" @search="onSearch"/>
      <button type="button" id="search" @click="onSearch" style="
    height: 15px;
    width: 120px;
    margin: 10px;
    padding: 18px;
    border-radius: 10px;
    line-height: 0px;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 20px;
    position: absolute;
    background: deepskyblue;
    font-weight: bold;
    color: white;
    border-color: skyblue;
    /*transform: translateY(4px);*/
">
        搜索问题

      </button>

      <div style="height:60px;weight:200px;float:right;padding: 0 20px;">


        <div id="right" style="padding: 15px 5px 20px 20px;">
          <a-badge :count=count title="通知" v-if=ifToken style="margin-left: 40px">
            <a-icon type="bell" style="font-size: 25px" title="通知" @click="getMessage"/>
          </a-badge>
<!--          <router-link :to="{name:'personSpace',params:{'id':this.id,'img':this.img,'token':this.token}}">
            <a-avatar shape="square" v-if=ifToken size="large" :src=img style="margin-left: 20px;margin-bottom: 12px"/>
          </router-link>-->
        </div>

        <template>
          <a-dropdown>
            <a style="color:white;font-size: 20px;" >
              {{ u_name }} <a-icon type="down" style="color:white;font-size:25px" />
            </a>
            <a-menu slot="overlay" @click="onClick">
              <a-menu-item key="1">
                <a-icon type="setting" />
                设置
              </a-menu-item>
              <a-menu-item key="2" @click="logout">
                <a-icon type="logout" />
                退出
              </a-menu-item>

            </a-menu>
          </a-dropdown>
        </template>

      </div>
    </div>





    <a-layout-content style="padding: 0 50px">
      <a-breadcrumb style="margin: 20px 0">
      </a-breadcrumb>
      <div :style="{ background: '#fff', padding: '24px', minHeight: '430px' }">
<!--        问题部分-->
        <a-page-header
            style=""
            sub-title="返回"
            @back="exit"
        />
        <h2 style="font-weight: bold">{{question_title}}</h2>

        <p style="font-size: 15px">{{question_content}}</p>

        <p style="font-size: 10px">{{question_updated_time}}</p>

        <a-button v-if="question_state === 0" @click="collect" style="width:90px;padding: 0 10px;"><a-icon type="star" />收藏&nbsp;{{question_collection_num}}</a-button>

        <a-button type="primary" v-if="question_state === 0" @click="write" style="width:90px;padding: 0 10px;"><a-icon type="edit" />写回答</a-button>

        <a-divider />
<!--        问题部分-->


<!--        回答区-->
        <div v-for="item in answerList" :key="item.answer_id">
<!--          ![](item.u_img width=)&nbsp;&nbsp;-->
        <p style="font-weight: bold;font-size: 15px;display: inline">{{item.u_name}}</p>
          <br/><br/>
          {{item.answer_content}}
          <br/><br/>
          <p style="font-size: 10px">{{item.updated_time}}</p>
          <a-button type="primary" @click="like(item)" style="width:60px;padding: 0 10px;"><a-icon type="like" />{{item.praise_num}}</a-button>&nbsp;
          <a-button type="primary" @click="dislike(item)" style="width:60px;padding: 0 10px;"><a-icon type="dislike" />{{item.criticize_num}}</a-button>
          <a-button type="primary" style="margin-left: 100px;width:70px;padding: 0 10px;" @click="info(item)"><a-icon type="message" theme="twoTone" />评论</a-button>
          <a-divider/>
        </div>
<!--        回答区-->

        </div>
    </a-layout-content>

  </a-layout>
</template>
<script>
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
}
</script>
<style lang="less" scoped>

</style>
<template>
  <a-layout id="components-layout-demo-top" class="layout" style="min-height: 100%">
    <div id="header">
      <div class="logo">知&nbsp;否</div>
      <div id="title">
        <router-link :to="{name:'mainPage',params:{'id':this.id,'img':this.img,'token':this.token}}" style="color:white">
          <a-icon type="home" />&nbsp;首页
 </router-link>
      </div>
      <div id="title1">
        <router-link :to="{name:'personSpace',params:{'id':this.id,'img':this.img,'token':this.token}}" style="color:white">
          <a-icon type="user" />&nbsp;个人中心
 </router-link>
      </div>
      <a-input-search placeholder="请输入要搜索的问题" v-model="searchItem" style="width: 300px;margin: 15px 20px 10px 90px;" @search="onSearch"/>
      <button type="button" id="search" @click="onSearch" style="
 height: 15px;
    width: 120px;
    margin: 10px;
    padding: 18px;
    border-radius: 10px;
    line-height: 0px;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 20px;
    position: absolute;
    background: deepskyblue;
    font-weight: bold;
    color: white;
    border-color: skyblue;
    /*transform: translateY(4px);*/
">
        搜索问题
 </button>
      <div style="height:60px;weight:200px;float:right;padding: 0 20px;">
        <div id="right" style="padding: 15px 5px 20px 20px;">
          <a-badge :count=count title="通知" v-if=ifToken style="margin-left: 40px">
            <a-icon type="bell" style="font-size: 25px" title="通知" @click="getMessage"/>
          </a-badge>
<!--          <router-link :to="{name:'personSpace',params:{'id':this.id,'img':this.img,'token':this.token}}">
 <a-avatar shape="square" v-if=ifToken size="large" :src=img style="margin-left: 20px;margin-bottom: 12px"/> </router-link>--> </div>
        <template>
          <a-dropdown>
            <a style="color:white;font-size: 20px;" >
              {{ u_name }} <a-icon type="down" style="color:white;font-size:25px" />
            </a>
            <a-menu slot="overlay" @click="onClick">
              <a-menu-item key="1">
                <a-icon type="setting" />
                设置
 </a-menu-item>
              <a-menu-item key="2" @click="logout">
                <a-icon type="logout" />
                退出
 </a-menu-item>
            </a-menu>
          </a-dropdown>
        </template>
      </div>
    </div>
    <a-layout-content style="padding: 0 50px">
      <a-breadcrumb style="margin: 20px 0">
      </a-breadcrumb>
      <div :style="{ background: '#fff', padding: '24px', minHeight: '430px' }">
<!-- 问题部分-->
 <a-page-header
 style=""
 sub-title="返回"
 @back="exit"
 />
        <h2 style="font-weight: bold">{{question_title}}</h2>
        <p style="font-size: 15px">{{question_content}}</p>
        <p style="font-size: 10px">{{question_updated_time}}</p>
        <a-button v-if="question_state === 0" @click="collect" style="width:90px;padding: 0 10px;"><a-icon type="star" />收藏&nbsp;{{question_collection_num}}</a-button>
        <a-button type="primary" v-if="question_state === 0" @click="write" style="width:90px;padding: 0 10px;"><a-icon type="edit" />写回答</a-button>
        <a-divider />
<!-- 问题部分-->
<!-- 回答区-->
 <div v-for="item in answerList" :key="item.answer_id">
<!--          <img :src=item.u_img width="42" height="42">&nbsp;&nbsp;-->
 <p style="font-weight: bold;font-size: 15px;display: inline">{{item.u_name}}</p>
          <br/><br/>
          {{item.answer_content}}
          <br/><br/>
          <p style="font-size: 10px">{{item.updated_time}}</p>
          <a-button type="primary" @click="like(item)" style="width:60px;padding: 0 10px;"><a-icon type="like" />{{item.praise_num}}</a-button>&nbsp;
 <a-button type="primary" @click="dislike(item)" style="width:60px;padding: 0 10px;"><a-icon type="dislike" />{{item.criticize_num}}</a-button>
          <a-button type="primary" style="margin-left: 100px;width:70px;padding: 0 10px;" @click="info(item)"><a-icon type="message" theme="twoTone" />评论</a-button>
          <a-divider/>
        </div>
<!-- 回答区-->
 </div>
    </a-layout-content>
  </a-layout>
</template>
<script>
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
}
</script>
<style lang="less" scoped>
</style>

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

<template>
  <a-layout id="components-layout-demo-top" class="layout" style="min-height: 100%;width:100%">
    <div id="header">
      <div class="logo">知&nbsp;否</div>
      <div id="title">
        <router-link :to="{name:'mainPage',params:{'id':this.id,'img':this.img,'token':this.token}}" style="color:white">
          <a-icon type="home" />&nbsp;首页
 </router-link>
      </div>
      <div id="title1">
        <router-link :to="{name:'personSpace',params:{'id':this.id,'img':this.img,'token':this.token}}" style="color:white">
          <a-icon type="user" />&nbsp;个人中心
 </router-link>
      </div>
      <a-input-search placeholder="请输入要搜索的问题" v-model="searchItem" style="width: 300px;margin: 15px 20px 10px 90px;" @search="onSearch"/>
      <button type="button" id="search" style="
 height: 15px;
    width: 120px;
    margin: 10px;
    padding: 18px;
    border-radius: 10px;
    line-height: 0px;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 20px;
    position: absolute;
    background: deepskyblue;
    font-weight: bold;
    color: white;
    border-color: skyblue;
    /*transform: translateY(4px);*/
">
        <router-link :to="{name:'addQuestion',params:{'id':this.id,'img':this.img,'token':this.token}}" style="color:white">
          提问题
 </router-link>
      </button>
      <div style="height:60px;weight:200px;float:right;padding: 0 20px;">
        <div id="right" style="padding: 15px 5px 20px 20px;">
          <a-badge :count=count title="通知" v-if=ifToken style="margin-left: 40px">
            <a-icon type="bell" style="font-size: 25px" title="通知" @click="getMessage"/>
          </a-badge>
<!-- 头像<router-link :to="{name:'personSpace',params:{'id':this.id,'img':this.img,'token':this.token}}">
 <a-avatar shape="square" v-if=ifToken size="large" :src=img style="margin-left: 20px;margin-bottom: 12px"/> </router-link>--> </div>
        <template>
          <a-dropdown>
            <a style="color:white;font-size: 20px;" >
              {{ u_name }} <a-icon type="down" style="color:white;font-size:25px" />
            </a>
            <a-menu slot="overlay" @click="onClick">
              <a-menu-item key="1">
                <a-icon type="setting" />
                设置
 </a-menu-item>
              <a-menu-item key="2" @click="logout">
                <a-icon type="logout" />
                退出
 </a-menu-item>
            </a-menu>
          </a-dropdown>
        </template>
      </div>
    </div>
    <a-layout-content style="padding: 0px 0px 0px 40px;
        width: 1100px;">
      <a-breadcrumb style="margin: 20px 0">
      </a-breadcrumb>
      <div :style="{ width:'900 px',background: '#fff', padding: '24px', minHeight: '430px',}">
<!--依次类推的话，以传来的列表list中的question_id为key，依次显示各个问题，具体如下-->
 <div v-for="item in list" :key="item.question_id">
          <div style="float:right;background: red;font-size: 18px;padding:5px;color:white" v-if=item.question_authority_state>已终结</div>
          <div style="float:right;background: deepskyblue;font-size: 18px;padding:5px;color:white" v-if="item.question_authority_state === 0">未终结</div>
          <a style="font-weight: bold;font-size: 20px;color: black" @click="seeThisQuestion(item)">{{item.question_title}}</a><!--问题标题-->
 <p>{{item.question_content}}</p><!--问题内容-->
 <div style="float:left">
            <a-button type="primary" @click="collect(item)" style="width:80px;padding: 0 10px;"><a-icon type="star" theme="twoTone" />收藏&nbsp;
 {{item.collection_num}}</a-button>
            <a-button type="primary" v-if="item.question_authority_state === 0" @click="write(item)" style="width:80px;padding: 0 10px;"><a-icon type="message" theme="twoTone" />回答&nbsp;
 {{item.answer_num}}</a-button>
            <a-button type="primary" disabled v-if="item.question_authority_state === 1" @click="write(item)" style="width:80px;padding: 0 10px;"><a-icon type="message" theme="twoTone" />回答&nbsp; {{item.answer_num}}</a-button>
          </div>
          <a-divider/>
        </div>
<!--&lt;!&ndash;end 显示问题列表的部分-->
 </div>
    </a-layout-content>
<!--
 <div id="side_card"> <div style="height: 30px; width: 100%; text-align: center; padding: 10px 0; font-size: 20px;"> 创作中心
 </div>
 <a-divider style="margin:17px 0 13px 0;"/>
 <div style="height:80px;width:100%"> <div style="height: 80px;width: 150px;padding: 0 0 0 20px;"> <div style="height: 80px; width: 100px; text-align: center; font-size: 20px;"> <a-icon type="question" style="fontSize:20px;padding: 0 0 10px 0"/><br/> <router-link :to="{name:'addQuestion',params:{'id':this.id,'img':this.img,'token':this.token}}"> 提问题
 </router-link>
 </div> </div>
 <div style="position:absolute; display:inline-block; left: 150px; right: 0px; top: 60px; height: 80px; width: 10px;"> <div style="height: 80px; width: 100px; text-align: center; font-size: 20px;"> <a-icon type="edit" style="fontSize:20px;padding: 0 0 10px 0"/><br/> 回答问题
 </div> </div>
 </div> <a-divider style="margin:17px 0 13px 0;"/>
 <a-row> <a-col :span="12" style="padding: 10px 40px;font-size: 20px;"> 稍后发
 </a-col> <a-divider type="vertical" style="height: 50px; position: absolute;right: 125px;"/> <a-col :span="12" style="padding: 10px 40px;font-size: 20px;"> 存草稿
 </a-col> </a-row> </div>-->
 </a-layout>
</template>
<script>
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
}
</script>
<style scoped>
@import "../assets/mainPage.css";
</style>

麻烦了！

###

添加 _this.question_collection_num+=1

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)
          _this.question_collection_num+=1
        }
        else
          _this.$message.info(response.data);
        
        _this.reload();
      }).catch(function(error){
        console.log(error);
        _this.$message.error('请求失败');
      })
    }
###

首先我纠正一下你的写法question_collection_num不是通过this.$route.params获取的；

正常的逻辑如下：

html部分

<a-button v-if="question_state === 0" @click="collect" style="width:90px;padding: 0 10px;"><a-icon type="star" />收藏&nbsp;{{question_collection_num}}</a-button>

js部分

data() {
    // 问题详细数据都存在这个字段里面
    detail: {};
},
mounted() {
    this.getDetail();
},
methods: {
    // 获取问题详细数据
    async getDetail() {
        // 获取问题id
        let id = this.$route.params.id;
        
        // 通过接口获取详细数据
        // 这里假设 所有接口都挂载在$api上面，具体可以根据自己的业务来
        const res = await this.$api.getQuestionDetail({id});
        if(res.code === 1) {
            this.detail = res.data;
        } else {
            // 如果没有进行全局错误处理，可以在这里单独处理；如果不需要处理，则可以不写
        }
    },
    // 处理收藏
    async collect() {
        // 先请求，吧数据回传
        const res = await this.$api.updateQuestionCollectionNum({id: this.detail.id});
        if(res.code === 1) {
            // 这里假设detial里面有question_collection_num这个字段
            this.detial.question_collection_num += 1;
        }

    }
}

版权声明：本文转载自网络，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的，如有侵权请联系QQ/微信：153890879删除

相关文章
  • vue框架下不知道怎么实现点击收藏后收

    vue框架下不知道怎么实现点击收藏后收

  • eclipse 安装 subclipse 死活不成功

    eclipse 安装 subclipse 死活不成功

  • python多进程能不能用定时任务调用

    python多进程能不能用定时任务调用

  • 如何优雅的使用v-bind集成动态属性的绑

    如何优雅的使用v-bind集成动态属性的绑

腾讯云代理商
精彩导读
/uploads/allimg/210420/0Z10R4N-0-lp.jpg

微信小程序mp-Slideview要怎么添加条件

/images/defaultpic.gif

imap npm 怎麽只是搜索特定賬號的郵件

/images/defaultpic.gif

使用pyside2自定义信号源，总是提示Can

/images/defaultpic.gif

pytorch里面如何方便的建立多层？

/images/defaultpic.gif

vue 计算属性

/uploads/allimg/210419/12011L157-0-lp.jpg

vue项目里，为什么我设置高度为100%，

海外云服务器
热门资讯
备案：湘ICP备15009499号-1
网站简介 投稿须知 商务合作 版权申明 技术支持：TOP云