部署 Springboot 前后端分离管理系统

近日发现了一个非常优秀的后台管理系统，界面美观简洁，非常好看，使用Springboot,vue,element技术栈，项目地址若依管理后台,所以，就先从GitHub上拉下来在本地跑起来看看效果。

一、管理系统界面

二、本地部署

1. 克隆项目到本地

#进入项目目录
cd /Users/kaiyiwang/Code/java/
git clone [e-mail]:y_project/RuoYi-Vue.git

2. 前端项目

#进入前端项目
cd /Users/kaiyiwang/Code/java/RuoYi-Vue/ruoyi-ui
# 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org
# 安装依赖
npm install
# 构建生产环境
npm run build:prod

注：执行完成后在ruoyi-ui文件夹下面会生成一个dist文件夹

3. 后端项目

#进入后端项目目录
cd /Users/kaiyiwang/Code/java/RuoYi-Vue/ruoyi
#maven编译打包
#source ~/.bash_profile (重新加载mvn)
mvn clean install -DskipTests

注：执行完成后在/Users/kaiyiwang/Code/java/RuoYi-Vue/ruoyi/target/文件夹下面会生成一个ruoyi.jar文件。

4. nginx配置文件

附件见：文章最后

需要修改的地方，我用红色标注了

5.IDEA导入项目

5.1、IDEA本地导入项目，然后pom.xml -》maven下载包

5.2、创建数据库，导入数据
创建数据库ry-vue并导入数据脚本ry_20191008.sql，quartz.sql

5.3、修改数据库连接
编辑resources目录下的application-druid.yml
url: 服务器地址
username: 账号
password: 密码

5.4、修改日志、上传路径
由于是在Mac本地运行，所以，需要修改固定的配置路径
logback.xml 更改日志路径

<!-- 日志存放路径 -->
    <property name="log.path" value="/Users/kaiyiwang/Code/java/other/ruoyi/logs" />

application.yml 更改上传路径：

# 文件路径 示例（ Windows配置D:/ruoyi/uploadPath，Linux配置 /home/ruoyi/uploadPath）
  profile: /Users/kaiyiwang/Code/java/other/ruoyi/uploadPath

5.5、系统运行

后端运行：
打开运行

com.ruoyi.RuoYiApplication.java

如果只启动了后台系统，浏览器地址栏输入127.0.0.1:8080 则会显示:

前端运行：

# 进入项目目录
cd ruoyi-ui

# 本地开发 启动项目
npm run dev

启动成功：

➜  ruoyi-ui git:(master) ✗ npm run dev

> ruoyi@2.2.0 dev /Users/kaiyiwang/Code/java/RuoYi-Vue/ruoyi-ui
> vue-cli-service serve

 INFO  Starting development server...
 10% building 2/2 modules 0 activeℹ ｢wds｣: Project is running at http://0.0.0.0:1024/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /Users/kaiyiwang/Code/java/RuoYi-Vue/ruoyi-ui/public
ℹ ｢wds｣: 404s will fallback to /index.html
 98% after emitting CopyPlugin                                                e
 DONE  Compiled successfully in 74119ms                             上午12:08:50


  App running at:
  - Local:   http://localhost:1024/
  - Network: http://192.168.1.3:1024/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

前后端系统都启动后，浏览器地址栏输入http://localhost:1024/（默认账户 admin/admin123），弹出登录页面,若能正确展示登录页面，并能成功登录，菜单及页面展示正常，则表明环境搭建成功。

这时候虽然前端页面能打开，但是无法访问到后台系统，因为连接不到redis，所以还需要启动redis

mac安装redis方法：
①、使用mac的包管理工具brew一行命令搞定安装。若未安装brew，命令行先输入以下命令安装brew。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

②、安装redis

brew install redis@3.2 #后面@接版本号可指定版本

If you need to have redis@3.2 first in your PATH run:
  echo 'export PATH="/usr/local/opt/redis@3.2/bin:$PATH"' >> ~/.zshrc


To have launchd start redis@3.2 now and restart at login:
  brew services start redis@3.2
Or, if you don't want/need a background service you can just run:
  /usr/local/opt/redis@3.2/bin/redis-server /usr/local/etc/redis.conf

③、使用redis服务

1、启动redis服务
# brew services start redis
brew services start redis@3.2

2.关闭redis服务
brew services stop redis

3.重启redis服务
brew services restart redis

4.打开图形化界面
redis-cli

开启redis服务，然后重新刷新网页，即可获取到验证码，登录：

brew services start redis@3.2

然后输入验证码，我们可以看到漂亮的后台界面，至此，本地安装成功^_^：

三、前端vue-element-admin学习

本项目的前端框架是用的另一款优秀的开源框架 vue-element-admin，所以，在我们修改页面的时候必须要知道前端的框架是如何运行的，否则就会不知道如何下手。

首先看一下官方文档，对该框架有一个全局的认识：
vue-element-admin 前端框架文档

Vue采用的是JavaScript ES6新语法，所以，我们首先要看的懂这些新语法：
Javascript ES6快速学习

打包工具webpack快速学习，然后可以使用webpack和Vue进行组件开发
Webpack初体验

这篇博文是2017年写的Vue基础学习文章，如果不想看官方的文档，可以学习这篇文档可以掌握主要的基础点：
Vue.js基础学习

好了，学了上边的基础知识后，该前端框架作者写了一系列的博文帮助我们更深入的学习vue-element-admin框架：
手摸手，带你用vue撸后台 系列一（基础篇）

---

相关文章：
Centos7 部署若依前后端分离项目
若依框架RuoYi前后端分离项目导入IDEA及运行启动
Ruoyi-vue官方文档
MAC安装redis最简单的方法
Javascript ES6快速学习
vue-element-admin前端框架文档