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

最新推荐文章于 2024-03-09 15:17:53 发布
最新推荐文章于 2024-03-09 15:17:53 发布
阅读量1.4k 收藏 6
点赞数 1
分类专栏： json-server 文章标签： json-server
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26880461/article/details/103508492
版权

通常我们在做项目时会遇到后端接口还没有完成的情况，这个时候我们可以使用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 官方文档

是菜鸟儿
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
MSSQL Server 管理器 V3.0 免注册
07-26
SQL查询器流传着很多软件，但相信此软件会有它的特别之处，本软件是经多名工程师测试。功能以及效率是有见证。本软件体积优势非常轻巧功能强大，1.7M的大小携带方便。如有建议请发邮件到[email protected]，谢谢你的宝贵建议。话不多说，请看以下功能介绍！ 本软件所有功能完全免费。非常大家的支持!!! 特色功能： (一) 线程查询数据，可看查询结果完成的进度。 (二) 语句编辑强大的语法自动填充功能，可快速填充表或字段 (三) EXCEL导出后台完成。可选中语句导出EXCEL内容！ (四) 自带远程桌面控制功能 (五) 自定义保存二进制数据内容成文件 (六) 查询结果可直接显示字段类型等信息 本版本调整了： 1. 启动程序更快 2. 加入远程桌面远程控制功能 3. 加入格式化JSON功能 4. 加入查询结果二进制内容导批量导出成文件 5. 查询显示中可显示对应的字段类型及长度等信息 新增功能： 1. 界面大量调整把所有右击出来的菜单都显示在对应的功能位置上，操作上来更新顺手 2. 高级查询的窗口全部显示置前，整理排序窗口 3. 主查询窗口的求和功能和排序功能 4. 高级查询加入，可筛选，可分组统计。可汇总 5. 语句编辑框中直接导出查询结果到EXCEL 一、主功能概述 1.F8，F9 内容自动填充 2.预计表总记录数 3.预计表前N行记录 4.生成表字段以豆号分割 字段1，字段2....可自定义换行数量 5.显示表的详细信息，字段长度。可直接在查询结果中显示。 6.对查询内容导出EXCEL，高级结果可快速导出。后台处理不会卡程序。在导出大量的数据时可以操作其他操作。软件在导出完成后会检查EXCEL的行数完整性。可以EXCEL信息中查阅。 7.高级结果可拖放分组统计内容 8.对查询结果生成插入语句。可方便夸平台的数据插入 9.查询结果中快速定位查找内容字段位置，可模糊查找 10.可执行存储过程。执行过程中会在对应的GO中报错。可以得知是那行的错误 11.ctrl+1~5 的快捷语句记录。在使用过程中可以按对应的快捷键，在语句编号窗口中插入。临时代码记录10条。可方便用户临时记录编号语句。 12.直接对内容生成IN语句方便查询。 13.快速查询数据库中的表信息，快速查询对应的的字段，可直接筛选想要的字段内容。此功能可让使用者快速知道对应的字段类型！ 14.可直接对字段列表的字段进行操作。插入，修改，删除！！ 15.查询结果可以直接显示数据库的二进制图片内容 16.排量更新后台，此功能可以对当你手上有大量后台的时候不需要一个个去打开执行，只需要插入到软件的批量更新窗口中执行。执行成功会OK，编辑后再执行，直到全部OK。Ok过的不需重量执行放心！ 17.文件传送。可以利用这软件传送文件。如果两个软件连到同一个SQL服务器上。此两个电脑可以互传文件了！ 18.EXCEL导入数据库。可以把对应的EXCEL导入到数据库中。EXCEL头为列名。表名定义 19.远程复制，粘贴文件！ 20.SQL中实用的语句帮助文档！ 二、辅助功能 1.对IP或域名进行端口测试 2.获取当前外网IP地址 3.直接远程连接当前连接IP 4.网整测试当前连接的情况 5.格式化JSON格式内容 联系方式：[email protected]或可直接加QQ：75934092 510567321
json-server-multiple-files:使用多个文件运行json-server
05-26
JSON服务器多个文件/资源 JSON服务器： ： 安装 全局安装 npm install -g json-server 安装本地 npm install 结构 ├── README.md ├── fakeapis │   ├── index.js │   ├── posts.json │   └── users.json ├── package-lock.json ├── package.json └── screenshot.png 运行JSON服务器 npm start ：启动json服务器多个文件 截屏 注意：有关更多详细信息，请查看fakeapis/index.js和*.json fakeapis/index.js 。
json-server模拟数据
最新发布
qq_57229245的博客
03-09 320
使用nvm list available命令查看可用的node版本，使用nvm install <版本号>进行下载，使用nvm use <版本号>使用刚才下载的版本即可。可以使用 nvm node_mirror https://nodejs.org/dist/ 命令 将 nvm 源更改为官方源（Node.js 官方源），再执行其它命令。可以看到它要求的node版本必须大于等于18，所有我们需要升级一下node版本，就可以正常启动服务。扩展: 修改启动命令。
json-server-auth:JSON服务器的身份验证和授权流程
05-07
:locked_with_key: JSON服务器身份验证 JWT身份验证中间件 因为您还需要假冒的身份验证和授权流程才能进行原型制作。 入门 同时安装JSON服务器和JSON服务器认证： # NPM npm install -D json-server json-server-auth # Yarn yarn add -D json-server json-server-auth 使用users集合创建db.json文件： { " users " : [] } 启动JSON服务器（使用JSON服务器Auth作为中间件）： json-server db.json -m ./node_modules/json-server-auth # with json-server installed globally and json-server-auth installed locally :loudspeaker: 可是等等 ！ 为
文件内容批量替换
10-30
一款批量查找 指定文件类型并进行 替换的小工具
vue-resource + json-server模拟数据的方法
10-19
本篇文章主要介绍了vue-resource + json-server模拟数据的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JSON-server 的增删改查
weixin_48813932的博客
05-07 6208
一.json-server工具 作用： json-server可以快速的模拟接口 它是一个基于nodejs的命令行工具，例如：nodemon 安装： npm i json-server -g 全局安装 二.增删改查 1.接口规则-RESTful 目标：了解一种接口定义规范resetful 接口规范：如何定义接口地址，请求方式，传参方式，对应不同的请求操作行为。 具体规则： 接口地址 请求方式 操作行为 /brands GET 查询所有
json-server对数据进行增删改查操作
祈澈菇凉
11-19 7277
在上一节里面，成功获取json-server模拟后端接口 https://www.jianshu.com/p/920d73fc32de 准备工作，先打开cmd，运行以上文章里内容： 现在要对这些接口进行增删改查操作，先写增删改查的按钮，进行点击事件 的操作。 <button type="button" class="add">添加</button> <...
模拟数据 json-server 增删改查 操作
柠檬酸
12-13 6719
一、准备页面 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详解
李宥的博客
07-30 7898
- Json-server 是一个`零代码快速搭建本地 RESTful API 的工具`。它使用 `JSON 文件作为数据源`，并提供了一组简单的路由和端点，可以模拟后端服务器的行为。
json-server急速入门详解
zyl19950717的博客
07-10 1860
此文章针对的是基础json-server需求者，但同样也能满足绝大多数的使用需求
使用json-server简单完成CRUD模拟后台数据的方法
10-18
主要介绍了使用json-server简单完成CRUD模拟后台数据的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
json怎么在服务器运行,json-server使用方法
weixin_39625337的博客
07-31 2079
对于数据的增删改查，需要用到axios安装json-server1、执行如下命令，安装json-servernpm install -g json-server2、执行如下命令，检查json-server是否安装成功：json-server -h成功如下：image.png3、新建json文件，如：user.json(模拟数据){"user":[{"id":"1","username":"甲","...
在vue中使用JSON-Server？Mock数据的增删改查
weixin_40381947的博客
06-02 1826
JSON-Server 是用于快速搭建基于 JSON 数据文件的 REST API 的工具。它可以将 JSON 数据文件作为 REST API 的后端服务，通过 HTTP 请求进行数据的增删改查操作。使用 json-server 不需要编写后端代码和数据库，仅需提供一个 JSON 文件即可快速搭建 REST API 服务，方便前端开发人员进行接口测试和模拟数据。 而Mock数据是一种虚拟的数据，用于在前端开发中模拟后端数据。在使用Axios请求Mock数据时，可以对Mock数据进行增删改查操作
Vue(第十六课)JSON-SERVE和POSTMAN技术中对数据的增删改查
qq_56248592的博客
12-04 796
重在实操
json-server实现增删改查
weixin_56534351的博客
11-28 140
除了使用put可以修改时数据以外，还可以使用patch修改数据。patch为局部修改，不会覆盖之前的数据。get+api接口路径/指定的ID。API后跟上要删除的数据的ID即可。post+api接口路径。
json-server使用
xiaojian044的博客
12-26 889
json-server
使用json-server搭建虚拟后台服务器，并完成数据的增删改查
一捆铁树枝的博客
10-09 5738
在很多前后端分离的项目中，前后端同时开工，当前段项目已完成部分后，就需要获取数据来做部分调试，但是这个时候后台服务器往往还没有完成，这个时候就需要我们自己搭建一个虚拟的后台服务器，无意中发现一款好用的"神器"，我把自己搭建服务器和进行一些增删改查操作的具体步骤记录了下来，以供大家参考； 第一步 利用json-server搭建虚拟服务器 1.新建一个文件夹jsonServer,并在根目录下生成p...
nodemon启动js服务器时json文件的修改对其影响
littleAsavakit的博客
03-05 561
记一下这里的小坑，如果使用js服务器修改json文件，修改成功后，采用nodemon启动的服务器会自动重启，如果这时有新的请求会被那么一瞬间无视掉，所以事物请求较多的服务器最好用node启动
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、付费专栏及课程。

余额充值