兴海县网站建设公司响应式网站 图片居中

json-server环境搭建

一个在前端本地运行，可以存储json数据的server。

基于node环境，可以指定一个 json 文件作为 API 的数据源。

前提

• 安装 node 环境

下载安装

• 全局安装json-server

npm install -g json-server

监听服务

• 在需要的文件夹下执行以下命令，执行成功后，默认会创建 db.json 文件。

json-server --watch db.json

启动成功

• 根据执行命令，服务已正常监听，我们可以根据以下地址进行访问体验。
• 可以理解为json-server 把 db.json 根节点的每一个 key ，当作一个 router 。我们可以根据这个规则来编写测试。

• 在浏览器运行 http://localhost:3000 ，效果如下

修改端口号

方式一：

• json-server 默认端口为 3000，可以根据需要自定义端口号。

json-server --watch db.json --port 3006

方式二：

• 告诉你个可以偷懒的方式吧，如果觉得每次 启动服务 都要执行相关命令，可以在 db.json 同级文件夹新建一个 package.json 文件，然后把以下配置信息放在里面就可以啦。

{"scripts": {"mock": "json-server db.json --port 3006"}
}

• 注意启动服务的方式：执行以下命令即可。

npm run mock

数据操作

测试数据源

• 直接复制到所创建的 db.json 文件中

{"subject": [{"id": 1,"name": "JAVA","price": 888 },{"id": 2,"name": "GO","price": 2088},{"id": 3,"name": "VUE","price": 288}]
}

查询数据

获取数据方式

方式一：

• 直接在 url 后面拼接 id 值

http://localhost:3006/subject/3

• 返回数据格式：对象

{id: 3,name: "VUE",price: 288
}

方式二：

• 也是我们常见 GET 的传参方式，拼接需要查询参数

http://localhost:3006/subject?id=3

• 返回数据格式：数组

[{id: 3,name: "VUE",price: 288}
]

分页获取数据

• _page：页码
• _limit：每页显示数量，如果没有指定，默认每页10条数据。

http://localhost:3006/subject?_page=1&_limit=2

排序数据

• _sort：排序字段
• _order：排序方式【asc | desc】，默认asc

http://localhost:3006/subject?_sort=id&_order=desc

截取数据

• 使用 slice 方式，通过参数 _start 指定开始位置，_end指定结束位置
• 注意： 是通过 下标 方式截取
• 也可以结合_limit 指定开始位置算起，往后取n个数据。

http://localhost:3006/subject?_start=3&_end=6http://localhost:3006/subject?_start=3&_limit=6

区间数据

• _gte： 大于等于
• _lte： 小于等于
• _ne： 不等于
• _like： 模糊查询

http://localhost:3006/subject?id_gte=2&_lte=5http://localhost:3006/subject?name_like=V

配置静态资源服务器

• 在根目录下创建 json 文件，例 json_server_config.json
• 在根目录下创建 public 目录，存放静态资源。

{"port": 3006,"watch": true,"static": "./public","read-only": false,"on-cors": true,"no-gzip": false
}

• 修改 package.json 文件中启动命令

{"name": "my-json-server","version": "1.0.0","description": "","main": "index.js","scripts": {"mock1": "json-server db.json --port 3006","mock": "json-server --c json_server_config.json db.json"},"keywords": [],"author": "","license": "ISC"
}

• 因为配置文件中指定静态文件的目录，所以访问图片时可以忽略 public 目录。
• 例：访问图片（public/image）：http://localhost:3006/image/test.png