使用 Vue 3 + Element Plus 从头开始写一个数据库网站-06-前端与后端的交互

由于 PrismJS 尚不支持 Vue 的语法高亮，因此 Vue 代码块均先使用 HTML 的高亮

2024-09-23

1. 安装 Axios 用于发送 HTTP 请求

2. 发送请求获取数据

3. 展示 Biomarker 列表

4. 根据条件筛选 Biomarker

5. 点击 Biomarker 显示详细信息

安装 Axios

1. **安装 Axios**：

1. **在组件中引入 Axios**：

封装与后端 API 的交互逻辑

详细解释

1. **`axios.create()`**:

• 使用 `axios.create()` 方法创建了一个自定义的 `axios` 实例，所有请求都会以 `http://localhost:3000/api` 作为基础 URL。

• 这样做的好处是，如果后端地址或端点路径改变，你只需要在一个地方更新 `baseURL`，不必逐个修改每个请求的完整 URL。

1. **`getBiomarkers()`**:

• 发送 `GET` 请求到 `/biomarkers`，用于获取所有的 biomarker 数据。

• 请求的完整 URL 是 `http://localhost:3000/api/biomarkers`。

1. **`getFilters()`**:

• 发送 `GET` 请求到 `/biomarkers/filters`，用于获取筛选选项。

• 请求的完整 URL 是 `http://localhost:3000/api/biomarkers/filters`。

1. **`getBiomarkerDetails(id)`**:

• 发送 `GET` 请求到 `/biomarkers/:id`，用于获取特定 ID 的 biomarker 详细信息。

• 请求的完整 URL 是 `http://localhost:3000/api/biomarkers/{id}`，其中 `{id}` 是动态传递的。

1. **`createBiomarker(biomarker)`**:

• 发送 `POST` 请求到 `/biomarkers`，用于在后端创建一个新的 biomarker。`biomarker` 是传递的请求体数据。

• 请求的完整 URL 是 `http://localhost:3000/api/biomarkers`。

作用

• 该文件简化了组件中 API 请求的调用。在 Vue 组件中，可以直接通过 `getBiomarkers()` 或 `getFilters()` 来获取数据，而不需要在每个组件中重复书写 `axios.get()` 请求逻辑。

• 通过将所有 API 调用放在一个 `api.js` 文件中，您可以更轻松地管理 API 的端点、逻辑和错误处理。

组件中的使用

Biomarker 列表页面

1. **侧边栏**：用于筛选条件的展示。

2. **主内容区**：用于显示 Biomarker 的数据表格。

• 动态加载 Biomarker 数据到表格中；

• 在侧边栏中添加筛选条件；

• 实现分页、筛选和表格排序功能。

加载 Biomarker 数据

添加筛选条件

整体功能

1. 总体布局，使用了 Element Plus 的布局容器 `el-container`：

• `el-aside`：左侧的过滤菜单区域，宽度为 300px。

• `el-main`：右侧的主内容区域，用于显示数据表格和分页。

1. 侧边过滤区域，包含一个标题菜单和一个过滤表单。

• 过滤菜单：使用 `el-menu` 提供一个可点击的“Filter”标题。

• **过滤表单**：

• 使用 `el-form` 表单结构。

• 包括 3 个 `el-form-item` 表单项：

• **Category**（分类）

• **Source**（来源）

• **Application**（应用）

• 每个表单项内使用了 `el-select` 下拉框，选项由 `filterOptions` 数据动态生成。

• 提供了一个“Apply Filters”按钮，绑定了 `applyFilters` 方法。

1. 主体内容区域

• 数据表格使用了 `el-table`：

• 数据源绑定到 `paginatedBiomarkers`，表格支持分页。

• 各列使用 `el-table-column` 定义，包括 ID、Biomarker（生物标记物）、Category、Application 和 PMID。

• 表格支持按列排序（通过 `sortable="true"`）。

• 表格显示时支持加载动画（通过 `v-loading="loading"`）。

• 分页功能使用了 `el-pagination` 实现分页控制，支持：

• 当前页数切换（绑定 `handlePageChange` 方法）。

• 每页条数修改（绑定 `handleSizeChange` 方法）。

• 可选择的分页大小 `[20, 50, 100, 150, 200]`。

• 动态显示总条目数，绑定到 `filteredBiomarkers.length`。

1. 绑定的数据和方法

• `filters`：用于存储表单中用户选择的过滤条件（包括 Category、Source 和 Application）。

• `filterOptions`：包含表单下拉框的选项数据。

• `paginatedBiomarkers`：表格当前页显示的数据。

• `filteredBiomarkers`：经过过滤后的完整数据集，用于分页计算总条数。

• **方法**：

• `applyFilters`：点击“Apply Filters”按钮后，执行过滤逻辑。

• `handlePageChange`：处理分页页码切换。

• `handleSizeChange`：处理每页显示条数变化。

Biomarker 详情页面

1. **侧边栏**：用于导航。

2. **右侧标题栏**：用于显示 Biomarker 的名字

3. **主内容区**：用于显示 Biomarker 的详细信息。

整体功能

1. **页面布局**：使用了 Element Plus 的布局容器 `el-container` ：

• **左侧锚点导航**：

• 位于 `el-aside`，宽度 300px，包含 `el-anchor`。

• **右侧内容区域**：

• 使用 `el-container`，展示生物标记物的详细信息。

1. **锚点导航**

• 使用 `el-anchor` 定义锚点导航，提供跳转到页面中各信息段落的锚点链接（如 Basic Information、Article Information、Experimental and Sample Statistics）

1. **详细信息展示**：通过多个 `el-descriptions` 组件分段展示生物标记物详情：

• **基础信息（Basic Information）**：展示基本的生物标记物信息，如 ID、名称、分类、应用等。

• **文章信息（Article Information）**：展示与生物标记物相关的文章数据，如 PMID、期刊名、通讯作者等。

• **实验与样本统计信息（Experimental and Sample Statistics）**：展示实验细节，如实验方法、样本来源、种族、年龄、性别等。

• 每段表格：

• 使用 `:column="1"` 强制单列布局。

• 支持显示表头和数据，缺失字段自动显示为 `"N/A"`。

1. **加载状态与错误提示**

• 页面加载时显示“Loading...”状态，通过 `isLoading` 控制。

• 如果数据获取失败，通过 `error` 显示错误信息。

1. **数据动态加载**

• 页面加载时，根据路由参数 `id` 通过 API 获取生物标记物详细数据。

• 数据绑定到 `biomarker`，通过字段配置化动态渲染不同表格内容。

• 缺省值处理：当某字段值为 0 时显示 0，其他空值显示为 `"N/A"`。

1. **数据绑定和方法**：

• `biomarker`：存储当前生物标记物的详细数据。

• `isLoading` 和 `error`：分别用于控制加载状态和错误信息显示。

• `basicInfoFields`、`articleInfoFields`、`experimentFields`：通过字段配置表定义各表格展示的字段和对应的键值。

• 页面加载时自动调用 `onMounted` 钩子，发送请求获取数据。

• 锚点跳转功能依赖 `el-anchor` 的内置功能。

路由设置

预览