接下來由(you)小(xiao)編簡單的列(lie)舉出(chu)幾個(ge)前端開(kai)發(fa)中必(bi)須(xu)要學會的知識(shi)：
第一階段：
HTML+CSS:
HTML進(jin)階、CSS進(jin)階、div+css布(bu)局、HTML+css整站開發、
JavaScript基礎(chu)：
Js基礎教程(cheng)、js內置(zhi)對象(xiang)常用方法、常見(jian)DOM樹操作大全(quan)、ECMAscript、DOM、BOM、定時器和焦點(dian)圖。
JS基本特效：
常見特效、例如：tab、導航(hang)、整頁(ye)滾動、輪播圖(tu)(tu)、JS制作(zuo)幻燈片、彈出(chu)層、手風(feng)琴菜單、瀑布流布局、滾動事件、滾差視圖(tu)(tu)。
JS高級特征：
正則表達式、排(pai)序算(suan)法、遞歸算(suan)法、閉(bi)包、函數節流、作(zuo)用域(yu)鏈(lian)、基(ji)于距離(li)運動框架、面(mian)向對(dui)象基(ji)礎(chu)、
JQuery：基(ji)礎(chu)使用
懸著器、DOM操作、特效和動畫、方法鏈、拖拽、變形、JQueryUI組件(jian)基本(ben)使用。第(di)二階段：
HTML5和移動(dong)Web開發
HTML5：
HTML5新語義標簽、HTML5表單、音頻和視頻、離線和本地存儲、SVG、WebSocket、Canvas.
CSS3:
CSS3新(xin)選擇器(qi)、偽元素、臉色(se)表(biao)示法、邊(bian)框、陰影(ying)、background系列屬(shu)性改(gai)變、Transition、動畫、景(jing)深(shen)(shen)和深(shen)(shen)透、3D效果制(zhi)作(zuo)、Velocity.js框架、元素進場、出場策略、炫酷(ku)CSS3網頁制(zhi)作(zuo)。
Bootstrap:
響應式概念、媒體查(cha)詢、響應式網站制作、刪(shan)格系(xi)統、刪(shan)格系(xi)統原理、Bootstrap常(chang)用模(mo)板(ban)、LESS和SASS。
移動Web開發：
跨終(zhong)端WEB和主流(liu)(liu)設備簡介、視(shi)口、流(liu)(liu)式布(bu)局、彈性盒子、rem、移動(dong)終(zhong)端JavaScript事件、手機中常見JS效(xiao)果制作(zuo)、Zepto.js、手機聚劃算頁面、手機滾屏(ping)。第(di)三階段：
HTTP服務和AJAX編程
WEB服務器基礎：
服(fu)(fu)務(wu)(wu)器(qi)基礎知識(shi)、Apache服(fu)(fu)務(wu)(wu)器(qi)和其他WEB服(fu)(fu)務(wu)(wu)器(qi)介(jie)紹、Apache服(fu)(fu)務(wu)(wu)器(qi)搭(da)建、HTTP介(jie)紹。
PHP基礎：
PHP基礎語(yu)法(fa)、使用PHP處理簡單的GET或者POST請(qing)求、
AJAX上篇：
Ajax簡介和(he)異步的(de)概念、Ajax框(kuang)架的(de)封裝、XMLHttpRequest對象詳細介紹方法(fa)、兼(jian)容性處理方法(fa)、Ajax框(kuang)架的(de)封裝、Ajax中(zhong)緩(huan)存問題(ti)、XML介紹和(he)使用。
AJAX下篇：
JSON和JSON解析、數據綁定和模板技術(shu)、JSONP、跨域技術(shu)、圖片預(yu)讀取和lazy-load技術(shu)、JQuery框架中的AjaxAPI、使用Ajax實(shi)現爆(bao)布流案例額。第四(si)階(jie)段：
面向對象進階
面向對象終極篇：
從內(nei)存(cun)角度(du)到理解(jie)JS面(mian)向對象、基本類(lei)型、復雜類(lei)型、原型鏈、ES6中的面(mian)向對象、屬性讀寫權限、設(she)置(zhi)器(qi)(qi)、訪問器(qi)(qi)。
面向對象三大特征：
繼承性、多態性、封裝性、接口。
設計模式：
面向(xiang)對象編(bian)程(cheng)思維(wei)、單例(li)模(mo)(mo)(mo)式(shi)(shi)、工(gong)廠(chang)模(mo)(mo)(mo)式(shi)(shi)、策略模(mo)(mo)(mo)式(shi)(shi)、觀察者模(mo)(mo)(mo)式(shi)(shi)、模(mo)(mo)(mo)板方法模(mo)(mo)(mo)式(shi)(shi)、代理模(mo)(mo)(mo)式(shi)(shi)、裝飾(shi)者模(mo)(mo)(mo)式(shi)(shi)、適(shi)配器(qi)模(mo)(mo)(mo)式(shi)(shi)、面向(xiang)切面編(bian)程(cheng)。第五階段：
封(feng)裝一個屬于(yu)自(zi)己(ji)的框(kuang)架
框架封裝基礎：
事件流、冒泡、捕獲、事件對象、事件框(kuang)(kuang)架、選擇框(kuang)(kuang)架。
框架封裝中級：
運(yun)(yun)動原(yuan)理、單物(wu)體運(yun)(yun)動框(kuang)架(jia)、多(duo)物(wu)體運(yun)(yun)動框(kuang)架(jia)、運(yun)(yun)動框(kuang)架(jia)面向(xiang)對象封(feng)裝。
框(kuang)架封裝高(gao)級和補充(chong)：
JQuery框(kuang)架雛形、可擴展性、模塊(kuai)化、封裝(zhuang)屬于傳智自(zi)己的框(kuang)架。第六階段(duan)：
模塊化組件開發
面向組件編程：
面(mian)向組(zu)件編(bian)程的方(fang)式(shi)、面(mian)向組(zu)件編(bian)程的實現(xian)原(yuan)理、面(mian)向組(zu)件編(bian)程實戰、基于組(zu)件化思想開發網站應用程序(xu)。
面向模塊編程：
AMD設計(ji)規(gui)范、CMD設計(ji)規(gui)范、RequireJS，LoadJS、淘寶的SeaJS。第七階段：
主流的流行框架
Web開發工作流：
GIT/SVN、Yeoman腳(jiao)手架(jia)、NPM/Bower依賴管理工具、Grunt/Gulp/Webpack。
MVC/MVVM/MVW框(kuang)架：
Angular.js、Backbone.js、Knockout/Ember。
常用庫：
React.js、Vue.js、Zepto.js。第八階段：
HTML5原生移動應用(yong)開發
Cordova：
WebApp/NativeApp/HybirdApp簡介、Cordova簡介、與PhoneGap之間的關系、開發(fa)環(huan)境搭建、Cordova實戰(創建項目，配置，編(bian)譯(yi)，調(diao)試，部(bu)署發(fa)布)。
Ionic：
Ionic簡介和同類(lei)對比、模板項目解析、常見組件及(ji)使用、結合Angular構建APP、常見效果(下拉(la)刷(shua)新，上拉(la)加載，側滑導(dao)航，選項卡)。
ReactNative：
ReactNative簡介(jie)、ReactNative環(huan)境配置、創建項(xiang)目，配置，編譯，調試，部署發布、原生模塊和UI組件(jian)、原生常(chang)用(yong)API。
HTML5+：
HTML5+中國(guo)產業聯(lian)盟(meng)、HTML5PlusRuntime環境、HBuilder開(kai)發(fa)工(gong)具、MUI框架、H5+開(kai)發(fa)和部(bu)署。第(di)九階(jie)段：
Node.js全棧開發：
快速入門：
Node.js發展(zhan)、生態圈、Io.js、Linux/Windows/OSX環境(jing)配(pei)置、REPL環境(jing)和控(kong)制臺程(cheng)序、異(yi)步(bu)編程(cheng)，非阻(zu)塞I/O、模塊概(gai)念，模塊管理工具(ju)、開發流(liu)程(cheng)，調試，測試。
核心模塊和對象：
全(quan)局對象(xiang)global，process，console，util、事(shi)件(jian)驅動(dong)，事(shi)件(jian)發射器、加密解密，路(lu)徑操作，序列化和反序列化、文(wen)件(jian)流操作、HTTP服務端(duan)與客(ke)戶端(duan)。
Web開發基礎：
HTTP協議，請求響應(ying)處理過程、關系(xi)型數(shu)據(ju)庫操作和(he)數(shu)據(ju)訪問(wen)、非關系(xi)型數(shu)據(ju)庫操作和(he)數(shu)據(ju)訪問(wen)、原生的Node.js開發Web應(ying)用程序、Web開發工作流、Node.js開發Blog案例。
快速開發框架：
Express簡介(jie)+MVC簡介(jie)、Express常(chang)用API、Express路由(you)模(mo)塊、Jade/Ejs模(mo)板引擎、使用Express重構(gou)Blog案例、Koa等其(qi)他(ta)常(chang)見MVC框架。
沒有滿意答案？試試 發布類(lei)似問題 或向 專家咨(zi)詢
專業人員(yuan)一(yi)對一(yi)解答(da)
前(qian)后端(duan)(duan)分(fen)離是一種常(chang)見的架構方式(shi)，它將(jiang)前(qian)端(duan)(duan)和后端(duan)(duan)的開(kai)發分(fen)離，使得前(qian)端(duan)(duan)負(fu)(fu)責(ze)頁面(mian)的展示和用戶交互，后端(duan)(duan)負(fu)(fu)責(ze)數(shu)據(ju)處(chu)理和業(ye)務邏輯。從產(chan)品的角(jiao)度來(lai)看，如何做到前(qian)后端(duan)(duan)分(fen)離的同時進(jin)行SEO優化，可以(yi)考慮以(yi)下幾個方面(mian)。
1. 網頁(ye)渲(xuan)染：前(qian)(qian)后端分離的架構中，前(qian)(qian)端負(fu)責頁(ye)面渲(xuan)染，因(yin)此(ci)需要(yao)確保頁(ye)面在搜索引擎(qing)爬(pa)取時能夠(gou)正(zheng)常渲(xuan)染。可以(yi)使用預(yu)渲(xuan)染、服務端渲(xuan)染等技術手段，將頁(ye)面內容提前(qian)(qian)生成，并返回給(gei)搜索引擎(qing)進行索引。
2. URL設計：合理的(de)(de)URL設計對于SEO優化非(fei)常重要。在(zai)前(qian)后端分離的(de)(de)架構(gou)中，可以通過使用用戶(hu)友好的(de)(de)URL，并且結合關鍵詞、標(biao)簽等(deng)元素，來提高頁(ye)面在(zai)搜索引擎中的(de)(de)排名。
3. 元數(shu)據(ju)優化：前后端分離的(de)(de)架構中(zhong)，后端可以通(tong)過接口返回適當的(de)(de)元數(shu)據(ju)，例如(ru)頁面標題、描(miao)述、關鍵詞(ci)等(deng)。這(zhe)些(xie)元數(shu)據(ju)對于搜索(suo)引擎的(de)(de)爬蟲非常重要，可以通(tong)過合理設置(zhi)來提高頁面在搜索(suo)結果中(zhong)的(de)(de)展示(shi)效果。
4. 內容可(ke)(ke)訪(fang)(fang)問(wen)性：確保前端頁面的(de)(de)內容對搜(sou)索(suo)(suo)引擎(qing)的(de)(de)爬蟲可(ke)(ke)訪(fang)(fang)問(wen)。避免使(shi)用一(yi)些搜(sou)索(suo)(suo)引擎(qing)無法解析的(de)(de)技(ji)術，例如基于JavaScript的(de)(de)交互組件。可(ke)(ke)以使(shi)用合(he)適的(de)(de)HTML標簽和屬性，來提高內容的(de)(de)可(ke)(ke)讀性和搜(sou)索(suo)(suo)引擎(qing)的(de)(de)理解能力。
5. 外(wai)鏈(lian)建(jian)設(she)：在前(qian)后端分離(li)的(de)架構中(zhong)，可以通(tong)過(guo)(guo)合理設(she)置頁面(mian)(mian)的(de)鏈(lian)接，來引(yin)導搜(sou)索(suo)引(yin)擎(qing)爬蟲(chong)訪問和索(suo)引(yin)其他相關(guan)頁面(mian)(mian)。通(tong)過(guo)(guo)良(liang)好的(de)外(wai)鏈(lian)建(jian)設(she)，可以提高整個網站(zhan)在搜(sou)索(suo)引(yin)擎(qing)中(zhong)的(de)權(quan)重和曝(pu)光度。
前后端(duan)分離架構下的(de)SEO優化需要(yao)綜(zong)合考慮(lv)頁面(mian)渲染、URL設計、元數據優化、內容可(ke)訪問(wen)性(xing)和外鏈建設等(deng)因(yin)素。只有在全面(mian)考慮(lv)這(zhe)些方面(mian)，并合理運用相(xiang)關技術手(shou)段的(de)基礎(chu)上，才能夠(gou)實(shi)現前后端(duan)分離和SEO優化的(de)雙贏效果。
一個專(zhuan)業(ye)的(de)(de)前(qian)端開(kai)發(fa)(fa)工程師是必須掌(zhang)握前(qian)端開(kai)發(fa)(fa)三大基本基石(shi)HTML、CSS，JavaScript。光會這些還不夠，有(you)了這些語言還需要各(ge)種工具(ju)的(de)(de)支撐，比較常見的(de)(de)有(you)Dreamweaver，Sublime，HBuilder。還有(you)FontelloFontello 、Secureheaders、Visual Studio CodeVisual Studio Code。
工(gong)具(ju)只(zhi)能解(jie)決(jue)一些特(te)定(ding)問題，要(yao)解(jie)決(jue)更(geng)加全(quan)面的(de)(de)(de)問題就要(yao)接觸到框(kuang)架(jia)，三大基本框(kuang)架(jia)有Angular、React、Vue，以后(hou)還會接觸到更(geng)多(duo)Bootstrap、 Fbootstrapp、BootMetro、Gumby、IVORY、Kube這樣的(de)(de)(de)框(kuang)架(jia)。一個優秀的(de)(de)(de)前端開發工(gong)程師可能還要(yao)掌(zhang)握SEO、DOM、BOM、Ajax等技能，甚至，網(wang)站性能優化和服務器(qi)端的(de)(de)(de)相關基礎知識也是需要(yao)了解(jie)的(de)(de)(de)。
學(xue)會(hui)這些還不夠，前端開發(fa)是(shi)一門發(fa)展的(de)學(xue)科，不是(shi)學(xue)好了(le)就可以停止學(xue)習，后面還會(hui)接觸到更多新的(de)內容(rong)。
由此可(ke)見，要想學好前端，絕對不簡單，前端開(kai)發的(de)廣度(du)和深度(du)是其他(ta)行業所不能比擬的(de)，你必(bi)須付(fu)出不懈的(de)努力，才能收獲(huo)這份果實。
接下來由(you)小(xiao)編簡單的列(lie)舉出(chu)幾個(ge)前端開(kai)發(fa)中必(bi)須(xu)要學會的知識(shi)：
第一階段：
HTML+CSS:
HTML進(jin)階、CSS進(jin)階、div+css布(bu)局、HTML+css整站開發、
JavaScript基礎(chu)：
Js基礎教程(cheng)、js內置(zhi)對象(xiang)常用方法、常見(jian)DOM樹操作大全(quan)、ECMAscript、DOM、BOM、定時器和焦點(dian)圖。
JS基本特效：
常見特效、例如：tab、導航(hang)、整頁(ye)滾動、輪播圖(tu)(tu)、JS制作(zuo)幻燈片、彈出(chu)層、手風(feng)琴菜單、瀑布流布局、滾動事件、滾差視圖(tu)(tu)。
JS高級特征：
正則表達式、排(pai)序算(suan)法、遞歸算(suan)法、閉(bi)包、函數節流、作(zuo)用域(yu)鏈(lian)、基(ji)于距離(li)運動框架、面(mian)向對(dui)象基(ji)礎(chu)、
JQuery：基(ji)礎(chu)使用
懸著器、DOM操作、特效和動畫、方法鏈、拖拽、變形、JQueryUI組件(jian)基本(ben)使用。第(di)二階段：
HTML5和移動(dong)Web開發
HTML5：
HTML5新語義標簽、HTML5表單、音頻和視頻、離線和本地存儲、SVG、WebSocket、Canvas.
CSS3:
CSS3新(xin)選擇器(qi)、偽元素、臉色(se)表(biao)示法、邊(bian)框、陰影(ying)、background系列屬(shu)性改(gai)變、Transition、動畫、景(jing)深(shen)(shen)和深(shen)(shen)透、3D效果制(zhi)作(zuo)、Velocity.js框架、元素進場、出場策略、炫酷(ku)CSS3網頁制(zhi)作(zuo)。
Bootstrap:
響應式概念、媒體查(cha)詢、響應式網站制作、刪(shan)格系(xi)統、刪(shan)格系(xi)統原理、Bootstrap常(chang)用模(mo)板(ban)、LESS和SASS。
移動Web開發：
跨終(zhong)端WEB和主流(liu)(liu)設備簡介、視(shi)口、流(liu)(liu)式布(bu)局、彈性盒子、rem、移動(dong)終(zhong)端JavaScript事件、手機中常見JS效(xiao)果制作(zuo)、Zepto.js、手機聚劃算頁面、手機滾屏(ping)。第(di)三階段：
HTTP服務和AJAX編程
WEB服務器基礎：
服(fu)(fu)務(wu)(wu)器(qi)基礎知識(shi)、Apache服(fu)(fu)務(wu)(wu)器(qi)和其他WEB服(fu)(fu)務(wu)(wu)器(qi)介(jie)紹、Apache服(fu)(fu)務(wu)(wu)器(qi)搭(da)建、HTTP介(jie)紹。
PHP基礎：
PHP基礎語(yu)法(fa)、使用PHP處理簡單的GET或者POST請(qing)求、
AJAX上篇：
Ajax簡介和(he)異步的(de)概念、Ajax框(kuang)架的(de)封裝、XMLHttpRequest對象詳細介紹方法(fa)、兼(jian)容性處理方法(fa)、Ajax框(kuang)架的(de)封裝、Ajax中(zhong)緩(huan)存問題(ti)、XML介紹和(he)使用。
AJAX下篇：
JSON和JSON解析、數據綁定和模板技術(shu)、JSONP、跨域技術(shu)、圖片預(yu)讀取和lazy-load技術(shu)、JQuery框架中的AjaxAPI、使用Ajax實(shi)現爆(bao)布流案例額。第四(si)階(jie)段：
面向對象進階
面向對象終極篇：
從內(nei)存(cun)角度(du)到理解(jie)JS面(mian)向對象、基本類(lei)型、復雜類(lei)型、原型鏈、ES6中的面(mian)向對象、屬性讀寫權限、設(she)置(zhi)器(qi)(qi)、訪問器(qi)(qi)。
面向對象三大特征：
繼承性、多態性、封裝性、接口。
設計模式：
面向(xiang)對象編(bian)程(cheng)思維(wei)、單例(li)模(mo)(mo)(mo)式(shi)(shi)、工(gong)廠(chang)模(mo)(mo)(mo)式(shi)(shi)、策略模(mo)(mo)(mo)式(shi)(shi)、觀察者模(mo)(mo)(mo)式(shi)(shi)、模(mo)(mo)(mo)板方法模(mo)(mo)(mo)式(shi)(shi)、代理模(mo)(mo)(mo)式(shi)(shi)、裝飾(shi)者模(mo)(mo)(mo)式(shi)(shi)、適(shi)配器(qi)模(mo)(mo)(mo)式(shi)(shi)、面向(xiang)切面編(bian)程(cheng)。第五階段：
封(feng)裝一個屬于(yu)自(zi)己(ji)的框(kuang)架
框架封裝基礎：
事件流、冒泡、捕獲、事件對象、事件框(kuang)(kuang)架、選擇框(kuang)(kuang)架。
框架封裝中級：
運(yun)(yun)動原(yuan)理、單物(wu)體運(yun)(yun)動框(kuang)架(jia)、多(duo)物(wu)體運(yun)(yun)動框(kuang)架(jia)、運(yun)(yun)動框(kuang)架(jia)面向(xiang)對象封(feng)裝。
框(kuang)架封裝高(gao)級和補充(chong)：
JQuery框(kuang)架雛形、可擴展性、模塊(kuai)化、封裝(zhuang)屬于傳智自(zi)己的框(kuang)架。第六階段(duan)：
模塊化組件開發
面向組件編程：
面(mian)向組(zu)件編(bian)程的方(fang)式(shi)、面(mian)向組(zu)件編(bian)程的實現(xian)原(yuan)理、面(mian)向組(zu)件編(bian)程實戰、基于組(zu)件化思想開發網站應用程序(xu)。
面向模塊編程：
AMD設計(ji)規(gui)范、CMD設計(ji)規(gui)范、RequireJS，LoadJS、淘寶的SeaJS。第七階段：
主流的流行框架
Web開發工作流：
GIT/SVN、Yeoman腳(jiao)手架(jia)、NPM/Bower依賴管理工具、Grunt/Gulp/Webpack。
MVC/MVVM/MVW框(kuang)架：
Angular.js、Backbone.js、Knockout/Ember。
常用庫：
React.js、Vue.js、Zepto.js。第八階段：
HTML5原生移動應用(yong)開發
Cordova：
WebApp/NativeApp/HybirdApp簡介、Cordova簡介、與PhoneGap之間的關系、開發(fa)環(huan)境搭建、Cordova實戰(創建項目，配置，編(bian)譯(yi)，調(diao)試，部(bu)署發(fa)布)。
Ionic：
Ionic簡介和同類(lei)對比、模板項目解析、常見組件及(ji)使用、結合Angular構建APP、常見效果(下拉(la)刷(shua)新，上拉(la)加載，側滑導(dao)航，選項卡)。
ReactNative：
ReactNative簡介(jie)、ReactNative環(huan)境配置、創建項(xiang)目，配置，編譯，調試，部署發布、原生模塊和UI組件(jian)、原生常(chang)用(yong)API。
HTML5+：
HTML5+中國(guo)產業聯(lian)盟(meng)、HTML5PlusRuntime環境、HBuilder開(kai)發(fa)工(gong)具、MUI框架、H5+開(kai)發(fa)和部(bu)署。第(di)九階(jie)段：
Node.js全棧開發：
快速入門：
Node.js發展(zhan)、生態圈、Io.js、Linux/Windows/OSX環境(jing)配(pei)置、REPL環境(jing)和控(kong)制臺程(cheng)序、異(yi)步(bu)編程(cheng)，非阻(zu)塞I/O、模塊概(gai)念，模塊管理工具(ju)、開發流(liu)程(cheng)，調試，測試。
核心模塊和對象：
全(quan)局對象(xiang)global，process，console，util、事(shi)件(jian)驅動(dong)，事(shi)件(jian)發射器、加密解密，路(lu)徑操作，序列化和反序列化、文(wen)件(jian)流操作、HTTP服務端(duan)與客(ke)戶端(duan)。
Web開發基礎：
HTTP協議，請求響應(ying)處理過程、關系(xi)型數(shu)據(ju)庫操作和(he)數(shu)據(ju)訪問(wen)、非關系(xi)型數(shu)據(ju)庫操作和(he)數(shu)據(ju)訪問(wen)、原生的Node.js開發Web應(ying)用程序、Web開發工作流、Node.js開發Blog案例。
快速開發框架：
Express簡介(jie)+MVC簡介(jie)、Express常(chang)用API、Express路由(you)模(mo)塊、Jade/Ejs模(mo)板引擎、使用Express重構(gou)Blog案例、Koa等其(qi)他(ta)常(chang)見MVC框架。
前端是在瀏覽瀏覽器的(de)時候，它是網絡(luo)前臺(tai)的(de)部分，運(yun)行在pc端。
移動(dong)端等瀏(liu)覽器上展示(shi)給用(yong)(yong)戶瀏(liu)覽的(de)頁面，利(li)用(yong)(yong)完(wan)美的(de)動(dong)態(tai)設計，能夠給用(yong)(yong)戶帶來極(ji)高的(de)用(yong)(yong)戶體驗。
前(qian)端前(qian)端技(ji)術(shu)一般分為(wei)前(qian)端設計(ji)和前(qian)端開(kai)發(fa)，前(qian)端設計(ji)一般可以理解為(wei)網站上(shang)面(mian)的(de)視(shi)覺設計(ji)，前(qian)端開(kai)發(fa)則是網站的(de)前(qian)臺代碼(ma)實現。
前端開發(fa)又最基本的(de)(de)三(san)個(ge)核心，這也是(shi)必須掌握的(de)(de)三(san)個(ge)重要(yao)的(de)(de)核心，分(fen)別是(shi)HTML、CSS、JavaScript這三(san)個(ge)，在(zai)日常的(de)(de)生活中我們(men)接觸到的(de)(de)也很多，掌握了這三(san)個(ge)，在(zai)前端開發(fa)應付也會很輕松(song)。
分離的(de)痛點是分離后(hou)，接口提供不及(ji)時，文檔(dang)不完善，模擬數(shu)據不方(fang)便等。說(shuo)一(yi)下我們的(de)解決(jue)辦(ban)法：
1）webpack設置proxy，這個(ge)通過webpack文檔或GOOGLE一(yi)下可以解決。
2）第二(er)步就是需要(yao)在后(hou)端(duan)(duan)提供接(jie)口及數(shu)據和(he)接(jie)口文檔(dang)，而(er)因(yin)為前后(hou)端(duan)(duan)很可能(neng)是并(bing)行開發(fa)的(de)，所(suo)以(yi)在真(zhen)實接(jie)口出來(lai)之前需要(yao)前端(duan)(duan)模擬接(jie)口及數(shu)據，及數(shu)據文檔(dang)然后(hou)在真(zhen)實接(jie)口出來(lai)后(hou)，切(qie)換到真(zhen)實接(jie)口調(diao)試，我們之前也遇到過(guo)此問題(ti)，所(suo)以(yi)抽時(shi)間自己(ji)做了個mocksever 系統，功能(neng)包括:
支(zhi)持(chi)可視化編輯JSON接口數據及(ji)接口文檔
支(zhi)持GET、POST、PUT、DELETE請求(qiu)類型
支持指定返回狀態碼，默認200
支持延時返回數據
支持mockjs
支持單(dan)個接(jie)口(kou)代理到(dao)真實(shi)服務(wu)器(開發(fa)過(guo)程中某(mou)個接(jie)口(kou)使用模(mo)擬數(shu)據,當此接(jie)口(kou)已開發(fa)完成后,可將指定(ding)接(jie)口(kou),通(tong)過(guo)此服務(wu)指向到(dao)真實(shi)接(jie)口(kou)上(shang))
可以利用現(xian)在(zai)的(de)前端框架做(zuo)同(tong)構支持（目(mu)前熱門的(de)前端框架都(dou)支持同(tong)構）。在(zai)初次網址訪問時由服務器渲染頁面內(nei)容，Client端資源做(zuo)CDN，這樣就可以支持SEO優化(hua)了。
如(ru)果(guo)使用的(de)是angularjs的(de)話，可以看看Prerender-AngularJSSEO,BackboneJSSEO,orEmberJSSEO