Vue.js项目PUT方法正常但GET方法无法从MongoDB获取数据

问题背景 #

开发Vue.js应用时，PUT方法正常，但GET方法无法从MongoDB获取数据，需要将已插入的cab数据通过Vue组件表格展示，其他功能正常。

相关代码 #

Vue组件表格部分代码 #

<template>
  <div class="container">
        <div class="col-md-7">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>Target</th>
                        <th>Price</th>
                        <th>Driver</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="cab of cabs" :key="cab._id">
                        <td>{{ cab.target }}</td>
                        <td>{{ cab.price }}</td>
                        <td>{{ cab.driver }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>          
</template>

<script>
    class Cab{
        constructor(target, price, driver){
            this.target = target;
            this.price = price;
            this.driver = driver;
        }
    }
    export default{
        data(){
            return{
                cab: new Cab(),
                cabs: []
            }
        },

        mounted(){
            this.listCabs();
        },
        
        methods:{
            listCabs(){   
                fetch('api/cabs') 
                .then(res => res.json())
                .then(data => {
                    this.cabs = data;
                    console.log(this.cabs);      
               })            
            },
        }
    }
</script>

路由目录下的index.js代码 #

const express = require('express');
const router = express.Router();

const Cab = require('../models/cab');


router.post('/', async (req, res) =>{
   const cab = new Cab(req.body);
   await cab.save();
   res.json({
       status: 'Cab upload'
   });
});


router.get('/', async (req, res) =>{
    const cabs = await Cab.find();
    res.json(cabs);
});
    
     
module.exports = router;

排查步骤与解决方案 #

1. 确认API路由挂载路径 #

检查Express主文件（如app.js）是否正确挂载cab路由，路径需匹配前端请求的api/cabs：

// app.js示例代码
const cabRoutes = require('./routes/index');
app.use('/api/cabs', cabRoutes);

若路径不匹配，前端请求会返回404，可通过浏览器控制台的Network标签确认。

2. 为fetch添加错误捕获 #

当前listCabs方法未处理请求失败场景，添加错误捕获便于定位问题：

listCabs(){   
    fetch('api/cabs') 
    .then(res => {
        if (!res.ok) throw new Error(`HTTP错误: ${res.status}`);
        return res.json();
    })
    .then(data => {
        this.cabs = data;
        console.log(this.cabs);      
    })
    .catch(err => console.error('获取数据失败:', err))          
}

打开浏览器控制台，查看是否有网络错误、后端500错误等提示。

3. 直接测试后端GET接口 #

在浏览器地址栏或Postman中访问http://localhost:你的端口/api/cabs：

• 若返回空数组：确认MongoDB中是否存在cab数据，或模型查询逻辑是否正确
• 若返回错误：查看后端控制台报错信息，排查数据库连接失败、模型定义错误等问题

4. 检查MongoDB模型定义 #

确保../models/cab.js中的字段与前端传入的一致：

// models/cab.js示例
const mongoose = require('mongoose');
const cabSchema = new mongoose.Schema({
    target: String,
    price: Number,
    driver: String
});
module.exports = mongoose.model('Cab', cabSchema);

字段不匹配会导致查询返回的数据缺失，进而使表格显示为空。

5. 后端添加异步错误捕获 #

为GET接口添加try/catch，捕获数据库查询时的错误：

router.get('/', async (req, res) =>{
    try {
        const cabs = await Cab.find();
        res.json(cabs);
    } catch (err) {
        res.status(500).json({ error: err.message });
        console.error('查询数据失败:', err);
    }
});

后端出错时会返回明确的错误信息，便于快速定位问题。

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