一個實際的案例介紹Spring Boot + Vue 先後端分離

時間 2019-11-21

標籤一個實際案例介紹 spring boot vue 後端分離欄目 Spring 简体版

原文原文鏈接

介紹

最近在工做中作個新項目，後端選用Spring Boot，前端選用Vue技術。衆所周知如今開發都是先後端分離，本文就將介紹一種先後端分離方式。javascript

常規的開發方式

採用Spring Boot 開發項目開發項目常規的方式其實很簡單，無非仍是採用原來Spring Mvc那一套，建控制器（Controller）而後建方法（action）再添加模板引擎（spring boot 推薦使用thymeleaf）這樣開發開起來其實也沒有大問題，畢竟是採用了MVC的思想，在必定程度上開發起來仍是很方便的。可是若是在分工很細的狀況下，這裏前端後端是是分離開的，那麼假如前端的同窗須要加個頁面那麼就要找後端獲得同窗給他加，想一想一個複雜的項目，好多頁面，這樣開發方式確定不是一個好的方案，如何解決這個問題呢？讓咱們慢慢的一步一步的深刻解答。php

MVVM

什麼是MVVM？其實這是一個前端概念，本人是後端開發，其實對前端不是很瞭解，可是本人也是.Net開發人員，.Net中的WPF中其中一個核心是MVVM，最近手上一個項目也在用WPF，因此對MVVM仍是有點我的的理解。從表面上理解Model-View-ViewModel那就是實體-視圖-視圖實體，好像有點明白，是否是實體能夠到視圖，視圖也能夠到實體，在想下，是否是數據能夠從實體到視圖，也能夠從視圖到實體，在用一個高大上的名字，那就是數據雙向綁定。是的MVVM其實就是一種數據雙向綁定的思想。css

SPA(Single Page Application)

SPA翻譯成中文就是單頁面應用，其實從名字也能夠看出來，所謂的單頁面應用，就是整個web項目只須要一個頁面就能夠，這個怎麼實現的呢。我想起了我以前用jquery的時候（彷佛如今說寫jquery有點被鄙視，哈哈），用jquery寫過瀑布流，瀑布流的思想很簡單，就是下拉觸發一個事件，在這個事件裏面請求一個後臺接口，而後獲得結果，將結果append到頁面上。那單頁面是否是跟append效果相似。可能優化了性能。（前端的同窗可能要噴我，原本高大上的東西，被我說的這麼low）。我已知的前端的單頁面框架有：vue，AngularJS。咱們使用的是vue，這個東西無論前端仍是後端估計不知道的人不多了。html

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用以解決跨域問題。vue

後端搭建

建立Spring boot 項目我就不說了。我直接搭建展現目錄。java

直接運行結果：node

vue項目搭建

關於vue項目搭建我直接百度的（哈哈）。我在這裝X總結下。jquery

安裝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項目，已經運行結果。
webpack

編譯以後的文件路徑：

咱們看下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的啓動文件。改造後的後臺頁面以下：

改造完成點擊運行，運行結果爲：

源代碼：https://github.com/applenele/springboot-vue-sample