TP8+Vue3
后台管理系统
全流程知识清单

组件设计原则

• 封装内部实现细节，通过props和events暴露接口
• 遵循单一职责原则，每个组件只负责一个特定功能
• 实现组件复用，避免重复代码

通信方式

• 父子通信: props向下传递，events向上通知
• 兄弟通信: 通过共同父组件作为中介
• 跨层级通信: provide/inject机制

基础配置

const routes = [
  { path: '/users', component: UserManagement },
  { path: '/users/:id', component: UserDetail }
]

导航守卫

• • 全局守卫：权限检查、登录验证
• • 路由独享守卫：特定路由权限控制
• • 组件内守卫：离开确认、数据保存

静态路由方案

• • 初始化即挂载全部路由
• • 路由meta中定义权限
• • 全局守卫中验证权限

缺点：影响首屏性能，灵活性差

动态路由方案

• • 只加载静态路由
• • 后端返回权限数据
• • 动态生成并添加路由

优势：提升首屏速度，前后端解耦

数据类型选择

约束类型

慢查询日志

long_query_time = 1
slow_query_log = 1
slow_query_log_file = /var/log/mysql/slow.log

记录执行时间超过指定阈值的SQL语句，快速定位性能瓶颈

EXPLAIN分析

EXPLAIN SELECT * FROM users 
WHERE name LIKE '%admin%' 
ORDER BY created_at DESC;

用户权限管理

• 禁用root用户

  为每个应用创建独立数据库用户
• 精细化权限

  只授予完成任务必需的最小权限
• 来源限制

  限制用户登录的主机名或IP地址

权限分配示例

-- 报表用户
GRANT SELECT ON report_db.* TO 'report_user'@'172.16.%.%';

-- 应用用户
GRANT SELECT, INSERT, UPDATE, DELETE ON app_db.* 
TO 'app_user'@'localhost';

测试内容

• Props和事件: 测试组件接收props和触发事件
• 渲染输出: 快照测试验证渲染结果
• 用户交互: 模拟点击、输入等操作
• 生命周期: 测试生命周期钩子执行

测试示例

import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import MyButton from '@/components/MyButton.vue'

describe('MyButton', () => {
  it('renders correctly with props', () => {
    const wrapper = mount(MyButton, {
      props: { label: 'Click me' }
    })
    expect(wrapper.text()).toContain('Click me')
  })

  it('emits click event when clicked', async () => {
    const wrapper = mount(MyButton)
    await wrapper.trigger('click')
    expect(wrapper.emitted()).toHaveProperty('click')
  })
})

审查重点

• 代码逻辑: 是否正确实现需求，是否存在潜在bug
• 代码风格: 是否遵循团队编码规范
• 可读性: 是否清晰易懂，易于维护和扩展
• 性能: 是否存在性能问题
• 安全性: 是否存在安全漏洞

最佳实践

• 保持积极建设性态度，共同提高代码质量
• 使用Pull Request功能进行代码审查
• 关注代码设计而非个人风格
• 提供具体改进建议，而非简单批评