一個實際的案例介紹Spring Boot + Vue 前後端分離
介紹
最近在工作中做個新專案，後端選用Spring Boot，前端選用Vue技術。眾所周知現在開發都是前後端分離，本文就將介紹一種前後端分離方式。
常規的開發方式
採用Spring Boot 開發專案開發專案常規的方式其實很簡單，無非還是採用原來Spring Mvc那一套，建控制器（Controller）然後建方法（action）再新增模板引擎（spring boot 推薦使用thymeleaf）這樣開發開起來其實也沒有大問題，畢竟是採用了MVC的思想，在一定程度上開發起來還是很方便的。但是如果在分工很細的情況下，這裡前端後端是是分離開的，那麼假如前端的同學需要加個頁面那麼就要找後端得到同學給他加，想想一個複雜的專案，好多頁面，這樣開發方式肯定不是一個好的方案，如何解決這個問題呢？讓我們慢慢的一步一步的深入解答。
MVVM
什麼是MVVM？其實這是一個前端概念，本人是後端開發，其實對前端不是很瞭解，但是本人也是.Net開發人員，.Net中的WPF中其中一個核心是MVVM，最近手上一個專案也在用WPF，所以對MVVM還是有點個人的理解。從表面上理解Model-View-ViewModel那就是實體-檢視-檢視實體，好像有點明白，是不是實體可以到檢視，檢視也可以到實體，在想下，是不是資料可以從實體到檢視，也可以從檢視到實體，在用一個高大上的名字，那就是資料雙向繫結。是的MVVM其實就是一種資料雙向繫結的思想。
SPA(Single Page Application)
SPA翻譯成中文就是單頁面應用，其實從名字也可以看出來，所謂的單頁面應用，就是整個web專案只需要一個頁面就可以，這個怎麼實現的呢。我想起了我之前用jquery的時候（似乎現在說寫jquery有點被鄙視，哈哈），用jquery寫過瀑布流，瀑布流的思想很簡單，就是下拉觸發一個事件，在這個事件裡面請求一個後臺介面，然後得到結果，將結果append到頁面上。那單頁面是不是跟append效果類似。可能優化了效能。（前端的同學可能要噴我，本來高大上的東西，被我說的這麼low）。我已知的前端的單頁面框架有：vue，AngularJS。我們使用的是vue，這個東西不管前端還是後端估計不知道的人很少了。
Spring Boot + Vue 使前後端分離
之前說過了，常規的spring mvc 開發其實也很難完全的前後端分離。前端的同學要加頁面需要找後端的同學給加。那麼我們可以只建一個頁面，前端使用vue，構建一個單頁面應用。這樣前端可以完全不用依賴後端了，在專案建立的時候，就建立一個頁面，也不需要把js，css等靜態資源加到spring boot專案裡面，把靜態資源放到靜態資源伺服器上（可以放到CDN上），前端去維護靜態資源就好了。那麼其實只要在我們建立的一個頁面上加上一個總的JS，總的CSS，再在js裡面引用其他的js或者css，這樣在一個頁面上其實加的東西不多，這樣做前端對後端的依賴大大減少。那麼問題來了，就是都這樣，為何不乾脆不完全的把前端和後端分離開，後端連一個頁面都不用了，只提供介面。前端自己弄個服務來承載就好了。其實這樣行不行？
其實也行，但是至少需要考慮兩點：1.單獨為前端開一個服務來承載是不是合算2.解決介面呼叫跨域問題（其實就是在配個nginx轉發，但是增加發布配置）。其實還有可能遇到不得不用後端模板引擎來控制的情況。其實我覺得完全的前後端分離在我看來並不是一個合適的方案。所以我們仍然選用在後端提供一個頁面來供前端使用，前端在這個頁面上做單頁面應用的方式。前面為什麼介紹MVVM，個人觀點vue搭配mvvm會不會很爽（本人沒試過，但是寫wpf mvvm超級爽，所以推薦）。
Show Code
俗話說的好，別總BB，show your code。下面我開始搭建一個demo。在搭建之前先來在討論下vue，vue開發的時候需要自建一個服務，來開發除錯，開發完成了可以將vue打包編譯成普通的靜態資源js或者css。在正式的專案中將打包編譯後的靜態資源放到靜態資源伺服器上或者cnd上，我們直接用打包編譯後的靜態資源就好了。這樣在開發的時候，前端需要開啟一個服務來開發和測試，那麼在開發除錯的時候要呼叫後端的介面，就會出現跨域情況，所以在開發過程需要解決跨域問題。這在後面會配置一個nginx用以解決跨域問題。
後端搭建
建立Spring boot 專案我就不說了。我直接搭建展示目錄。
直接執行結果：
vue專案搭建
關於vue專案搭建我直接百度的（哈哈）。我在這裝X總結下。
- 安裝node.js =======> https://nodejs.org/en/download/ 輸入node -v，如果出現版本資訊即表示安裝成功。
- 安裝淘寶映象（不然會慢的一X） =======> npm install -g cnpm --registry=http://registry.npm.taobao.org
- 全域性安裝webpack =======> cnpm install webpack -g
- 全域性安裝vue-cli =======> cnpm install -g vue-cli
- (用webpack模板來建立一個vue專案)=======> vue init webpack my-project
- 安裝專案依賴 =======> cd my-project / cnpm install
- 啟動專案
- 編譯vue為靜態檔案 =======>npm run build
如下圖是我建立後的vue專案，已經執行結果。
編譯之後的檔案路徑：
我們看下index.html的內容。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<title>front</title>
<link href=/static/css/app.46520b505f33694e3eee33aba78b61eb.css rel=stylesheet>
</head><body>
<div id=app></div>
<script type=text/javascript src=/static/js/manifest.3322ba91290e7480ffb3.js>
</script>
<script type=text/javascript src=/static/js/vendor.13ccb5cb8cfc8644879c.js></script>
<script type=text/javascript src=/static/js/app.3c073d6bceb68d30b32f.js></script>
</body>
</html>其實就是引用js或者css檔案,沒有其他的，這相當與vue專案的入口，只引用一些主要的js或者的css，其他的js或者css，會在主要的js裡面import（java裡面叫新增包，其實應該是類似的概念）
反正檔案都是這樣的，據說可以設定。
以上相當於一個vue的Hello World。（有學一門新語言的感覺）
在spring boot 引入靜態檔案
為了演示一個靜態資源伺服器，我在本機開啟一個nginx，來承載靜態資源。
對nginx進行了簡單的配置，直接將根目錄指向vue生成的目錄
server {
listen 80;
server_name localhost;
root D:\xxx\xxx\xxx\springboot-vue-sample\front\dist;
index index.php index.html index.htm;
add_header Access-Control-Allow-Origin "*";
default_type 'text/html';
charset utf-8;
#rewrite_log on;
}執行一下看下效果：
現在在後端spring boot 裡面引入靜態資源。上面已經講了，index.html相當於vue的入口，那麼這個入口檔案的程式碼直接拷貝到後臺spring boot 裡面提供的一個頁面其實就能把後臺的這個頁面當成vue的啟動檔案。改造後的後臺頁面如下：
改造完成點選執行，執行結果為：
