第一個階段：后端渲染
后端路由（映射表）
后端處理url和頁面之間的映射關系。（control）
后端渲染
前端訪問一個url，后端通過jsp技術把頁面（和數據）渲染好，返回（html+css）給前端。
jsp：html+css+java，java代碼作用是從數據庫中讀取數據，並將它動態的放在頁面中。
這樣做的好處是，前端不需要去加載任何的js和css，可以直接交給瀏覽器展示，這樣也有利於seo的優化。
缺點是：整個頁面的模塊由后端人員編寫，如果前端開發要寫頁面，需要通過學習php和java等來編寫，而且通常情況下html代碼和數據以及對應的邏輯會混在一期，編寫和維護都是灰常糟糕的事情。
第二個階段：前后端分離
后端只提供API來返回數據，前端通過Ajax獲取數據, 並且可以通過JavaScript將數據渲染到頁面中，這樣做最大的優點就是前后端責任的清晰, 后端專注於數據上, 前端專注於交互和可視化上，並且當移動端(iOS/Android)出現后, 后端不需要進行任何處理, 依然使用之前的一套API即可。
在這個階段，前端訪問一個url，會先到靜態資源服務器拿html+css+js（有很多套），然后瀏覽器執行js/jquery異步去后端拿數據，最后渲染出來。
在這個階段，靜態服務器里面維護的路由映射是這樣的
html+css+js --> url1 頁面1
html+css+js --> url2 頁面2
html+css+js --> urln 頁面n
第三個階段：單頁面富應用
其實SPA最主要的特點就是在前后端分離的基礎上加了一層前端路由，也就是前端來維護一套路由規則。
SPA：Single Page Application
在這個階段，靜態服務器只會有一套html+css+js，當打開應用的時候會把整套html+css+js下載下來，然后在我們點擊的時候生成url，生成的url會通過前端路由去到已下載好的靜態資源去拿對應的組件，最后渲染出來。
前端路由（vue-router）：前端管理url和頁面之間的映射關系。
前端路由的核心是：改變URL，但是頁面不進行整體的刷新。
組件：url對應一個網頁，一個頁面一個組件