Jsonserver使用篇

相信很多测试同学跟我一样在做UI自动化时都因为环境以及测试数据不稳定的问题苦恼,确实这个是做UI自动化测试时最大的痛点,那么该怎么解决这个问题呢,其实我们可以使用mock server来解决这个问题,这篇文章我主要介绍下json-server这个工具的使用方法,希望可以帮助到大家。官方文档:https://www.npmjs.com/package/json-server

 安装方法:
 在终端执行:npm install -g json-server
  ps:前边已经安装过node和npm,所以可直接使用
  在终端执行json-server -v,成功输出版本号证明安装成功
  • 使用方法
  1. 先找一个需要mock的接口,确定接口返回的数据,这里我找了两个接口来举例
    http://leisurehuang.qicp.vip:3000/auth/login
    {
    “success”: 1,
    “code”: “QYjQoY”
    }
    http://leisurehuang.qicp.vip:3000/annual_leaves/list
    {
    “success”: 1,
    “annual_leave”:[
    {
    “id”: 1537,
    “name”: “王璐”,
    “emplo_id”: 25805,
    “annual_vacation_taken”: 1,
    “annual_vacation_left_to_month”: -0.2,
    “annual_vacation_left_to_year”: 9,
    “dep”: “PS”,
    “primary_role”: “Quality Analyst”,
    “home_office”: “Xi’an”,
    “comment”: null,
    “as_of_date”: “2020-01-31”
    },
    {
    “id”: 3497,
    “name”: “王璐”,
    “emplo_id”: 25805,
    “annual_vacation_taken”: 5,
    “annual_vacation_left_to_month”: -3.4,
    “annual_vacation_left_to_year”: 5,
    “dep”: “PS”,
    “primary_role”: “Quality Analyst”,
    “home_office”: “Xi’an”,
    “comment”: null,
    “as_of_date”: “2020-02-29”
    }
    ],
    “new_token”: “eyJhbGciOiJIUzI1NiJ9.eyJlbWFpbCI6Imx1LndhbmdAdGhvdWdodHdvcmtzLmNvbSIsInVpZCI6ImY4NDY4MjI3LTc1NDctNGQyNC05OGZiLWRjMGE3ZjhjMzY3NiIsImV4cCI6MTU4NzIxNTc1Nn0.wOylToPEQQdOpAuBAEzBN826Ur8GTDOKyQfvgTqv6VQ”
    }

  2. 创建一个文件夹,在里边新建一个leavestatus.json文件作为数据源,内容如下:
    {
    “login”:
    {
    “success”: 1,
    “code”: “eqQRlG”
    },
    “list”:
    {
    “success”: 1,
    “annual_leave”: [{
    “id”: 1537,
    “name”: “王璐”,
    “emplo_id”: 25805,
    “annual_vacation_taken”: 1.0,
    “annual_vacation_left_to_month”: -0.2,
    “annual_vacation_left_to_year”: 9.0,
    “dep”: “PS”,
    “primary_role”: “Quality Analyst”,
    “home_office”: “Xi’an”,
    “comment”: null,
    “as_of_date”: “2020-01-31”
    }, {
    “id”: 3497,
    “name”: “王璐”,
    “emplo_id”: 25805,
    “annual_vacation_taken”: 5.0,
    “annual_vacation_left_to_month”: -3.4,
    “annual_vacation_left_to_year”: 5.0,
    “dep”: “PS”,
    “primary_role”: “Quality Analyst”,
    “home_office”: “Xi’an”,
    “comment”: null,
    “as_of_date”: “2020-02-29”
    }],
    “new_token”: “eyJhbGciOiJIUzI1NiJ9.eyJlbWFpbCI6Imx1LndhbmdAdGhvdWdodHdvcmtzLmNvbSIsInVpZCI6ImY4NDY4MjI3LTc1NDctNGQyNC05OGZiLWRjMGE3ZjhjMzY3NiIsImV4cCI6MTU4NzIxNTc1Nn0.wOylToPEQQdOpAuBAEzBN826Ur8GTDOKyQfvgTqv6VQ”
    }
    }

  3. 你会发现请求/auth/login对应数据源中的”login”,/annual_leaves/list对应数据源中的“list”,那么要怎么对应起来呢,这时候就用到了路由,可以在刚刚创建的文件夹中再创建一个routes.json文件,文件内容如下:
    {
    “/auth/": “/$1”,
    "/annual_leaves/
    ”: “/$1”
    }
    该路由的作用就是将/auth/login映射到/login,将/annual_leaves/list映射到/list
    官方文档中还有更多路由的用法,可以根据需要使用。

由于login接口是post请求,每次调用都会添加一条新的记录,返回body必须包含字段id,中且id会自动递增,与本次mock的需求不符,所以又在刚刚的文件夹中创建了一个middle.js脚本,将post请求转换为get请求,这样就实现了post请求每次返回固定的body。
//middle.js
module.exports = (req, res, next) => {
if (req.method === ‘POST’) {
req.method = ‘GET’;
}
next()
};

  1. 启动jsonserver
    进入刚刚创建的文件夹下,执行json-server leavestatus.json --routes routes.json --middlewares middle.js

在这里插入图片描述

如果嫌每次启动都要执行这么长一串命令比较麻烦,可以在刚刚创建的文件夹下新建一个package.json文件,在scripts中可以把这段命令加进去,后边直接用npm start就可以启动服务。

“scr
ipts": {
“start”: “json-server leavestatus.json --routes routes.json --middlewares middle.js”
},

  1. 这个时候你在postman调用http://localhost:3000/login和http://localhost:3000/list,你会发现返回的数据和数据源中的一致。
    在这里插入图片描述
    在这里插入图片描述
  2. 自动化测试中需要modk的接口肯定是真实的域名而不是localhost:3000,这个时候只需要将本地的host改成对应的域名即可,类似:127.0.0.1 leisurehuang.qicp.vip 这样,这样就大功告成啦!
    在这里插入图片描述

其实jsonserver也可以结合mockjs一起使用,mockjs参考:http://mockjs.com/,mockjs可以根据不同的规则生成随机数据,使用方法也比较简单,只需要把刚刚json格式的数据源文件替换成生成随机数据的js文件即可。

### 如何入门使用 Json-server #### 创建 `db.json` 数据文件 为了使用 Json-server,首先需要在一个项目目录下创建一个名为 `db.json` 的文件。该文件将充当数据库的角色,并存储所有的数据对象。例如: ```json { "posts": [ { "id": 1, "title": "我的第一博客", "author": "张三" }, { "id": 2, "title": "学习心得", "author": "李四" } ], "comments": [ { "id": 1, "body": "写得真好!", "postId": 1 }, { "id": 2, "body": "受益匪浅", "postId": 2 } ] } ``` 此文件定义了一个简单的 JSON 结构,其中包含两个资源集合:`posts` 和 `comments`[^2]。 --- #### 安装并启动 Json-server 安装 Json-server 可以通过 npm 进行全局安装。运行以下命令完成安装: ```bash npm install -g json-server ``` 安装完成后,在终端中导航至包含 `db.json` 文件的项目目录,并执行以下命令来启动服务器: ```bash json-server --watch db.json ``` 默认情况下,Json-server 将监听地址 `http://localhost:3000/` 并自动根据 `db.json` 中的数据生成对应的 RESTful API 路由[^1]。 --- #### 访问自动生成的 API 一旦服务器成功启动,可以通过浏览器或 HTTP 请求工具访问这些 API。以下是基于上面示例中的几个常用接口路径及其用途: - **获取所有帖子列表** ``` GET http://localhost:3000/posts ``` - **获取单个帖子详情** ``` GET http://localhost:3000/posts/{id} (例如: /posts/1) ``` - **新增一条评论记录** ``` POST http://localhost:3000/comments Content-Type: application/json Body: { "body": "新评论内容", "postId": 1 } ``` - **更新某条评论的内容** ``` PATCH http://localhost:3000/comments/{id} (例如: /comments/1) Content-Type: application/json Body: { "body": "修改后的评论内容" } ``` - **删除某个帖子** ``` DELETE http://localhost:3000/posts/{id} (例如: /posts/1) ``` 以上操作均遵循标准的 RESTful 设计原则[^2]。 --- #### 实战应用案例 如果想进一步实践 Json-server 的能力,可以尝试将其集成到 Vue 或 React 等前端框架中作为临时后端支持。比如在 Nuxt.js 项目中配合 Axios 插件调用上述生成的服务接口实现前后端联调效果[^3]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值