借助Nextjs框架来更清晰展示对比测试结果

1. 背景

工作中大家经常需要进行对比测试来确保新旧版本之间数据或返回结果的一致性，减少潜在问题的发生。例如，在我们小组使用通过内部 CapPlan 工具（基于 Goreplay实现） 或流量回放工具（基于jvm-sandbox-repeater实现）来录制流量，并使用 Python 代码在本地执行和比对。当比对结果出现差异时，需要提供一个直观的方式，让开发人员能够迅速识别问题，从而做出相应调整。

2. 方案探索

基于上面的背景我们探讨了三种不同的方案来展示比对结果：

2.1 方案一：Allure报告

使用 Allure 报告生成工具，可以将每次 HTTP 请求的结果记录到报告中。该方法支持良好且易于实现，但对于复杂数据展示可能显得不够灵活。

2.2 方案二：使用Flask解析log文件

通过 Flask 框架解析日志文件，并将其呈现为 Jinja2 格式的 HTML 页面。这种方式能够自定义展示样式，适合需要较多信息展示的场景，但实现相对复杂，需要处理日志格式与页面渲染之间的关系。

2.3 方案三：使用Nextjs展示数据

利用 Next.js 构建现代化、响应迅速的数据展示界面。它通过与 SQLite 数据库高效交互，将比对数据直观地展现在用户面前。相比其他两种方案，这种方式提供了更佳的用户体验和可扩展性。

3. 实现方式

下面将分别介绍三种方案的实现方法，项目使用的框架为 Python + pytest。

3.1 Allure报告

pytest 对 Allure 的支持非常好。唯一需要修改的是，在每次执行 HTTP 请求后，将结果写入报告中 主要通过 show_response 方法，该方法解析响应对象，并提取所需信息以展示在报告中

attach_text(f'以「{response.request.method}」方式请求「{response.url}」;'
f'返回状态码为「{response.status_code}」'
f'返回内容为「{response.text}」',
"接口请求")

3.2 使用Flask解析log文件

该方式首先处理响应，并按照一定格式存入 log 文件中 然后在 Flask 中重新解析这些日志，并展示到 Jinja2 格式的 HTML 页面中

3.3 使用Nextjs展示数据

3.3.0 框架介绍

Next.js( https://nextjs.org/) 是一个基于 React 的开源框架，提供了高效、灵活的解决方案，非常适合需要快速开发和优化用户体验的项目。它的主要特点包括：

• 服务器端渲染 (SSR)：在服务器上预先生成页面，提升加载速度和 SEO 性能。

• 静态网站生成 (SSG)：在构建时生成静态 HTML，提高性能。

• API 路由：允许在应用中创建 API 路由，简化后端处理。

• 动态路由：基于文件系统的动态路由，便于管理。

• 代码分割：自动为每个页面进行代码分割，提高加载效率。

• 热重载：开发过程中快速查看修改效果，无需手动刷新。

Prisma (https://www.prisma.io/ ) 是一个现代化的数据库工具，旨在简化和优化开发人员与数据库之间的交互。它主要提供以下功能：

• ORM（对象关系映射）：Prisma 作为 ORM，使得开发者可以使用 JavaScript 或 TypeScript 对数据库进行操作，而无需编写复杂的 SQL 查询。

• 类型安全：通过生成类型定义，Prisma 提供了强大的类型安全性，帮助开发者在编译时捕捉潜在错误，提高代码质量。

• 支持多种数据库：Prisma 支持多种主流数据库，如 PostgreSQL、MySQL、SQLite 和 MongoDB，使其适用于不同的项目需求。

• 自动生成 CRUD 操作：Prisma 可以根据数据库模型自动生成基本的增删改查（CRUD）操作，节省了大量手动编码的时间。

• 迁移管理：Prisma 提供方便的数据库迁移工具，使得 schema 的变更和版本控制变得更加简单。Prisma 是一个强大的工具，可以大幅提升与数据库交互的效率和体验，是现代全栈开发中不可或缺的一部分。例如上述两个工具，在数据比对过程中，将数据写入 SQLite 数据库，然后使用 Next.js 来读取并展示。这种做法不仅简化了前后端集成，还大大提升了轻量级增删改查的数据展示效率。

3.3.1 创建项目

npx create-next-app api_compare
cd api_compare

image2024-10-17_11-38-29.png

3.3.2 安装依赖

yarn add prisma @prisma/client antd

3.3.3 配置Prisma

• 步骤一：初始化Prisma

npx prisma init

这将生成 api_compare/prisma/schema.prisma 文件

• 步骤二：修改 schema.prisma 文件，使其指向数据库

        ...
datasource db {
provider = "sqlite"
url      = "file:./log.db"
}
model logs {
id           Int      @id @default(autoincrement())
url1         String
curl1        String
request1     String
remark1      String
...
}

• 步骤三：生成Prisma Client

npx prisma generate

它会提示：✔ Generated Prisma Client (v5.21.0) to ./node_modules/@prisma/client in 55ms

• 步骤四：数据迁移

npx prisma migrate dev --name init

此操作会生成迁移过程文件并创建数据库文件

3.3.4 编写接口

api_compare/src/app/api/logs/all/route.js 这个接口路径为：http://127.0.0.1:3000/api/logs/all

import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();
export default async function handler(req, res) {
if (req.method === 'GET') {
const logs = await prisma.logs.findMany();
res.status(200).json(logs);
} else {
res.setHeader('Allow', ['GET']);
res.status(405).end(`Method ${req.method} Not Allowed`);
}
}

• 分组统计

await prisma.logs.groupBy({ by: ['url1', 'url2'], _count: {id: true} });

• 条件查询

await prisma.logs.findMany({ where: {id: { in: intIds } } });

• 写入数据

await prisma.logs.create({ data });

• 更新数据

await prisma.logs.update({ where: { id: Number(id) }, data: { deleted: true } });

另外使用一些文案比对组件即可以很直观的查看差异

使用json展示组件可以动态化查看json数据

总结

总体来看，三种方案各有优缺点：

因此，对于需要频繁进行流量比对及实时监控的项目，对于希望快速迭代并追求良好用户体验的项目，Next.js 是一个值得优先考虑的选项，希望对大家所有帮助。