概念普及
後端渲染
後端採用JSP，freemarker，jdea，babel等渲染框架對前端模板進行預編譯。
假設有這麼一組資料你想展示在介面上：
| name |
|---|
| MrXu |
| MrXu0 |
| MrXu1 |
<#list list as item>
<div class="font">姓名:${item.name}</div>
</#list>
複製程式碼以上採取的是freemarker語法進行的html預編譯，編譯的結果如下:
<div class="font">姓名:MrXu</div>
<div class="font">姓名:MrXu1</div>
<div class="font">姓名:MrXu2</div>
複製程式碼在沒有Vue，React，Angular的年代（此處指代任何的前端渲染框架），不借助後端渲染工具你想介面上根據資料實現介面效果你需要多少步驟:
- 1.ajax請求
- 2.寫一大堆加號拼接資料:
var model +="<div>" +list[i].name + "</div>"
複製程式碼- 3.獲取某個元素新增到元素裡面
現在大部分人應該都沒感受過拼接字串的恐懼。
前後端分離
你如果瞭解APP跟後端的開發，你會很簡單的瞭解這個概念。APP開發的時候如果介面文件齊全都不需要跟後端開發人員產生交流就可以實現一個完整的專案（理想狀態下）。像現在的各種前端腳手架，都能夠幫你快速的實現一個簡易的前端專案。
原因
像很多非網際網路公司，技術並不是第一生產力，做專案還是比較保守的，不可能快速迭代技術。一切以“穩”字為主。如果沒有巨大的誘惑是不會迭代技術的，畢竟像Jquery，十幾年的沉澱，幾乎滿足各種要求，非常穩定。
那麼這個巨大的誘惑是什麼呢？看我慢慢分析。
我們公司優先推出的是一套APP，現在要開發微信商城。這樣就確保了後端其實已經有一套成熟的介面能夠滿足業務需要了。如果前端還採用後端渲染的模式將面臨其中大部分的介面重寫，維護倆遍的問題。這可不是一個很小的工作量，並且還會一直迭代這就是目前面臨的主要問題，於是我給公司提供了以下三種方案：
- 1.採用後端渲染的方式，部分介面我自己藉助框架渲染，例如購物車這種大量介面互動的介面。開發速度快。但是後期轉型極其麻煩
- 2.後端統一配置前端介面，將路由許可權放寬，由前端自由把握，不在採用後端渲染，所有介面完全由前端自由渲染。開發方向往前端偏移，但是開發速度較快，後期轉型要容易的多
- 3.採用網上的各種腳手架進行SPA開發模式。一步到位，不存在轉型問題，但是開發速度慢
以上的開發速度是基於我自己的公司現狀分析的，上面的第三種模式開發速度3其實是最快的，其次是2最後是1,現在之所以慢是因為公司目前缺少符合這方面的人才。我雖然技術方面沒有問題，對相關的技術站早已經學會了，但是沒有實操經驗。在時間充足的情況下我還挺有把握的，但是專案工期是在太緊張了，我可不想閒著沒事就加班到凌晨4,5點的。最後我從延長時間，減少需求，新增人員三方面著手。希望能夠給與支援。不過沒有一方面能夠滿足我的，所以只能夠採取折中的辦法，使用了方案二，先把首版推上去。推上去之後再進行一次大的重構,從而徹底實現前後端分離。
技術選型
目前比較火的前端渲染框架主要是Angular，React，Vue。我選擇了比較輕量級的Vue，原因主要出於以下幾點：
- 1.簡單易學，Angular目前使用的是TS開發這使得學習成本提高，React官網對中文支援很差，Vue是中國人搞的，所以中文翻譯挺棒的，而且主要用於Web開發。
- 2.支援不打包只引入資源即可跑專案，適合目前的方案
介面佈局採用rem佈局，原因如下：
- 1.可以跟設計圖同尺寸作圖，很方便
- 2.公司一直採用這種方式，已經習慣了這個套路。
不過也帶來了很多麻煩，這裡先賣個關子，後面再說。
資料請求axios：
- 1.採用了promise的方式，相當於對現在的ajax的一個擴充套件
- 2.擁有鉤子機制，可以監控攔截請求前，請求後狀態。
MintUI：
- 1.這是我接觸的第一個整合自Vue的UI框架
- 2.能夠支援一次性載入和分開載入
- 3.教程中文，上手簡單
- 4.由餓了麼團隊開發，大廠家莫名的細分
所以選擇這個有些任性，嘿嘿。以上的選擇也是為了後期進行完整的分離方案設計的，能夠最簡化工作量的移植。
後期完整的前後端分離方案
採用Vue的全家桶進行SPA模式開發，獲得更好的使用者體驗。
- 1.Vue-Router:路由管理系統，模擬瀏覽器的history機制，使用方便。不反人類
- 2.VueX：官方的解釋是這就像你的眼鏡，你自然知道什麼時候去用它。
- 3.axios：用來做資料請求
- 4.Mint：UI框架
- 5.npm：包管理工具
- 6.webpack：打包工具
- 7.Vue：資料渲染框架
對我的文章感興趣可以關注我的公眾號：
