松哥的書里邊，其實(shí)有涉及到 Vue，但是并沒有詳細(xì)說(shuō)過，原因很簡(jiǎn)單，Vue 的資料都是中文的，把 Vue.js 官網(wǎng)的資料從頭到尾瀏覽一遍該懂的基本就懂了，個(gè)人感覺這個(gè)是最好的 Vue.js 學(xué)習(xí)資料 ，因此在我的書里邊就沒有多說(shuō)。但是最近總結(jié)小伙伴遇到的問題，感覺很多人對(duì)前后端分離開發(fā)還是兩眼一抹黑，所以今天松哥想和大家聊一下前后端分離以及 Vue.js 的一點(diǎn)事，算是一個(gè)簡(jiǎn)單的入門科普吧。

前后端不分

后端模板：Jsp、FreeMarker、Velocity 前端模板：Thymeleaf

前后端不分，Jsp 是一個(gè)非常典型寫法，Jsp 將 HTML 和 Java 代碼結(jié)合在一起，剛開始的時(shí)候，確實(shí)提高了生產(chǎn)力，但是時(shí)間久了，大伙就發(fā)現(xiàn) Jsp 存在的問題了，對(duì)于后端工程師來(lái)說(shuō)，可能不太精通 css ，所以流程一般是這樣前端設(shè)計(jì)頁(yè)面-->后端把頁(yè)面改造成 Jsp --> 后端發(fā)現(xiàn)問題 --> 頁(yè)面給前端 --> 前端不會(huì)Jsp。這種方式效率低下。特別是在移動(dòng)互聯(lián)網(wǎng)興起后，公司的業(yè)務(wù)，一般除了 PC 端，還有手機(jī)端、小程序等，通常，一套后臺(tái)系統(tǒng)需要對(duì)應(yīng)多個(gè)前端，此時(shí)就不可以繼續(xù)使用前后端不分的開發(fā)方式了。

在前后端不分的開發(fā)方式中，一般來(lái)說(shuō)，后端可能返回一個(gè) ModelAndView ，渲染成 HTML 之后，瀏覽器當(dāng)然可以展示，但是對(duì)于小程序、移動(dòng)端來(lái)說(shuō)，并不能很好的展示 HTML（實(shí)際上移動(dòng)端也支持HTML，只不過運(yùn)行效率低下）。這種時(shí)候，后端和前端數(shù)據(jù)交互，主流方案就是通過 JSON 來(lái)實(shí)現(xiàn)。

前后端分離

前后端分離后，后端不再寫頁(yè)面，只提供 JSON 數(shù)據(jù)接口（XML數(shù)據(jù)格式現(xiàn)在用的比較少），前端可以移動(dòng)端、小程序、也可以是 PC 端，前端負(fù)責(zé) JSON 的展示，頁(yè)面跳轉(zhuǎn)等都是通過前端來(lái)實(shí)現(xiàn)的。前端后分離后，前端目前有三大主流框架：

Vue

作者尤雨溪，Vue本身借鑒了 Angular，目前GitHubstar數(shù)最多，建議后端工程師使用這個(gè)，最大的原因是Vue上手容易，可以快速學(xué)會(huì)，對(duì)于后端工程師來(lái)說(shuō)，能快速搭建頁(yè)面解決問題即可，但是如果你是專業(yè)的前端工程師，我會(huì)推薦你三個(gè)都去學(xué)習(xí) 。就目前國(guó)內(nèi)前端框架使用情況來(lái)說(shuō)，Vue 算是使用最多的。而且目前來(lái)說(shuō)，有大量 Vue 相關(guān)的周邊產(chǎn)品，各種 UI 框架，開源項(xiàng)目，學(xué)習(xí)資料非常多。

React

Facebook 的產(chǎn)品。是一個(gè)用于構(gòu)建用戶界面的 js 庫(kù)，React 性能較好，代碼邏輯簡(jiǎn)單。

Angular

AngularJS 是一款由 Google 維護(hù)的開源 JavaScript 庫(kù)，用來(lái)協(xié)助單一頁(yè)面應(yīng)用程序運(yùn)行。它的目標(biāo)是透過 MVC 模式（MVC）功能增強(qiáng)基于瀏覽器的應(yīng)用，使開發(fā)和測(cè)試變得更加容易。

Vue簡(jiǎn)介

Vue (讀音 /vjuː/，類似于 view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue 的核心庫(kù)只關(guān)注視圖層，不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫(kù)結(jié)合使用時(shí)，Vue 也完全能夠?yàn)閺?fù)雜的單頁(yè)應(yīng)用提供驅(qū)動(dòng)。