简介

基于 magic-api 搭建的快速开发平台，前端采用Vue3 + Element Plus最新版本搭建，依赖较少，运行速度快。对常用组件进行封装。利用Vue3的@vue/compiler-sfc单文件编译，动态编译组件，可以实现在浏览器编写Vue代码，既改即生效快速开发，利用magic-api本身特性安全隔离生产和开发环境。将Vue代码以插件化的方式交给magic-api管理。

功能

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

快速开始

前置条件：mysql5.7，node>14，jdk1.8+，navicat，idea等工具

1.下载源码

git clone https://gitee.com/ssssssss-team/magic-boot.git

目录结构如下图所示

其中db文件夹里面为数据库初始化脚本文件；magic-boot为服务端源码；magic-boot-ui为前端源码。

2.数据库初始化

手动创建数据库：magic-boot，然后在此数据库下执行数据库初始化脚本文件初始化数据库。

3.系统配置

打开配置文件，修改数据库连接字符串和账户密码。

application.yml

  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    type: com.alibaba.druid.pool.DruidDataSource
    url: jdbc:mysql://localhost/magic-boot?useSSL=false&zeroDateTimeBehavior=convertToNull&useUnicode=true&characterEncoding=UTF8&autoReconnect=true&serverTimezone=Asia/Shanghai
    username: root
    password: 123456

4.运行服务端

运行项目下的MagicBootApplication文件，出现以下界面说明服务端运行成功。

接口管理界面：

5.运行管理后台前端

5.1 下载依赖包

cd进入magic-boot-ui文件夹，执行以下命令。

npm install

5.2 启动前端服务

npm run dev

启动成功后，打开浏览器，输入网址：http://localhost:3000/，打开登录界面输入用户名密码：admin/123456

以上步骤完成了magic-boot的系统搭建。