无法在 JSON-SERVER 中执行 CRUD

Posted 2023-03-27

【中文标题】无法在 JSON-SERVER 中执行 CRUD

【英文标题】：unable to perform CRUD in JSON-SERVER

【发布时间】：2021-09-27 16:58:06

【问题描述】：

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

您能提供建议吗？

【问题讨论】：

我猜你没有创建到 API 的路由，axios 是用来做承诺而不是 api 休息（我的意思是它不是第一次使用），因为你应该在后面使用 express 来创建一个服务器并定义后端的路由

【参考方案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。

【讨论】：

嗨@Ankit，实际上我在 package.json 中更改了端口号。我得到了一个细节localhost:3000/orderdetails?OrderID=111。但我无法执行 post ， put 。我得到同样的错误。 404

实际上我正在配置 JSON-server github.com/typicode/json-server

@J.M.Farook 我已经更新了我的答案，现在应该可以更好地解释了。