大家好帐萎，我是IT修真院武漢分院第5期的學(xué)員朱英杰比伏，一枚正直純潔善良的WEB前端程序員。
1.背景介紹
前后端分離中的SPA和JSP是什么疆导？
SPA：單頁Web應(yīng)用（Single-page application赁项，SPA），就是只有一張Web頁面的應(yīng)用， 是加載單個HTML頁面并在用戶與應(yīng)用程序交互時動態(tài)更新該頁面的Web應(yīng)用程序悠菜。
JSP：JSP全名為Java Server Pages舰攒，中文名叫java服務(wù)器頁面 意思是基于JAVA服務(wù)器的網(wǎng)頁技術(shù)，是一種動態(tài)網(wǎng)頁開發(fā)技術(shù), 使用JSP標(biāo)簽在HTML網(wǎng)頁中插入Java代碼悔醋。跟asp,php一樣摩窃，都是網(wǎng)頁制作用的語言。
2.知識剖析
①.JSP的特點
1. 跨平臺
2. 業(yè)務(wù)代碼分離
3. 組件重用
4篙顺、繼承Java Servlet功能
5.偶芍、預(yù)編譯
1.客戶端請求
2.服務(wù)端的servlet或controller接收請求（路由規(guī)則由后端制定充择，整個項目開發(fā)的權(quán)重大部分在后端）
3.調(diào)用service代碼完成業(yè)務(wù)邏輯
4.返回jsp
5.jsp展現(xiàn)一些動態(tài)的代碼
②SPA的特點
1.速度-更好的用戶體驗德玫，讓用戶在web app感受native app的速度和流暢。
2.MVC-經(jīng)典MVC開發(fā)模式椎麦，前后端各負(fù)其責(zé)宰僧，扯皮現(xiàn)象會少很多。
3.ajax-重前端观挎，業(yè)務(wù)邏輯全部在本地操作琴儿，數(shù)據(jù)都需要通過AJAX同步、提交嘁捷。
4.路由-在URL中采用#號來作為當(dāng)前視圖的地址,改變#號后的參數(shù)造成，頁面并不會重載
1.瀏覽器發(fā)送請求
2.直接到達(dá)html頁面（路由規(guī)則由前端制定，整個項目開發(fā)的權(quán)重前移）
3.html頁面負(fù)責(zé)調(diào)用服務(wù)端接口產(chǎn)生數(shù)據(jù)（通過ajax等等雄嚣，后臺返回json格式數(shù)據(jù)）
4.填充html晒屎，展現(xiàn)動態(tài)效果，在頁面上進(jìn)行解析并操作DOM缓升。
3.常見問題
為什么要前后端分離鼓鲁？
4.解決方案
1. 徹底解放前端
前端不再需要向后臺提供模板或是后臺在前端html中嵌入后臺代碼，如：
這是前后端耦合的港谊，可讀性差骇吭。
2. 提高工作效率，分工更加明確
前后端分離的工作流程可以使前端只關(guān)注前端的事歧寺，后臺只關(guān)心后臺的活燥狰， 兩者開發(fā)可以同時進(jìn)行，在后臺還沒有時間提供接口的時候斜筐，前端可以先將 數(shù)據(jù)寫死或者調(diào)用本地的json文件即可碾局，頁面的增加和路由的修改也不必再 去麻煩后臺，開發(fā)更加靈活奴艾。
3. 局部性能提升
通過前端路由的配置净当，我們可以實現(xiàn)頁面的按需加載，無需一開始加載首頁便 加載網(wǎng)站的所有的資源，服務(wù)器也不再 需要解析前端頁面像啼，在頁面交互及用戶體驗上有所提升俘闯。
單頁web的痛點和JSP開發(fā)的痛點
①單頁web的痛點
1.SEO不友好。
2.剛開始的時候加載可能慢很多
3.用戶操作需要寫邏輯忽冻，前進(jìn)真朗、后退等；
4.頁面復(fù)雜度提高很多
②JSP開發(fā)的痛點
1.jsp上動態(tài)資源和靜態(tài)資源全部耦合在一起僧诚，服務(wù)器壓力大遮婶， 因為服務(wù)器會收到各種靜態(tài)資源的http請求，動態(tài)代碼的等等湖笨。
2.前端工程師做好html后旗扑，需要由后端的java工程師來將html修改成jsp頁面， 包括各種文件的路徑慈省，出錯率較高（因為頁面中經(jīng)常會出現(xiàn)大量的js代碼）臀防， 修改問題時需要雙方協(xié)同開發(fā)，效率低下边败。
3.jsp必須要在支持java的web服務(wù)器里運行（例如tomcat/resin/jboss/weblogic等）袱衷，性能提不上來。
4.第一次請求jsp笑窜，必須要在web服務(wù)器中編譯成servlet致燥，第一次運行會較慢。
5.每次請求jsp都是訪問servlet再用輸出流輸出的html頁面排截，效率沒有直接使用html高（記住是每次喲~~~內(nèi)存喲嫌蚤，IO喲）。
6.如果在生產(chǎn)環(huán)境中匾寝，發(fā)現(xiàn)了前端的bug搬葬，讓前端工程師來調(diào)試bug，這個時候的頁面已經(jīng)很混亂了艳悔，呵呵急凰，他會遇到很多痛點。
7.如果jsp中的內(nèi)容很多猜年，頁面響應(yīng)會很慢抡锈，因為是同步加載
5.編碼實戰(zhàn)
6.擴(kuò)展思考
Web 前后端分離的意義大嗎？
1乔外、該網(wǎng)站前端變化遠(yuǎn)比后端變化頻繁床三，則意義大。
2杨幼、該網(wǎng)站尚處于原始開發(fā)模式撇簿，數(shù)據(jù)邏輯與表現(xiàn)邏輯混雜不清聂渊，則意義大。
3四瘫、該網(wǎng)站前端團(tuán)隊和后端團(tuán)隊分屬兩個領(lǐng)導(dǎo)班子汉嗽，技能點差異很大，則意義大找蜜。
4饼暑、該網(wǎng)站前端效果絢麗/跨設(shè)備兼容要求高，則意義大洗做。
7.參考文獻(xiàn)
ppt:https://ptteng.github.io/PPT/PPT/What%20are%20the%20processes%20of%20separation%20(SPA,%20etc.)%20and%20non%20separation%20(JSP,%20etc.)%20before%20and%20after%20separation.html#/
視頻：https://v.qq.com/x/page/b0518ypgdhk.html
日報：http://www.jnshu.com/daily/26666?dailyType=others&total=118&page=2&uid=9207&sort=0&orderBy=3
