Vue中获取被点击特定帖子ID及点击次数统计问题

我的目标是统计每个帖子的点击次数，目前仅能在控制台获取点击次数，但无法知道具体是哪个帖子被点击——每个帖子在数据库中都带有_id字段，我需要把点击次数和这个ID关联起来。

点击帖子时，控制台出现404错误，请求http://localhost:3000/allPostClicked失败，错误信息如下：

[[Prototype]]: Promise
[[PromiseState]]: "rejected"
[[PromiseResult]]: Error: Request failed with status code 404 
at createError (webpack-internal:///./node_modules/axios/lib/core/createError.js:16:15) 
at settle (webpack-internal:///./node_modules/axios/lib/core/settle.js:17:12) 
at XMLHttpRequest.onloadend (webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:54:7)
config: {url: 'http://localhost:3000/allPostClicked', method: 'post', data: '{"numberOfClick":null}', headers: {…}, transformRequest: Array(1), …}
isAxiosError: true
request...

我的代码如下：

<template>
 <div w="3" v-for="(post, post_id) in posts" :key="post_id">
   <div class="card-view" @click="getStat(post_id)">
    <div class="container">
     <a href="#"><div class="tag_name blue">{{ post.title }}</div></a>
     <div class="company">{{ post.body }}</div>
     <div class="c_logo">
       <img :src="`${post.image}`"/>
     </div>
    </div>
   </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
 name: "Home",
 components: {
   modal,
 },

data: () => ({
  posts: [],
}),

methods : {
  getStat : function() {
    let increment = this.counter += 1
    console.log(increment)

    let result = axios.post("http://localhost:3000/allPostClicked", {
        numberOfClick: increment,
        postID: this.post_id
    })
    console.log(result)
    }
  },
},
</script>

修复方案 #

1. 传递正确的帖子ID #

模板中v-for的post_id是数组索引，不是数据库中的_id，而且getStat方法没有接收参数。修改如下：

• 模板点击事件传递帖子的_id：

  <div class="card-view" @click="getStat(post._id)">
  

• 方法接收ID参数并传入请求：

  methods : {
    getStat : function(postId) {
      // 推荐让后端处理计数累加，这里传增量1即可
      axios.post("http://localhost:3000/allPostClicked", {
          numberOfClick: 1,
          postID: postId
      })
      .then(res => console.log("统计成功", res))
      .catch(err => console.error("统计失败", err))
    }
  },
  

2. 解决404错误 #

404说明后端没有配置对应的接口：

• 检查后端服务器是否正常运行在localhost:3000
• 确认后端是否存在POST /allPostClicked路由，路由路径、请求方法必须完全匹配
• 检查URL拼写，避免大小写或路径错误

3. 修正计数器问题 #

代码中this.counter未初始化，会导致报错。如果需要前端临时计数，在data中添加：

data: () => ({
  posts: [],
  counter: 0 // 初始化计数器
}),

但更可靠的方式是让后端维护每个帖子的点击数——前端仅传递点击事件和帖子ID，后端完成累加存储，避免页面刷新后计数丢失。

4. 正确处理Promise #

axios请求返回Promise，直接console.log(result)只能看到未完成的Promise，必须用.then()和.catch()处理成功/失败回调，才能获取有效信息。

内容的提问来源于stack exchange，提问作者Thestrike95