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

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

1、管理系统界面

2、本地部署

1. 克隆项目到本地

#进入项目目录
cd /Users/kaiyiwang/Code/java/
git clone git@gitee.com: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.一、IDEA本地导入项目，而后pom.xml -》maven下载包

5.二、建立数据库，导入数据
建立数据库ry-vue并导入数据脚本ry_20191008.sql，quartz.sql

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

5.四、修改日志、上传路径
因为是在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.五、系统运行

后端运行：
打开运行

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服务

一、启动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

而后输入验证码，咱们能够看到漂亮的后台界面，至此，本地安装成功^_^：

3、前端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前端框架文档