二开神器ruoyi-vue——开发到部署全流程

前言

当我们需要快速完成一个毕业设计等简单项目时，需要使用一个成熟的框架简化开发，ruoyi的前后端分离版本对于java后端开发者比较友好，可以利用ruoyi的代码生成功能根据数据库中的表快速生成前后端增删改查功能，极大加快简单项目的开发速度，ruoyi项目是非常火热的开源项目，可以从gitee或者github中获取：

gitee:ruoyi-vue 3.8.7

请注意，不同版本的ruoyi其数据库版本是不同的，所以尽量一直使用自己较为熟悉的版本进行二开。

搭建项目

ruoyi-vue项目搭建较为简单，下载好前后端依赖，启动redis，创建一个数据库，名为ruoyi-vue，然后将项目中的sql文件夹中的ryxxx.sql文件运行即可。唯一需要配置的是admin模块中的数据库配置文件，即appliaction-druid.yml文件，把数据库和密码改为自己的。这里建议建立数据库的名和配置文件的名都改为ruoyi_vue,使用“-”是不被mysql推荐的，在部署项目时可能会遇见问题。

快速开发

登录进入系统，如果之前使用这个项目开发过，因项目需要隐藏了菜单管理，那么可以在数据库表sys_menu中把菜单管理的visible字段改为0，然后刷新页面即可显示。
之后便可使用菜单管理重新显示之前隐藏的菜单，左侧菜单项都是从数据库中读取的，改变完菜单状态后刷新即可出现。

假如我们要开发一个新功能，首先在菜单管理里面新建一个菜单，名为产线功能的一级菜单，请注意，只有一级菜单是需要自己主动添加的，其他的二次菜单都是sql文件生成的。

然后系统左侧就会出现一个产线功能：

在产线功能中，我们需要添加一个物料上填功能，我们先针对物料上填的业务设计一个表：数据库中的id最好是自增的，如果不是自增，那么生成的前端代码会有bug，新增按钮会是修改的效果。判断表单是提交还是修改，是通过判断this.form.id==null进行判断的，不需要插入id就没有问题，如果id需要手动插入，那么表单的v-model双向数据绑定会导致新增也变为了修改的逻辑。

当数据库中的表设计好后，在代码生成模块，单击导入按钮，即可看到自己在数据库中的表，将此表导入

对我们导入的表进行编辑，需要填写三种信息，其中基本信息不会对代码生成产生什么影响：

字段信息较为重要，影响前端代码的生成，其中字段描述是生成前端代码table、dialog等的label名，如果空着就会显示${common},需要手动修改，所以这里建议先写好。通过控制增上改查的对勾，来控制前端的插入、查询等页面包不包含对应字段。

像是状态这种需要下拉框的字段，选择下拉框，并且可以设置字典。

新增一个字典，并设置3个标签，可以选择标签的样式：

生成信息也是非常重要的，这里只展示单表的简单增删改查，一般这种迅速开发的小项目怎么简单怎么来，所以尽量使用冗余设计方式，避免多表开发影响速度。修改包路径和模块名，生成chanxian模块，然后业务名是wuliao，生成功能名即为二级菜单名，上级菜单一定要选刚才的产线功能。

填写好生成信息后，提交表单，然后选中表点击生成：生成后是一个zip文件的形式，其中main代码是后端代码，vue代码是前端代码，sql文件是按钮以及按钮权限。

下面要导入生成的代码：
1.首先导入sql文件，在数据库下运行该sql文件：

查询数据库可以看到生成了几个按钮，以及物料上填这个页面，数据中也有他们的权限信息，可以控制按钮的权限。
如果你觉得生成的代码有误，想重新生成，就把数据库中生成的这些数据先删除。
2.导入前端代码，将api下的模块直接复制到文件夹下，例如把chanxian文件夹复制到api下，如果你同时选中多张表进行生成，而且同属于一个模块，那么这些js代码会都生成在一个模块下，如果你是分几次来生成的，那么后续你可以把新代码添加到模块中，api模块是负责发送请求的。

把views下的模块复制到项目中的views中，chanxian模块的wuliao功能，如图所示，每个功能只有一个index.vue，就是其对应的前端页面。如果你的功能跟之前的功能用到了相同的接口，那么你可以复制vue文件而不用再使用新的后端代码。

3.导入后端代码，把main/java/com/ruoyi下的chanxian模块复制到项目中

为了方便，直接复制在admin文件夹下，直接在ruoyi文件夹下复制chanxian这个模块

将mapper文件复制到resource下，后续只需要复制mapper文件夹下的模块文件夹即可，这里面是mybatis的xml配置文件。

4.重新启动项目，前端需要重新启动，为了重新读取xml文件，后端需要maven使用clean和compile重新编译。

效果如图，已经生成好页面，且基本的增删改查功能都可用，接下来就是根据需求进行小改。

修改ruoyi的水印

下面整合了我能想到的ruoyi项目需要改名的地方：

1.开启注册

默认注册页面是不开启的，修改login.vue下的第94行代码，把注册开关打开即可打开注册功能。

2.登录&注册页面

登录页面需要改动两部分：表单标题和下面的版权所有，如果打开了注册，那么注册表单的标题和版权所有也是需要改的

修改login.vue和register.vue，修改第4行代码，改成自己想要的标题

修改第59行版权所有:

如果你添加了注册，一定记得把注册的vue文件也改了

3.首页

首页有这3部分需要修改，首页标题、首页主页信息、以及右上角的导航栏：

在layout\components\Sidebar\Logo.vue中，修改title的值为自己想要的，可以删除图片，只保留文字，也可以自己找图片替换

主页的内容修改index.vue即可，较为简单，至于右上角的工具栏，修改layout\components下的Navbar.vue:可以删除源码地址、文档地址等

4.网页标签

如果要修改网页标签，只修改生成环境的配置文件即可

这样当我们打包项目后，网页标签就改过来了

项目部署

我们需要一种简单快捷的部署方式，并且尽量减少依赖数量，所以采用打包的方式：
后端：在ruoyi项目的bin目录下执行package.bat打包Web工程，生成war/jar包件。打包后，帮别人部署时，只需要给他配置好java环境变量即可，无需下载maven等工具。包会生成在admin模块的target文件夹下，注意别人的数据库密码等配置是不是和自己打包前一致，后端这种打包方式仅适用于windows系统。

启动项目要使用jdk，并配置好环境变量，为了配置环境变量相对简单，这里我们使用了jdk11，把jdk11文件夹复制过去后，按照这篇文章的方式进行环境变量配置：

Windows配置环境变量

并且需要redis，redis可以免配置直接运行，可以直接启动redis的redis-server.exe即可

数据库：把自己的数据库作为sql文件导出，然后帮别人部署好数据库，无需使用管理工具，使用命令行或者mysql客户端，通过命令运行sql文件，这样就无需在新环境中使用navicat等mysql客户端，进一步减少部署环境的开销。

#请注意，句末除了运行sql外都要加;
mysql -u root -p; # 然后输入密码，连接数据库
show databases; # 显示数据库
create database ry_vue;  # 这里改了名字，因为数据库不推荐-，所以换成了_,注意java中的配置文件也要改过来
use ry_vue # 使用咱们的数据库
source C:\test.sql # 运行sql文件，使用绝对路径，请注意，这个语句结尾是不加分号的，否则会报错

#如果使用了sql的客户端，并且sql客户端编码有问题，可以修改客户端编码为utf8 
set names utf8;  # 将客户端字符集变成utf-8

前端：前端同样使用打包的方式部署，因为配置node.js环境还是很麻烦的

# 打包正式环境
npm run build:prod

打包完的文件就是这个dist文件

将dist文件放入到nginx中，在nginx根目录下新建一个project文件（不新建也可以，对应修改配置文件即可），然后将dist文件复制到project：

修改一下配置文件,让咱们的项目顺利跑在nginx中:

运行nginx.exe启动nginx，会有黑框一闪而过，如果windows系统想关闭所有的nginx进程，运行:

taskkill /f /t /im nginx.exe

启动成功后，浏览器输入localhost即可访问：

运行

运行项目步骤：
1.先运行后端项目，找到ruoyi-admin.jar的文件夹，在这个文件夹下打开控制台，可以将当前文件夹路径改为cmd，然后按回车，进入控制台后，启动后端项目，输入java -jar ruoyi-admin.jar, 项目名ruoyi-admin.jar可以用tab键自动提示
2.启动redis，进入redis的文件夹，单击redis-server.exe即可启动
3.启动前端项目，进入nginx文件夹，单击nginx.exe
4.访问项目，进入浏览器，输入localhost，即可访问，管理员用户，用户名admin，密码admin123