鬆哥的書裡邊，其實有涉及到 Vue，但是並沒有詳細說過，原因很簡單，Vue 的資料都是中文的，把 Vue.js 官網的資料從頭到尾瀏覽一遍該懂的基本就懂了，個人感覺這個是最好的 Vue.js 學習資料 ，因此在我的書裡邊就沒有多說。但是最近總結小夥伴遇到的問題，感覺很多人對前後端分離開發還是兩眼一抹黑，所以今天鬆哥想和大家聊一下前後端分離以及 Vue.js 的一點事，算是一個簡單的入門科普吧。
前後端不分
- 後端模板：Jsp、FreeMarker、Velocity
- 前端模板：Thymeleaf
前後端不分，Jsp 是一個非常典型寫法，Jsp 將 HTML 和 Java 程式碼結合在一起，剛開始的時候，確實提高了生產力，但是時間久了，大夥就發現 Jsp 存在的問題了，對於後端工程師來說，可能不太精通 css ，所以流程一般是這樣前端設計頁面-->後端把頁面改造成 Jsp --> 後端發現問題 --> 頁面給前端 --> 前端不會Jsp。這種方式效率低下。特別是在移動網際網路興起後，公司的業務，一般除了 PC 端，還有手機端、小程式等，通常，一套後臺系統需要對應多個前端，此時就不可以繼續使用前後端不分的開發方式了。
在前後端不分的開發方式中，一般來說，後端可能返回一個 ModelAndView ，渲染成 HTML 之後，瀏覽器當然可以展示，但是對於小程式、移動端來說，並不能很好的展示 HTML（實際上移動端也支援HTML，只不過執行效率低下）。這種時候，後端和前端資料互動，主流方案就是通過 JSON 來實現。
前後端分離
前後端分離後，後端不再寫頁面，只提供 JSON 資料介面（XML資料格式現在用的比較少），前端可以移動端、小程式、也可以是 PC 端，前端負責 JSON 的展示，頁面跳轉等都是通過前端來實現的。前端後分離後，前端目前有三大主流框架：
- Vue
作者尤雨溪，Vue本身借鑑了 Angular，目前GitHubstar數最多，建議後端工程師使用這個，最大的原因是Vue上手容易，可以快速學會，對於後端工程師來說，能快速搭建頁面解決問題即可，但是如果你是專業的前端工程師，我會推薦你三個都去學習 。就目前國內前端框架使用情況來說，Vue 算是使用最多的。而且目前來說，有大量 Vue 相關的周邊產品，各種 UI 框架，開源專案，學習資料非常多。
- React
Facebook 的產品。是一個用於構建使用者介面的 js 庫，React 效能較好，程式碼邏輯簡單。
- Angular
AngularJS 是一款由 Google 維護的開源 JavaScript 庫，用來協助單一頁面應用程式執行。它的目標是透過 MVC 模式（MVC）功能增強基於瀏覽器的應用，使開發和測試變得更加容易。
Vue簡介
Vue (讀音 /vjuː/，類似於 view) 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合。另一方面，當與現代化的工具鏈以及各種支援類庫結合使用時，Vue 也完全能夠為複雜的單頁應用提供驅動。
- 只關注檢視層
- MVVM 框架
大家在使用 jQuery 過程中，摻雜了大量的 DOM 操作，修改檢視或者獲取 value ，都需要 DOM 操作，MVVM 是一種檢視和資料模型雙向繫結的框架，即資料發生變化，檢視會跟著變化，檢視發生變化，資料模型也會跟著變化，開發者再也不需要操作 DOM 節點。
如下一個簡單的九九乘法表讓大家感受一下 MVVM ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="num">
<table border="1">
<tr v-for="i in parseInt(num)">
<td v-for="j in i">{{j}}*{{i}}={{i*j}}</td>
</tr>
</table>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
num:9
}
});
</script>
</body>
</html>
複製程式碼使用者修改輸入框中的資料，引起變數的變化，進而實現九九乘法表的更新。
SPA
SPA（single page web application），單頁面應用，是一種網路應用程式或網站的模型，它通過動態重寫當前頁面來與使用者互動，而非傳統的從伺服器重新載入整個新頁面。這種方法避免了頁面之間切換打斷使用者體驗，使應用程式更像一個桌面應用程式。在單頁應用中，所有必要的程式碼（ HTML、JavaScript 和 CSS ）都通過單個頁面的載入而檢索，或者根據需要（通常是為響應使用者操作）動態裝載適當的資源並新增到頁面。SPA 有一個缺點，因為 SPA 應用部署後只有1個頁面，而且這個頁面只是一堆 js 、css 引用，沒有其他有效價值，因此，SPA 應用不易被搜尋引擎收錄，所以，一般來說，SPA 適合做大型企業後臺管理系統。
Vue 使用方式大致上可以分為兩大類：
- 直接將Vue在頁面中引入，不做 SPA 應用
- SPA應用
基本環境搭建
首先需要安裝兩個東西：
- NodeJS
- npm
直接搜尋下載 NodeJS 即可，安裝成功之後，npm 也就有了。安裝成功之後，可以 在 cmd 命令哈驗證是否安裝成功：
NodeJS 安裝成功之後，接下來安裝 Vue的工具：
npm install -g vue-cli # 只需要第一次安裝時執行
vue init webpack my-project # 使用webpack模板建立一個vue專案
cd my-project #進入到專案目錄中
npm install # 下載依賴（如果在專案建立的最後一步選擇了自動執行npm install，則該步驟可以省略）
npm run dev # 啟動專案
複製程式碼啟動成功後，瀏覽器輸入 http://localhost:8080 就能看到如下頁面：
執行 npm install 命令時，預設使用的是國外的下載源 ，可以通過如下程式碼配置為使用淘寶的映象：
npm config set registry https://registry.npm.taobao.org
複製程式碼修改完成後，就能有效提高下載的成功率。
Vue 專案結構介紹
Vue 專案建立完成後，使用 Web Storm 開啟專案，專案目錄如下：
- build 資料夾，用來存放專案構建指令碼
- config 中存放專案的一些基本配置資訊，最常用的就是埠轉發
- node_modules 這個目錄存放的是專案的所有依賴，即 npm install 命令下載下來的檔案
- src 這個目錄下存放專案的原始碼，即開發者寫的程式碼放在這裡
- static 用來存放靜態資源
- index.html 則是專案的首頁，入口頁，也是整個專案唯一的HTML頁面
- package.json 中定義了專案的所有依賴，包括開發時依賴和釋出時依賴
對於開發者來說，以後 99.99% 的工作都是在 src 中完成的，src 中的檔案目錄如下：
- assets 目錄用來存放資產檔案
- components 目錄用來存放元件（一些可複用，非獨立的頁面），當然開發者也可以在 components 中直接建立完整頁面。
- 推薦在 components 中存放元件，另外單獨新建一個 page 資料夾，專門用來放完整頁面。
- router 目錄中，存放了路由的js檔案
- App.vue 是一個Vue元件，也是專案的第一個Vue元件
- main.js相當於Java中的main方法，是整個專案的入口js
main.js 內容如下：
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
複製程式碼- 在main.js 中，首先匯入 Vue 物件
- 匯入 App.vue ，並且命名為 App
- 匯入router，注意，由於router目錄下路由預設檔名為 index.js ，因此可以省略
- 所有東西都匯入成功後，建立一個Vue物件，設定要被Vue處理的節點是 '#app'，'#app' 指提前在index.html 檔案中定義的一個div
- 將 router 設定到 vue 物件中，這裡是一個簡化的寫法，完整的寫法是 router:router，如果 key/value 一模一樣，則可以簡寫。
- 宣告一個元件 App，App 這個元件在一開始已經匯入到專案中了，但是直接匯入的元件無法直接使用，必須要宣告。
- template 中定義了頁面模板，即將 App 元件中的內容渲染到 '#app' 這個div 中。
因此，可以猜測，專案啟動成功後，看到的頁面效果定義在 App.vue 中
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
複製程式碼- App.vue 是一個vue元件，這個元件中包含三部分內容：1.頁面模板（template）；2.頁面指令碼（script）；3.頁面樣式（style）
- 頁面模板中，定義了頁面的 HTML 元素，這裡定義了兩個，一個是一張圖片，另一個則是一個 router-view
- 頁面指令碼主要用來實現當前頁面資料初始化、事件處理等等操作
- 頁面樣式就是針對 template 中 HTML 元素的頁面美化操作
需要額外解釋的是，router-view，這個指展示路由頁面的位置，可以簡單理解為一個佔位符，這個佔位符展示的內容將根據當前具體的 URL 地址來定。具體展示的內容，要參考路由表，即 router/index.js 檔案，該檔案如下：
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
複製程式碼- 這個檔案中，首先匯入了Vue物件、Router物件以及 HelloWorld 元件，
- 建立一個Router物件，並定義路由表
- 這裡定義的路由表，path為
/，對應的元件為 HelloWorld，即瀏覽器地址為/時，在router-view位置顯示 HelloWorld 元件
WebStorm 中啟動Vue
也可以直接在 webstorm 中配置vue並啟動，點選右上角進行配置：
然後配置一下指令碼 ：
配置完成後，點選右上角啟動按鈕，就可以啟動一個 Vue 專案，如下：
專案編譯
這麼大一個前端專案，肯定沒法直接釋出執行，當開發者完成專案開發後，將 cmd 命令列定位到當前專案目錄，然後執行如下命令對專案進行打包：
npm run build
複製程式碼打包成功後，當前專案目錄下會生成一個 dist 資料夾，這個資料夾中有兩個檔案，分別是 index.html 和 static ，index.html 頁面就是我們 SPA 專案中唯一的 HTML 頁面了，static 中則儲存了編譯後的 js、css等檔案，專案釋出時，可以使用 nginx 獨立部署 dist 中的靜態檔案，也可以將靜態檔案拷貝到 Spring Boot 專案的 static 目錄下，然後對 Spring Boot 專案進行編譯打包釋出。
總結
因為鬆哥的讀者以後端程式猿居多，也有少量前端程式猿，因此本文鬆哥想從一個後端程式猿的角度來帶大家理解一下前後端分離以及 Vue 的一些基本用法，也歡迎專業的前端工程師出來拍磚。
關注公眾號牧碼小子，專注於 Spring Boot+微服務，定期視訊教程分享，關注後回覆 Java ，領取鬆哥為你精心準備的 Java 乾貨！
