一、项目介绍

基于magic-api搭建的快速开发平台，前端采用Vue3 + naive-ui最新版本搭建，依赖较少，运行速度快。对常用组件进行封装。利用Vue3的@vue/compiler-sfc单文件编译，动态编译组件，可以实现在浏览器编写Vue代码，既改即生效快速开发。

二、项目特点

1. 动态代码编辑器
2. 浏览器内直接编写Vue组件，实时编译渲染
3. 支持语法高亮与错误提示，降低学习门槛
4. 智能化仪表盘
5. 可视化展示系统健康度、API调用频率等关键指标
6. 移动端适配
7. 响应式布局自动适配多端设备，管理操作不受场景限制

三、应用场景

1. 内部管理系统开发
2. 通过代码生成器快速搭建OA、CRM等系统，开发周期缩短70%
3. 敏捷迭代项目
4. 动态组件加载支持需求变更的快速响应，减少版本发布压力
5. 教育领域
6. 教学案例实时演示，学生可在浏览器直接修改Vue代码并查看效果

四、功能模块

• 菜单管理：树结构，配置菜单、权限按钮、选择关联组件等，支持全局模糊搜索
• 组织机构：树结构，配置组织机构，类型：部门、公司（选择项存在数据字典），支持全局模糊搜索
• 角色管理：角色菜单权限分配、设置数据范围等。
• 用户管理：用户添加、导入用户（支持导入前预览数据）、登录状态更改等
• 数据字典：分为系统类和业务类两类数据维护
• 代码生成：生成magic-api接口代码和前端代码，自动保存到magic-api的“接口”和“组件”栏中
• 操作日志：接口调用操作日志查询
• 登录日志：系统登录日志查询，包含登录失败日志
• 数据库监控：Druid Monitor SQL监控、数据源信息查看等
• 在线用户：当前活跃在系统内的用户，可以选择踢人下线

五、技术架构

技术架构：全栈一体化的创新设计

1. 前端架构
2. 采用 Vue3 + Element Plus，支持单文件组件动态编译
3. 实现“代码即改即生效”的实时开发体验
4. 组件插件化管理，与Magic-API无缝对接
5. 后端架构
6. 基于Magic-API实现接口快速开发
7. 安全隔离生产与开发环境，防止误操作影响线上服务
8. 集成Druid数据库监控，支持SQL性能分析与数据源管理
9. 核心特性
10. 零配置启动：依赖极简，开箱即用
11. 动态权限体系：树形菜单+细粒度按钮级权限控制
12. 代码生成器：一键生成前后端基础代码，支持自定义模板

技术栈：现代开发的全家桶实践

六、系统截图

七、部署指南

快速开始，启动项目前操作

后端：

• 创建数据库，字符集：utf8mb4，排序规则：utf8mb4_general_ci
• 导入db文件夹magic-boot.sql文件
• MagicBootApplication运行即可

前端（magic-boot-naive）：

nodejs要求版本 >= 14

执行命令

npm install
npm run dev

浏览器输入：http://localhost:5173

用户名密码：admin/123456

打完jar包为啥访问接口会404？

yml配置

magic-api:
  resource:
    location: classpath:data/magic-api

pom.xml文件build节点增加配置

<resources>
    <resource>
        <directory>src/main/resources</directory>
    </resource>
    <resource>
        <directory>${project.basedir}/data</directory>
        <targetPath>data</targetPath>
        <includes>
            <include>**/*</include>
        </includes>
    </resource>
</resources>

八、源码地址

https://gitee.com/ssssssss-team/magic-boot-naive