做网站去哪里找客户,app ui设计网站,苏州搜索引擎排名优化商家,济南营销网站制作公司哪家好目录 前言一、简介二、安装与配置1. 安装 node-js2. npm 镜像设置3. 安装 json-server 三、使用1. 创建本地数据源2. 启动 Json Server3. 操作数据#xff08;1#xff09;查询数据#xff08;2#xff09;新增数据#xff08;3#xff09;修改数据#xff08;4#xf… 目录 前言一、简介二、安装与配置1. 安装 node-js2. npm 镜像设置3. 安装 json-server 三、使用1. 创建本地数据源2. 启动 Json Server3. 操作数据1查询数据2新增数据3修改数据4删除数据 前言
json-server 可以让前端人员不用去编写后端的代码就能在本地搭建一个 json 服务可用于测试一些业务逻辑便于调试调用。
在前后端分离的开发模式下前端使用 json-server 模拟数据接口, 这时候 后端接口还没有开发出来, 前端又需要数据进行开发这种情况下就需要前端先行模拟数据, 等后端接口写好进行 targetUrl 进行替换。 一、简介
github 地址https://github.com/typicode/json-server
npm 地址https://www.npmjs.com/package/json-server json-server 是一个零代码快速搭建本地 RESTful API 的工具具有以下几个主要特点和功能
json-server 使用 JSON 文件作为数据源通过提供一组简单的路由和端点来模拟后端服务器的行为它允许前端开发人员在不依赖后端 API 的情况下进行开发通过本地搭建一个 JSON 服务来快速生成 REST API 风格的后端服务
功能特性
跨平台兼容一个可执行文件即可在多种操作系统上运行简单易用只需访问特定 URL即可查看数据列表并开始通信安全可靠允许通过防火墙设置只开放指定的端口保护用户数据安全Websocket 与 Web 服务器一体化内置Web服务器支持在任何地方与设备建立 WebSocket 连接易于集成通过 JSON 格式交换数据便于前后端开发支持跨域、jsonp、路由订制、数据快照保存等功能 二、安装与配置
1. 安装 node-js json-server 基于 npm 进行安装需要先安装 Node.js因为 npm 是 Node.js 的包管理器
node-js 下载https://nodejs.org/en/download/ 一般会选择在 LTS 下进行下载因为 LTS 是稳定版本的然后根据自己电脑的系统选择安装比方说我电脑是 windows-64x 的那我就点击 Windows Installer.msi 64-bit 就会开始下载 如果想要下载旧版本可在 Previous Release 中查询 点击 Releases 就能跳转到对应的下载界面 或者直接在地址上面输入点击 enter 也能获取 PS建议 node-js 的版本最好在 16 以上
点击对应的包即可下载完成 下载好安装程序包之后只需要双击打开即可进行安装 node 的安装也是傻瓜式的一直 next 即可 然后点击 finsh
检测 node-js 是否安装成功只需要 win R 调起 运行命令框输入 cmd 打开 cmd窗口再输入 node -v 查看 node 的版本如果有显示版本信息就表明 node-js 安装成功了 npm 是 node-js 的包管理和分发工具当安装完成 node-js 后 npm 也随之安装完成可以通过 npm -v 来校验是否安装成功 2. npm 镜像设置 在 vue 中经常会使用 npm 来安装一些包而 npm 的下载镜像是在国外所以使用 npm 下载会非常的慢这里有两种方式来解决这个问题 方式一使用 yarn 进行安装 使用 yarn 安装就需要保证当前系统有下载过 yarn同样可以在 cmd窗口 中输入 yarn -v 来检测是否安装过 yarn 如果没有就下载输入npm i -g yarn下载完成之后仍旧可以输入 yarn -v 来进行检测 方式二设置 npm 镜像为国内的 可以在 cmd窗口 中通过 npm config get registry 命令来查询 npm 所使用的镜像 默认使用的镜像是https://registry.npmjs.org/如果你 npm 所使用的镜像是这个的话就换成国内的比如 1https://registry.npm.taobao.org/ 2https://registry.npmmirror.com 比如我使用 https://npmmirror.com/ 所提供的镜像 https://registry.npmmirror.com 那就可以通过 npm config set registry https://registry.npmmirror.com 这行命令将镜像设置为 https://registry.npmmirror.com 即可 3. 安装 json-server
Win R 调出运行对话框输入 cmd 打开命令窗口
再输入以下命令进行全局安装
npm install -g json-server输入以下命令查看是否安装成功
json-server --version如果安装成功会显示版本信息 三、使用 1. 创建本地数据源
首先需要创建一个本地数据源格式是 json 形式的例如
{users: [{id: 1,name: Mico,age: 18},{id: 2,name: Rose,age: 21},{id: 3,name: Jack,age: 22},{id: 4,name: Jon,age: 19}]
}2. 启动 Json Server
语法
json-server [options] source其它参数说明
参数简写说明默认值--config-c指定配置文件路径json-server.json--port-p指定端口3000--host-H指定主机名localhost--watch-w监控文件变化--routes-r指定路由文件路径--middlewares-m指定中间件文件路径--static-s指定静态文件文件夹路径--read-only–ro指定只允许get请求--no-cors–nc禁止跨域共享--no-gzip–ng禁止gzip压缩--snapshots-S指定快照目录--delay-d指定延迟返回时长(ms)--id-i指定数据库的ID属性id--foreignKeySuffix–fks指定外键前缀id--quiet-q抑制来自输出的日志消息--help-h显示帮助--version-v显示版本号
打开命令窗口 输入以下命令启动 json server
json-server --watch db.json默认端口号为 3000如果想要修改端口号在启动时添加 --port 端口号 即可例如
json-server --watch db.json --port 9527也可以将参数写在配置文件json-server.json中例如
{port: 4396,watch: true,static: ./static,read-only: false,no-cors: false,no-gzip: false
}指定配置文件启动
json-server --watch db.json --config json-server.json启动成功之后就能在游览器或 Postman 上进行访问了例如 3. 操作数据
以上述 db.json 中的数据为例展示 json-server 如何通过 API 来操作数据 1查询数据
查询数据需要用 GET 方法
查询所有数据
GET localhost:3000/users 根据 ID 查询数据
GET localhost:3000/users/1 条件查询
GET localhost:3000/users?age22 GET localhost:3000/users?age22name%ck 分页查询
可以使用 _page 和 _limit 对数据进行分页
GET localhost:3000/users?_page1_limit2 2新增数据
新增数据需要用 POST 方法
POST localhost:3000/users
json
{id: 5,name: Tom,age: 23
}验证 3修改数据
修改数据需要用 PUT 方法
PUT localhost:3000/users/3
json
{id: 3,name: Mike,age: 23
}验证 4删除数据
修改数据需要用 DELETE 方法
DELETE localhost:3000/users/3 验证
