使用 Vue 3 + Element Plus 从头开始写一个数据库网站-05-API 的设计与实现
由于 PrismJS 尚不支持 Vue 的语法高亮，因此 Vue 代码块均先使用 HTML 的高亮
2024-09-23
设计 API 功能
由于这是一个 Biomarker 数据库网站，所以应该具有的基础功能有：
- 获取 Biomarker 列表，并支持根据条件（如名称和类型）进行筛选；
- 获取筛选条件，以便前端为用户提供筛选选项；
- 获取单个 Biomarker 的详细信息；
实现 API
创建 `biomarkers.js` 路由文件
首先，我们在 `backend/routes/` 目录下创建一个新的路由文件 `biomarkers.js`
该文件定义了与 Biomarker 相关的 API 路由，并使用 Express 框架来处理 HTTP 请求。
导入必要模块
此部分代码中，导入了 `express` 和一个数据库连接模块 `db`，然后创建了一个路由实例 `router`，用于定义各个路由。
路由定义与实现
路由 1：获取所有 Biomarker 列表（带筛选和分页）
**功能说明**：
- 该路由用于获取所有 Biomarker 的数据，并支持筛选和分页功能。
- 支持的筛选条件包括 `name` 和 `type`
- 如果用户提供了 `name` 参数，SQL 查询将筛选 Biomarker 名称中包含该名称的记录（使用 `LIKE` 模糊匹配）。
- 如果用户提供了 `type` 参数，SQL 查询将只返回指定类型的 Biomarker。
- `limit` 和 `offset` 用于控制分页，默认 `limit` 为 10。
**实现细节**：
- 构造 SQL 查询，并根据用户提供的参数动态添加条件。
- `params` 数组用于存储每个查询参数，以避免 SQL 注入。
- 使用 `db.query` 执行 SQL 查询，并将结果返回给客户端。
路由 2：获取筛选条件
+++info 这里，我们选择先编写获取筛选条件的路由是有原因的 在 Express 中，路由匹配机制是基于路径的顺序进行的，如果某个路由包含动态参数（例如 `/:id`），并且它的位置在更具体的路径（如 `/filters`）之前，那么 Express 会优先匹配动态路由，导致路径 `/filters` 被错误地解释为 `/:id`。
+++
**功能说明**：
- 该路由用于获取前端筛选 Biomarker 所需的可选条件。
- 返回数据包括 Biomarker 的 `Category`、`Source` 和 `Application` 的去重列表，供前端构建筛选器界面。
**实现细节**：
- 构建 `queries` 数组，为每个筛选条件（如 `Category`、`Location` 等）定义一个 SQL 查询。
- 使用 `Promise.all` 同时执行多个数据库查询，以获取每个字段的去重数据。
- 将查询结果整合到一个对象 `filters` 中，最终返回给客户端。
路由 3：根据 ID 获取 Biomarker 详情
**功能说明**：
- 此路由用于获取特定 ID 对应的 Biomarker 详细信息。
- 通过 `id` 路径参数识别要查询的 Biomarker，并返回相应的详细数据。
**实现细节**：
- 从 `req.params` 中获取 `id`，并构造 SQL 查询以匹配该 ID。
- 如果查询结果为空，则返回 404 错误，表示没有找到对应的 Biomarker。
- 否则返回该 Biomarker 的详细信息。
在 `app.js` 中注册路由
编辑 `bin/www` 文件
由于我们使用 ES6 语法，`bin/www` 文件也需要做一些修改：
运行 Express 服务器
进入 `backend` 目录使用以下命令可以运行服务器：
默认情况下，服务器会在 `http://localhost:3000` 运行。
Loading...
