介紹
最近在工作中做個新項目，后端選用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
- 安裝淘寶鏡像（不然會慢的一X）
- 全局安裝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的啟動文件。改造后的后台頁面如下：
改造完成點擊運行，運行結果為：
