先安装 node.js.

全局安装 json-server:

npm install json-server -g

检查是否安装成功:

json-server -h

安装好后,json-server的文件目录为:

配置 json-server:

{
"host": "0.0.0.0",
"port": "3000",
"watch": true,
"delay": 500,
"quiet": true,
"routes": "./routes.json"
}

在 node 目录下新建一个目录叫 db.在这个目录下新一个 employees.json 文件,并写入内容

{
"employees": [
{
"id": 1,
"first_name": "Sebastian",
"last_name": "Eschweiler",
"email": "sebastian@codingthesmartway.com"
},
{
"id": 2,
"first_name": "Steve",
"last_name": "Palmer",
"email": "steve@codingthesmartway.com"
},
{
"id": 3,
"first_name": "Ann",
"last_name": "Smith",
"email": "ann@codingthesmartway.com"
}
]
}

并在 db/目录下,再创建一个 package.json 文件。安装包管理器,以后安装的其它包,都会有安装信息在这里显示

{
"scripts": {
"server": "json-server db.json --port 3000",
"mock": "json-server db.js",
"start": "cd server && node ./index.js",
"postcss": "postcss ./static/src/css.scss -o ./static/dist/css.css -u autoprefixer"
},
"dependencies": {},
"devDependencies": {
"autoprefixer": "^9.1.5",
"faker": "^4.1.0",
"lodash": "^4.17.11",
"postcss": "^7.0.4",
"postcss-px2units": "^0.2.0",
"postcss-pxtorem": "^4.0.1"
}
}

浏览器中查看某个json数据的方法:

  1. 进入这个json数据表的目录  比如:D:\code\node\db\data   后,再启动查看这个目录下的json数据表的对象名称:  json-server --watch user.json
  2. 在  routes.json 中配置 user.json 这个数据表的 浏览器访问路径 :  “/ 浏览器访问路径 /”:“/ 数据表真实路径 /”
  3. 在浏览器中输入 http://localhost:3000/ + routes.json 中的访问路径   http://localhost:3000/user/

如果更改了 json 需要重启 json-server,启动监控

json-server --watch db.json (  默认端口号 3000  )
// 默认端口是在 json-server.json 文件中已经配置好的,查看上面

如果没有出现错误,终端会显示这个

例子:在浏览器中看到刚刚建立的json文件,访问employees时,在浏览器中的URL地址为:

http://localhost:3000/employees   (employees为json文件中的对象,而不是 json 文件名称)

如果要预览某个json数据,需要进入到这个json所在的当前目录,再输入命令:

D:\code\node\db\data>json-server --watch db.json

如果新建了其它json,比如user.json,如果想查询它的数据,需要对user.json重新监听:

D:\code\node\db\data>json-server --watch user.json
JSON server 的几种 GET
  • GET /employees
  • GET /employees/{id}
  • POST /employees
  • PUT /employees/{id}
  • PATCH /employees/{id}
  • DELETE /employees/{id}

根据 id 查询:支持在url上添加参数来进行查询的,比如要查询 id=2 的数据

http://localhost:3000/employees?id=2

 全文查询:符合某个条件的查询,比如要查询某个数据文件中包含aa的数据

http://localhost:3000/user?q=aa

根据 名称 升序查询:排序查询:?_sort=first_name

http://localhost:3000/user?_sort=first_name

根据条件全文筛选查询?first_name_like=aa

http://localhost:3000/user?first_name_like=aa

 排除某些条件进行查询?last_name_ne=Smith

对 last_name 中,凡是值为 Smith 的数据都排除掉
http://localhost:3000/user?last_name_ne=Smith

 从某一个范围开始查询  ?id_gte=10

比如从第 10 条数据开始搜索
http://localhost:3000/user?id_gte=10

JSON server 路由:

  • 默认是按照db.json文档结构来访问的,当然你也可以使用--routes命令添加自定义的路由。
  • 需要创建一个routes.json文件,然后重新定义规则。
/// 浏览器访问路径 /”:“/ 数据表真实路径 /”
{
"/api/": "/",
"/user/": "/data/user/",
"/employees/":"/data/employees/"
}

比如要查询user.json 的数据,可以在浏览器中输入:

http://localhost:3000/user/

重新定义了路由的规则,需要重启 json-server

json-server --watch --routes routes.json

如果重启成功,会显示

如果在重启路由的时候,在命令行里输入了 db.json 文件,那么会先找 db.json ,然后再根据这个文件来找对应的 routes.json .
由于我的 db.json 文件 与 routes.json 文件不在同一目录下,因此会报错,说在 db.json下找不到 routes.json,因此,我们只需要在 json-server 下重启 routes.json 就可以了
正确的命令,先启动路由
json-server --watch --routes routes.json
再启动要监听的 user.json
json-server --watch user.json
错误的命令: json-server db.json --routes routes.json

以上,欢迎探讨。

json-sever 配置与应用的更多相关文章

  1. 让EFCore更疯狂些的扩展类库(一):通过json文件配置sql语句

    前言 EF通过linq和各种扩展方法,再加上实体模型,编写数据库的访问代码确实是优美.舒服,但是生成的sql不尽如意.性能低下,尤其是复杂些的逻辑关系,最终大家还是会回归自然,选择能够友好执行sql语 ...

  2. .NetCore获取json文件配置内容

    .netcore中的数据配置及内容用了json文件代替了之前framework的xml文件,那么json中的数据该怎么获取呢?下面讲解json文件在.net core中的获取方法. 首先,新建一个.n ...

  3. 【ASP.NET Core快速入门】(五)命令行配置、Json文件配置、Bind读取配置到C#实例、在Core Mvc中使用Options

    命令行配置 我们通过vs2017创建一个控制台项目CommandLineSample 可以看到现在项目以来的是dotnet core framework 我们需要吧asp.net core引用进来,我 ...

  4. package.json的配置理解

    一.初步理解 1. npm安装package.json时  直接转到当前项目目录下用命令npm install 或npm install --save-dev安装即可,自动将package.json中 ...

  5. 菜鸟入门【ASP.NET Core】5:命令行配置、Json文件配置、Bind读取配置到C#实例、在Core Mvc中使用Options

      命令行配置 我们通过vs2017创建一个控制台项目CommandLineSample 可以看到现在项目以来的是dotnet core framework 我们需要吧asp.net core引用进来 ...

  6. 小程序学习一 .json 文件配置

    微信小程序——配置 以下就是小编对小程序配置的资料进行的系统的整理,希望能对开发者有帮助. 我们使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置 ...

  7. 微信小程序:wx.navigateTo中url无法跳转问题(app.json中配置的tabBar与wx.navigateTo中url引用相同页面导致)

    今天在做微信小程序时,设置wx.navigateTo页面跳转并传参数,点击始终没有效果,代码如下: //事件处理函数 newsDetail: function (event) { console.lo ...

  8. autofac JSON文件配置

    autofac是比较简单易用的IOC容器.下面我们展示如何通过json配置文件,来进行控制反转. 需要用到以下程序集.可以通过nugget分别安装 Microsoft.Extensions.Confi ...

  9. 微信小程序自学第一课:工程目录结构与.json文件配置

    注册成为开发者 地址: https://mp.weixin.qq.com/cgi-bin/wx 开发者工具下载地址 https://mp.weixin.qq.com/debug/wxadoc/dev/ ...

  10. FlashChart json数据配置 中文文档

    http://www.riaos.com/ria/2274 FlashChart json数据配置说明 有朋友要用flashchart,感觉这个还不错.就整理了一份文档. 基本包括了所有json配置的 ...

随机推荐

  1. JavaScript实现登录窗口的拖拽

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Java基础练习4(内存管理)

    请根据如下程序代码,画出对应的内存管理图(不需要画方法区),并写出输出结果. 1. public class Cell{ int row; int col; public Cell(int row,i ...

  3. Entity Framework 之存储过程篇

    最近几天在搞CRUD,使用的是EF这个ORM,最近的项目中上了存储过程,就把在开发中的经验分享出来!我们先创建一个最基本的存储过程,脚本如下,这是一个不带参数的存储过程,我们从最简单的往上走! cre ...

  4. 《前端之路》之 JavaScript原型及原型链详解

    05:JS 原型链 在 JavaScript 的世界中,万物皆对象! 但是这各种各样的对象其实具体来划分的话就 2 种. 一种是 函数对象,剩下的就是 普通对象.其中 Function 和 Objec ...

  5. 解读 kubernetes client-go 官方 examples - Part Ⅰ

    目录 1. 介绍 2. 运行测试 2.1 测试环境 2.2 运行结果 3. 原理解析 3.1 获取 kubeconfig 信息,并构造 rest#Config 实例 3.1.1 tools/clien ...

  6. 自定义Visual Studio.net Extensions 开发符合ABP vnext框架代码生成插件[附源码]

    介绍 我很早之前一直在做mvc5 scaffolder的开发功能做的已经非常完善,使用代码对mvc5的项目开发效率确实能成倍的提高,就算是刚进团队的新成员也能很快上手,如果你感兴趣 可以参考 http ...

  7. 浅析关于java的一些基础问题(上篇)

    要想让一个问题变难,最基本有两种方式,即极度细化和高度抽象.对于任何语言的研究,良好的基础至关重要,本篇文章,将从极度细化的角度 来解析一些java中的基础问题,这些问题也是大部分编程人员的软肋或易混 ...

  8. Linux计划任务及压缩归档(week2_day1)--技术流ken

    计划任务介绍 我们可以通过一些设置.来让电脑定时提醒我们该做什么事了.或者我们提前设置好,告诉电脑你几点做什么几点做什么,这种我们就叫它定时任务.而遇到一些需要执行的事情或任务.我们也可以通过命令来告 ...

  9. python的小技巧 让你的代码更美观

    持续更新.. 1,活用lambda表达式 匿名函数 lambda 可以提供很多便利.下面是举例. dic = {1:lambda a,b : a+b} 2,代码一行化. 当逻辑语句后只有一行代码的时候 ...

  10. AngularJs with Webpackv1 升級到 Webpack4

    本篇記錄一下升級的血淚過程 請注意升級前請先創一個新目錄將升級應用與舊應用隔離 1. 需要將相關的套件做統一升級的動作,已確認需要升級所有舊的loaders 其它應用的套件可先不做升級的動作 (如果編 ...