提示以演示模式运行_RuoYi-Vue改造（二）项目配置&效果演示

上一篇：RuoYi-Vue改造(一)源码介绍&数据库分析

前言：RuoYi-Vue是一个基于SpringBoot，Spring Security，JWT，Vue & Element 的前后端分离权限管理系统，为演示方便我们直接拉取RuoYi-Vue-Plus版本进行二次改造。感谢源码作者，敬礼！

本文目标

进行前后端的配置，并进行运行验证，演示项目运行效果。

分离前后端代码

• 删除原git文件夹，切断和原git仓库的联系，避免在修改代码时总提示提交。非必须，仅为个人习惯。

• 将前端ruoyi-ui项目挪到单独目录，进行分离。非必须，仅为个人习惯。

配置后端并启动

• 用idea打开后端项目，并等待加载依赖。如依赖加载失败，则进行重新加载，直至成功。

• 修改后台端口

打开ruoyi-adminsrcmainesourcesapplication.yml文件，修改第21行启动端口，我觉得8088不错，修改之。

• 修改MySQL信息

打开ruoyi-adminsrcmainesourcesapplication-dev.yml文件，修改第9-11行数据库信息，连上上一文初始化的MySQL数据库。

• 修改Redis信息

还是上边这个配置文件，向下拉，修改第61-65行Redis信息，连上自己的Redis服务器。

• 启动后端项目

运行ruoyi-adminsrcmainjavacomuoyiRuoYiApplication，控制台打印出如下标志，意味着后端项目配置正确并启动成功。

配置前端并启动

前端常用的编译器很多，例如VScode、WebStorm等等，作为后端，我还是习惯用idea，下边我们继续用idea运行前端项目ruoyi-ui。

• idea打开ruoyi-ui项目，并执行“npm install”安装依赖。

• 修改代理信息

打开vue.config.js文件，修改第37行，代理后台的端口为8088

• 展示所有命令

鼠标选中package.json，右键点击“Show npm Scripts”快速展示出本项目所有命令。

• 启动前端项目

双击dev命令，经过短暂又漫长的等待后，控制台出现如下标志，代表前端项目启动成功。不出意外，还会自动调起系统默认浏览器进行直接展示。

效果演示

点我看整体运行效果。