无法在 JSON-SERVER 中执行 CRUD

Question

我正在尝试使用 Redux Axios 在 JSON 服务器中添加、更新、删除。但我无法执行 CRUD 操作。我总是收到错误 404。我正在使用以下代码示例。这是我的 db.json

 {
   "orderdetails": [
     {
       "OrderID": 111,
       "CustomerID": "VINET",
       
     }
 ]
}

我正在使用以下代码从 redux 导入 Axios。请找到我的 server.js

import axios  from 'axios';
export default axios.create({
  baseURL: "http://localhost:3007/",
  headers: {
      "Content-type": "application/json"
    }
})

我正在使用以下代码示例在 JSON-Sever 中执行 CRUD 操作。但是，我有一个错误

import http from "../serverapi";
      create(data) {
        return http.post("/orderdetails/posts", data);
      }
    
      update(id, data) {
        return http.put(`/orderdetails/${id}`, data);
      }
    
      delete(id) {
        return http.delete(`/orderdetails/${id}`);
      }

您能提供建议吗？

Answer 1

如果您使用的是 json-server npm 包，您的使用会遇到一些问题。 首先，你的 db.json 是无效的。应该是这样的：

{
    "orderdetails": [
      {
        "OrderID": 111,
        "CustomerID": "VINET"
        
      },
      {
        "OrderID": 12,
        "CustomerID": "VINET"
        
      }
  ]
}

请务必先在浏览器中查看 API url。

其次，json-server 默认在 localhost:3000 上运行（不确定是否可以更改，请查看此处的文档https://www.npmjs.com/package/json-server）。您的 API 指向端口 3007，如下所示baseURL: "http://localhost:3007/，

最后，你不能发出像http://localhost:3000/orderdetails/111 这样的请求。 api url的最后一部分默认对应db.json中的id键，但是由于你的键是OrderID，所以你的API端点应该修改为http://localhost:3000/orderdetails?OrderID=111。在浏览器中尝试这个 url，它应该返回正确的对象。

更新 json-server 中的更新操作要求 db.json 文件中存在 id 键。因此，更新您的 db.json 如下：

{
    "orderdetails": [
      {
        "id": 1,
        "OrderID": 111,
        "CustomerID": "VINET"
        
      },
      {
        "id": 2,
        "OrderID": 12,
        "CustomerID": "VINET"
        
      }
  ]
}

然后，您可以尝试在 url http://localhost:3000/orderdetails 和 json body 上运行 POST 请求：

{
    "OrderID": 12333,
    "CustomerID": "VINET"
  }

这将在 db 中创建一个新对象，其 id 递增。可以使用 url 中的 id 参数发出 PUT、DELETE 请求，例如 http://localhost:3000/orderdetails/3。