转载  json-server 30 秒无代码搭建一个完整的 REST API 服务

分类:极客 2021-11-25T18:20:36    35人阅读   

场景

在公司进行React或者Vue项目开发的过程中,在后端尚未准备好接口时,我们需要进行数据mock来实现页面渲染、模拟前后端交互。

之前我们都是这么做的:

1.采用本地静态数据json的方式来模拟接口数据,但是这种方式我们只能去读取数据,无法对数据进行增删改等操作。

2.在本地搭建一个基于node.js的服务器,但是这样需要我们自己写代码去手动搭建本地服务器。

3.安装mock.js,模拟接口去请求mock生成的数据,但是mock.js生成的数据具有随机性,不一定使我们需要的数据。

json-server登场

了解了过去前端如何模拟接口数据进行联调的几种方式的缺点后,一种新的数据模拟方式-JSON-Server。

json-server是基于Node.js的服务器,可以直接把一个json文件托管成一个具备全RESTful风格的API,并支持跨域、jsonp、路由订制、数据快照保存等功能的 web 服务器。

JSON-Server官网文档:https://github.com/typicode/j...

这是官方文档对json-server介绍的第一句话:

Get a full fake REST API with zero coding in less than 30 seconds (seriously)

翻译过来就是 30秒之内搭建一个完整的RESTFUL风格的API服务,0代码, 这个是不是开玩笑的

从这句话中我们就可以看到json-server的优势:

1.0代码快速搭建

2.完全符合RESTFUL风格的API服务实现

安装

npm install -g json-server 全局安装

项目文件创建和数据初始化

新建 db.json

{
  "products": [
    {
      "name""华为",
      "id"1,
      "price"4000,
      "specs": {
        "width"11
      }
    },
    {
      "name""苹果",
      "id"2,
      "price"5000,
      "specs": {
        "width"12
      }
    },
    {
      "name""小米",
      "id"3,
      "price"6000,
      "specs": {
        "width"13
      }
    }
  ]
}

db.json 可以理解为本地一个数据库,当我们访问对应的增删改查路由接口时,db.json中的数据是实时更新的

项目配置

1.自定义配置

可以在package.json文件中的scripts中进行如下配置:
"json-server""json-server --watch db.json --port 3006" 

2.然后执行yarn json-server 命令

3.现在访问http://localhost:3006/products 就可以获取所有的商品数据了

基础

### get请求

 /products 请求所有商品
  /products/2 请求id为2的商品
  /products?name=华为 请求name为华为的商品

### post请求

 /products
  参数params:{
      "name""vivo",
      "id"4,
      "price":3600
  }
  向商品列表中添加一条商品

### put请求 (全部更新)

 /products/5
  params:{
    "name""联想666",
    "price":3250
  }
  将id为5的商品的对象全部替换为{"id":5,"name""联想666","price":3250}

### patch请求 (部分更新)

 /products/4
  params:{
    price:3200
  }
  将id为4的商品的price值改为3200 其他的属性值不变

### delete请求

 /products/1 删除id为1的商品 

## 进阶
##### 过滤查询

/products?name=小米&price_gte=6500 合并查询 name为小米并且price大于6500元的商品
/products?specs.width=13 规格的宽度为13的商品

#### 条件查询 _gte大于 _lte小于 _ne不等于 _like包含(模糊查询)

 /products?price_gte=4600 价格大于4600的商品
 /products?price_lte=8000 价格小于8000的商品

##### 分页查询

 /products?_page=2&_limit=5 获取第二页的数据 每页请求5

##### 排序查询

 /products?_sort=price&_order=desc 根据价格进行排序 排序方式为 desc降序  asc升序

##### 任意切片查询

 /products?_start=2&_end=4 从索引值为2到索引值为4之间的数据

#### 全文检索查询

 /products?q=米 查询全部数据中包含”米“关键字的数据 

json-server 路由配置

很多时候我们需要的路由接口可能不是简单的http://localhost:3000/products 这种格式的,而是
http://localhost:3000/api/pro... 这是我们就需要对路由接口进行自定义配置。

新建一个routes.json文件,进行如下配置

 "/api/*""/$1",
  "/:resource/:id/show""/:resource/:id",
  "/posts/:category""/posts?category=:category",
  "/articles\?id=:id""/posts/:id"
}

启动命令配置

json-server db.json --routes routes.json

依据routes.json文件的配置进行路由重定向:

/api/products # → /products 
 *** 当访问/api/products路由接口时,服务器会重定向到/products来访问数据,下面的路由配置以此类推***
/api/products/1  # → /products/1
/products/1/show # → /products/1
/products/小米 # → /products?name=小米
/products?id=1 # → /products/1 

json-server自定义配置

自定义配置可以通过下面两种方式进行配置

1.新建json-server-config.json

进行命令行配置:json-server --c json-server-config.json db.json 这样的话下面的配置就起作用了

{
  "port"5000,              //自定义端口
  "watch"true,             //自动监听变化
  "static""./public",      //静态文件路径
  "read-only"false,        //是否只能使用GET请求
  "no-cors"false,          //是否支持跨域
  "no-gzip"false,          //是否支持压缩
  "routes""route.json"     //路由配置地址
}
2.json-server 命令行使用
json-server [options] <source>
Options:
  --config, -c       Path to config file (配置文件)[default"json-server.json"]
  --port, -p         Set port  (服务器端口) [default3000]
  --host, -H         Set host  (host地址)   [default:"localhost"]
  --watch, -w        Watch file(s) (监听json文件) [boolean]
  --routes, -r       Path to routes file (路由配置文件) 
  --middlewares, -m  Paths to middleware files (中间件文件) [array]
  --static, -s       Set static files directory (静态文件路径)
  --read-only, --ro  Allow only GET requests(是否只支持get请求) [boolean]
  --no-cors, --nc    Disable Cross-Origin Resource Sharing (是否跨域) [boolean]
  --no-gzip, --ng    Disable GZIP Content-Encoding (是否压缩) [boolean]
  --snapshots, -S    Set snapshots directory [default: "."]
  --delay, -d        Add delay to responses (ms) (延迟数据返回)
  --id, -i           Set database id property (e.g. _id) (数据主键)[default: "id"]
  --foreignKeySuffix, --fks  Set foreign key suffix, 
                     (e.g. _id as in post_id) [default: "Id"]
  --quiet, -q        Suppress log messages from output [boolean]
  --help, -h         Show help (帮助信息) [boolean]
  --version, -v      Show version number (版本信息) [boolean]

命令行执行:
1.source 可以是json文件也可以是js文件
2.命令行配置举例说明
json-server -c xxx.config.json --routes routes.json -p 8001 -i pid .... db.json

chrome插件web前端助手FeHelper工具

当我们在浏览器上请求/products时,获取到db.json中的json数据

图片

安装了FeHelper后,在浏览器上我们的数据自动进行格式化,而且json数据也可以进行折叠、排序、下载数据等功能,是不是我们展示的json数据也变得美观了!!!
图片

 chrome浏览器安装流程:
1. https://github.com/zxlie/FeHelper/tree/master/apps/static/screenshot/crx
   从github上下载最新版本的crx文件
2.chrome浏览器地址栏输入:chrome://extensions/ 并打开
3.右上角开启开发者模式
4.拖拽crx到当前页面,完成安装 

了解了json-server的基本使用后,我们在搭建自己的本地React或者Vue项目时,就可以使用json
-server搭建本地服务器,对数据库db.json里面的数据进行增删改查,不用再担心刷新页面后,操作的数据丢失。

接下来就让我们在实际项目中去使用下json-server吧!!!

作者对于json-server的理解属于基础入门级别,对于文章中的理解或者使用错误,望各位大神不吝指出,关于json-server有那些需要补充的也可以进行评论,作者不胜感激。排版码字不易,觉得对您有所帮助,就帮忙点个赞吧!

作者:山楂片

https://segmentfault.com/a/1190000040457773

支付宝打赏 微信打赏

如果文章对你有帮助,欢迎点击上方按钮打赏作者

服务器费用不足...

沙滩保卫小游戏js源码

创意布局企业网络服务CSS模板

优雅而现代的企业和商业html模板

餐厅美食在线订餐HTML5站点模板

绿色环保种植农场网站Html5模板

绿色农产品果蔬购物商店HTML主题

整个页面滚动切换Js插件

CSS 3D盒子打开动画特效

CSS3主页个人简历网页模板

HTML5/Canvas太空射击类小游戏源码

牛奶和饼干css卡通图画

网站顶部导航带下拉的Navigation

拖拽实现流程图Drawflow.js插件

多用途的Alert弹出窗口Js插件

公司事件会议发布会网站模板

五彩纸屑掉落动画的例子

互联网机构和SaaS服务网页模板

炫酷网状变形动画js特效

21个着陆页HTML5和CSS3模板

5套WebApp模板管理后台界面

服务器费用不足...
 工具推荐 更多»