作者：江南騷年
前言：
最近開始稍微接觸了點框架，本來是想學點開源項目什么的，但學起來耗得時間長，所以公眾號和博客的文章都慢慢的停更了許久。之前的java多線程和反射都還沒弄透，更別說java源碼和JVM了，學習這件事真的需要堅持、耐心和不斷總結 。github上滿是開源項目，建議找一個適合的項目練練，看看它用到的技術，一個個吃透了，以后用到相同的技術就越發熟練，看代碼如同行雲流水，毫不費勁。今天就推薦一個十分火爆的開源項目el-admin后台管理系統，結合前端Vue使用 ，是一個不錯的開胃菜。
項目簡介：
一個基於 Spring Boot 2.1.0 、 Spring Boot Jpa、 JWT、Spring Security、Redis、Vue的前后端分離的后台管理系統
開發文檔： https://docs.auauz.net/
體驗地址： https://auauz.net/
賬號密碼： admin/123456 (默認密碼都是123456)
| 后端源碼 | 前端源碼 | |
|---|---|---|
| github | https://github.com/elunez/eladmin | https://github.com/elunez/eladmin-web |
| 碼雲 | https://gitee.com/elunez/eladmin | https://gitee.com/elunez/eladmin-web |
這是用流行框架spring boot和vue實現的前后端分離的后台管理系統，不要被前后端分離嚇到了，只是前后端的代碼放在不同的地方而已，沒有什么特別重要的技術難點。
准備環境
上面已經給出了項目的源碼，把前后端的源碼下下來就行了，之后要准備什么呢？當然是准備跑項目的環境了，可以分為前端和后端的運行環境。在項目里，是需要后端的，所以先配置后端環境。那我們如何知道應該配好怎樣的環境呢？看github項目的介紹，README文檔里面也有介紹，以后可以直接看README就行了。既然是個Java項目，當然應該有Java的環境啦，這個可以直接用IDEA代替，社區版的也行，項目的文件就用IDEA打開就是了。
Redis數據庫安裝配置
如果沒有，可在公眾號內回復redis獲取。下載好后，應首先配置它的環境變量。分別打開redis-servr.exe和redis-cli.exe，如下：
mysql配置
項目里的eladmin.sql文件為MySQL啟動腳本，了解后，並不是雙擊運行。前提應該有mysql和數據庫管理器吧，沒有mysql可以在公眾號內的軟件工具哪里找，應該有，記得配置環境變量。另外管理工具就別用SQL Server了，sqlyog也不錯，官網有社區版的，就下的慢，推薦鏈接：https://pan.baidu.com/s/1PcVVkucLRf-49lHDPl6syA 提取碼：w27i 。先建一個項目數據庫。
接着用記事本或其他打開項目sql腳本，全選粘貼在詢問一欄，並再次全選右鍵執行查詢或摁F9。
結果沒報錯即可，都不要關閉這些。
后台spring
如果沒有還有spring這個框架，不用太擔心，這樣大部分是框架依賴，所以交給IDEA去干就行了，前提是別把網斷了，需要下依賴包。如何讓IDEA自動下呢？在文件那點擊setting設置，在Build,Execute那的Maven選項。
自動導入Maven項目
上圖把編譯器生成的字節碼類型改為和jdk相同版本，我這里用jdk11編譯，不然會報“不支持java 5版本，請使用6及以上版本”。更具體的操作可以自己搜索解決，比較簡單。同樣在項目的配置文件pom.xml里，需要添加相應的依賴屬性。
//添加下面幾個，如果沒有就加上去
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
<java.version>11</java.version>
<maven.compiler.source>11</maven.compiler.source>
<maven.compiler.target>11</maven.compiler.target>
這時候還不能自動下載依賴包，可以手動刷新或者說重新導入項目，右鍵項目文件，在maven選項那點reimport就行了。
耐心等待后，就可以啟動后台了，在eladmin-system下找到Apprun的Java文件，運行它。
結果如下，沒報錯就行！
前端配置
前端配置比較容易出錯，報錯了直接在命令行輸出一大堆信息，關鍵是解決起來非常麻煩。配置前端呢主要是為了能讓大家在本地就能看到效果，只有后端的項目，再好，沒前端相輔相成，項目跑的也沒意思！同樣的套路，同樣的逼數！首先咱們找到前端的文件夾，發現里面是沒有前端的依賴的，這個不足為奇。那咱們就需要配置依賴了。主要是node.js , node.js 是一個基於 Chrome V8 引擎的 JavaScirpt 運行環境，可以用於服務端編程。我們把它下載后需要配置它的環境變量，目的是為了用他的包管理工具npm(nodejs package management)，那有什么用呢?
1 允許用戶從NPM服務器下載別人編寫的第三方包到本地使用 2 允許用戶從NPM服務器下載並安裝別人編寫的命令行程序到本地使用 3 允許用戶將自己編寫的包或命令行程序上傳到NPM服務器供別人使用
在這之前，把文件夾里的package.json包修改一下，找到script那里，添加如下：
"scripts": { //如果沒有以下，則添加
"dev": "vue-cli-service serve",
"start": "node index.js",
"server": "nodemon index.js --ignore client",
"build": "vue-cli-service build",
},
我們下翻，還能看到前端的依賴dependencies和環境需要的版本，node在8.9及以上，npm在3.0.0及以上。
"engines": {
"node": ">=8.9",
"npm": ">= 3.0.0"
},
之后說白了，npm就是幫我們把前端需要的依賴給下了，方便生成前端頁面。具體的nodejs的下載安裝配置，可以搜索相關文章，這里就不多講了。命令行‘npm -v’查看npm版本，能看到輸出，說明配置成功。
npm config set registry https://registry.npm.taobao.org
-g //設置淘寶鏡像，加快下載依賴
cd進入前端文件夾內，輸入"npm install"，開始下載依賴，之后文件夾內會多出node_modules文件夾，命令行中不出現報錯就行，報錯的話可能有幾個原因。
- 網絡原因，下載中斷了，或下載較慢
- package依賴包沒配置好，應先配置好
- 版本低，檢查一下
- 如果不是以上原因，可能是某一個具體因素導致的，就需要仔細查看命令行報錯了，很可能是某個依賴沒有下好，可以直接進入文件夾查看，如果沒有則真的沒下好，可以：npm
uninstall xxx;再npm install xxx，重新來一遍。
然后一切順利，“npm run build: prod”；“npm run dev”；前端就跑起來了！結果如下：
當然我們不只是純粹為了演示項目，像里面的配置啊什么的，技術還需要我們一步一步吃透。要學會解決問題，學習路上總有風雨，只要努力專研，還是會有所收獲的！如果有更多問題就關注公眾號吧！加群了解更多！這次就分享到這了。
最后附上：
小碼blog
微信公眾號：菜雞干Java