【前后端分離的Web系統開發 Springboot Vue】系列教程（一）- 前后端分離項目概念介紹
本系列教程適合有一定編程語言基礎的，想往Web開發這塊發展的程序員閱讀，文章盡量用淺顯易懂的語言解釋一些復雜的概念，並會針對一些配置進行詳細的介紹。本系列文章采用的技術棧是Springboot+Vue
1. 前后端不分離的年代
什么是前后端不分離的Web系統？一言蔽之就是，“界面展示交互和功能實現都在一套代碼中實現”。大家還記得前后端不分離的年代，一個簡單的系統是怎么實現的嗎？
傳統的JSP
有相關開發基礎的讀者應該會想起來過去盛行一時的JSP技術。一個JSP文件里，既有Java代碼，又有HTML標簽，還有CSS的樣式。
那么在那時，一個點擊按鈕登錄系統的功能是怎么完成的？實現過程可以簡化為 “點擊按鈕 - 發送一個表單 -> 系統處理登錄的校驗 -> 登錄的結果 -> 頁面跳轉”。
但要注意的是，這整個過程都是由你JSP的編譯出來的Servlet實現的。簡單說，就是界面展示和業務處理的邏輯都是一個程序提供的，我們將這種形式的系統叫做前后端不分離的系統。
此外，傳統的桌面應用程序也可以叫做前后端不分離系統，不過這是廣義上的了，狹義上的前后端一般指的是Web應用。
弊端
使用JSP開發的Web應用曾是我在大學時學習的噩夢，因為當時我已經接觸了一些前后端分離的思想，特別是MVC的設計思路，於是對這種耦合度極高的構架及其反感。
顯而易見，在今天，前后端不分離的Web系統弊端極多：
- 不易開發，寫一個功能不但要兼顧實現，還要兼顧展示和交互，這對程序員的個人能力提出了極高的要求
- 不易維護，不易添加刪減功能。一個功能可能存在於多個地方，需要改動需要改動極多的內容
- 無法支持日益增長的訪問量。畢竟這類系統很難橫向擴展，瓶頸擺在那，更別提分布式之類的實現了。
以JSP為代表的這類前后端不分離的系統迅速在商業化的開發中被淘汰掉了，現在淪為一些大學過時的教學項目，等着被更新換代。
當然，有一段時期市面上也出現過一些完全由后端實現功能，使用文本模板將靜態化的界面填充上數據發送給用戶瀏覽器的一些實現方式，這種呢，雖然有了前后端分離的思想，但本質上前端的界面代碼也是由后端提供的，因此我也將其歸類為前后端不分離系統。
2. 前后端分離思想
一直在講，前后端分離，分離什么呢？可以這么說是分離兩個東西，一個是分離技術，一個是分離職責。當然歸根結底，核心目的是降低耦合。
分離職責
以前的Web項目，一個程序員不但要會寫Java代碼，也要會寫html、css，又搞前端又搞后端。到今天呢，職責有了細分，有了前端工程師和后端工程師。前端工程師就老老實實寫界面和交互，把頁面搞好看點，把速度搞得流暢點；后端工程師就老老實實實現你的功能，把系統設計得更容易擴展些，訪問壓力承受更大些。這樣，術業有專攻，世界也更加和諧了。
當然，對於Web項目來說，前后端分離，就是把展示界面的職責和實現業務的職責分開了。
分離技術
前后端分離開，相應的，技術也就分離開了。前端現在有自己的技術路線，后端也有自己的技術路線。
假設我是后端，我根本不關心前端采用什么技術實現的，我只要你前端能發送能適配api的請求，能接受響應，界面長啥樣，怎么一個交互方式都不在乎；反過來，假設我是前端，我也不用在乎后端是采用什么方式連接的數據庫，連接的哪個數據庫，怎么獲取的數據，我只要請求發給后端，后端能響應給我前端想要的數據就行了。
新的問題
綜上呢，前后端分離的好處是很多的，在目前的web系統開發的趨勢下，起碼在沒有什么重大革新的理念出現前，前后端分離的思想會是web開發的指導思想。
當然，壞處也是有的，前后端分離后，二者之間通過請求響應進行交互，就會出現一些安全的問題。如果系統設計不夠嚴謹，很容易被人找到漏洞，進而造成損失。此外呢，分離后，也增多了前端開發人員和后端開發人員扯皮的時間...
3. 一些流行的框架
由於前后端分離后，前后端之間的交互以定義好的協議進行（大部分是HTTP協議），前端后端的技術實現不再被對方所關心，也不會成為阻礙，因此前端后端都發展出了許多各式各樣的語言編寫的優秀框架。下面簡單列舉幾個常見的，耳熟能詳的框架。
Web前端框架
- Vue https://cn.vuejs.org（目前比較流行，也是我用的最順手的）
- React https://react.docschina.org/ （沒深入開發過，不評價）
- Angular https://angular.io （不了解，不評價）
- Layui https://www.layui.com/ （自帶組件的框架）
Web后端框架
- Django https://www.djangoproject.com/start/ （python編寫的web框架，好用！）
- Spring https://spring.io （java的web全家桶，目前可以說是最主流的web后端開發框架，好不好用不對比不知道，但是生態是及其豐富的，我用的最多的）
- Ruby http://www.ruby-lang.org/zh_cn/ （ruby語言編寫的，沒用過，不評價）
- Flask https://dormousehole.readthedocs.io/en/latest/ （微型Django，沒用過，不評價）
當然，框架雖多，從開發層面來說，適合項目的是最好的。假設你的Web項目是一個大型的企業級項目，涉及到分布式、高並發等聽起來就很難的技術點，你就不能選擇Flask這種框架來編寫了，並不是說這類框架沒辦法實現那些技術點，只是作為企業級項目，當然要選擇擁有最多解決方案，最海量的技術支撐的Spring全家桶了。假設你的項目只是課程設計的大作業，那么你可以采用Flask這類輕量級框架，快快寫出代碼然后把剩余時間拿去談戀愛...
技術選型很重要！
4. 結語
大家好，我是axiangcoding，今天呢，就開啟了構建前后端分離Web系統的系列教程這個天坑...我自己呢，是個初出茅廬的Web開發全棧程序員，寫了2年多的代碼，覺得自己積累了一點東西，就想分享出來，幫助大家少走一點彎路。特別是今年疫情，很多大學生覺得自己沒有一技之長要焦慮禿了吧...那就好好跟我學下去吧。
當然，如果你剛好是這個行業的大牛，發現我的文章中有錯誤，請務必指出！錯誤的教程會影響到很多人，我就曾經因為一個錯誤的教程差點把祖傳代碼搞砸了，至今記憶猶新。
5. 小廣告
本人承接中小型的Web系統項目、爬蟲程序和系統集成、PC桌面應用程序等項目，從設計、實現到部署一條龍服務。
當然如果你是在校學生，在課設、畢設方面也有類似的需求，也可以和我聯系，提供有償指導，注意，是指導哦。
如果你有意願想找我開發或者指導，請發生郵件至 wyxworkmail@163.com或者聯系QQ：3050419833，並簡單介紹一下你的需求。
如果我自認為有能力承擔你的項目或者接受你的求教，我會在第一時間反饋的哦