低代码开发框架

Appearance

高级主题 ​

本文档引用的文件

目录 ​

  1. 引言
  2. 项目结构
  3. 核心组件
  4. 架构概览
  5. 详细组件分析
  6. 依赖分析
  7. 性能优化
  8. 安全考虑
  9. 扩展开发
  10. 插件机制
  11. 生产环境最佳实践
  12. 故障排查案例

引言 ​

本项目是一个基于低代码理念的全栈开发框架，旨在通过代码生成器与手动开发的无缝结合，实现开发效率的显著提升。系统采用模块化设计，支持多端部署（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，防止中间人攻击。

本节来源

扩展开发 ​

添加新的列类型支持 ​

  1. 在codegen/src/lib/information_schema.ts中定义新的列类型映射。
  2. 在codegen/src/template的相应模板文件中添加对该类型的处理逻辑。
  3. 运行npm run codegen重新生成代码。

自定义模板 ​

  1. 复制codegen/src/template/pc/src/views/[[mod_slash_table]]目录。
  2. 修改Vue组件模板，调整UI布局或逻辑。
  3. 将新模板放入codegen/src/template下的自定义目录。
  4. 修改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端无法访问。 排查步骤:

  1. 检查pc/src/router/gen.ts是否已生成新路由。
  2. 检查pc/src/views/base下是否有对应的Vue文件。
  3. 运行npm run permit重新扫描权限，确保新菜单有访问权限。
  4. 重启pc前端服务。

案例：GraphQL查询返回空数据 ​

问题: GraphQL查询返回null，但数据库中有数据。 排查步骤:

  1. 检查data_permit表，确认当前用户是否有该数据的访问权限。
  2. 检查DAO层生成的SQL，确认WHERE条件是否正确。
  3. 在deno服务中开启debug日志，查看SQL执行详情。

本节来源