在开发过程中, 前后端不论是否分离, 接口多半是滞后于页面开发的. 所以建立一个 REST 风格的 API 接口, 给前端页面提供虚拟的数据, 是非常有必要的.
对比过多种 mock 工具后, 我最终选择了使用 JSON server 作为工具, 因为它足够简单, 写少量数据, 即可使用.
也因为它足够强大, 支持 CORS 和 JSONP 跨域请求, 支持 GET, POST, PUT, PATCH 和 DELETE 方法, 更提供了一系列的查询方法, 如 limit,order 等. 下面我将详细介绍 JSON server 的使用.
JSON-server 需要电脑安装 Node.JS.
全局安装 JSON-server
cnpm install JSON-server -g
在项目文件夹下建立一个存放测试数据的文件夹, 在创建一个名为 list 的 JSON 文件, 在启动这个测试接口, 在文件夹下输入命令
会自动生成一个接口 "http://localhost:3000/list"
JSON-server list.JSON
在一切都搭建好之后, 就可以根据生成的接口对数据进行操作了, 主要的操作包括对数据的: 增加, 删除, 修改, 查找
对数据进行操作 (本文主要用 axios 访问接口, 对数据进行操作):
增
- // 增数据的时候用 post 每个新增的数据都会有一个 ID
- axios({
- method:"post",
- url:"http://localhost:3000/list",
- data:{
- "username": "张三",
- "age": 24,
- "sex": "女",
- }
- }).then((data)=>{
- console.log(data);
- })
改
- // 改数据 put 会将当前数据里面所有的东西都被覆盖 patch : 只会修改数据中的某一个
- axios({
- method : "put",
- url : "http://localhost:3000/list/2", // 根据数据中指定的 ID 进行修改
- data:{
- "name" : "小来"
- }
- }).then((data)=>{
- console.log(data);
- })
查 (查找数据的方式有很多种, 下面主要根据字段的信息, 数据的 ID, 模糊查询)
- // 根据数据中字段的信息进行查询
- axios({
- method : "get",
- url : "http://localhost:3000/list?username = 孔义 &&username = 哈哈" // 指定字段查询
- }).then((data)=>{
- console.log(data);
- })
- // 根据 ID 进行查找
- axios({
- method : "get",
- url : "http://localhost:3000/list/1" // 指定 ID 查询
- }).then((data)=>{
- console.log(data);
- })
- // 模糊查询
- axios({
- method : "get",
- url : "http://localhost:3000/list?q = 小" // 模糊查询 字段中有 "小" 的
- }).then((data)=>{
- console.log(data);
- })
删除
- axios({
- method : "delete",
- url : "http://localhost:3000/list/2" // 根据 ID 删除
- }).then((data)=>{
- console.log(data);
- })
来源: http://www.bubuko.com/infodetail-2843176.html