文档章节

使用json-server快速搭建本地数据接口

wftt
 wftt
发布于 2018/04/19 10:42
字数 749
阅读 2099
收藏 0

1.安装

全局安装json-server:

npm  install  -g  json-server

如果是linux系统或者mac系统,需要在前面加sudo进行全局安装,然后输入密文密码就可以了。

sudo  npm  install  -g json-server

2.测试

json-server -h                  //测试命令

如果出现下面内容,表明安装成功!

3.新建一个文件夹,比如在桌面新建文件夹JSONSERVER.然后cd  JSONSERVER.进入文件夹中.

4.初始化项目

通过下面两个命令中任意一个对其进行初始化,完成后文件夹中就会出现package.json文件.

//第一种方法
npm init  

//第二种方法
npm init --yes  

5.安装依赖模块

npm install json-server --save

6.修改配置文件

打开package.json文件,将scripts进行修改,如下:

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

7.新建json文件

上面是db.json,所以也新建db.json文件,然后写入json数据.

{
  "users": [
    {
      "name": "tt",
      "phone": "123456789",
      "email": "111@qq.com",
      "age": "20",
      "id": 1,
      "companyId": 1
    },
    {
      "name": "dede",
      "phone": "123456789",
      "email": "222@qq.com",
      "age": "30",
      "id": 2,
      "companyId": 2
    },
    {
      "name": "wf",
      "phone": "123456789",
      "email": "333@qq.com",
      "age": "23",
      "id": 3,
      "companyId": 3
    },
    {
      "name": "mj",
      "phone": "123456789",
      "email": "444@qq.com",
      "age": "45",
      "id": 4,
      "companyId": 3
    }
  ],
  "companies": [
    {
      "id": 1,
      "name": "Apple",
      "description": "Apple lalala!"
    },
    {
      "id": 2,
      "name": "Microsoft",
      "description": "Microsoft lalala!"
    },
    {
      "id": 3,
      "name": "Google",
      "description": "Google lalala!"
    }
  ]
}

8.运行

npm run json:server

使用命令运行,其实就是在运行json-server --watch db.json.会提供一个端口为3000的地址,查看页面,加载完之后,就可以看到相关内容了。如果有报错,可以试一下:

sudo npm run json:server

9.番外

到8,已经完成了基本的使用,如果想把一个接口中的数据拿过来,可以在package.json文件中进行修改:

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

然后重新npm run json:server:remote就可以了。

10.查看相关内容

// 获取所有用户信息
http://localhost:3000/users

// 获取id为1的用户信息
http://localhost:3000/users/1

// 获取公司的所有信息
http://localhost:3000/companies

// 获取单个公司的信息
http://localhost:3000/companies/1

// 获取所有公司id为3的用户
http://localhost:3000/companies/3/users

// 根据公司名字获取信息
http://localhost:3000/companies?name=Microsoft

// 根据多个名字获取公司信息
http://localhost:3000/companies?name=Microsoft&name=Apple

// 获取一页中只有两条数据
http://localhost:3000/companies?_page=1&_limit=2

// 升序排序 asc升序 desc降序
http://localhost:3000/companies?_sort=name&_order=asc

// 获取年龄30及以上的
http://localhost:3000/users?age_gte=30

// 获取年龄在30到40之间
http://localhost:3000/users?age_gte=30&age_lte=40

// 搜索用户信息
http://localhost:3000/users?q=h  h指的是查询的首字母

如上,就完成了json-server的简单搭建。如果学习vue和json-server的配合使用请稍后看"vue+json-server实现后台管理系统"。如果觉得对你有帮助,请给博主点个赞!谢谢支持!

© 著作权归作者所有

wftt
粉丝 11
博文 38
码字总数 24507
作品 0
海淀
前端工程师
私信 提问
提升前端效率的十款工具(上篇)

推荐十款体验极好的十款前端工具, 善用它们, 让你偷懒的同时, 快速把活儿赶完, 早点下班~ 快速开启一个http服务 可以通过npm全局安装一个http-server,当需要开启服务的时候, 通过命令行,跳转...

木子昭
2018/07/19
0
0
高性能 RESTful 框架 - EasyRest-NAS

EasyRest-NAS English doc EasyRest 与 Netty, Akka 和 Spring 的整合. 这是一个为快速开发而设计的高性能RESTful框架,极易搭建集群和使用分布式。你可以完全专注在你的业务逻辑上。 不需要...

Louie_L
2018/05/02
1K
1
Charles"傻瓜式"创建测试接口

Charles是一款强大的"抓包工具",同时也能为本地开发提供数据接口, Charles是跨平台的软件, 无论你是mac用户, 或是windows,Linux用户, 都能得到很好的使用体验! 1. 开启charles, 打开本地映射...

木子昭
2018/07/09
0
0
PHP:构建 JSON 数据接口的 Web 服务器

Table of Contents 前言 问题及需求分析 实现 前言 在应用开发的过程中,涉及网络,常常就需要通过一些 HTTP 请求从网上获取数据。很多网络服务器(Web server)提供了 URL 类型的 API,通过...

Linsw
2016/12/01
0
0
下一页/react-native-full-example

小明找厕所 0 介绍 支持ios和android两个平台 下载:git clone https://github.com/liumingmusic/react-nativetoiletApp.git 安装:cd toilet --> npm install --> react-native run-ios(ru......

下一页
2017/12/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

rime设置为默认简体

转载 https://github.com/ModerRAS/ModerRAS.github.io/blob/master/_posts/2018-11-07-rime%E8%AE%BE%E7%BD%AE%E4%B8%BA%E9%BB%98%E8%AE%A4%E7%AE%80%E4%BD%93.md 写在开始 我的Arch Linux上......

zhenruyan
今天
5
0
简述TCP的流量控制与拥塞控制

1. TCP流量控制 流量控制就是让发送方的发送速率不要太快,要让接收方来的及接收。 原理是通过确认报文中窗口字段来控制发送方的发送速率,发送方的发送窗口大小不能超过接收方给出窗口大小。...

鏡花水月
今天
10
0
OSChina 周日乱弹 —— 别问,问就是没空

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @tom_tdhzz :#今日歌曲推荐# 分享容祖儿/彭羚的单曲《心淡》: 《心淡》- 容祖儿/彭羚 手机党少年们想听歌,请使劲儿戳(这里) @wqp0010 :周...

小小编辑
今天
1K
11
golang微服务框架go-micro 入门笔记2.1 micro工具之micro api

micro api micro 功能非常强大,本文将详细阐述micro api 命令行的功能 重要的事情说3次 本文全部代码https://idea.techidea8.com/open/idea.shtml?id=6 本文全部代码https://idea.techidea8....

非正式解决方案
今天
5
0
Spring Context 你真的懂了吗

今天介绍一下大家常见的一个单词 context 应该怎么去理解,正确的理解它有助于我们学习 spring 以及计算机系统中的其他知识。 1. context 是什么 我们经常在编程中见到 context 这个单词,当...

Java知其所以然
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部