Appearance
高级主题
本文档引用的文件
- README.md
- package.json
- codegen/package.json
- deno/package.json
- pc/package.json
- uni/package.json
- codegen/src/bin/codegen.ts
- deno/lib/script/graphql_codegen_config.ts
- pc/src/utils/permit_scan.js
- codegen/src/util/npmFieldPermit.ts
- deno/lib/auth/auth.service.ts
- pc/src/store/usr.ts
- deno/src/graphql.ts
- pc/src/utils/request.ts
- codegen/src/lib/codegen.ts
- deno/lib/graphql.ts
目录
引言
本项目是一个基于低代码理念的全栈开发框架，旨在通过代码生成器与手动开发的无缝结合，实现开发效率的显著提升。系统采用模块化设计，支持多端部署（PC端、移动端），并集成了GraphQL API、权限管理、代码增量生成等高级功能。其核心创新在于利用 git diff 和 git apply 技术，实现代码生成后可手动修改且不会被覆盖，从而支持项目的持续迭代。
项目结构
项目采用多仓库结构，主要分为四个部分：codegen（代码生成器）、deno（后端服务）、pc（前端PC端）、uni（前端移动端）。这种结构实现了前后端分离与职责解耦。
图示来源
本节来源
核心组件
系统的核心组件包括代码生成引擎、GraphQL服务、权限管理系统和多端前端应用。代码生成引擎（codegen）是整个系统的基石，它根据数据库表结构自动生成前后端代码。GraphQL服务（deno）作为统一的数据API层，为前端提供灵活的数据查询能力。权限管理系统贯穿前后端，确保数据安全。PC端和移动端前端应用则负责用户交互。
本节来源
架构概览
系统采用典型的前后端分离架构，后端基于Deno和MySQL，通过GraphQL暴露API；前端基于Vue3和Uni-app，分别构建PC和移动端应用。代码生成器作为独立工具，负责生成初始代码和后续增量代码。
图示来源
详细组件分析
代码生成器分析
代码生成器是本系统的核心创新点。它通过分析数据库的information_schema，读取表结构，然后根据预定义的模板生成前后端代码。其关键特性是支持增量更新，即用户手动修改生成的代码后，生成器能通过git差异分析保留这些修改。
代码生成流程
图示来源
本节来源
GraphQL服务分析
后端服务基于Deno的oak框架构建，使用graphql库实现GraphQL API。每个数据库表对应一个base目录下的模块，包含.dao.ts（数据访问）、.service.ts（业务逻辑）、.resolver.ts（GraphQL解析器）和.graphql.ts（GraphQL Schema）。
GraphQL请求处理流程
图示来源
本节来源
权限管理系统分析
权限管理分为数据权限和字段权限，通过data_permit和field_permit表实现。前端在请求时携带用户ID和角色信息，后端在DAO层动态拼接SQL的WHERE条件来过滤数据。
权限检查流程
图示来源
本节来源
依赖分析
项目依赖关系清晰，各模块职责分明。codegen模块依赖mysql2和fs-extra等库来读取数据库和操作文件系统。deno后端依赖oak作为Web框架，graphql处理GraphQL请求。pc前端依赖vue和element-plus构建UI。
图示来源
本节来源
性能优化
后端GraphQL查询优化
- 查询扁平化: 避免深度嵌套查询，减少解析器调用次数。
- 数据加载器(DataLoader): 使用
lru-cache实现缓存，批量处理N+1查询问题。 - SQL优化: DAO层生成的SQL应使用索引，避免
SELECT *。
数据库查询性能调优
- 索引策略: 为
permit、tenant等常用过滤字段建立复合索引。 - 连接池: 使用
mysql2的连接池，复用数据库连接，减少握手开销。 - 慢查询日志: 开启MySQL慢查询日志，定期分析并优化。
前端组件渲染优化
- 虚拟滚动: 对于长列表（如
login_log），使用vue-virtual-scroller。 - 懒加载: 路由和组件按需加载，减少首屏体积。
- 计算属性缓存: 使用
computed缓存复杂计算结果。
网络请求优化
- GraphQL批处理: 使用
graphql-combine-query合并多个查询请求。 - HTTP/2: 后端支持HTTP/2，实现多路复用。
- Gzip压缩: 启用响应体压缩，减小传输体积。
本节来源
安全考虑
常见安全漏洞防范
- SQL注入: 使用
mysql2的参数化查询，禁止字符串拼接。 - XSS: 前端使用
vue的自动转义，后端返回的HTML内容需经过DOMPurify清洗。 - CSRF: 由于使用JWT进行认证，且JWT存储在内存中（非Cookie），天然免疫CSRF攻击。
JWT令牌安全管理
- 安全存储: 前端将JWT存储在
Vuex或Pinia中，避免使用localStorage以防XSS窃取。 - 短期有效: 设置较短的过期时间（如1小时），并实现刷新令牌机制。
- HTTPS传输: 强制所有API请求通过HTTPS，防止中间人攻击。
本节来源
扩展开发
添加新的列类型支持
- 在
codegen/src/lib/information_schema.ts中定义新的列类型映射。 - 在
codegen/src/template的相应模板文件中添加对该类型的处理逻辑。 - 运行
npm run codegen重新生成代码。
自定义模板
- 复制
codegen/src/template/pc/src/views/[[mod_slash_table]]目录。 - 修改Vue组件模板，调整UI布局或逻辑。
- 将新模板放入
codegen/src/template下的自定义目录。 - 修改
codegen.ts中的模板路径配置。
本节来源
插件机制
系统通过package.json的scripts字段提供插件扩展点。例如，permit脚本用于扫描权限，field_permit用于生成字段权限代码。开发者可以创建新的Node.js脚本，并在package.json中注册为命令。
json
"scripts": {
"my-plugin": "node my_plugin.js"
}本节来源
生产环境最佳实践
监控
- 应用监控: 使用
deno的health模块提供健康检查端点。 - 日志监控: 集成
log库，将日志输出到文件或ELK栈。 - 性能监控: 记录关键API的响应时间。
日志分析
- 结构化日志: 使用
JSON格式输出日志，便于机器解析。 - 日志级别: 合理使用
debug、info、warn、error级别。 - 日志轮转: 配置日志文件大小和保留策略。
故障排查
- 启用调试模式: 在
deno中设置DENO_ENV=development以获取详细错误信息。 - 检查网络: 使用
curl或Postman直接测试GraphQL端点。 - 查看日志: 检查
deno服务和pc构建的日志文件。
本节来源
故障排查案例
案例：代码生成后页面无法访问
问题: 运行codegen后，新生成的页面在PC端无法访问。 排查步骤:
- 检查
pc/src/router/gen.ts是否已生成新路由。 - 检查
pc/src/views/base下是否有对应的Vue文件。 - 运行
npm run permit重新扫描权限，确保新菜单有访问权限。 - 重启
pc前端服务。
案例：GraphQL查询返回空数据
问题: GraphQL查询返回null，但数据库中有数据。 排查步骤:
- 检查
data_permit表，确认当前用户是否有该数据的访问权限。 - 检查DAO层生成的SQL，确认
WHERE条件是否正确。 - 在
deno服务中开启debug日志，查看SQL执行详情。
本节来源