javascript - 如何在 vuejs 中发出补丁请求并更新使用 v-model 的个人的标记输入

Question

您好，我正在使用 vuejs、express 和 mongoDB 制作学生评估输入表单。我已经完成了后端 API 的工作，并且使用 postman 进行测试工作正常。下面是代码。

// UPDATE MARKS
router.patch('/:studentId', async (req, res) => {
    try{
    const updatedStudent = await Assessment.updateMany({_id: req.params.studentId},
        {
            $push:
            { homework: req.body.homework,
              classtest:req.body.classtest, 
              projectwork:req.body.projectwork, 
              exams:req.body.exams },
        });
        res.json(updatedStudent);
            }catch (err) {
                res.json({ message: err });
    }
});

我一直坚持让它与 vuejs 前端一起工作。我创建了一个 JavaScript 文件“assessment.js”来发出其中的所有请求，如下所示；

import axios from 'axios';

const url = 'http://localhost:9000/contAssessment/';
   ...
    // Add Marks
    static addMarks(homework) {
        return axios.patch(url, {
            homework
        });
    }
}

export default assessmentService;

我已将其导入到标记组件表单中，如下所示；

<template>
    <div id="container">
        <div 
            v-for="assessment in assessments" 
            v-bind:key="assessment._id"
            >
            <div id="students_marks_info"
            v-if="assessment.students.classes===classes"
            > 
            <p> {{assessment.students.name}} </p> 
            <p> <input type="text" v-model="homework"> </p>
            </div>
        </div>
        <button type="submit" v-on:click="addMarks(homework)">Submit</button>
    </div>
</template>


<script>
import assessmentService from '../assessmentService';

export default {
  name: 'marksEntryForm',
  data() {
    return {
      assessments: [],
      error: '',
      classes: '',
      homework: []
    }
  },
  async created() {
    try {
      this.assessments = await assessmentService.getAssessments();
    } catch(err) {
      this.error = err.message;
    }
  },
  methods: {
   async addMarks() {
      await assessmentService.addMarks(this.homework);
      this.assessments = await assessmentService.getAssessments();
      }
    }}
</script>

每当我单击按钮运行 addMarks 方法时，我都会收到 404 错误请求。我的输入也有问题。每当我为学生输入分数时，其他学生的输入中都会出现相同的分数。由于我是 vuejs 新手并使用 axios 发出补丁请求，因此我需要您对此问题的友好回复。谢谢

Answer 1

您在服务器上的路由器是here_is_your_url/:studentId，但在请求中从前面到http://localhost:9000/contAssessment/(没有:studentId)