无法在 JSON-SERVER 中执行 CRUD

如何解决无法在 JSON-SERVER 中执行 CRUD

我正在尝试使用 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}`);
      }

你能提供建议吗？

解决方法

如果您使用的是 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 中的更新操作要求 id 键存在于 db.json 文件中。因此，更新您的 db.json 如下：

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

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

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

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