如何创建VUE3页面？

一、代码结构讲解

1. 技术栈分析

• 框架：Vue3（<script setup>语法）

• UI库：Naive UI

• 组件：CrudTable、CrudModal等二次封装组件

• 功能：典型的CRUD（增删改查）功能实现

2. 核心逻辑流程图

3. 新人需掌握的关键技巧

• 组件通信：通过ref暴露子组件方法（$table.value.handleSearch()）

• Hooks复用：useCRUD封装了通用CRUD逻辑

• 权限控制：v-permission指令实现按钮级权限

• 动态渲染：render函数灵活控制列内容（如NTag样式变化）

• 表单验证：Naive UI表单校验规则配置

---

二、如何删除系统管理等功能模块

1. 功能关联性分析

2. 删除步骤（以删除角色管理为例）

2.1 前端删除

1. 路由配置：移除对应路由（通常在router/index.js）

// 删除类似配置
{
  path: 'role',
  component: () => import('@/views/system/role.vue'),
  meta: { title: '角色管理' }
}

1. 菜单数据：修改菜单获取逻辑（API+过滤）

// 在获取菜单处过滤
const menus = await api.getMenus()
filteredMenus = menus.filter(item => item.name !== '角色管理')

1. 权限指令：移除相关权限标识（替换代码中的v-permission值）

2.2 后端删除

1. 接口层：删除对应Controller

2. 路由注册：移除路由配置

3. 数据库：清理相关表数据（如sys_role）

2.3 注意事项

• 级联删除：同时删除角色-权限关联数据

• 数据备份：建议先备份再操作

• 权限同步：更新管理员权限配置

---

三、代码修改示例（以删除审计日志为例）

1. 前端修改

// router/index.js
- {
-  path: 'log',
-  component: () => import('@/views/system/log.vue'),
-  meta: { title: '审计日志' }
- }

2. 后端修改

// LogController.java
- @RestController
- @RequestMapping("/api/log")
- public class LogController {
-   // ... 删除整个类
- }

3. 数据库操作

DROP TABLE IF EXISTS sys_oper_log;

---

四、教学建议

1. 新人学习路径

1. 先实现一个简单模块（如商品管理）

2. 理解useCRUD工作流程

3. 学习权限系统设计

4. 最后进行模块删减

2. 调试技巧

• 浏览器检查：通过Vue Devtools观察数据流

• Mock数据：修改api.getMenus返回数据快速验证

• 权限测试：修改localStorage中的权限标识模拟不同角色

3. 常见误区

• ❌ 只删前端不删后端 → 导致接口暴露

• ❌ 直接删除数据库表 → 导致外键约束报错

• ❌ 忘记清理权限配置 → 导致权限数据冗余

建议配合Swagger文档和数据库ER图进行操作，确保完整删除相关功能。