程序員都在說前後端分離，開發崗位也被很明確的分成了前後端工程師，很多大學的剛進入計算機專業的小夥伴和打算進入計算機行業的朋友，通常會有這些問題：
-
究竟什麼是前後端呢？
-
前後端分離又是什麼呢？
-
爲什麼會有所謂的前後端分離這一概念呢？
-
如何實現前後端分離呢？
-
前後端各自該做些什麼？
1.1 前端的基本概念：
要理解什麼是前後端，
-
首先讓我們從最簡單的字面意思來理解，前端指的自然就是我們尋常人所見到的軟件界面。
-
需要注意的是，由於近年來神奇的各種框架，web api的日益完善以及SPA(Single Page Application)等形式的逐漸普及，前端早已不只是單指web的B/S架構，現在的前端已經將“罪惡”的雙手伸向了所有的用戶體驗界面（也就是所謂的Android，ios乃至桌面端）。
-
除了web常見的Angular（適合後端人員轉前端時學習和使用）,Vue,React,Selvet等MVVM框架以外，由於近幾年來H5+app以及微信小程序等形式的逐漸出現與流行，還有uniapp等多端方案的漸漸流行，Electron等開源框架的出現，JavaScript逐漸佔領了幾乎所有用戶界面。
前端程序員們津津樂道着這樣一句話：
凡是可以用 JavaScript 來寫的應用，最終都會用 JavaScript 來寫。——Atwood定律（Jeff Atwood在2007年提出）
雖然吹噓，但是不得不承認，JavaScript這門語言確實具有其獨特的魅力，也深受衆多人的喜愛。
前端，從廣義上來講，泛指一切用戶界面，即所有直接同用戶進行交互的界面。
1.2 後端的基本概念：
-
後端，就是指的用戶無法觸碰的位置，也就是服務器所在的位置，用戶無法看到的部分
-
後端通常的任務是存儲和檢索數據，遵循一定的業務邏輯和規則，同數據庫（可能位於另一臺服務器）進行相關交互（CRUD 增刪改查)，對數據進行業務邏輯相關的處理，並將處理結果返回給前端進行展示。
-
後端的基本技術通常包括網絡請求的接收和解析（即通過URL獲知該進行的相關操作），對數據庫的增刪改查，對各種數據的處理和封裝（此部分通常涉及較多的算法知識），主動對其他網絡資源的數據進行檢索和處理（爬蟲）以及其他知識。
相比在前端處於絕對霸主地位的JavaScript，後端的語言多種多樣，但就互聯網來說，Java，Python，NodeJs最爲常見，使用最爲廣泛。
而就web而言，各種語言有各自各種各樣的框架（Java的SSM,Node的Koa2,Python的Django等等）。
1.3 AJAX技術：
Ajax 即“Asynchronous Javascript And XML”（異步 JavaScript 和 XML）
單從名稱上看，似乎並不好理解，XML一門數據交換語言，JS是一門編程語言，Asyncchronous是異步的意思。它們有啥關係呢？
其實不必如此關心它的詞面意思
最簡單的理解：它是一門技術，一門“橋樑”技術，ajax技術使得前後端從此有了交換數據的位置。
也正是它的出現和廣泛應用，最後導致了前後端分離的出現。
ajax技術使得JavaScript能在不刷新頁面（即保持原頁面狀態不變化）的情況下，與服務器進行交互，從服務器拿到想要的數據（這種數據，該數據最常見的形式就是XML（沒落）與JSON（JavaScript Object Notation）
拿到數據之後，JavaScript通過操作DOM（瀏覽器節點文檔樹，也就是html元素）進行數據的修改，從而實現不改變頁面卻改變了頁面的顯示內容。
1.4 基本示意圖
2.1 前後端分離的基本概念與由來：
- 由於ajax技術的出現，使得用戶界面不再需要關心後端是如何實現數據修改（因爲不再需要通過刷新界面和改變URL來切換不同的顯示界面）
- 前端只需要關心從哪個URL（後端路由），通過哪種方式（GET/POST等）能夠拿到數據或者提示相關數據的變更並返回相應結果（成功，或者失敗），而不再需要關心後臺如何編寫，具體使用什麼語言實現，也就是說後端的任何操作，前端都不需要再關心，只需要通過URL拿到相關的數據，就能在用戶界面顯示想要的效果。
- 而後端也不再需要關心用戶通過URL，需要展示哪張由原本動態渲染出來的界面，只需要編寫接口，提供與相關URL對應的http請求的數據，進行相關的操作，將數據轉換爲JSON併發送對應http請求。
- 於是爲了解耦的更徹底，也爲了程序員們能更好的專精於某一項具體的業務，前後端分離就成了不得不進行的任務與趨勢。
從此前端人員專門負責用戶的交互，維護用戶的交互體驗，並通過http請求進行相關的數據請求與展示操作。
而後端人員則專門對請求進行解析（對params,query等屬性的處理，從而明白自己該幹什麼），對相關數據進行檢索或存儲，並在處理過後返回給前端。
這就是前後端分離的內容。
2.2 前後端分離的實現
以一段JavaScript中ES6的fetch函數爲例：
fetch("http://**.***.***.***:3000/api/search?name=kk")
.then(res => res.json())
.then(res => {
console.log(res);
this.newData = res;
console.log(this.newData);
});
前端可以通過這段代碼請求到部署在http://**.***.***.***:3000/api/search?name=kk
上的後端項目，並得到相關的請求數據res(response的縮寫)
而後端(以一個簡單的反向代理服務器爲例子)
var Koa = require("koa");
var superagent = require("superagent");
var cors = require('koa2-cors');
var path = "";
var app = new Koa();
app.use(cors());
var ans = {};
function agent(path) {
superagent
.get(path)
.then(res => {
// console.log(res.text);
ans = JSON.parse(res.text);
console.log(ans);
})
.then(res => {
app.use(async (ctx, next) => {
await next();
ctx.response.type = "application/javascript";
ctx.response.body = ans;
});
app.listen(3000);
});
}
console.log("server start at http://localhost:3000");
agent("https://****/**/**");
首先通過框架創建相關網絡連接對象，並使其監聽對應3000端口，然後將處理後的JSON數據發送到http協議的body部分
這就是ajax交互的大概示例。
2.3 前後端路線的選擇
很多小夥伴糾結，我到底是該學前端好呢？還是學後端好呢？
嗯，學術了這麼久，那就說句實在話，
腳下的路，如果不是自己的選擇，那麼旅途的終點在哪兒，也沒人知道
—《鎮魂街》
其實兩邊的基礎知識，乃至背後涵蓋的計算機網絡等相關知識，都是必定要學習完成，才能算得上畢業的。
也就是說，大可以都認真接觸一番。
實踐，纔是最好的老師。
感謝閱讀，關於前後端路由以及SPA建議看另外一篇博客：