龙空技术网

json-server 详解

JavaScript前端 513

前言:

眼前小伙伴们对“js写入本地json文件”大概比较注意,朋友们都想要知道一些“js写入本地json文件”的相关知识。那么小编也在网络上搜集了一些有关“js写入本地json文件””的相关资讯,希望大家能喜欢,兄弟们一起来了解一下吧!

JSON-Server 是一个 Node 模块,运行 Express 服务器,你可以指定一个 json 文件作为 api 的数据源。

安装json-server

npm install -g json-server

启动 json-server

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

db.json文件的内容:

{ "course": [ { "id": 1000, "course_name": "马连白米且", "autor": "袁明", "college": "金并即总变史", "category_Id": 2 }, { "id": 1001, "course_name": "公拉农题队始果动", "autor": "高丽", "college": "先了队叫及便", "category_Id": 2 } }}

例如以下命令,把db.json文件托管成一个 web 服务。

$ json-server --watch --port 8200 db.json

输出类似以下内容,说明启动成功。

此时,你可以打开你的浏览器,然后输入:

json-server 的相关启动参数

语法:json-server [options] <source>选项列表:source可以是json文件或者js文件。实例:

$ json-server --watch -c ./jsonserver.json$ json-server --watch app.js$ json-server db.jsonjson-server --watch -port 8888 db.json

动态生成模拟数据

例如启动json-server的命令:json-server --watch app.js 是把一个js文件返回的数据托管成web服务。

app.js配合mockjs库可以很方便的进行生成模拟数据。

路由

默认的路由

json-server为提供了GET,POST, PUT, PATCH ,DELETE等请求的API,分别对应数据中的所有类型的实体。

# 获取所有的课程信息GET /course# 获取id=1001的课程信息GET /course/1001# 添加课程信息,请求body中必须包含course的属性数据,json-server自动保存。POST /course# 修改课程,请求body中必须包含course的属性数据PUT /course/1PATCH /course/1# 删除课程信息DELETE /course/1# 获取具体课程信息id=1001GET /course/1001

自定义路由

当然你可以自定义路由:

$ json-server --watch --routes route.json db.json

route.json文件

{ "/api/*": "/$1", // /api/course <==> /course "/:resource/:id/show": "/:resource/:id", "/posts/:category": "/posts?category=:category", "/articles\\?id=:id": "/posts/:id"}
自定义配置文件

通过命令行配置路由、数据文件、监控等会让命令变的很长,而且容易敲错,可以把命令写到npm的scripts中,但是依然配置不方便。

json-server允许我们把所有的配置放到一个配置文件中,这个配置文件默认json-server.json;

例如:

{ "port": 53000, "watch": true, "static": "./public", "read-only": false, "no-cors": false, "no-gzip": false, "routes": "route.json"}

使用配置文件启动json-server:

# 默认使用:json-server.json配置文件$ json-server --watch app.js # 指定配置文件$ json-server --watch -c jserver.json db.json

过滤查询

查询数据,可以额外提供

GET /posts?title=json-server&author=typicodeGET /posts?id=1&id=2# 可以用 . 访问更深层的属性。GET /comments?author.name=typicode

还可以使用一些判断条件作为过滤查询的辅助。

GET /posts?views_gte=10&views_lte=20

可以用的拼接条件为:

_gte : 大于等于_lte : 小于等于_ne : 不等于_like : 包含

GET /posts?id_ne=1GET /posts?id_lte=100GET /posts?title_like=server

分页查询

默认后台处理分页参数为: _page 第几页, _limit一页多少条。

GET /posts?_page=7GET /posts?_page=7&_limit=20

默认一页10条。

后台会返回总条数,总条数的数据在响应头:X-Total-Count中。

排序

参数: _sort设定排序的字段参数: _order设定排序的方式(默认升序)

GET /posts?_sort=views&_order=ascGET /posts/1/comments?_sort=votes&_order=asc

支持多个字段排序:

GET /posts?_sort=user,views&_order=desc,asc

任意切片数据

GET /posts?_start=20&_end=30GET /posts/1/comments?_start=20&_end=30GET /posts/1/comments?_start=20&_limit=10

全文检索

可以通过q参数进行全文检索,例如:GET /posts?q=internet

实体关联

关联子实体

包含children的对象, 添加_embed

GET /posts?_embed=commentsGET /posts/1?_embed=comments

关联父实体

包含 parent 的对象, 添加_expand

GET /comments?_expand=postGET /comments/1?_expand=post
其他高级用法

json-server本身就是依赖express开发而来,可以进行深度定制。细节就不展开,具体详情请参考官网。

自定义路由

自定义输出内容

router.render = (req, res) => { res.jsonp({ body: res.locals.data })}

自定义用户校验

标签: #js写入本地json文件 #js删除json字段 #jsonserver post