您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > javascript

只要一个json文件3分钟搭建一个json服务器

时间:2020-11-05 11:08:43  来源:  作者:程序员柳大侠

json-server是一款json数据服务器,可以对json文件、js脚本生成的json数据、远程json数据进行RESTFUL风格的增删改查操作,可以通过参数、分页、排序、全文搜索、关联查询、范围查询等进行复杂查询,对开发者特别是前端开发者是一款非常好用的开发工具。

官网:
https://www.npmjs.com/package/json-server

只要一个json文件3分钟搭建一个json服务器

官网



下面我们来介绍具体的用法,

首先确保你本地安装了node.js。

安装json-server

npm install -g json-server

创建一个json文件 db.json

{
  "posts": [
    { "id": 1, "title": "测试标题1", "author": "张三" },
    { "id": 2, "title": "测试标题2", "author": "李四" }
  ],
  "comments": [
    { "id": 1, "body": "这里是内容体1", "postId": 1 },
    { "id": 2, "body": "这里是内容体2", "postId": 2 }
  ],
  "profile": { "name": "测试json" }
}

指定json文件运行服务,命令行运行以下命令

json-server --watch db.json
只要一个json文件3分钟搭建一个json服务器

运行服务

服务器就这么搭建好了,就是这么的快,可能还不要3分钟。

增删改查-请求示例

请求方式遵循restful风格,

  • GET-查询、
  • POST-新增、
  • PUT-修改、
  • PATCH-修改属性、
  • DELETE-删除

get请求-查询

可以看到资源路径都列在控制台里了,浏览网址
http://localhost:3000/posts ,出现以下结果,posts路径就是json文件里的key

[
  {
    "id": 1,
    "title": "测试标题1",
    "author": "张三"
  },
  {
    "id": 2,
    "title": "测试标题2",
    "author": "李四"
  }
]

 

POST请求-新增

使用POST请求会添加一条新记录,如POST请求:
http://localhost:3000/posts,返回新记录的id。

{
    "id": 3
}

json文件也被更改



{
  "posts": [
    {
      "id": 1,
      "title": "测试标题1",
      "author": "张三"
    },
    {
      "id": 2,
      "title": "测试标题2",
      "author": "李四"
    },
    {
      "id": 3
    }
  ],
  "comments": [
    {
      "id": 1,
      "body": "这里是内容体1",
      "postId": 1
    },
    {
      "id": 2,
      "body": "这里是内容体2",
      "postId": 2
    }
  ],
  "profile": {
    "name": "测试json"
  }
}

 

PUT请求-修改

PUT请求会修改一条记录,如请求:
http://localhost:3000/posts/3,我们在请求body里输入以下修改内容:

{
    "title":"这是修改的内容",
    "author":"王五"
}

json文件变成了

{
  "posts": [
    {
      "id": 1,
      "title": "测试标题1",
      "author": "张三"
    },
    {
      "id": 2,
      "title": "测试标题2",
      "author": "李四"
    },
    {
      "title": "这是修改的内容",
      "author": "王五",
      "id": 3
    }
  ],
  "comments": [
    {
      "id": 1,
      "body": "这里是内容体1",
      "postId": 1
    },
    {
      "id": 2,
      "body": "这里是内容体2",
      "postId": 2
    }
  ],
  "profile": {
    "name": "测试json"
  }
}

PATCH请求-修改单个属性

PATCH与PUT的区别在于,PUT的请求内容需要包含整个对象除id外的所有属性,PATCH的请求内容可以是单个属性。

比如我们PATCH请求:
http://localhost:3000/posts/3 ,body为

{
    "title":"这是修改的内容xxxx"
}

json文件里id为3的记录仅title属性发生改变,其他字段不变

{
  "posts": [
    {
      "id": 1,
      "title": "测试标题1",
      "author": "张三"
    },
    {
      "id": 2,
      "title": "测试标题2",
      "author": "李四"
    },
    {
      "title": "这是修改的内容xxxx",
      "author": "王五",
      "id": 3
    }
  ],
  "comments": [
    {
      "id": 1,
      "body": "这里是内容体1",
      "postId": 1
    },
    {
      "id": 2,
      "body": "这里是内容体2",
      "postId": 2
    }
  ],
  "profile": {
    "name": "测试json"
  }
}

DELETE请求-删除

DELETE请求会删除一条数据,如请求:
http://localhost:3000/posts/3 。

删除后的json文件内容发生改变,可以看到id为3的记录没了:

{
  "posts": [
    {
      "id": 1,
      "title": "测试标题1",
      "author": "张三"
    },
    {
      "id": 2,
      "title": "测试标题2",
      "author": "李四"
    }
  ],
  "comments": [
    {
      "id": 1,
      "body": "这里是内容体1",
      "postId": 1
    },
    {
      "id": 2,
      "body": "这里是内容体2",
      "postId": 2
    }
  ],
  "profile": {
    "name": "测试json"
  }
}

过滤id

浏览
http://localhost:3000/posts/1 ,代表读取post里id为1的那条数据,注意不是代表第1条,而是id为1的那条。

{
  "id": 1,
  "title": "测试标题1",
  "author": "张三"
}

过滤参数

浏览
http://localhost:3000/posts?author=张三

[
  {
    "id": 1,
    "title": "测试标题1",
    "author": "张三"
  }
]

如果有多级也可以用“.”+属性名查询如
http://localhost:3000/posts?author.name=张三。

排序

通过“_sort”指定排序属性和“_order”指定asc顺序还是desc倒序查询,如:
http://localhost:3000/posts?_sort=id&_order=desc 。

分页

通过“_page”和“_limit”进行分页查询,如查询第一页,每页20条查询写法:
http://localhost:3000/posts?_page=1&_limit=20

截取部分

通过“_start”、“_end”和“_limit”参数查询,如从20条开始查询10条数据:
http://localhost:3000/posts/1/comments?_start=20&_limit=10

不等于查询

通过“属性名_ne”写法如:
http://localhost:3000/posts?id_ne=1

[
  {
    "id": 2,
    "title": "测试标题2",
    "author": "李四"
  }
]

大于等于/小于等于查询

通过“属性名_gte”查询大于等于,通过“属性名_lte”查询小于等于,写法如:
http://localhost:3000/posts?views_gte=10&views_lte=20

[]

like查询

通过“属性名_like”的写法查询如
http://localhost:3000/posts?title_like=标题1

[
  {
    "id": 1,
    "title": "测试标题1",
    "author": "张三"
  }
]

全文搜索

通过q查询参数如:
http://localhost:3000/posts?q=标题

[
  {
    "id": 1,
    "title": "测试标题1",
    "author": "张三"
  },
  {
    "id": 2,
    "title": "测试标题2",
    "author": "李四"
  }
]

关联查询

通过_embed参数请求如:
http://localhost:3000/posts?_embed=comments ,代表posts关联comments。

[
  {
    "id": 1,
    "title": "测试标题1",
    "author": "张三",
    "comments": [
      {
        "id": 1,
        "body": "这里是内容体1",
        "postId": 1
      }
    ]
  },
  {
    "id": 2,
    "title": "测试标题2",
    "author": "李四",
    "comments": [
      {
        "id": 2,
        "body": "这里是内容体2",
        "postId": 2
      }
    ]
  }
]

指定端口

命令增加 --port参数

json-server --watch db.json --port 3004

 

使用js脚本生成数据代替json

创建一个index.js文件用于生成数据

module.exports = () => {
  const data = { users: [] }
  // Create 1000 users
  for (let i = 0; i < 1000; i++) {
    data.users.push({ id: i, name: `user${i}` })
  }
  return data
}

运行服务指定js文件

json-server index.js

使用远程地址加载数据

json-server http://example.com/file.json
json-server http://jsonplaceholder.typicode.com/db

作为静态文件服务器

创建一个public目录,创建一个内容为hello world的index.html文件。

mkdir public
echo 'hello world' > public/index.html
json-server db.json

访问 http://localhost:3000/ ,根路径会默认显示public目录下的内容,会显示index.html的内容。

'hello world'

也可以通过--static参数指定其他路径的目录

json-server db.json --static ./some-other-dir

自定义请求路由

创建一个 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

以下访问左边的路径分别对应右边的原始请求效果

  • /api/posts ==》 /posts
  • /api/posts/1 ==》 /posts/1
  • /posts/1/show ==》 /posts/1
  • /posts/JAVAscript ==》 /posts?category=JavaScript
  • /articles?id=1 ==》 /posts/1

更多功能可以通过json-server的官网查阅,希望本文对你有所帮助。



Tags:json服务器   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
json-server是一款json数据服务器,可以对json文件、js脚本生成的json数据、远程json数据进行RESTFUL风格的增删改查操作,可以通过参数、分页、排序、全文搜索、关联查询、范围...【详细内容】
2020-11-05  Tags: json服务器  点击:(23)  评论:(0)  加入收藏
▌简易百科推荐
1、通过条件判断给变量赋值布尔值的正确姿势// badif (a === &#39;a&#39;) { b = true} else { b = false}// goodb = a === &#39;a&#39;2、在if中判断数组长度不为零...【详细内容】
2021-12-24  Mason程    Tags:JavaScript   点击:(5)  评论:(0)  加入收藏
给新手朋友分享我收藏的前端必备javascript已经写好的封装好的方法函数,直接可用。方法函数总计:41个;以下给大家介绍有35个,需要整体文档的朋友私信我,1、输入一个值,将其返回数...【详细内容】
2021-12-15  未来讲IT    Tags:JavaScript   点击:(19)  评论:(0)  加入收藏
1. 检测一个对象是不是纯对象,检测数据类型// 检测数据类型的方法封装(function () { var getProto = Object.getPrototypeOf; // 获取实列的原型对象。 var class2type =...【详细内容】
2021-12-08  前端明明    Tags:js   点击:(23)  评论:(0)  加入收藏
作者:一川来源:前端万有引力 1 写在前面Javascript中的apply、call、bind方法是前端代码开发中相当重要的概念,并且与this的指向密切相关。本篇文章我们将深入探讨这个关键词的...【详细内容】
2021-12-06  Nodejs开发    Tags:Javascript   点击:(18)  评论:(0)  加入收藏
概述DOM全称Document Object Model,即文档对象模型。是HTML和XML文档的编程接口,DOM将文档(HTML或XML)描绘成一个多节点构成的结构。使用JavaScript可以改变文档的结构、样式和...【详细内容】
2021-11-16  海人为记    Tags:DOM模型   点击:(34)  评论:(0)  加入收藏
入口函数 /*js加载完成事件*/ window.onload=function(){ console.log("页面和资源完全加载完毕"); } /*jQuery的ready函数*/ $(document).ready(function(){ co...【详细内容】
2021-11-12  codercyh的开发日记    Tags:jQuery   点击:(35)  评论:(0)  加入收藏
一、判断是否IE浏览器(支持判断IE11与edge)function IEVersion() {var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串var isIE = userAgent.indexOf("comp...【详细内容】
2021-11-02  V面包V    Tags:Javascript   点击:(38)  评论:(0)  加入收藏
Null、Undefined、空检查普通写法: if (username1 !== null || username1 !== undefined || username1 !== &#39;&#39;) { let username = username1; }优化后...【详细内容】
2021-10-28  前端掘金    Tags:JavaScript   点击:(50)  评论:(0)  加入收藏
今天我们将尝试下花 1 分钟的时间简单地了解下什么是 JS 代理对象(proxies)?我们可以这样理解,JS 代理就相当于在对象的外层加了一层拦截,在拦截方法里我们可以自定义一些个性化...【详细内容】
2021-10-18  前端达人    Tags:JS   点击:(51)  评论:(0)  加入收藏
带有多个条件的 if 语句把多个值放在一个数组中,然后调用数组的 includes 方法。// bad if (x === "abc" || x === "def" || x === "ghi" || x === "jkl") { //logic } // be...【详细内容】
2021-09-27  羲和时代    Tags:JS   点击:(58)  评论:(0)  加入收藏
相关文章
    无相关信息
最新更新
栏目热门
栏目头条