发布请求不起作用，使用 Express JS 和 Vue 进行获取和删除

Question

我正在按照本教程进行基本的应用程序设置，一切都对我来说很好，期待发布请求，但我没有想法。

教程：https://www.youtube.com/watch?v=HkIGAqAP1GY

这是非常可重复的，因为有教程，但我希望我已经看它太久了，这就是为什么我看不出有什么问题。

运行refreshData()和deleteNote()运行完美，而且格式是相同的，所以我不确定我做错了什么导致在api端找不到post请求。

这是“网络”选项卡中的呼叫

Express JS API

var Express = require("express");
var Mongoclient = require("mongodb").MongoClient;
var cors = require("cors");
var multer= require("multer");


var app = Express();
app.use(cors());

var CONNECTION_STRING=<removing for privacy>;

var DATABASENAME="gifttracker";
var database;

app.listen(5038, () => {
    console.log("app listen");
    Mongoclient.connect(CONNECTION_STRING).then((client) => {
        database = client.db(DATABASENAME);
        console.log('Mongo DB Donnection Successful');
    }).catch((err) => {
        console.log('Error connecting to MongoDB: ', err)
    });
})

app.get('/api/gifttracker/GetNotes', async (req, res) => {
    let collection = await database.collection("todo");
    let results = await collection.find({}).toArray();
    res.send(results).status(200);
});

app.post('/api/gifttracker/AddNotes',multer().none(), async (req, res) => {
    console.log("addnote api", req); //this does NOT get printed
    let collection = await database.collection("todo");
    collection.count({}, function(error, num){
        collection.insertOne({
            id:(num+1).toString(),
            desc:req.body.newNotes
        })
        res.json("Added successfully");
    })
})

app.delete('/api/gifttracker/DeleteNotes', async (req, res) => {
    let collection = await database.collection("todo");
    collection.deleteOne({
        id:req.query.id
    });
    res.json("Deleted Successfully");
})

Vue 应用程序用户界面

<template>
  <div class="hello">
    <h1>To Do</h1>
    <input id="newNote"/>
    <button @click="addNote()">Add</button>
    <p v-for="note in notes" :key="note.id">
      {{ note.desc }}
      <button @click="deleteNote(note.id)">Delete</button>
    </p>  
  </div>
</template>

<script>
import axios from 'axios';
const API_URL="http://localhost:5038/";
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      notes: []
    }
  },
  methods: {
    async refreshData() {
      axios.get(API_URL+'api/gifttracker/GetNotes').then((res) => {
        this.notes = res.data;
      })
    },
    async addNote() {
      var note = document.getElementById("newNote").value;
      console.log("add note", note); //this gets printed
      const formData = new FormData();
      formData.append("newNotes", note);
      console.log("form data", formData); // so does this
      axios.post(API_URL+"api/gifttracker/AddNotes", formData).then((res) => {
        this.refreshData();
        alert(res.data);
      }).catch((err)=> {
        console.log("err",err);
      })
    },
    async deleteNote(id) {
  console.log("delete note", id);
  axios.delete(API_URL+"api/gifttracker/DeleteNotes?id="+id).then((res) => {
    this.refreshData();
    alert(res.data);
  })
},
  },
  mounted() {
    this.refreshData();
  }
}
</script>

Answer 1

我想通了。我只需要去掉教程中提到的额外内容并将我的值作为 json 传回

API

app.use(Express.json());

app.post('/api/gifttracker/AddNotes', async (req, res) => {
    console.log("addnote api", req.body);
    let collection = await database.collection("todo");
    collection.insertOne({desc: req.body.note})
    res.send(req.body.note + " added").status(200);
})

用户界面

async addNote() {
      var note = document.getElementById("newNote").value;
      console.log("add note", note);
      let json = { note: note};
      axios.post(API_URL+"api/gifttracker/AddNotes", json).then((res) => {
        this.refreshData();
        alert(res.data);
      }).catch((err)=> {
        console.log("err",err);
      })
    },