RuoYi-Vue
介绍
很早就听说过若依的强大,今天特地上手简单跑了一下,确实方便且少错
- 若依系统有很多个版本,那本文是前后端分离版本(RuoYi-Vue)
版本 | gitee地址 | 说明 |
---|---|---|
前后端不分离版本 | https://gitee.com/y_project/RuoYi | 应该是第一版若依系统,star数量最多,但是前端界面比较丑 |
前后端分离版本 | https://gitee.com/y_project/RuoYi-Vue | 该版本前后端分离,而且前端使用Vue重写了,后端权限部分使用了spring seurity+jwt实现,和原来的前后端不分离版本似乎有所不同 |
微服务版本 | https://gitee.com/y_project/RuoYi-Cloud | 相对于前后端分离版本,微服务版本将模块拆分的更细,并且单独作为一个服务对外暴露,通过服务发现相互调用 |
RuoYi-Vue
以下内容来自RuoYi官方文档,(可直接看环境部署部分内容)
-
基于SpringBoot、Spring Security、Jwt、Vue的
前后端分离
的后台管理系统 -
RuoYi-Vue 是一个 Java EE 企业级快速开发平台,基于经典技术组合(Spring Boot、Spring Security、MyBatis、Jwt、Vue),内置模块如:部门管理、角色用户、菜单及按钮授权、数据权限、系统参数、日志管理、代码生成等。在线定时任务配置;支持集群,支持多数据源,支持分布式事务。
-
RuoYi 官网地址:http://ruoyi.vip(opens new window)
-
RuoYi 在线文档:http://doc.ruoyi.vip(opens new window)
-
RuoYi 源码下载:https://gitee.com/y_project/RuoYi-Vue(opens new window)
-
RuoYi 在线提问:https://gitee.com/y_project/RuoYi-Vue/issues(opens new window)
-
RuoYi 博客:https://www.oschina.net/p/ruoyi
环境部署
环境准备
我使用的是Windows系统+IDEA(其他系统请自行前往官方文档查阅)
阅读本文需要一些Java基础,我有些部分不会写的很详细,但都能包括到。
1 | JDK >= 1.8 (推荐1.8版本) |
运行系统
官方样式
- 前往
Gitee
(https://gitee.com/y_project/RuoYi-Vue (opens new window))下载解压到工作目录/Git拉取
自定义样式
-
官网拉下来的代码的包名(包结构)一眼就看出来是RuoYi的框架,那我们可以选择自定义工程。(千万不要在官方代码上直接改包名等,依赖什么的会冲突!!!)
-
推荐使用在线编辑,方便直观,项目配置什么的DIY就好
- 源码预览确定包名/包结构之类的是自己想做的项目,之后点击下载源码->解压源码
后端运行
- 将项目导入到
IDEA
,然后配置Maven
- 创建数据库
ry-book
并导入数据脚本ry_2021xxxx.sql
,quartz.sql
(必须要导入!),刷新数据库后得到这些表
- 修改配置文件:Book-amdin下的
application
、application-druid.yml
里面的内容
-
配置自己的服务器、Redis信息(端口、数据库名、密码……)
-
配置自己的MySQL信息(端口、数据库名、密码……)
-
服务器上部署的要注意开放端口、防火墙之类的
-
启用MySQL、Redis
- 打开项目运行
com.xingye.BookApplication.java
- 控制台报错(由于我们是自定义的工程,mybaits没扫到包)
- 解决
- 运行
com.xingye.BookApplication.java
,出现如下表示启动成功。
1 | (♥◠‿◠)ノ゙ 电子图书管理系统启动成功 ლ(´ڡ`ლ)゙ |
- 访问localhost:8080,出现如下表示后端搭建成功
1 | 欢迎使用Book后台管理框架,当前版本:v3.8.7,请通过前端地址访问。 |
前端运行
- 官网自行下载node.js->配置环境变量->检查是否安装成功(npm -version)
- 进入前端项目目录,执行以下代码(前后端分离,前端推荐使用Vs Code)
1 | # 进入项目目录 |
- 打开浏览器,输入:(http://localhost:80) 默认账户/密码
admin/admin123
) - 若能正确展示登录页面,并能成功登录,菜单及页面展示正常,则表明环境搭建成功
因为本项目是前后端完全分离的,所以需要前后端都单独启动好,才能进行访问。
Demo
-
那我们用若依就是要DIY自己想要的一些功能、界面对叭,这里就展示一个小demo。
-
首先我们去数据库中建一张书本表(无库不coding嘛)
-
建完表后,我们到前端页面中,找到系统工具->代码生成->导入,导入我们刚刚建好的表
-
点击确定后,可以编辑代码的生成配置
-
配置好后,生成代码,解压代码,将生成的代码放到对应的文件目录下
-
domian mapper service 放到
com.xingye.system
-
controller 放到
com.xingye.web.controller
-
vue文件中的前端代码放到各自对应的目录即可(这里就不贴图了)
-
最后运行b-bookMenu.sql文件(别忘记)
-
-
前后端运行得到如图,可以完成CRUD功能
代码生成器是个好工具,用好了能提高CRUD效率
附上:代码生成的手册
- 前端部分的一些内容是随自己的一些心意去搞的,这里就不展开说了
Ending
-
本文就是简单的讲了一下,RuoYi-Vue这个前后端分离框架如何快速搭建运行
-
以及演示了一个小demo,如何利用若依的工具上手实现一些功能
-
若依本身还有很多本文没有讲到的强大的功能(权限控制等等)
-
那这边请大家建议参考官方的使用手册以及我找资料看到一个大佬的[专题: Ruoyi Vue](https://blog.kdyzm.cn/topic/Ruoyi Vue/)