部署 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前端框架文檔