1、前言

为了前端项目获取数据,需要在本地搭建json-server,这样保证可以在本地实现增删改查的操作。

2、安装

全局安装:
npm -g json-server

3、创建一个json-server所在文件夹与文件

WebstormProjects Gavin$ mkdir jsonserver
WebstormProjects Gavin$ cd jsonserver/
jsonserver Gavin$ npm init  --yes

4、安装json-server模块

jsonserver Gavin$ cnpm install --save json-server

5、调整json-server启动方式,修改package.json文件

"scripts": {
"json:server": "json-server --watch db.json"
},

6、创建对应的db.json文件

{
"users":[
{
"name": "Gavin",
"phone": "333-444-555",
"email": "gavin@gmail.com",
"id":1,
"age":15,
"companyId":1
},
{
"name": "Henry",
"phone": "222-444-555",
"email": "henry@gmail.com",
"id":2,
"age":20,
"companyId":1
},
{
"name": "Tom",
"phone": "444-33-555",
"email": "tom@gmail.com",
"id":2,
"age":30,
"companyId":2
},
{
"name": "Jhon",
"phone": "333-444-333",
"email": "jhon@gmail.com",
"id":2,
"age":15,
"companyId":3
}
],
"companies":[
{
"id":1,
"name": "Apple",
"description": "Apple is good"
},
{
"id":2,
"name": "Google",
"description": "Google is good"
},
{
"id":3,
"name": "IBM",
"description": "IBM is good"
} ]
}

7、启动json-server

npm run json:server

8、访问json-server

http://localhost:3000

9、创建README.md文件

mkdir README.md

10、添加内容

//获取所有用户信息
http://localhost:3000/users //获取id为1的单个用户信息
http://localhost:3000/users/1 //获取公司的所有信息
http://localhost:3000/companies //获取单个公司信息
http://localhost:3000/companies/1 //获取公司所属用户信息
http://localhost:3000/companies/1/users //根据名字获取公司信息
http://localhost:3000/companies?name=Apple //根据拼接获取多个公司信息
http://localhost:3000/companies?name=Apple&name=IBM //获取信息的限制
http://localhost:3000/companies?_page=1&_limit=2 //根据名字进行排序显示
http://localhost:3000/companies?sort=name&_order=desc //年纪大于20的用户
http://localhost:3000/users?age_gte=20 //年纪在15和20之间的用户
http://localhost:3000/users?age_gte=15&age_lte=20 //搜索用户信息 q=Gavin的用户
http://localhost:3000/users?q=Gavin

11、post请求

首先下载postMan软件

安装后选择POST模式,在Headers里添加Content-Type选择application/json,Body里选择RAW模式

{
"name":"aaa",
"email":"333@.qq.com",
"companyId":"3"
}

12、可以将jsonplaceholder中的数据作为本地的数据源,在package.json中添加:地址http://jsonplaceholder.typicode.com/

"scripts": {
"json:server": "json-server --watch db.json",
"json:server:remote": "json-server http://jsonplaceholder.typicode.com/db"
},

本地搭建json-server的更多相关文章

  1. 本地搭建MongoDB Server

    https://docs.mongodb.com/manual/tutorial/install-mongodb-on-windows/ Overview Requirements Get Mongo ...

  2. IntelliJ IDEA 、PyCharm、WebStorm、PhpStorm等JetBrains公司软件 激活的License Server本地搭建教程

    一.背景 IntelliJ IDEA是JetBrains公司的一款IDE,主要用于java开发,可以编写Java.Groovy.Kotlin.Scala等语言,也可以直接做Android开发. 同系列 ...

  3. json server的简单使用(附:使用nodejs快速搭建本地服务器)

    作为前端开发人员,经常需要模拟后台数据,我们称之为mock.通常的方式为自己搭建一个服务器,返回我们想要的数据.json server 作为工具,因为它足够简单,写少量数据,即可使用. 安装 首先需要 ...

  4. json:server 本地搭建

    做个记录, 第一步,我们新建一个文件夹. 第二步,打开文件夹,执行git,没有git可以下载一个.或者用命令行工具进入到这个文件夹! 第三步,初始化json  在git里执行npm init --ye ...

  5. 搭建带热更新功能的本地开发node server

    引言 使用webpack有一段时间了,对其中的热更新的大概理解是:对某个模块做了修改,页面只做局部更新而不需要刷新整个页面来进行更新.这样就能节省因为整个页面刷新所产生开销的时间,模块热加载加快了开发 ...

  6. phpstorm破解 IntelliJ IDEA License Server本地搭建教程 http://blog.lanyus.com/archives/174.html/comment-page-6#comments 附件:mac环境

    ilanyu's Blog 搜索关键字搜索 首页IDEA注册码文件中转在线记事本老博客关于 IntelliJ IDEA License Server本地搭建教程 作者: ilanyu 时间: Marc ...

  7. NodeJs本地搭建服务器,模拟接口请求,获取json数据

    最近在学习Node.js,虽然就感觉学了点皮毛,感觉这个语言还不错,并且也会一步步慢慢的学着的,这里实现下NodeJs本地搭建服务器,模拟接口请求,获取json数据. 具体的使用我就不写了,这个博客写 ...

  8. 搭建Mock Server

    1.为什么要搭建mock-server? 为了更好的分工合作,让前端能在不依赖后端环境的情况下进行开发,其中一种手段就是为前端开发者提供一个 web 容器,这个本地环境就是 mock-server. ...

  9. 完善本地搭建的jekyll环境(Windows)

    序:上篇文章虽然在本地搭建好了jekyll环境,但是却存在一些问题,如通过jekyll new创建的站点无法正常跑起来.中文编码有问题.这说明之前搭建的环境有不周之处. PS:因之前自己搭建环境时并未 ...

随机推荐

  1. jquery横向纵向鼠标滚轮全屏切换

    html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF- ...

  2. IO多路复用版FTP

    需求: 实现文件上传及下载功能 支持多连接并发传文件 使用select or selectors 流程图 import socket import pickle import sys import t ...

  3. echarts 自适应方法 x和y x2和y2

    grid:{ x:65, y:20, x2:30, y2:30},

  4. 小白的python之路Linux部分10/28&29

    属主属组其他人对文件的rwx权限 1.userdel删东西不全,会有残留,

  5. js身份证号码验证

    验证身份证号码的有效性,包含15位和18位: 根据[中华人民共和国国家标准 GB 11643-1999]中有关公民身份号码的规定,公民身份号码是特征组合码,由十七位数字本体码和一位数字校验码组成.排列 ...

  6. Spring MVC学习step1——框架熟悉

    b站视频链接,整理的一些笔记,图是网上找到的黑马教案,侵权删,在此记录学习笔记 SpringMVC框架 步骤: 第一步:发起请求到前端控制器(Dispatcherservlet) 第二步:前端控制器请 ...

  7. JDBCUtils——C3P0

    需要导入的包: mysql-connector-java-5.1.37-bin.jar c3p0-0.9.2-pre5.jar mchange-commons-java-0.2.3.jar 如果使用D ...

  8. 解决Warning: mysql_connect(): Headers and client library minor version mismatch. 警告

    php -i|grep Client 查询当前Client 版本,结果如下: Client API version => 5.6.31Client API library version =&g ...

  9. 输入系统:进程间双向通信(socketpair+binder)

    一.双向通信(socketpair) socketpair()函数用于创建一对无名的.相互连接的套接子,如果函数成功,则返回0,创建好的套接字分别是sv[0]和sv[1]:否则返回-1,错误码保存于e ...

  10. Flask项目笔记

    一.jsonify  jsonify 是flask的函数,可以将字典转换成json数据返回给浏览器二. 钩子函数 @app.before_first_request:第一次请求调用,用于初始化数据 @ ...