Fatal编程技术网
  • node.js/
  • Node.js 我的API的删除部分有什么问题？

Node.js 我的API的删除部分有什么问题？

node.js mongodb rest vue.js mongoose

Node.js 我的API的删除部分有什么问题？,node.js,mongodb,rest,vue.js,mongoose,Node.js,Mongodb,Rest,Vue.js,Mongoose,我在一门网络编程课上，我们正在编写网络服务器API。我目前已经实现了POST和GET，但在实现DELETE时遇到了一些问题。我做错了什么？我希望能彻底解释一下我做错了什么，因为我真的在努力学习材料（当然，除非只是格式错误） 有很多部分还没有实现，所以我确信有很多错误。我主要关心的是删除，以及代码中任何我不理解的明显内容 我已经用fakeDomainName.com替换了我的域名 index.html和script.js位于公用文件夹中。在我的主目录中启动.js 我们正在创建一个简单的投票类型ap

我在一门网络编程课上，我们正在编写网络服务器API。我目前已经实现了POST和GET，但在实现DELETE时遇到了一些问题。我做错了什么？我希望能彻底解释一下我做错了什么，因为我真的在努力学习材料（当然，除非只是格式错误）

有很多部分还没有实现，所以我确信有很多错误。我主要关心的是删除，以及代码中任何我不理解的明显内容

我已经用fakeDomainName.com替换了我的域名

index.html和script.js位于公用文件夹中。在我的主目录中启动.js

我们正在创建一个简单的投票类型api来练习，使用Node.js服务器和MongoDB数据库来存储信息。目前，POST和GET按预期工作，但DELETE给了我以下错误：

spread.js:25 DELETE http://fakeDomainName.com:3010/api/candidates/undefined 500 (Internal Server Error)
(anonymous) @ spread.js:25
e.exports @ spread.js:25
e.exports @ spread.js:25
Promise.then (async)
r.request @ spread.js:25
r.<computed> @ spread.js:25
(anonymous) @ axios.min.js:477
deleteItem @ script.js:65
invokeWithErrorHandling @ vue.js:1855
invoker @ vue.js:2173
original._wrapper @ vue.js:7416

spread.js:25 Uncaught (in promise) Error: Request failed with status code 500
    at e.exports (spread.js:25)
    at e.exports (spread.js:25)
    at XMLHttpRequest.d.onreadystatechange (spread.js:25)
e.exports @ spread.js:25
e.exports @ spread.js:25
d.onreadystatechange @ spread.js:25
XMLHttpRequest.send (async)
(anonymous) @ spread.js:25
e.exports @ spread.js:25
e.exports @ spread.js:25
Promise.then (async)
r.request @ spread.js:25
r.<computed> @ spread.js:25
(anonymous) @ axios.min.js:477
deleteItem @ script.js:65
invokeWithErrorHandling @ vue.js:1855
invoker @ vue.js:2173
original._wrapper @ vue.js:7416
下面是我在script.js中的代码，它链接到我的index.html页面：

    var app = new Vue({
      el: '#app',
      data: {
        name: "",
        bio: "",
        numVotes: "",
        file: null,
        addItem: null,
        items: [],
        findName: "",
        findItem: null,
      },
      created() {
          this.getItems();
        },

      computed: {
        suggestions() {
          return this.items.filter(item => item.title.toLowerCase().startsWith(this.findTitle.toLowerCase()));
        }
      },

      methods: {

        async postItem(item) {
            console.log("initiated");
          try {
            let response = await axios.post('/api/candidates', {
              name: this.name,
              bio: this.bio,
              numVotes: this.numVotes,
            });
            this.addItem = response.data;
          }
          catch (error) {
            console.log(error);
          }
        },

        async getItems() {
          try {
            let response = await axios.get("/api/candidates");
            this.items = response.data;
            return true;
          }
          catch (error) {
            console.log(error);
          }
        },

        selectItem(item) {
          this.findName = "";
          this.findItem = item;
        },


        async deleteItem(item) {
          try {
            let response = axios.delete("/api/candidates/" + item._id);
            this.findItem = null;
            this.getItems();
            return true;
          } catch (error) {
            console.log(error);
          }
        },

        async editItem(item) {
          try {
            let response = await axios.put("/api/candidates/" + item._id, {
              name: this.findItem.name,
              bio: this.findItem.bio,
              numVotes: this.findItem.numVotes,
            });
            this.findItem = null;
            this.getItems();
            return true;
          } catch (error) {
            console.log(error);
          }
        },
      },

    });
最后，这里是我在index.html中使用的代码：

<!DOCTYPE HTML>
<html>

<head>
    <title></title>

</head>

<body>

    <h2>Hello World</h2>

    <div id="app">
        <div>
            <div>
                <input v-model="name" placeholder="Name">
                <p></p>
                <input v-model="bio" placeholder="Bio">
                <p></p>
                <input v-model="numVotes" placeholder="Number of votes">
                <button @click="postItem">Upload</button>
                <button @click="deleteItem">Delete</button>

            </div>
            <div v-if="addItem">
                <h2>{{addItem.name}}</h2>
                <h2>{{addItem.bio}}</h2>
                <h2>{{addItem.NumVotes}}</h2>
            </div>
        </div>

        <h2>Candidates:</h2>
        <div v-for="item in items">
            <div @click="selectItem">
            <h2>Name: {{item.name}}</h2>
            <h2>Bio: {{item.bio}}</h2>
            <h2>Number of Votes: {{item.numVotes}}</h2>
            </div>
        </div>
    </div>

    <!--Vue and axios-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="/script.js"></script>

</body>

</html>


你好，世界




上传
删除
{{addItem.name}
{{addItem.bio}
{{addItem.NumVotes}
候选人：
名称：{{item.Name}
生物：{{item.Bio}
投票数：{{item.numVotes}
正如您在url中所看到的，您不会得到参数id，它显示为未定义 
//fakeDomainName.com:3010/api/candidates/undefined
由于这是给错误，如果你将通过与身份证，它也将工作

//delete a candidate from the list
    app.delete('/api/candidates/:id', async(req, res) => {
      console.log("initiated delete request");
      Candidate.findOneAndDelete({ _id: req.params.id }, function(err) {
        if (err) res.sendStatus(500);
        else {
          console.log(req.params.id, "deleted successfully");
          res.sendStatus(200);
        }
      });
    });```
我和邮递员测试了你的节点。“删除”可以。但正如您在错误本身中看到的
删除http://fakeDomainName.com:3010/api/candidates/undefined
发送的参数
项目id
未定义，因此无法删除

在
POST
请求（服务器/节点端）中，您可能可以添加
sendStatus（200）
以避免POST请求挂起。此外，您还可以在保存
候选项时获取保存项的
id

像这样：


    app.post('/api/candidates', async(req, res) => {
  console.log("initiated post request");
  const candidate = new Candidate({
    name: req.body.name,
    bio: req.body.bio,
    numVotes: req.body.numVotes,
  });
  this.addItem = candidate.data;
  try {
      console.log("Await save...");
    let data = await candidate.save();
    console.log("Done");
    res.statusCode = 200;
    res.setHeader('content-type','application/json');
    res.end(JSON.stringify(data));
  }
  catch (error) {
    console.log(error);
    res.sendStatus(500);
  }
});


答复如下：


{
"_id": "5dd38cb16f47912b40a1deef",
"name": "Ken Adams",
"bio": "bio",
"numVotes": "10",
"__v": 0



}
use可以使用findOneAndDelete而不是deleteOne it…因为if将首先查找然后删除结果。我得到的错误与此相同。除了不同的函数名，语法是否相同？正如您在日志中所看到的，这仍然会导致相同的错误。我需要从script.js传递id吗？如果是，我该怎么做？谢谢。我使用console.log进行了测试，它肯定通过了未定义的测试。我已经在尝试发送商品id，所以我想我一定是做错了什么。如何发送项目id？您可以将其作为index.html中“deleteItem”中的参数发送。你试过了吗？（我在回答中提到了如何获取一个，当你发布新项目时，你也可以通过你的请求获取项目id。我如何从获取删除请求中访问项目id？这取决于你如何获取项目（我看到你正在显示一个要选择的项目列表，你是如何填充该列表的？），在您添加它之后，或者换句话说，您如何知道要删除哪个项目？这是我的问题的中心。我不知道如何识别该项目以便删除它

{
"_id": "5dd38cb16f47912b40a1deef",
"name": "Ken Adams",
"bio": "bio",
"numVotes": "10",
"__v": 0