介绍

很早就听说过若依的强大,今天特地上手简单跑了一下,确实方便且少错

  • 若依系统有很多个版本,那本文是前后端分离版本(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官方文档,(可直接看环境部署部分内容)

环境部署

环境准备

我使用的是Windows系统+IDEA(其他系统请自行前往官方文档查阅)

阅读本文需要一些Java基础,我有些部分不会写的很详细,但都能包括到。

1
2
3
4
5
JDK >= 1.8 (推荐1.8版本)
Mysql >= 5.7.0 (推荐5.7版本)
Redis >= 3.0
Maven >= 3.0
Node >= 12

运行系统

官方样式

自定义样式

  • 官网拉下来的代码的包名(包结构)一眼就看出来是RuoYi的框架,那我们可以选择自定义工程。(千万不要在官方代码上直接改包名等,依赖什么的会冲突!!!)

  • 前往官方文档右上角有个生态系统,点击RuoYi-Vue项目扩展,里面有很多扩展,拉到最下面(若依框架包名修改器

  • 在线编辑地址:Fastbuild Factory 快速项目搭建平台|快搭科技

  • 推荐使用在线编辑,方便直观,项目配置什么的DIY就好

image-20240602154343246

  • 源码预览确定包名/包结构之类的是自己想做的项目,之后点击下载源码->解压源码

后端运行

  1. 将项目导入到IDEA,然后配置 Maven

image-20240602155548218

  1. 创建数据库ry-book并导入数据脚本ry_2021xxxx.sqlquartz.sql(必须要导入!),刷新数据库后得到这些表

image-20240602161751388

  1. 修改配置文件:Book-amdin下的applicationapplication-druid.yml里面的内容
  • 配置自己的服务器、Redis信息(端口、数据库名、密码……)

  • 配置自己的MySQL信息(端口、数据库名、密码……)

  • 服务器上部署的要注意开放端口、防火墙之类的

  • 启用MySQL、Redis

  1. 打开项目运行com.xingye.BookApplication.java
  • 控制台报错(由于我们是自定义的工程,mybaits没扫到包)

image-20240602163032376

  • 解决

image-20240602163352758

image-20240602163951382

  1. 运行com.xingye.BookApplication.java,出现如下表示启动成功。
1
2
3
4
5
6
7
8
9
10
(♥◠‿◠)ノ゙  电子图书管理系统启动成功   ლ(´ڡ`ლ)゙  
.-------. ____ __
| _ _ \ \ \ / /
| ( ' ) | \ _. / '
|(_ o _) / _( )_ .'
| (_,_).' __ ___(_ o _)'
| |\ \ | || |(_,_)'
| | \ `' /| `-' /
| | \ / \ /
''-' `'-' `-..-'
  1. 访问localhost:8080,出现如下表示后端搭建成功
1
欢迎使用Book后台管理框架,当前版本:v3.8.7,请通过前端地址访问。

前端运行

  1. 官网自行下载node.js->配置环境变量->检查是否安装成功(npm -version)
  2. 进入前端项目目录,执行以下代码(前后端分离,前端推荐使用Vs Code)
1
2
3
4
5
6
7
8
# 进入项目目录
cd ruoyi-ui

# 安装依赖
npm install

# 本地开发 启动项目
npm run dev
  1. 打开浏览器,输入:(http://localhost:80) 默认账户/密码 admin/admin123
  2. 若能正确展示登录页面,并能成功登录,菜单及页面展示正常,则表明环境搭建成功

image-20240602165008255

因为本项目是前后端完全分离的,所以需要前后端都单独启动好,才能进行访问。

Demo

  • 那我们用若依就是要DIY自己想要的一些功能、界面对叭,这里就展示一个小demo。

  • 首先我们去数据库中建一张书本表(无库不coding嘛)

    image-20240602181356031

  • 建完表后,我们到前端页面中,找到系统工具->代码生成->导入,导入我们刚刚建好的表

    image-20240602181742275

  • 点击确定后,可以编辑代码的生成配置

    image-20240602181938015

    image-20240602182607784

  • 配置好后,生成代码,解压代码,将生成的代码放到对应的文件目录下

    • domian mapper service 放到com.xingye.system

    • controller 放到 com.xingye.web.controller

    • vue文件中的前端代码放到各自对应的目录即可(这里就不贴图了)

    • 最后运行b-bookMenu.sql文件(别忘记)

  • 前后端运行得到如图,可以完成CRUD功能

image-20240602200134819

代码生成器是个好工具,用好了能提高CRUD效率

附上:代码生成的手册

  • 前端部分的一些内容是随自己的一些心意去搞的,这里就不展开说了

Ending

  • 本文就是简单的讲了一下,RuoYi-Vue这个前后端分离框架如何快速搭建运行

  • 以及演示了一个小demo,如何利用若依的工具上手实现一些功能

  • 若依本身还有很多本文没有讲到的强大的功能(权限控制等等)

  • 那这边请大家建议参考官方的使用手册以及我找资料看到一个大佬的[专题: Ruoyi Vue](https://blog.kdyzm.cn/topic/Ruoyi Vue/)