json-server 的简单使用

Posted 2023-05-17

参考技术A json-server用于模拟服务端接口数据，可以根据json数据建立一个完整的web服务。

github上的json-server地址
安装json-server

查看版本号，安装成功

在文件夹下创建一个db.json文件，存放一些数据。

在文件夹下，直接在地址栏cmd，进入终端。执行启动json-server命令。

json-server 已经启动成功。

在浏览器中输入地址： http://localhost:+ 端口号/接口名称，即可查看数据。
例如：输入 http://localhost:5000/comments

在和db.json同级的目录下，创建public目录，里面可以存放一些静态资源。

如何防止 json-server 在发布后重新加载页面？

【中文标题】如何防止 json-server 在发布后重新加载页面？

【英文标题】：How to prevent from json-server to reload page after post?

【发布时间】：2021-06-24 11:04:55

【问题描述】：

我正在使用 Json Server 来模拟 API 请求并且我遇到了一个烦人的行为，我所做的每个帖子都会导致页面重新加载...我已经阅读了他们的 api 文档但没有来什么都有。我正在使用一个简单的 jquery ajax 请求，如下所示：

$.ajax(
url: 'http://localhost:3000/list',
type: 'post',
data: itemObj,

dataType: 'json',

success: function (itemObj) 
 
  todoListArr.push(itemObj);
  createMarkup(); 
  $(this).val(''); // clear input
  return false;

  
);

我已经尝试过 e.preventDefault() 但它与 ajax 调用无关 - 这是导致它的 json-server...我用于运行服务器的命令是： npx json-server --watch db.json 也试过 npx json-server

【问题讨论】：

我敢打赌，这是在表格内。 return false 内部成功回调不会返回到外部函数。同样，如果您在success 中调用event.preventDefault()，则为时已晚。它会在事件完成后很长时间触发

谢谢 - 我没有使用表单 - 只是带有 onKeyPress 事件的普通输入 - 问题出在 Json 服务器上，因为任何其他模拟 api 都可以正常工作

这能回答你的问题吗？ How to prevent page reload when using $ajax?

【参考方案1】：

我有同样的问题，如果你使用 VS 代码尝试不使用实时服务器扩展（禁用它），它应该可以正常工作。

【参考方案2】：

这可能是因为实时服务器扩展或类似的刷新 html 页面，如果您正在使用例如 vs 代码实时服务器。另一种可能性是，如果您正在使用表单，并且表单内部或表单外部的某些内容正在侦听可能导致事件冒泡的相同提交事件，那么您也可以尝试e.stopPropagation();。

【讨论】：

谢谢 - 我添加了 return false - stopPropagation 与它无关......问题在于 Json 服务器，因为任何其他模拟 api 都可以工作......

您是否尝试禁用您可能在 Ide 上使用的任何实时服务器扩展？

谢谢，我正在另一个端口上运行实时服务器......你认为它为什么应该中断？