温馨提示：项目地址见文末
起因:一次尴尬的演示
上个月给领导演示一个新功能,我信心满满地打开系统。
领导看了一眼说: "这个页面能不能好看点？"
我当时就懵了。功能明明都实现了,后端逻辑也没问题,就是页面丑了点。
回去之后我想改改页面样式,结果:
- CSS写了半天,还是歪的
- 想加个表单验证,不知道怎么写
- 搜了一堆前端教程,看得头大
我就纳闷了,我一个后端程序员,为什么要在CSS上浪费时间？
后端程序员的真实困境
说实话,作为一个写了20年Java的后端,我真的不太想碰前端。
不是说前端不好,而是经常遇到这种情况:
场景1:给领导演示
- 功能都实现了,就是页面丑
- 领导不看代码,只看界面
- 结果演示效果大打折扣
场景2:做个人项目
- 想做个博客系统、记账系统
- 后端接口写得飞快
- 前端页面写了一天,还是不能看
场景3:快速验证想法
- 有个技术方案想验证
- 需要个简单的管理页面
- 结果时间都花在搞登录页的样式上
场景4:接私活
- 客户要个简单的管理系统
- 后端一天写完
- 前端磨磨唧唧,还得求前端朋友帮忙
用个比喻就是: 后端好比男人,有思想但不善于表达;前端好比女人,形象好还能说会道。
但有时候你就是需要:
- 一个能看的登录页
- 几个基础的增删改查列表
- 表单验证能用就行
不需要特别炫酷,但也不能太丑。
为什么不直接用RuoYi？
可能有人会说:"RuoYi不是挺好的吗?拿来改改不就行了?"
我一开始也是这么想的。打开RuoYi的源码,我当时就傻了。
太重了
RuoYi是个完整的企业级框架,包含权限管理、菜单配置、角色管理、部门管理、岗位管理、字典管理、参数配置、通知公告、日志管理、在线用户、定时任务......
我只是想要个用户列表页面啊。 想删除这些功能又怕删错,一不小心整个系统就跑不起来了。
配置太麻烦
想加个菜单得去数据库sys_menu表插入数据,还要配父菜单ID、路由地址、权限标识。想改个权限得配角色、配菜单、配按钮、还要配关联关系。
对于一个小demo或者个人项目来说,这些配置都是负担。 我就想要个静态的菜单,左边写死两个链接不行吗?
环境依赖多
想跑起来RuoYi得装MySQL、导入SQL脚本、配置Redis、前后端分别启动。光是配置环境就得半小时。
我就想要个能快速跑起来的东西,最好不要装一堆数据库。
所以我做了个RuoYi-Mini
核心思路就一个:最小化
保留了什么:
- 登录/登出功能
- 用户管理(完整的增删改查)
- 字典管理(完整的增删改查)
- 分页、表单验证这些基础功能
- 响应式布局
去掉了什么:
- 复杂的权限系统
- 菜单配置(改成写死的)
- 角色管理
- 部门管理
- 代码生成器
- 各种不常用的功能
改进了什么:
- 用H2内存数据库,不用装MySQL
- 配置文件精简到最少
- 代码结构清晰,容易扩展
- 5分钟就能跑起来
整个项目的目标就是:5分钟跑起来,10分钟能改代码,拿去给领导演示不丢人。
项目结构
结构很清爽:
ruoyi-mini/
├── ruoyi-mini-be/ # 后端(Spring Boot)
│ └── src/main/
│ ├── java/
│ │ ├── controller/ # 用户、字典接口
│ │ ├── service/ # 业务逻辑
│ │ └── entity/ # 实体类
│ └── resources/
│ └── application.yml # 就这一个配置文件
└── ruoyi-mini-fe/ # 前端(Vue)
└── src/
├── views/ # 登录、用户列表、字典列表
├── api/ # 接口调用
├── router/ # 路由配置
└── utils/ # 工具类
没有复杂的目录结构,打开就能看懂。
5分钟快速开始
真的就5分钟,不骗你。
1. 启动后端
cd ruoyi-mini-be
mvn clean package
java -jar target/ruoyi-mini-be-0.0.1-SNAPSHOT.jar
启动后,后端就跑在 http://localhost:8081 了。
H2数据库会自动创建,不用你管。 默认会初始化一个admin用户和几条字典数据。
2. 启动前端
cd ruoyi-mini-fe
npm install
npm run dev
启动后,前端就跑在 http://localhost:8087 了。
3. 打开浏览器
访问 http://localhost:8087,用 admin/admin123 登录。
就这么简单,你已经有一个完整的管理系统了。
登录后你能看到:
- 左侧菜单:用户管理、字典管理
- 用户列表页:带搜索、分页、新增、编辑、删除
- 字典列表页:同样的增删改查功能
这个页面拿去给领导演示,绝对不丢人。
适合什么场景
1. 学习前后端分离
- 想学习前后端怎么交互
- 想看看Vue怎么调用后端接口
- 代码简单,容易理解
2. 接私活
- 客户要个简单的管理系统
- 用这个模板快速交付
- 省时省力
3. 作为其他项目的起点
- 需要一个干净的管理后台模板
- 在这个基础上扩展自己的业务
- 不想从零开始搭前端
怎么扩展新功能
假设你想加一个"商品管理"功能。
1. 后端加接口
在 controller 目录新建 ProductController.java:
@RestController
@RequestMapping("/product")
public class ProductController {
@GetMapping("/list")
public Result<PageResult<Product>> list(
@RequestParam(defaultValue = "1") int pageNum,
@RequestParam(defaultValue = "10") int pageSize
) {
// 查询商品列表
}
@PostMapping
public Result<Void> add(@RequestBody Product product) {
// 新增商品
}
}
2. 前端加API调用
在 api 目录新建 product.js:
import request from '@/utils/request'
export function listProduct(params) {
return request({
url: '/product/list',
method: 'get',
params
})
}
3. 前端加页面
复制 views/user/index.vue,改成 views/product/index.vue。
把用户相关的改成商品相关的就行,表格、表单、验证规则都是现成的。
4. 加路由
在 router/index.js 加一行:
{
path: '/product',
component: () => import('@/views/product/index'),
meta: { title: '商品管理' }
}
就这么简单,一个新功能就加好了。
技术栈
前端
- Vue.js 2.6.12
- Element UI 2.15.14
- Axios 0.21.4
后端
- Spring Boot 2.7.18
- H2 Database 2.1.214
都是很成熟的技术,网上资料一大堆。
几个要注意的地方
1. H2数据库的数据会保存
默认配置是数据保存在文件里:
spring:
datasource:
url: jdbc:h2:file:./data/ruoyi-mini
重启后数据不会丢失。
如果你想每次重启都重新初始化,改成:
spring:
datasource:
url: jdbc:h2:mem:ruoyi-mini
2. 跨域问题
前端在 vue.config.js 配置了代理:
devServer: {
port: 8087,
proxy: {
'/': {
target: 'http://localhost:8081',
changeOrigin: true
}
}
}
开发环境不会有跨域问题。
生产环境需要在nginx配置或者后端加CORS配置。
3. Token过期处理
在 request.js 的响应拦截器里处理了token过期:
response => {
const res = response.data
if (res.code === 401) {
router.push('/login')
}
return res
}
当后端返回401时,会自动跳转到登录页。
生产环境怎么部署
前端打包
npm run build
会生成 dist 目录,把这个目录丢到nginx就行。
后端打包
mvn clean package
会生成jar包,直接 java -jar 运行。
不过生产环境建议:
- 把H2改成MySQL
- 加上Redis缓存
- 配置更安全的认证机制
但对于个人项目或者demo来说,H2已经够用了。
最后
这个项目就是为了解决后端程序员的痛点:
- 不想在前端上浪费时间
- 需要一个能看的管理页面
- 不想学习复杂的框架
如果你也有这种需求,可以试试这个项目。
项目地址: gitee.com/sh_wangwanb…
如果觉得有用,点个赞吧，嘿嘿。
