ruoyi虽然带了强大的代码生成器，面对比较通用的CRUD还是游刃有余的，但在项目开发阶段，需求总是经常变化的，数据结构和逻辑也经常变化，我们需要的是快速验证功能逻辑，代码生成器可帮不上忙，每次需求变化了，就要把Controller、Service、Dao、Mapper、XML、VO等都改一遍，效率很低下，magic-api却能帮我们解决这个问题，他可以在项目运行时，直接使用他自创的类js的脚本来在线创建接口，不需要Controller、Service、Dao、Mapper、XML、VO，直接在项目运行时添加业务逻辑及接口，可以很简单的使用数据库和调用内外部接口，真令人惊叹，开发还可以这么玩。后期业务稳定了，若不想使用magic-api，也可以关闭magic-api或着删掉接口,然后自己重写Controller、Service、Dao、Mapper、XML、VO也是可以的，。

详细的magic-api的介绍和使用手册请访问他们的官网 快速开始 | magic-api (ssssssss.org)

本文的重点是讲解如何将2个优秀框架进行结合。

集成magic-api

1、下载 ruoyi -vue

git clone 仓库,做好相应数据库的初始化及启动准备,相关操作参考官网，此处不赘述。

RuoYi-Vue: 🎉 基于SpringBoot，Spring Security，JWT，Vue & Element 的前后端分离权限管理系统，同时提供了 Vue3 的版本

https://gitee.com/y_project/RuoYi-Vue.git

2、在ruoyi-vue工程中引入magic-api

在ruoyi-vue 工程目录下，找到ruoyi-admin模块，在其pom.xml文件里添加magic-api依赖

<dependency>
    <groupId>org.ssssssss</groupId>
    <artifactId>magic-api-spring-boot-starter</artifactId>
    <version>2.0.2</version>
</dependency>

3、在application.yml 中添加magic-api 配置项

magic-api:
  #在线编辑代码的入口地址
  web: /magic/web
  #保存在线编辑的代码的位置
  resource:
    location: /data/magic-api

编辑

至此，运行ruoyi-vue项目，magic-api插件也会自动运行起来，可以从控制台查看到magic-api的控制台入口地址，此刻要是直接进入，页面会报401（如下图），这是因为magic-api插件的页面是一个单独的web服务，虽然在同一个端口下，但实际上他们两都有各自的鉴权。

4.放开magic-api控制台相关权限

我们需要在ruoyi-vue工程中将magic-api/web下的url全部放开，如此才不会报401问题,具体操作如下：

之后重启项目，刷新http://localhost:8080/magic/web,你可以看到页面可以正常访问了，并带了个test测试例子。若你在test目录下（url是magic/web）创建了接口，你可以正常的在线保存和调试接口。

后续问题

由于magic/web 路径地址下所有的资源都是放开的，但我们实际的接口大都是需要经过鉴权的，不能开放的，但在magic-api控制台上创建了其他路径的接口，则会报401问题，如下

，那怎样才能让在magic-api控制台创建的非magic/web路径下的其他api正常访问呢？请看我的这篇文章magic-api与ruoyi集成实践经验：magic api 读取ruoyi框架的用户登录信息_magic-api 集成单点登录_windcore的博客-CSDN博客