json-server快速入门

json-server 的安装使用

1.全局安装json-server（确保已经装过node环境）

npm install json-server -g

2.创建一个json文件，文件名任意。

3.让json-server指向监测文件并指定监测端口

json-server 文件名.js -p xxxx

tips：登录设置的主页地址，可以得到对应json的路由结构，比如：

http://localhost:4000

4.通过json-server -h 可以看到如下配置项：

index.js [options] <source>

Options:
  --config, -c               Path to config file   [default: "json-server.json"]
  --port, -p                 Set port                            [default: 3000]
  --host, -H                 Set host                       [default: "0.0.0.0"]
  --watch, -w                Watch file(s)                             [boolean]
  --routes, -r               Path to routes file
  --middlewares, -m          Paths to middleware files                   [array]
  --static, -s               Set static files directory
  --read-only, --ro          Allow only GET requests                   [boolean]
  --no-cors, --nc            Disable Cross-Origin Resource Sharing     [boolean]
  --no-gzip, --ng            Disable GZIP Content-Encoding             [boolean]
  --snapshots, -S            Set snapshots directory              [default: "."]
  --delay, -d                Add delay to responses (ms)
  --id, -i                   Set database id property (e.g. _id) [default: "id"]
  --foreignKeySuffix, --fks  Set foreign key suffix (e.g. _id as in post_id)
                                                                 [default: "Id"]
  --quiet, -q                Suppress log messages from output         [boolean]
  --help, -h                 Show help                                 [boolean]
  --version, -v              Show version number                       [boolean]

Examples:
  index.js db.json
  index.js file.js
  index.js http://example.com/db.json

json-server 中的数据操作（模拟后台）

1.过滤数据,比如：

http://localhost:4000/news?id=1

在自己封装的ajax中写法如下：

ajax({url: "http://localhost:4000/news",data: 'id=1'}).then()

2.属性操作，比如：

http://localhost:4000/news?views.length=2

在自己封装的ajax中写法如下：

ajax({url: "http://localhost:4000/news", data: 'views.length=2'}).then()

3.分割：
- _start：开始参数
- _end：结束参数
- _limit：限制数量

下面是示例

// 从第一条数据开始获取5篇新闻
http://localhost:4000/news?_start=0&_limit=5

4.排序
- _sort=xxx：排序依据的属性xxx
- _order=ASC||DESC：默认升序（ASC）
- 示例：

http://localhost:4000/news?_sort=views&_order=DESC

5.模糊查找

// 查找title中含有 "前端" 字样的新闻 
http://localhost:4000/news?title_like=前端

6.运算
- _gte：大于某值
- _lte：小于某值
- _ne：排除某值

7.全文检索

查找对象所有value中包含指定值的数据

http://localhost:4000/news?q=强拆

使用json-server生成数据

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;
};

//使用json-server本身模拟数据

json-server 的其他使用

1.通过生成package.json可以diy自己的指令

npm init

2.移动设备访问
- 通过 json server 建立的rest api服务默认可以在局域网中通过WIFI访问接口。
- windows下面通过 ipconfig 查找到电脑的局域网地址.
- mac设备是通过 ifconfig | grep “inet ” | grep -v 127.0.0.1 查看。
比如我的电脑局域网ip是 192.168.0.6,在手机上访问 http://192.168.0.6:3003 即可。

3.自定义路由

可以通过自定义路由的形式，简化数据结构，或是建立高弹性的web api，例如：

{
  "/news/:id/show": "/news/:id",
  "/topics/:id/show": "/news/:id"

}
//访问 /news/1/show 和 topics/1/show 均返回指定的 /news/1 内容。

tips：需要注意的是，路由必须以 / 开头

使用Mock.js生成数据

1.安装：

npm install mockjs --save

2.待续…