json-server模拟数据实现增删改查

最新推荐文章于 2025-01-19 13:51:41 发布
最新推荐文章于 2025-01-19 13:51:41 发布
阅读量1.5k 收藏 6
点赞数 1
分类专栏： json-server 文章标签： json-server
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_26880461/article/details/103508492
版权
本文介绍如何利用json-server快速创建本地API，用于前端开发测试。包括安装json-server，创建和启动db.json文件，使用faker生成数据，以及实现数据的增删改查等功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

通常我们在做项目时会遇到后端接口还没有完成的情况，这个时候我们可以使用json-server 实现本地模拟后端接口来测试前端代码效果
1：首先全局安装json-server
npm install -g json-server
2：在某个文件夹路径下创建db.json 文件 ，例如
在这里插入图片描述
然后在当前文件路径下启动json-server （启动命令：json-server --watch db.json） 例如
在这里插入图片描述
然后可以通过http://localhost:3000 访问主页
在这里插入图片描述
通过访问http://localhost:3000/product 可以获取接口所有数据
在这里插入图片描述
同时我们可以使用faker 批量生成数据
首先 安装 faker . npm install faker --save-dev
faker 文档

在这里插入图片描述
然后在mock 文件下创建generate.js
接着运行 json-server generage.js json-server 便会帮我们生成我们想要的数据

在这里插入图片描述
在控制台按下s 键，json-server 便会将生成的数据保存为快照存在mock文件夹下
在这里插入图片描述
在这里插入图片描述
如果我们要查询商品id 为1 的商品 ，可以访问 http://localhost:3000/product/1 即可
同时json-server 还可支持 post delete put get 等请求 实现本地数据的增删改查，同样能实现前端数据的排序，分页，过滤等操作
例如：http://localhost:3000/product?_page=2&_limit=10 查询第二页数据，每页展示10条
详细案例请看json-server 官方文档

Vue(第十六课)JSON-SERVE和POSTMAN技术中对数据的增删改查
qq_56248592的博客
12-04 982
重在实操
json-server Node.js 服务,前端模拟后端提供json接口服务
wtt234的专栏
07-21 805
json-server Node.js 服务,前端模拟后端提供json接口服务背景：前后端分离的项目，如果前端写页面的话，必须的后端提供接口文件，作为前端等待时间太久，不便于开发进行，如果前端写的过程中自己搭建一个简要的后端的json服务接口，就是可以快速进行开发事项的进行，什么内容比较好呢，那就是服务可以满足上述的要求，启动服务加载个“*.json”文件就是可以提供接口了。
WebApI实现增删改查
07-13
WebApI实现简单的增删改查操作，可更改Home控制器下默认跳转的页面，直接访问。 //默认跳转到about页面 //return View("about"); //默认跳转到Products页面 return View("Products");
json-server对数据进行增删改查操作
祈澈菇凉
11-19 7551
在上一节里面，成功获取json-server模拟后端接口 https://www.jianshu.com/p/920d73fc32de 准备工作，先打开cmd，运行以上文章里内容： 现在要对这些接口进行增删改查操作，先写增删改查的按钮，进行点击事件 的操作。 <button type="button" class="add">添加</button> <...
JSON-server 的增删改查
weixin_48813932的博客
05-07 7391
一.json-server工具 作用： json-server可以快速的模拟接口 它是一个基于nodejs的命令行工具，例如：nodemon 安装： npm i json-server -g 全局安装 二.增删改查 1.接口规则-RESTful 目标：了解一种接口定义规范resetful 接口规范：如何定义接口地址，请求方式，传参方式，对应不同的请求操作行为。 具体规则： 接口地址 请求方式 操作行为 /brands GET 查询所有
json-server实现增删改查
weixin_56534351的博客
11-28 743
除了使用put可以修改时数据以外，还可以使用patch修改数据。patch为局部修改，不会覆盖之前的数据。get+api接口路径/指定的ID。API后跟上要删除的数据的ID即可。post+api接口路径。
json-server 模拟增删改查
逆风飞翔的代码狗
07-11 414
json-server 1.npm i json-server -S 2.在项目目录下常见一个mock/todo.json: 在里面书写json数据即可： { "todos": [ { "id": 1, "title": "吃饭", "isCompleted": false }, { "id": 2, "title": "约会", "isCompleted": false }, {
利用Vue框架实现的学生成绩管理系统，使用json-server模拟后台数据。实现了对学生成绩的增删改查、导出等功能.zip
08-13
可借鉴此优质项目实现复刻，也可基于此项目来扩展开发出更多功能 #注 1. 本资源仅用于开源学习和技术交流。不可商用等，一切后果由使用者承担 2. 部分字体及插图等来自网络，若是侵权请联系删除，本人不对所涉及的...
Vue-cli 使用json server在本地模拟请求数据的示例代码
10-19
这一特性使得在本地测试数据的增删改查操作成为可能。 此外，使用json server模拟API环境，虽然不能完全替代真正的后端服务，但为前端开发提供了极大的便利，尤其是在需要快速原型开发或演示时非常有用。当后端API...
使用Mock.js实现前端模拟数据及增删改查功能
最新发布
weixin_66708577的博客
01-19 595
通过上述示例，我们可以看到Mock.js的使用非常简单。它可以帮助我们在没有后端接口的情况下，快速生成模拟数据，从而继续进行前端开发。Mock.js还支持更多复杂的数据模拟规则和功能，你可以查阅Mock.js官方文档来了解更多高级用法。希望本文能帮助你快速上手Mock.js，提高前端开发的效率。如果你有任何疑问或建议，欢迎在评论区留言交流。
文件内容批量替换
10-30
一款批量查找 指定文件类型并进行 替换的小工具
json-server 模拟接口请求 搭配 mock.js 接口的增删改查
Le_OOP的博客
11-01 712
使用JSON Server进行模拟后端接口 第三方服务接口:leanCloud 首先在桌面打开终端 npm install -g json-server(不能再项目中安装) 然后新建一个文件夹(不能是json-server),比如:backServer 进入backServer文件夹打开终端 npm init --yes npm i json-server --save 然后修改package.j...
在vue中使用JSON-Server？Mock数据的增删改查
weixin_40381947的博客
06-02 2232
JSON-Server 是用于快速搭建基于 JSON 数据文件的 REST API 的工具。它可以将 JSON 数据文件作为 REST API 的后端服务，通过 HTTP 请求进行数据的增删改查操作。使用 json-server 不需要编写后端代码和数据库，仅需提供一个 JSON 文件即可快速搭建 REST API 服务，方便前端开发人员进行接口测试和模拟数据。 而Mock数据是一种虚拟的数据，用于在前端开发中模拟后端数据。在使用Axios请求Mock数据时，可以对Mock数据进行增删改查操作
模拟数据 json-server 增删改查 操作
柠檬酸
12-13 6941
一、准备页面 html &lt;ul class="list"&gt; &lt;li class="add"&gt;添加数据&lt;/li&gt; &lt;li class="change"&gt;修改数据&lt;/li&gt; &lt;li class="del"&gt;删除数据&lt;/li&gt
json-server对数据的增删改查的封装
hangnan315的博客
07-13 516
在前面的文章中有介绍json-server的安装步骤以及用法 今天就来说说json-server对数据的增删改查以及对获取数据axios的封装 【前提】 我们是在共同的前缀下进行数据的获取，所以我们完全有必要去封装一个共同前缀的方法 创建一个utils文件夹，在里面建一个question.js来存这个公共前缀的方法 // 引入axios模块 import axios from "axios" // 封装公共前缀 const getnews = axios.create({ baseURL:"htt
简单的JSON增删改
woshihw的专栏
02-17 1769
var jsonStr1 = '[{"name":"test1","age":"11"},{"name":"test2","age":"22"}]'; var array = JSON.parse(jsonStr1); array.push({"name":"test3","age":"33"}); array[0].age="444"; delete array[1]; var strJson
本地修改json数据json-server
weixin_43456275的博客
04-07 1601
文章目录环境获取新增删除更新 环境 npm install -g json-server npm install axios 新建db.json json-server --watch db.json 获取 getList() { this.$axios .get("http://localhost:3000/posts") .then(function (response) { console.log("getList", re
nodemon启动js服务器时json文件的修改对其影响
littleAsavakit的博客
03-05 626
记一下这里的小坑，如果使用js服务器修改json文件，修改成功后，采用nodemon启动的服务器会自动重启，如果这时有新的请求会被那么一瞬间无视掉，所以事物请求较多的服务器最好用node启动
快速把一个json文件变成一个接口服务器(json-server)
Sapling
02-27 2085
作用:快速把db.json文件变成接口服务器 1. npm i -g json-server 2. 新建db.json文件 3. 在db.json所在的目录中 cd server 指令: json-server --watch db.json 结果: 服务器已经启动 ...
json-server增删改查代码
05-30
json-server是一个可以快速创建RESTful API的工具，可以用来模拟后端API接口。以下是在json-server中进行增删改查的代码示例。 1. 安装json-server ``` npm install json-server -g ``` 2. 创建一个JSON数据文件db.json，例如： ``` { "users": [ { "id": 1, "name": "Tom", "age": 20 }, { "id": 2, "name": "Jerry", "age": 22 } ] } ``` 3. 启动json-server ``` json-server db.json ``` 4. 在Vue组件中使用axios库来发起HTTP请求，例如： ``` import axios from 'axios' export default { data() { return { users: [] } }, created() { this.getUsers() }, methods: { getUsers() { axios.get('http://localhost:3000/users') .then(response => { this.users = response.data }) .catch(error => { console.log(error) }) }, addUser() { axios.post('http://localhost:3000/users', { name: "Jack", age: 25 }) .then(response => { this.getUsers() }) .catch(error => { console.log(error) }) }, updateUser(id) { axios.put(`http://localhost:3000/users/${id}`, { name: "John", age: 30 }) .then(response => { this.getUsers() }) .catch(error => { console.log(error) }) }, deleteUser(id) { axios.delete(`http://localhost:3000/users/${id}`) .then(response => { this.getUsers() }) .catch(error => { console.log(error) }) } } } ``` 在这个代码示例中，getUsers方法用来获取所有用户数据，addUser方法用来添加新用户，updateUser方法用来更新指定id的用户数据，deleteUser方法用来删除指定id的用户数据。 需要注意的是，axios发送的请求的URL地址应该与json-server启动的端口号一致。在本例中，json-server启动的端口号为3000。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值