《后端开发者快速上手：Vue3 + Element Plus 前端开发概念映射与实战技巧》

一、基础概念映射（前端 ↔ 后端）

1. 数据绑定概念

v-model = 后端的 request.getParameter() + response 结合
- 前端输入框值变化 → 自动更新到变量（类似接收参数）
- 变量值变化 → 自动更新到页面显示（类似返回结果）
prop = 后端的字段名 / 属性名
- 用于表单验证时标识字段
- 类似 Java 实体类的字段名

2. 组件概念

el-form-item = HTML 的 <div> + 布局 + 标签
- 包裹表单控件，提供统一的布局
- 类似后端的表单字段包装类
el-input = HTML 的 <input type="text">
- 文本输入框
- v-model 绑定变量，类似后端的 @RequestParam String name
el-select = HTML 的 <select>
- 下拉选择框
- v-model 绑定选中的值
- 类似后端的 @RequestParam String status
el-option = HTML 的 <option>
- label = 显示的文字（用户看到的）
- value = 实际的值（提交给后端的）
- 类似：<option value="已通过">已通过</option>
el-table-column = HTML 表格的 <th> + 数据绑定
- prop = 从数据对象中取哪个字段显示
- 类似后端：row.getAthleteName()

3. 属性概念

placeholder = HTML 的 placeholder 属性
- 输入框提示文字（灰色提示）
clearable = 是否显示清除按钮（×）
- true = 可以一键清空输入框
style = HTML 的 style 属性
- width: 200px = 设置宽度 200 像素
align = 文本对齐方式
- center = 居中，类似 CSS 的 text-align: center

4. 数据流概念

queryParams = 后端的查询参数对象
- 类似：@ModelAttribute QueryParams params
- 所有搜索条件都放在这个对象里
reactive** / **toRefs = Vue3 的响应式数据
- 数据变化 → 页面自动更新
- 类似后端的观察者模式，但自动实现

5. 函数调用概念

@click = HTML 的 onclick
- @click="handleQuery" = 点击时调用 handleQuery 函数
- 类似后端的 @RequestMapping(method = RequestMethod.POST)
@keyup.enter = 键盘事件
- 按下回车键时触发
- 类似后端的监听器

二、常用写法模式

模式1：搜索表单

vue 复制代码

<el-form-item label="字段名" prop="字段名">
  <el-input
    v-model="queryParams.字段名"    <!-- 绑定到查询参数 -->
    placeholder="提示文字"
    clearable                       <!-- 可清除 -->
    @keyup.enter="handleQuery"      <!-- 回车搜索 -->
  />
</el-form-item>

模式2：下拉选择

vue 复制代码

<el-form-item label="状态" prop="status">
  <el-select
    v-model="queryParams.status"    <!-- 绑定到查询参数 -->
    placeholder="请选择"
    clearable                       <!-- 可清除 -->
    style="width: 200px;"
  >
    <el-option label="显示文字" value="实际值" />  <!-- label显示，value提交 -->
  </el-select>
</el-form-item>

模式3：表格列

java 复制代码

<el-table-column 
  label="列标题"           <!-- 表格列标题 -->
  align="center"          <!-- 对齐方式 -->
  prop="字段名"           <!-- 从数据对象中取这个字段显示 -->
/>

三、记忆口诀

**v-model** = "变量绑定"，双向同步
**prop** = "属性名"，标识字段
**@click** = "点击事件"，触发函数
**queryParams** = "查询参数"，搜索条件
**el-xxx** = "Element UI 组件"，UI 控件

四、高级概念（模板、组件、字典）

1. 模板插槽（Template Slot）ue

template = 模板，用于自定义显示内容

#default = 默认插槽，类似后端的占位符
scope = 作用域，包含当前行的数据
- scope.row = 当前行的完整数据对象
- 类似后端：for (Row row : rows) { row.getField(); }

2. 组件导入和使用script

// 导入组件

import DictTag from "@/components/DictTag/index.vue";- import = Java 的 import，引入外部组件/模块

from = 来源路径
@/ = 项目根目录别名（类似 Java 的 src/main/java）
导入后可以直接在模板中使用：<dict-tag />

3. 字典系统（Dictionary）ascript

// 获取字典数据

const { sys_user_sex } = proxy.useDict("sys_user_sex");- proxy.useDict() = 从系统获取字典数据

sys_user_sex = 字典对象，包含选项数组
字典结构：cript ${ label: "显示文字", value: "实际值" }, { label: "男", value: "0" }, { label: "女", value: "1" }$

4. 字典标签组件（DictTag）e

<dict-tag

:options="sys_user_sex" // 字典选项数组

:value="scope.row.athleteGender" // 当前值（如 "0"）

/>- 作用：将字典值转换为显示文字

:options = 绑定字典选项（: 表示绑定变量，不是字符串）
:value = 绑定当前值
效果：输入 "0" → 显示 "男"

5. 属性绑定符号

v-model="变量" = 双向绑定（输入框常用）
:属性="变量" = 单向绑定（传递数据给组件）
@事件="函数" = 事件绑定（点击、回车等）
区别：
- v-model="name" = 双向绑定，值会同步
- :value="name" = 单向绑定，只传递值，不接收变化

6. 查询参数对象（queryParams）

queryParams: {

pageNum: 1, // 当前页码

pageSize: 10, // 每页条数

athleteName: null, // 运动员姓名（模糊查询）

eligibilityStatus: null, // 审核状态（精确查询）

}- 作用：存储所有搜索条件

类似后端 ：@RequestParam Map<String, Object> params
null = 未选择/未输入，查询时会被忽略

五、记忆要点

template #default="scope" = "自定义显示，scope是当前行数据"
import ... from = "导入组件，类似Java的import"
useDict() = "获取字典数据"
dict-tag = "字典值转文字显示"
:属性 = "绑定变量（单向）"
queryParams = "查询参数集合"

template = 模板，用于自定义显示内容
#default = 默认插槽，类似后端的占位符
scope = 作用域，包含当前行的数据
- scope.row = 当前行的完整数据对象
- 类似后端：for (Row row : rows) { row.getField(); }

1. 分页组件使用

vue 复制代码

<pagination
  v-show="total > 0"                <!-- 有数据时才显示 -->
  :total="total"                    <!-- 总记录数 -->
  v-model:page="queryParams.pageNum"    <!-- 当前页码（双向绑定） -->
  v-model:limit="queryParams.pageSize"  <!-- 每页条数（双向绑定） -->
  :page-sizes="[10]"                <!-- 每页条数选项 -->
  @pagination="getList"             <!-- 分页变化时触发 -->
/>

概念说明：

pagination = 自定义分页组件（封装了 el-pagination）
:total = 总记录数，类似后端：SELECT COUNT(*) FROM table
v-model:page = 当前页码，双向绑定
v-model:limit = 每页条数，双向绑定
@pagination = 分页变化事件（页码或每页条数改变时触发）
v-show="total > 0" = 条件显示，有数据才显示分页

2. 分页参数对象

java 复制代码

queryParams: {
  pageNum: 1,        // 当前页码（从1开始）
  pageSize: 10,      // 每页条数
  athleteName: null, // 搜索条件
  eligibilityStatus: null
}

概念说明：

pageNum = 当前页码，类似后端：@RequestParam int pageNum
pageSize = 每页条数，类似后端：@RequestParam int pageSize
后端返回：{ rows: [...], total: 100 }，前端接收后设置 total.value = response.total

3. 分页功能说明

共 N 条 = total 显示总记录数
10 条/页 = pageSizes 设置每页条数选项
**<**和 **>** = 上一页 / 下一页，由 Element Plus 自动处理
页码链接 = 点击跳转到指定页，由 Element Plus 自动处理
前往 N 页 = jumper 输入框，输入页码后回车跳转

1. 确认对话框使用

java 复制代码

proxy.$modal.confirm('是否...编号为"' + row.id + '"的数据项？')
  .then(function () {
    // 点击【确定】按钮后执行
    return approveEligibilityReview(row.id);
  })
  .then(() => {
    // 操作成功后执行
    getList();                    // 刷新列表
    proxy.$modal.msgSuccess("操作成功");
  })
  .catch(() => {
    // 点击【取消】按钮或操作失败时执行（可选）
  });

概念说明：

proxy.$modal.confirm() = 显示确认对话框（警告类型）
参数 = 对话框提示文字
.then() = Promise 链式调用，类似后端的回调函数
- 第一个 .then() = 用户点击【确定】后执行的操作
- 第二个 .then() = 操作成功后的回调
.catch() = 用户点击【取消】或操作失败时的回调

2. 记忆口诀

confirm() = "确认对话框，返回 Promise"
.then() = "成功回调，链式调用"
.catch() = "失败回调，捕获错误"

八、消息提示（Message）

1. 成功提示

java 复制代码

proxy.$modal.msgSuccess("操作成功");

msgSuccess() = 显示成功消息（绿色提示框）
参数 = 提示文字
类似后端：return AjaxResult.success("操作成功")

2. 错误提示

java 复制代码

proxy.$modal.msgError("操作失败");

3. 加载提示

java 复制代码

proxy.$modal.loading("正在加载...");
// 操作完成后
proxy.$modal.closeLoading();

九、条件渲染（`v-if`）

1. 条件显示按钮

java 复制代码

<el-button
  v-if="scope.row.eligibilityStatus !== '已通过'"
  @click="handleApprove(scope.row)"
>
  通过
</el-button>

概念说明：

v-if = 条件渲染，条件为 true 才显示元素
scope.row.eligibilityStatus !== '已通过' = 判断条件
类似后端：if (status != "已通过") { 显示按钮 }

区别：

v-if = 条件为 false 时，元素不渲染到 DOM
v-show = 元素始终渲染，只是用 CSS 控制显示/隐藏

2. 记忆口诀

v-if="条件" = "条件为真才显示"
v-show="条件" = "条件为真才显示（CSS 控制）"

十、表格相关功能

1. 表格加载状态

java 复制代码

<el-table v-loading="loading" :data="eligibilityReviewList">

v-loading="loading" = 显示加载动画
loading = 布尔值，true 显示加载动画，false 隐藏
类似后端：显示"正在查询..."的提示

2. 表格选择功能

java 复制代码

<el-table @selection-change="handleSelectionChange">
  <el-table-column type="selection" width="55" align="center" />
</el-table>

type="selection" = 多选框列
@selection-change = 选择变化事件
handleSelectionChange(selection) = 处理函数，selection 是选中的行数组

java 复制代码

function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id);     // 获取所有选中行的 ID
  single.value = selection.length !== 1;          // 是否只选中一行
  multiple.value = !selection.length;             // 是否未选中任何行
}

3. 表格按钮类型

java 复制代码

<el-button link type="success" @click="handleApprove(scope.row)">通过</el-button>

link = 链接样式按钮（文字按钮，无边框）
type="success" = 成功类型（绿色）
type="danger" = 危险类型（红色）
type="primary" = 主要类型（蓝色）

十一、API 调用和 Promise

1. API 调用模式

java 复制代码

// 导入 API 函数
import { approveEligibilityReview } from "@/api/...";

// 调用 API
approveReview(row.id)
  .then(response => {
    // 成功回调
    getList();  // 刷新列表
    proxy.$modal.msgSuccess("操作成功");
  })
  .catch(error => {
    // 失败回调
    console.error(error);
  });

概念说明：

import { 函数名 } from "路径" = 导入 API 函数
API 函数返回 Promise 对象
.then() = 成功回调，接收响应数据
.catch() = 失败回调，接收错误信息

2. 查询列表模式

java 复制代码

function getList() {
  loading.value = true;  // 开始加载
  listReview(queryParams.value).then(response => {
    ReviewList.value = response.rows;  // 设置列表数据
    total.value = response.total;                 // 设置总记录数
    loading.value = false;                        // 结束加载
  });
}

概念说明：

loading.value = true = 显示加载动画
response.rows = 数据列表（后端返回）
response.total = 总记录数（后端返回）
loading.value = false = 隐藏加载动画

十二、表单重置功能

1. 重置查询表单

java 复制代码

function resetQuery() {
  proxy.resetForm("queryRef");  // 重置表单（清空所有输入）
  handleQuery();                // 重新查询
}

proxy.resetForm("queryRef") = 重置表单
"queryRef" = 表单的 ref 属性值
类似后端：清空所有查询参数

2. 重置表单数据对象

java 复制代码

function reset() {
  form.value = {
    id: null,
    nameId: null,
    // ... 其他字段设为 null
  };
  proxy.resetForm("ReviewRef");
}

十三、查询类型区别

1. 模糊查询（LIKE）

java 复制代码

queryParams: {
  athleteName: null  // 模糊查询，后端使用 LIKE '%值%'
}

前端：输入部分文字即可搜索
后端：WHERE athlete_name LIKE '%值%'
适用场景：姓名、描述等文本字段

2. 精确查询（=）

java 复制代码

queryParams: {
  status: null  // 精确查询，后端使用 = '值'
}

前端：下拉选择固定选项
后端：WHERE eligibility_status = '值'
适用场景：状态、类型等枚举字段

十四、响应式数据详解

1. `ref` - 单个值

java 复制代码

const loading = ref(true);      // 创建响应式变量
loading.value = false;          // 修改值（必须用 .value）

ref() = 创建单个响应式变量
访问/修改时用 .value
适用：基本类型（字符串、数字、布尔值）

2. `reactive` + `toRefs` - 对象

java 复制代码

const data = reactive({
  queryParams: { pageNum: 1, pageSize: 10 },
  form: {}
});
const { queryParams, form } = toRefs(data);

reactive() = 创建响应式对象
toRefs() = 解构对象，保持响应式
使用：queryParams.value.pageNum = 2
适用：对象、数组

3. 记忆口诀

ref(值) = "单个值，用 .value 访问"
reactive({}) = "对象，直接访问属性"
toRefs() = "解构对象，保持响应式"

十五、按钮图标（icon）

java 复制代码

<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>

icon="Search" = 按钮图标（Element Plus 内置图标）

常用图标：

Search = 搜索
Refresh = 刷新
Plus = 加号（新增）
Edit = 编辑
Delete = 删除
Download = 下载

十六、完整操作流程示例

通过/驳回操作完整流程

java 复制代码

// 1. 定义处理函数
function handleApprove(row) {
  // 2. 显示确认对话框
  proxy.$modal.confirm('是否..编号为"' + row.id + '"的数据项？')
    .then(function () {
      // 3. 用户点击【确定】后，调用 API
      return approveReview(row.id);
    })
    .then(() => {
      // 4. API 调用成功后，刷新列表
      getList();
      // 5. 显示成功提示
      proxy.$modal.msgSuccess("操作成功");
    })
    .catch(() => {
      // 6. 用户点击【取消】或操作失败时，什么都不做（可选）
    });
}

流程总结：

用户点击按钮 → 触发 handleApprove(row)
显示确认对话框 → proxy.$modal.confirm()
用户点击【确定】 → 执行第一个 .then()
调用后端 API → approveEligibilityReview(row.id)
API 成功返回 → 执行第二个 .then()
刷新列表 → getList()
显示成功提示 → proxy.$modal.msgSuccess()

十七、记忆要点补充

pagination = "分页组件，自动处理页码跳转"
proxy.$modal.confirm() = "确认对话框，返回 Promise"
proxy.$modal.msgSuccess() = "成功提示（绿色）"
v-if="条件" = "条件为真才显示元素"
v-loading="loading" = "显示加载动画"
@selection-change = "表格选择变化事件"
API().then() = "API 调用成功回调"
proxy.resetForm() = "重置表单，清空输入"
ref() = "单个响应式变量，用 .value 访问"
reactive() = "响应式对象，直接访问属性"

《后端开发者快速上手：Vue3 + Element Plus 前端开发概念映射与实战技巧》

一、基础概念映射（前端 ↔ 后端）

1. 数据绑定概念

2. 组件概念

3. 属性概念

4. 数据流概念

5. 函数调用概念

二、常用写法模式

模式1：搜索表单

模式2：下拉选择

模式3：表格列

三、记忆口诀

四、高级概念（模板、组件、字典）

1. 模板插槽（Template Slot）ue

2. 组件导入和使用script

3. 字典系统（Dictionary）ascript

4. 字典标签组件（DictTag）e

5. 属性绑定符号

6. 查询参数对象（queryParams）

五、记忆要点

六、分页组件（Pagination）

1. 分页组件使用

概念说明：

2. 分页参数对象

概念说明：

3. 分页功能说明

七、确认对话框（Modal Confirm）

1. 确认对话框使用

概念说明：

2. 记忆口诀

八、消息提示（Message）

1. 成功提示

2. 错误提示

3. 加载提示

九、条件渲染（<font style="color:rgb(17, 17, 51);background-color:rgba(175, 184, 193, 0.2);">v-if</font>）

1. 条件显示按钮

概念说明：

区别：

2. 记忆口诀

十、表格相关功能

1. 表格加载状态

2. 表格选择功能

3. 表格按钮类型

十一、API 调用和 Promise

1. API 调用模式

概念说明：

2. 查询列表模式

概念说明：

十二、表单重置功能

1. 重置查询表单

2. 重置表单数据对象

十三、查询类型区别

1. 模糊查询（LIKE）

2. 精确查询（=）

十四、响应式数据详解

1. <font style="color:rgb(17, 17, 51);background-color:rgba(175, 184, 193, 0.2);">ref</font> - 单个值

2. <font style="color:rgb(17, 17, 51);background-color:rgba(175, 184, 193, 0.2);">reactive</font> + <font style="color:rgb(17, 17, 51);background-color:rgba(175, 184, 193, 0.2);">toRefs</font> - 对象

3. 记忆口诀

十五、按钮图标（icon）

常用图标：

十六、完整操作流程示例

通过/驳回操作完整流程

流程总结：

十七、记忆要点补充

九、条件渲染（`<font style="color:rgb(17, 17, 51);background-color:rgba(175, 184, 193, 0.2);">v-if</font>`）

1. `<font style="color:rgb(17, 17, 51);background-color:rgba(175, 184, 193, 0.2);">ref</font>` - 单个值

2. `<font style="color:rgb(17, 17, 51);background-color:rgba(175, 184, 193, 0.2);">reactive</font>` + `<font style="color:rgb(17, 17, 51);background-color:rgba(175, 184, 193, 0.2);">toRefs</font>` - 对象