fluxy-admin后台管理系统全栈开发框架 1.0.0 版本发布了🎉🎉🎉

6,507 阅读5分钟

前言

一年前写了一个专栏,带着大家从零开始写一套后台管理系统全栈框架,一共有 17 篇文章,每篇的热度都挺高的,帮助了一些人,收到了不少好评。

本来fluxy-admin框架是为了写文章做的 demo项目,很多细节不完善,连开发文档都没有,有的兄弟想在自己项目中使用这个框架,但是不敢用。

后面有不少兄弟私信我,想让我给框架完善一下,可以在外包项目或自己小项目中使用。我平时一直都很忙,过年期间在家没事,给项目重构了一下,也补充了开发文档,这时候大家可以放心的使用了。

image.png

项目开发文档链接:docs.fluxyadmin.cn/

专栏文章链接:fluxy-admin后台管理系统开发记录

发布日志

整体

  1. 增加开发文档 docs.fluxyadmin.cn/
  2. 增加框架实战教程

前端

  1. 把windicss换成了tailwindcss
  2. 新增前端页面模板代码,通过脚本一键生成增删改查页面代码。
  3. 对接 swagger json 数据,通过脚本一键生成请求接口方法,同时生成请求参数类型和相应参数类型。
  4. 支持动态切换主题颜色
  5. 修复了一些 bug

后端

  1. 增加了 api 接口请求日志功能,帮助开发人员定位线上问题。
  2. 修复了一些 bug

实战项目演示

给大家演示一下使用框架开发的实战项目,学生宿舍管理系统。

使用管理员账号登录,添加专业、宿舍、学生。

2025-03-02 121339.gif

使用学生账号报修,以及使用管理员账号处理报修。

2025-03-02 125312.gif

项目亮点

上手简单

因为前后端框都是使用 javaScript 为主要开发语言,所以对于前端开发人员来说,上手还是非常简单的。

前端技术栈:Vite,React,Zustand,TypeScript,Ant Design,React Router,Tailwind Css,Axios,I18next

后端技术栈:Midway,Typeorm,Mysql,Redis,Minio,Swagger,Casbin

同时框架前后端还内置了创建模板代码的脚本,新开发一个功能,只需要运行一个命令,就能一键生成增删改查模板代码。具体使用教程请参考开发文档,docs.fluxyadmin.cn/guide/scrip…

自动生成请求方法

往常前后端对接会手动写一个service文件,把调用接口的方法写进去,然后还要自己定义请求参数类型、相应参数类型,非常麻烦。如果后端改了字段,前端还不知道,导致一些 bug。

为了解决上面这些问题,我引入了openapi2typescript库,只需要一个命令就可以根据后端 swagger 文档,自动生成前端请求方法,还会自动生成请求参数类型以及后端响应参数类型,再也不用自己写 service 文件了。

动态路由

一些常见的后台管理系统中,需要自己在本地定义路由,然后为了实现动态菜单,还需要在线上定义菜单。相当于一件事情做了两遍,浪费时间,并且本地定义路由,大一点的项目中,多人同时开发新功能,还总是会出现代码冲突。

当前框架实现了动态路由,新加功能的时候,只需要在线定义菜单就行了,完全不需要本地定义路由。

具体实现方案请参考这篇文章

基于react-router v6实现动态菜单、动态路由。内含vue动态路由实现。

按钮权限

框架中按钮权限实现方案,使用的是我自己写的一个支持在 react 中自定义类似于 vue 指令的库,使用起来特别简单,只需要给组件加上 v-auth 指令就行了。

具体使用请参考开发文档:docs.fluxyadmin.cn/guide/butto…

具体实现细节大家可以看一下这篇文章:

使用黑科技实现前端按钮权限控制,太优雅了。

一键国际化

项目开发中,我最讨厌做国际化,没有一点技术含量,还浪费时间。

为了解决这个问题,我写了一个 vscode 插件,可以一键翻译当前页面,可以节省很多时间。

具体使用方法可以参考这篇文章

开发过程中,因为国际化太麻烦,我写了这款vscode国际化插件。

支持多页签 keepalive

因为react没有vue那种keepalive方法,所以想实现多页签,还需要自己来实现。

具体实现请参考这篇文章

基于react-router v6实现多页签功能

最后

开源不易,如果对大家有帮助,麻烦给仓库点个 star,非常感谢。

前端代码仓库:github.com/dbfu/fluxy-…

后端代码仓库:github.com/dbfu/fluxy-…

项目预览地址:dev.fluxyadmin.cn/

开发文档地址: docs.fluxyadmin.cn/