目前課程版本：6.5 升級(jí)時(shí)間：2019.06.01 查看詳細(xì)
課程設(shè)計(jì)之初就對(duì)目前企業(yè)中最流行的技術(shù)及知識(shí)點(diǎn)進(jìn)行過(guò)多次調(diào)研，整套課程設(shè)計(jì)完成后，又進(jìn)一步對(duì)課程中的技術(shù)點(diǎn)進(jìn)行了100+項(xiàng)的增加與優(yōu)化，全面覆蓋以 React.js、Vue.js 和 Angular 為首的三大框架，最新的數(shù)據(jù)流方案、服務(wù)端渲染方案，當(dāng)下非常熱門的移動(dòng)端開發(fā)技術(shù)：Flutter、React Native、微信小程序，讓學(xué)員能夠輕松應(yīng)對(duì)前端在不同領(lǐng)域、不同行業(yè)的技術(shù)難題。
學(xué)員的最終訴求就是能夠靈活運(yùn)用所學(xué)知識(shí)進(jìn)行企業(yè)項(xiàng)目開發(fā)，所以真實(shí)的企業(yè)級(jí)項(xiàng)目是傳統(tǒng)培訓(xùn)中最最稀缺的。此次課程核心定位更接近真實(shí)企業(yè)需求，所以我們從項(xiàng)目選題開始全部以真實(shí)就業(yè)情況為出發(fā)點(diǎn)，橫跨電商、金融、在線教育、社交、租房、旅游六大行業(yè)，構(gòu)建真實(shí)企業(yè)級(jí)項(xiàng)目庫(kù)，，通過(guò)超長(zhǎng)的項(xiàng)目課程培養(yǎng)學(xué)員在真實(shí)工作場(chǎng)景中攻克技術(shù)難題的的技術(shù)實(shí)戰(zhàn)能力，以及從容應(yīng)對(duì)不同企業(yè)需求的業(yè)務(wù)能力。
企業(yè)對(duì)于人才最核心的需求并不是對(duì)單純掌握某種應(yīng)用型技術(shù)，而是希望開發(fā)者能夠通過(guò)自己的經(jīng)驗(yàn)幫助企業(yè)解決項(xiàng)目中隨時(shí)出現(xiàn)的問(wèn)題。所以本次課程除了升級(jí)應(yīng)用型技術(shù)的相關(guān)課程，更多的還是提供海量商業(yè)項(xiàng)目解決方案，構(gòu)建超全的解決方案庫(kù)，讓學(xué)員在日后的項(xiàng)目中可以靈活復(fù)用，做到企業(yè)有問(wèn)題，我們有方案。
新增了學(xué)員自主團(tuán)隊(duì)開發(fā)的階段，完全模擬企業(yè)中的真實(shí)開發(fā)場(chǎng)景，從交互稿、設(shè)計(jì)稿、接口文檔，到項(xiàng)目打包工具，源代碼管理工具，在項(xiàng)目經(jīng)理的帶領(lǐng)下完成真實(shí)企業(yè)級(jí)項(xiàng)目的繼續(xù)開發(fā)，讓學(xué)員真正體驗(yàn)并掌握從需求到開發(fā)再到上線的方方面面，無(wú)需過(guò)渡期直接適應(yīng)真正的企業(yè)開發(fā)。
1.0基礎(chǔ)0經(jīng)驗(yàn)的小白人員，想轉(zhuǎn)型到高薪編程行業(yè)或?qū)Υ诵袠I(yè)有濃厚興趣的人員；
2.在校大學(xué)生，希望充實(shí)自身技能，畢業(yè)后能順利就業(yè)并有更強(qiáng)的市場(chǎng)競(jìng)爭(zhēng)力；
3.不滿足目前工作現(xiàn)狀，想要得到更好的發(fā)展空間。
注：獲取更多免費(fèi)學(xué)習(xí)視頻+資料+筆記，請(qǐng)加QQ：2632311208。
全日制脫產(chǎn)，每周5天上課（實(shí)際培訓(xùn)時(shí)間可能因法定節(jié)假日等因素發(fā)生變化）
自帶筆記本
| HTML&JS+前端基礎(chǔ)班課程大綱 | |||
| 所處階段 | 主講內(nèi)容 | 技術(shù)要點(diǎn) | 學(xué)習(xí)目標(biāo) |
| 第一階段： HTML5 + CSS3 | HTML5 | 1、 瀏覽器與瀏覽器內(nèi)核2、語(yǔ)法及使用、3、 常用標(biāo)簽4. 語(yǔ)義化5、 表單元素6、 HTML 、7 新增標(biāo)簽 | 可掌握的核心能力： 掌握 HTML5 常用標(biāo)簽； 掌握 CSS 語(yǔ)法及使用技巧； 掌握CSS3新增選擇器； 掌握CSS3新增樣式屬性； 掌握 DIV+CSS 布局方式； 掌握常見網(wǎng)頁(yè)布局技巧； 掌握企業(yè)級(jí)、電商級(jí)網(wǎng)頁(yè)開發(fā)基本的流程、規(guī)范； 掌握語(yǔ)義化、模塊化、兼容性的PC端網(wǎng)頁(yè)開發(fā)； 掌握 Photoshop 切圖以及插件切圖； 熟練使用調(diào)試工具進(jìn)行頁(yè)面調(diào)試； 掌握基本的動(dòng)畫效果。 可解決的現(xiàn)實(shí)問(wèn)題： 能夠獨(dú)立把美工提供的PSD效果圖還原成PC端靜態(tài)代碼頁(yè)面。 市場(chǎng)價(jià)值： 具備PC端靜態(tài)網(wǎng)頁(yè)開發(fā)的能力，還達(dá)不到企業(yè)用人標(biāo)準(zhǔn)。為后面學(xué)習(xí)網(wǎng)頁(yè)編程階段打下堅(jiān)實(shí)基礎(chǔ)。 |
| CSS3基礎(chǔ) | 1、CSS基本語(yǔ)法規(guī)范2、 常用的選擇器用法與技巧 3、復(fù)合選擇器使用4、 數(shù)值與單位5、文字文本樣式 6、 CSS3新增選擇器 | ||
| CSS3進(jìn)階 | 1、 CSS盒子模型 2、 CSS背景技巧 3、 圓角/陰影/過(guò)渡 4、 定位和浮動(dòng) 5、 偽類和偽元素 6、chrome調(diào)試工具 7、CSS高級(jí)技巧（精靈圖、CSS三角、圖標(biāo)字體等）8、. CSS常見布局技巧大全 9、 網(wǎng)頁(yè)開發(fā)規(guī)范以及流程 10、CSS企業(yè)級(jí)網(wǎng)頁(yè)開發(fā) 11、網(wǎng)頁(yè)開發(fā)常見問(wèn)題以及解決方案 12、 CSS常見兼容性問(wèn)題以及解決方案 13、CSS3新增屬性 14、 Photoshop 切圖 15、cutterman插件一鍵切圖 | ||
| 電商項(xiàng)目 | 1、代碼組織原則 2、項(xiàng)目開發(fā)實(shí)戰(zhàn)流程 3、 電商類復(fù)雜頁(yè)面布局規(guī)范 4、CSS初始化技術(shù)選擇（Normalize.css使用）5、 CSS字體圖標(biāo)使用 6、CSS 屬性書寫順序規(guī)范7、完整的多頁(yè)面開發(fā) 8、 網(wǎng)頁(yè)語(yǔ)義化設(shè)計(jì) 9、 CSS頁(yè)面模塊化開發(fā) 10、favicon圖標(biāo)制作 11、復(fù)雜網(wǎng)頁(yè)結(jié)構(gòu)排版技巧 12、 常見動(dòng)畫過(guò)渡特效 13、電商類常見布局問(wèn)題解決方案 14. 將電商項(xiàng)目部署到web服務(wù)器 | ||
本課程適合于計(jì)算機(jī)專業(yè)，有一定css+div基礎(chǔ)、通過(guò)入學(xué)考核的未就業(yè)人士。
培訓(xùn)時(shí)間及周期：全日制脫產(chǎn)，每周5天上課（實(shí)際培訓(xùn)時(shí)間可能因法定節(jié)假日等因素發(fā)生變化）
自帶筆記本
| HTML&JS+前端就業(yè)班課程大綱 | |||
| 所處階段 | 主講內(nèi)容 | 技術(shù)要點(diǎn) | 學(xué)習(xí)目標(biāo) |
| 第二階段： 移動(dòng)Web網(wǎng)頁(yè)開發(fā) | CSS3動(dòng)畫 | 1、CSS3的2D和3D變換2、animation動(dòng)畫3、炫酷頁(yè)面開發(fā)（地圖大數(shù)據(jù)熱點(diǎn)圖、大風(fēng)車、旋轉(zhuǎn)木馬輪播圖等） | 學(xué)員能力體現(xiàn)： 掌握CSS32D、3D變換、動(dòng)畫效果； 了解移動(dòng)端屏幕、移動(dòng)端瀏覽器、操作系統(tǒng)的不同； 掌握主流移動(dòng)端調(diào)試方法； 掌握常用移動(dòng)端適配方案（流式布局、flex布局、rem適配）； 掌握主流移動(dòng)端頁(yè)面開發(fā)技術(shù)選型與解決方案； 掌握CSS預(yù)處理器less的使用； 掌握常用移動(dòng)端框架使用方法； 掌握常見移動(dòng)端頁(yè)面開發(fā)流程與規(guī)范； 掌握響應(yīng)式布局開發(fā)； 掌握Bootstrap開發(fā)響應(yīng)式頁(yè)面； 掌握適配不同終端的移動(dòng)端頁(yè)面開發(fā)。 可解決的現(xiàn)實(shí)問(wèn)題： 能夠獨(dú)立開發(fā)移動(dòng)端頁(yè)面，并適配不同移動(dòng)端終端。 市場(chǎng)價(jià)值： 具備移動(dòng)端頁(yè)面開發(fā)，但是還不能達(dá)到企業(yè)的用人標(biāo)準(zhǔn)。為后面學(xué)習(xí)網(wǎng)頁(yè)編程階段打下堅(jiān)實(shí)基礎(chǔ)。 |
| 移動(dòng)端頁(yè)面開發(fā) | 1、傳統(tǒng)布局的局限性2、移動(dòng)端屏幕介紹3、移動(dòng)端瀏覽器介紹4、物理像素&物理像素比5、真機(jī)調(diào)試、6、viewport視口、7、移動(dòng)端技術(shù)選型、8、移動(dòng)端主流適配解決方案、9、移動(dòng)端特殊樣式、10、百分比布局&流失布局、11、Flex布局優(yōu)勢(shì)、12、盒子父級(jí)常見屬性設(shè)置、13、盒子子級(jí)常見屬性設(shè)置、14、攜程網(wǎng)Flex移動(dòng)端頁(yè)面開發(fā)、15、rem單位使用、16、rem適配、17、預(yù)處理器less、18、media媒體查詢、19、淘寶flexible.js移動(dòng)端適配、20、cssrem插件使用、21、cutterman二倍圖三倍圖切圖、22、移動(dòng)端頁(yè)面開發(fā)流程與規(guī)范、23、京東移動(dòng)端首頁(yè)開發(fā) | ||
| Bootstrap | 1. Bootstrap框架的優(yōu)勢(shì)、2. 準(zhǔn)備工作、3. 如何引入包、4. 最常用的樣式模塊、5. 什么是柵格系統(tǒng)、6. 常見的柵格參數(shù)、7. 柵格系統(tǒng)的預(yù)定義類、8. 響應(yīng)式工具、9. 阿里百秀響應(yīng)式頁(yè)面開發(fā) | ||
| 第三階段： JavaScript網(wǎng)頁(yè)編程 | JavaScript基礎(chǔ) | 1、基本輸入輸出方法2、變量3、數(shù)據(jù)類型4、類型轉(zhuǎn)換5、運(yùn)算符6、流程控制語(yǔ)句7、數(shù)組8、函數(shù)9、自定義對(duì)象10、內(nèi)置對(duì)象和常用方法11、網(wǎng)頁(yè)版小娜小項(xiàng)目 | 學(xué)員能力體現(xiàn)： 能夠掌握J(rèn)avaScript基本語(yǔ)法； 掌握常見JavaScript算法； 掌握DOM的各種操作； 熟練使用面向?qū)ο笏枷脒M(jìn)行DOM編程； 掌握J(rèn)avaScript的高級(jí)語(yǔ)法； 熟練使用jQuery操作DOM； 熟練使用和編寫jQuery插件； 獨(dú)立完成電商網(wǎng)站的頁(yè)面搭建（包括HTML結(jié)構(gòu)、CSS樣式、JavaScript特效）； 掌握應(yīng)對(duì)業(yè)務(wù)編程的能力； 掌握J(rèn)avaScript常見兼容性方案； 掌握?qǐng)F(tuán)隊(duì)合作開發(fā)流程。 可解決的現(xiàn)實(shí)問(wèn)題： 能夠使用JavaScript/jQuery開發(fā)網(wǎng)頁(yè)特效/網(wǎng)頁(yè)應(yīng)用。 市場(chǎng)價(jià)值： 具備網(wǎng)頁(yè)開發(fā)的基礎(chǔ)能力(網(wǎng)頁(yè)布局和網(wǎng)頁(yè)應(yīng)用開發(fā))，但是無(wú)法和服務(wù)器交互，還達(dá)不到企業(yè)用人的標(biāo)準(zhǔn)。 |
| WebAPIs編程 | 1、獲取頁(yè)面元素的常用方法2、頁(yè)面中的事件和事件機(jī)制3、操作元素的樣式和屬性4、新增元素和移除元素5、BOM操作大全 | ||
| 網(wǎng)頁(yè)應(yīng)用/網(wǎng)頁(yè)特效 | 1、輪播圖2、頁(yè)面放大鏡3、待辦事項(xiàng)列表4、購(gòu)物車5、tabs6、JSON7、其它常用網(wǎng)頁(yè)特效 | ||
| jQuery快速開發(fā) | 1、jQuery的優(yōu)勢(shì)2、jQuery選擇器3、jQuery中的動(dòng)畫4、jQuery中的DOM操作5、鏈?zhǔn)骄幊毯碗[式迭代6、插件使用和制作7、常見網(wǎng)頁(yè)特效制作大全 | ||
| 面向?qū)ο缶幊?/td> | 1、面向?qū)ο笏枷搿?、創(chuàng)建對(duì)象、3、JavaScript中的對(duì)象深入理解、4、閉包原理以及使用場(chǎng)景、5、原型以及原型鏈深入剖析、6、作用域鏈深入分析、7、函數(shù)的調(diào)用方式及this指向總結(jié)、8、Class類、constructor、super | ||
| 第四階段： Node.js與AJAX | AJAX編程 | 1、AJAX的作用2、原生AJAX3、同步與異步4、http協(xié)議5、AJAX的封裝6、jQuery的AJAX7、緩存問(wèn)題及解決方案8、跨域請(qǐng)求及解決方案9、前端模板引擎 | 學(xué)員能力體現(xiàn)： 能夠建立客戶端服務(wù)器交互模型，熟悉網(wǎng)絡(luò)通信相關(guān)概念； 能夠使用Node.js進(jìn)行Web服務(wù)端開發(fā)； 能夠掌握J(rèn)avaScript異步編程模型； 能夠掌握J(rèn)avaScript模塊化編程方式； 能夠使用Node.js操作MySQL數(shù)據(jù)庫(kù)； 能夠理解HTTP協(xié)議； 熟悉原生Ajax請(qǐng)求流程與細(xì)節(jié)，并掌握常見跨域技巧； 能夠基于jQuery的Ajax相關(guān)API熟練開發(fā)常見的前端功能； 能夠獨(dú)立開發(fā)基于后臺(tái)接口的動(dòng)態(tài)網(wǎng)站、Ajax數(shù)據(jù)交互的項(xiàng)目； 能夠獨(dú)立完成企業(yè)網(wǎng)站從前臺(tái)到后臺(tái)的基本開發(fā)工作。 可解決的現(xiàn)實(shí)問(wèn)題： 能夠具備開發(fā)具有簡(jiǎn)單交互能力的網(wǎng)站，能夠使用源代碼管理工具。 市場(chǎng)價(jià)值： 具備基本的網(wǎng)站開發(fā)能力，滿足企業(yè)對(duì)初級(jí)前端開發(fā)的要求。 |
| git | 1、git歷史2、git與svn3、git基本使用4、git分支5、git遠(yuǎn)程倉(cāng)庫(kù)6、git沖突及解決方案 | ||
| 綜合項(xiàng)目： 阿里百秀 | 1、項(xiàng)目初始化2、前后端分離開發(fā)3、Postman工具使用4、用戶注冊(cè)/登錄/退出5、文章管理模塊6、評(píng)論管理模塊7、用戶中心模塊8、項(xiàng)目部署與發(fā)布 | ||
| ES6 | 1、es6簡(jiǎn)介2、新增語(yǔ)法3、內(nèi)置對(duì)象擴(kuò)展4、Promise5、Async函數(shù)6、解構(gòu)7.展開運(yùn)算 | ||
| Node.js基礎(chǔ) | 1、node.js環(huán)境安裝2、如何用node.js運(yùn)行代碼3、Commonjs4、模塊化5、模塊與包6、NPM7、CNPM和Yarn8、核心模塊使用9、第三方模塊使用10、RESTFulAPI | ||
| 服務(wù)端開發(fā)(Node.js) | 1、靜態(tài)和動(dòng)態(tài)網(wǎng)站2、http模塊使用3、請(qǐng)求響應(yīng)原理4、HTTP協(xié)議5、處理頁(yè)面請(qǐng)求6、處理表單7、會(huì)話技術(shù)(Cookie、Session) | ||
| MySQL | 1、MySQL的概念2、MySQL安裝3、建庫(kù)和建表4、增刪改查語(yǔ)句5、Node.js操縱MySQL | ||
| Express | 1、express的概念2、express的安裝3、后端路由4、靜態(tài)資源托管5、中間件的原理6、常用中間件7、模板引擎8、異常處理9、Express常用API10、RESTFulAPI | ||
| 第五階段： Vue.js項(xiàng)目實(shí)戰(zhàn) | Vue.js基礎(chǔ) | 1、Vue實(shí)例2、文本與屬性綁定3、計(jì)算屬性computed4、偵聽器watch5、Class與Style綁定6、條件渲染7、列表渲染8、事件處理9、表單輸入綁定10、Vue實(shí)例生命周期11、開發(fā)Vue插件和模板過(guò)濾器12、自定義指令13、Vue組件系統(tǒng)14、Vue過(guò)渡和動(dòng)畫15、VueRouter路由系統(tǒng)16、組件通信17、axios請(qǐng)求庫(kù)18、VueCLI腳手架工具19、VueDevTools調(diào)試工具20、在Vue中操作DOM | 可掌握的核心能力： 能夠掌握使用Vue技術(shù)棧進(jìn)行項(xiàng)目開發(fā)； 能夠掌握源代碼管理工具的使用； 能夠熟練掌握前后端分離開發(fā)模式； 能夠掌握使用主流框架開發(fā)門戶網(wǎng)站、管理系統(tǒng)、移動(dòng)Web等客戶端； 能夠掌握Webpack項(xiàng)目構(gòu)建配置流程； 能夠掌握Web項(xiàng)目的部署與發(fā)布模式； 能夠掌握常見網(wǎng)站業(yè)務(wù)模塊開發(fā)。 掌握使用echarts/d3.js進(jìn)行大數(shù)據(jù)可視化交互開發(fā)； 可解決的現(xiàn)實(shí)問(wèn)題： 使用Vue技術(shù)棧開發(fā)企業(yè)級(jí)項(xiàng)目 掌握前后端分離的開發(fā)方式 掌握項(xiàng)目的打包和發(fā)布 市場(chǎng)價(jià)值： 理解Vue的開發(fā)理念、內(nèi)部運(yùn)行原理，梳理使用Vue組件開發(fā)常見功能。滿足前端開發(fā)行業(yè)中的常見需求。 |
| 社交媒體- 黑馬頭條自媒體管理系統(tǒng) | 1、使用VueCLI初始化項(xiàng)目2、使用Git+Github管理項(xiàng)目源代碼3、使用echarts開發(fā)數(shù)據(jù)可視化4、使用axios與服務(wù)端交互5、使用VueRouter管理項(xiàng)目中的路由6、使用ElementUI框架7、使用Sass預(yù)處理器8、基于JWT的前后端token鑒權(quán)9、富文本編輯器解決方案10、項(xiàng)目打包發(fā)布上線 | ||
| webpack | 1、安裝與基本配置2、打包JavaScript模塊3、打包CSS模塊4、打包圖片和字體文件模塊5、打包less/sass資源模塊6、ES6轉(zhuǎn)ES57、打包.vue資源模塊8、配置ESLint代碼校驗(yàn)工具9、使用clean-webpack-plugin插件清除打包結(jié)果目錄10、使用HtmlWebpackPlugin打包HTML資源11、處理打包結(jié)果的Sourcemaps12、監(jiān)視打包模式13、使用webpack-dev-server14、模塊打包熱更新15、treeshaking打包優(yōu)化16、生產(chǎn)環(huán)境和開發(fā)環(huán)境分離打包17、打包優(yōu)化之CodeSplitting代碼分割18、打包優(yōu)化之模塊懶加載19、打包優(yōu)化之緩存 | ||
| 社交媒體- 黑馬頭條 | 1、使用VueCLI初始化項(xiàng)目2、使用Git+Github管理項(xiàng)目源代碼3、使用axios與服務(wù)端交互4、使用VueRouter管理項(xiàng)目中的路由5、使用VantUI框架6、使用Vuex管理組件狀態(tài)7、使用Sass預(yù)處理器8、基于JWT的前后端token鑒權(quán)9、使用Socket.io進(jìn)行實(shí)時(shí)通信10、移動(dòng)端富文本編輯器解決方案11、使用Cordova打包移動(dòng)App12、項(xiàng)目打包發(fā)布上線 | ||
| Vue進(jìn)階 | 1、組件封裝進(jìn)階2、MVVM數(shù)據(jù)綁定原理3、Render方法原理4、$nextTick方法的使用5、發(fā)布訂閱模式 | ||
| 服務(wù)端渲染 | 1、SSR核心概念2、SSR基本用法3、編寫通用代碼4、路由和代碼分割5、構(gòu)建配置6、Nuxt.js | ||
| 大數(shù)據(jù)可視化 | 1、數(shù)據(jù)庫(kù)可視化基礎(chǔ)2、echarts/d3.js入門3、其它可視化庫(kù)4、大數(shù)據(jù)可視化實(shí)戰(zhàn)項(xiàng)目：組件開發(fā) | ||
| 第六階段： 微信小程序 | 小程序基礎(chǔ) | 1、小程序注冊(cè)2、小程序開發(fā)者工具使用教程3、小程序配置文件4、小程序常用組件5、小程序的模板語(yǔ)法6、小程序中的樣式編寫7、小程序中的JavaScript8、小程序應(yīng)用及頁(yè)的生命周期9、小程序常用API10、小程序中的自定組件11、小程序插件開發(fā)12、小程序分包加載13、小程序基礎(chǔ)庫(kù)版及兼容處理14、小程序運(yùn)行機(jī)制15、小程序性能分析及優(yōu)化16、小程序云開發(fā)、云函數(shù)、云數(shù)據(jù)庫(kù)17、小程序上線和發(fā)布 | 可掌握的核心能力： 能夠掌握小程序的開發(fā)基礎(chǔ)； 能夠獨(dú)立開發(fā)小程序項(xiàng)目； 能夠掌握小程序的部署與發(fā)布； 能夠掌握微信支付的使用； 能夠掌握小程序開發(fā)框架的使用； 掌握第三方AI平臺(tái)的使用。 可解決的現(xiàn)實(shí)問(wèn)題： 掌握整個(gè)小程序開發(fā)和傳統(tǒng)web開發(fā)的區(qū)別； 掌握企業(yè)小程序開發(fā)、發(fā)布和上線的整體流程； 擁有解決和實(shí)現(xiàn)市場(chǎng)上主流小程序的功能需求。 市場(chǎng)價(jià)值： 掌握前端行業(yè)的小程序發(fā)展趨勢(shì)，熟悉小程序項(xiàng)目的整體運(yùn)作流程，并且具備獨(dú)立開發(fā)企業(yè)級(jí)小程序的能力，既可以使用原生小程序也可以使用小程序框架來(lái)完成項(xiàng)目。 |
| 小程序項(xiàng)目： 黑馬優(yōu)購(gòu)商城 | 1、原生框架的搭建2、商品首頁(yè)模塊3、分類商品模塊4、商品列表模塊5、商品詳情模塊6、支付和登錄模塊7、收藏模塊8、購(gòu)物車模塊9、訂單模塊10、搜索頁(yè)面模塊11、個(gè)人中心模塊12、意見反饋模塊13、項(xiàng)目的優(yōu)化和發(fā)布上線 | ||
| 第七階段： React.js項(xiàng)目實(shí)戰(zhàn) | React.js基礎(chǔ) | 1、create-react-app腳手架工具2、JSX語(yǔ)法3、條件渲染4、列表渲染和key5、React組件系統(tǒng)6、PureComponent7、setState()8、事件處理9、表單處理10、組件通訊11、render-props12、高階組件13、虛擬DOM和Diff算法14、ReactRouter路由系統(tǒng)15、Redux狀態(tài)管理架構(gòu)16、axios請(qǐng)求庫(kù)17、AntDesign組件框架、18、CSSModules | 可掌握的核心能力： 能夠理解React的開發(fā)理念； 能夠掌握React的基本使用； 能夠理解React的內(nèi)部原理； 能夠使用React及其常用組件庫(kù)進(jìn)行項(xiàng)目開發(fā)； 能夠使用React封裝項(xiàng)目中用到組件實(shí)現(xiàn)復(fù)用； 能夠掌握React項(xiàng)目中常見問(wèn)題的解決方案； 能夠掌握React-Redux進(jìn)行狀態(tài)管理； 能夠掌握聲明式編程的思想； 能夠掌握組件化開發(fā)的思想； 能夠掌握React項(xiàng)目?jī)?yōu)化、部署。 可解決的現(xiàn)實(shí)問(wèn)題： 具備使用React開發(fā)能力，配合React內(nèi)部原理，增強(qiáng)解決項(xiàng)目中復(fù)雜業(yè)務(wù)問(wèn)題的能力，從項(xiàng)目搭建到項(xiàng)目開發(fā)再到項(xiàng)目部署上線，讓學(xué)員可以完成常見企業(yè)級(jí)項(xiàng)目的開發(fā)。 市場(chǎng)價(jià)值： 理解React的開發(fā)理念、內(nèi)部運(yùn)行原理，熟練運(yùn)用React組件完成項(xiàng)目常見功能開發(fā)，配合常用組件庫(kù)解決項(xiàng)目中的一些共性問(wèn)題，滿足前端開發(fā)行業(yè)中的常見需求。 |
| 好客租房 PC端項(xiàng)目 | 1、項(xiàng)目初始化2、管理員登錄退出3、用戶管理4、用戶已發(fā)布房源查看5、房源列表6、房源列表檢索等功能7、使用redux進(jìn)行狀態(tài)管理 | ||
| 好客租房 移動(dòng)Web項(xiàng)目 | 1、項(xiàng)目初始化2、首頁(yè)搭建3、地理定位4、城市選擇5、地圖找房6、房源搜索7、關(guān)鍵詞搜索8、房源詳情9、個(gè)人中心10、用戶登錄/注冊(cè)/退出11、房源收藏12、查看用戶收藏房源列表13、房源發(fā)布14、已發(fā)布房源列表查看15、權(quán)限路由組件封裝16、移動(dòng)端長(zhǎng)列表性能優(yōu)化17、React復(fù)雜表單處理18、React動(dòng)畫等常見解決方案 | ||
初入前端開發(fā)行業(yè)的初級(jí)、中級(jí)前端開發(fā)者。
注：獲取更多免費(fèi)學(xué)習(xí)視頻+資料+筆記，請(qǐng)加QQ：2632311208。
在線學(xué)習(xí)
| HTML&JS+前端中級(jí)進(jìn)修課課程大綱 | |||
| 所處階段 | 主講內(nèi)容 | 技術(shù)要點(diǎn) | 學(xué)習(xí)目標(biāo) |
| 第八階段： 框架原理與進(jìn)階 | 前端工程化 | 工程化概念、模塊化開發(fā)及常用工具（Webpack4、Parcel、Rollup）、項(xiàng)目規(guī)范化及常用工具（ESLint、StyleLint）、前端自動(dòng)化及常用工具、自動(dòng)化測(cè)試及常用工具（istanbul、jest、benchmark） | 學(xué)員能力體現(xiàn)： - 能夠輕松運(yùn)用目前市場(chǎng)主流工具應(yīng)對(duì)工程化項(xiàng)目需求； - 能夠基于無(wú)服務(wù)端平臺(tái)快速開發(fā)應(yīng)用并了解國(guó)內(nèi)主流的平臺(tái)服務(wù)； - 能夠使用靜態(tài)站點(diǎn)構(gòu)建方案快速開發(fā)企業(yè)站； - 能夠使用 Flow、TypeScript 完成復(fù)雜應(yīng)用業(yè)務(wù)代碼的編寫； - 能夠掌握使用 Angular 技術(shù)棧進(jìn)行項(xiàng)目開發(fā)； - 能夠理解 React.js / Vue.js 一類的 MVVM 框架的實(shí)現(xiàn)原理； - 能夠使用不同的數(shù)據(jù)流框架應(yīng)對(duì)不同技術(shù)棧在大型項(xiàng)目中的數(shù)據(jù)狀態(tài)管理； - 能夠使用服務(wù)端渲染解決方案解決 React.js / Vue.js / Angular 框架在 SEO 方面的問(wèn)題； - 能夠掌握不同框架的服務(wù)端渲染的實(shí)現(xiàn)及運(yùn)用； - 能夠使用 React16 + Redux4 + ReactRouter4 + Next.js 完成社交類項(xiàng)目的開發(fā)。 關(guān)鍵詞： 工程化、自動(dòng)化、無(wú)服務(wù)端、Gatsby、TypeScript、Flow、Angular、MVVM 框架原理、Mobx、RxJS、SSR、Next.js、Nuxt.js、Universal |
| 閑云旅游項(xiàng)目 | 無(wú)服務(wù)端方案（LeanCloud）、靜態(tài)站點(diǎn)生成工具（Gatsby、React Static、VuePress）、旅游類項(xiàng)目業(yè)務(wù) | ||
| JavaScript 進(jìn)階 | Flow 類型檢查、TypeScript 適應(yīng)超大型的應(yīng)用編碼 | ||
| Angular 實(shí)戰(zhàn)開發(fā) | Angular 組件的定義及使用、Angular 服務(wù)、Angular 路由、表單、依賴注入 | ||
| MVVM 框架進(jìn)階與實(shí)現(xiàn) | Vue.js 原理、Vue.js 使用進(jìn)階、模擬實(shí)現(xiàn) Vue.js 框架 | ||
| 數(shù)據(jù)流框架的應(yīng)用 | Redux、Mobx、Vuex、RxJS、ngrx | ||
| 服務(wù)端渲染 SSR 專題 | React.js 服務(wù)端渲染方案及 Next.js 框架、Vue.js 服務(wù)端渲染方案及 Nuxt.js、Angular 服務(wù)端渲染方案及 Universal Angular | ||
| 學(xué)成在線項(xiàng)目 | React16、Redux4、ReactRouter4、Next.js | ||
| 跨平臺(tái)桌面應(yīng)用開發(fā) | Electron、Vue.js / React.js 在 Electron 中的使用 | ||
| 第九階段： 移動(dòng) App 開發(fā) | 混合式 App 開發(fā)框架 | Cordova、Phonegap、Ionic | 學(xué)員能力體現(xiàn)： - 能夠使用混合式 App 開發(fā)框架快速開發(fā)移動(dòng) App； - 能夠配合原生應(yīng)用開發(fā) App 內(nèi)嵌 H5 頁(yè)面并可以通過(guò) JSBridge 調(diào)用原生接口； - 能夠使用 wepy / mpvue 框架開發(fā)小程序或快應(yīng)用項(xiàng)目； - 能夠使用 taro 多端統(tǒng)一解決方案同時(shí)完成移動(dòng) App、移動(dòng) Web、小程序的開發(fā)； - 能夠獨(dú)立使用 React Native 開發(fā)原生 App； - 了解 Weex / Flutter 等其他原生應(yīng)用的前端技術(shù)開發(fā)方式。 關(guān)鍵詞： Cordova、Ionic、Webview + H5、JSBridge、mpvue、taro、Weex、Flutter |
| H5 配合原生開發(fā) App | Webview + H5、JSbridge、NativeScript | ||
| 黑馬證券 App 項(xiàng)目 | Vue.js 開發(fā)移動(dòng)H5、配合原生 Webview 構(gòu)建 App、金融業(yè)務(wù)項(xiàng)目 | ||
| 小程序/快應(yīng)用開發(fā)框架 | WEPY、MPVUE、Taro 統(tǒng)一開發(fā)解決方案 | ||
| 原生應(yīng)用開發(fā)框架 | Flutter、React Native、Weex | ||
| 好客租房 App 項(xiàng)目 | React Native 構(gòu)建租房類 App 項(xiàng)目 | ||
| 第十階段： Node.js 進(jìn)階 | Node.js 網(wǎng)絡(luò)通信 | TCP 協(xié)議、net 模塊、Socket | 學(xué)員能力體現(xiàn)： - 能夠基于 net 模塊開發(fā) Socket 應(yīng)用并深度理解 HTTP 協(xié)議； - 徹底理解 Node.js 中的事件循環(huán)特性； - 能夠使用 Cluster 開發(fā)多進(jìn)程應(yīng)用充分發(fā)揮多核 CPU； - 能夠操作常見的 NoSQL 數(shù)據(jù)庫(kù)并能夠通過(guò) Node.js 操作； - 能夠掌握主流的 MVC Web 應(yīng)用開發(fā)框架 Adonis、Egg； - 能夠升入理解基于 GraphQL 標(biāo)準(zhǔn)開發(fā)現(xiàn)代化的應(yīng)用層接口； - 能夠掌握 Node.js 中途島在企業(yè)級(jí)項(xiàng)目中的應(yīng)用； - 能夠使用 Node.js 開發(fā)基本的網(wǎng)絡(luò)爬蟲應(yīng)用。 關(guān)鍵詞： Socket、EventLoop、Cluster、Redis、MongoDB、Memcached、Adonis.js、Egg.js、GraphQL、微服務(wù)、Nightmare、Puppeteer |
| Node.js 事件循環(huán)與多進(jìn)程 | EventLoop、Cluster | ||
| NoSQL 數(shù)據(jù)庫(kù) | Redis / MongoDB / Memcached 基本使用及如何通過(guò) Node.js 操作 | ||
| Web 應(yīng)用開發(fā)框架 | Adonis.js、Egg.js、Koa | ||
| BaaS 接口標(biāo)準(zhǔn) | GraphQL | ||
| 十次方項(xiàng)目 | Node.js 中間層、社交類業(yè)務(wù)項(xiàng)目 | ||
| 網(wǎng)絡(luò)爬蟲開發(fā) | Cheerio、Nightmare、Puppeteer | ||
| 第十一階段： 可視化與游戲 | 網(wǎng)頁(yè)游戲開發(fā)基礎(chǔ) | Canvas | 學(xué)員能力體現(xiàn)： - 能夠使用 HTML5 技術(shù)開發(fā)網(wǎng)頁(yè)游戲； - 能夠使用 WebGL 技術(shù)完成炫酷 3D 類圖形效果； - 能夠掌握常用的可視化庫(kù)的應(yīng)用； - 能夠使用 Three.js 開發(fā)簡(jiǎn)單的 3D 網(wǎng)頁(yè)游戲； - 能夠使用 HTML5 游戲引擎開發(fā)網(wǎng)頁(yè)游戲。 關(guān)鍵詞： WebGL、Three.js、H5 游戲、游戲引擎、Cocos2d-x、Egret |
| 網(wǎng)頁(yè)高性能圖形編程 | WebGL | ||
| 圖形化開發(fā)庫(kù) | Three.js、D3.js | ||
| HTML5 游戲引擎 | Cocos2d-x、Egret | ||
| 第十二階段： 架構(gòu)與運(yùn)維 | 前端性能優(yōu)化 | JSPerf、YSlow、PageSpeed | 學(xué)員能力體現(xiàn)： - 能夠通過(guò)不同的工具發(fā)現(xiàn) Web 項(xiàng)目的性能瓶頸并加以解決； - 能夠掌握使用不同的工具和平臺(tái)對(duì)項(xiàng)目及代碼進(jìn)行質(zhì)量監(jiān)測(cè)； - 能夠使用不同的自動(dòng)化測(cè)試框架完成項(xiàng)目的單元測(cè)試和集成測(cè)試； - 能夠使用 Jenkins、TravisCI 等工具對(duì)項(xiàng)目進(jìn)行持續(xù)集成和持續(xù)部署； - 能夠掌握基本的 Linux 服務(wù)器操作與維護(hù)； - 能夠掌握 Nginx Web 服務(wù)器的搭建與配置； - 了解 Docker 容器化平臺(tái)的基本操作。 關(guān)鍵詞： JSPerf、YSlow、PageSpeed、E2E、QA、Jest、AVA、Nightmare、持續(xù)集成、持續(xù)部署、Jenkins、Nginx、Docker |
| 項(xiàng)目質(zhì)量監(jiān)測(cè) | Lint、e2e test、codecov、Benchmark | ||
| 自動(dòng)化測(cè)試 | Mocha、Jest、AVA、Karma、Nightmare | ||
| 持續(xù)集成與持續(xù)部署 | Jenkins、TravisCI、CircleCI | ||
| Linux 服務(wù)器 | Nginx、HTTP(s)、ECS、RDS、SLB 云服務(wù) | ||
| 容器化運(yùn)維操作 | Docker 操作、部署、運(yùn)維 | ||
備注：該課程大綱僅供參考，實(shí)際課程內(nèi)容可能在授課過(guò)程中發(fā)生更新或變化，具體授課內(nèi)容最終以各班級(jí)課表為準(zhǔn)。
項(xiàng)目簡(jiǎn)介：
京東項(xiàng)目是通過(guò)電子商務(wù)模式為主導(dǎo)開展起來(lái)的項(xiàng)目。該項(xiàng)目涵蓋了基本的DOM操作、面向?qū)ο笏枷牒褪录幚砑疤匦?nèi)容。
項(xiàng)目特色：
項(xiàng)目基于HTML+CSS+JavaScript搭建動(dòng)態(tài)頁(yè)面實(shí)現(xiàn)，包含網(wǎng)頁(yè)布局，網(wǎng)頁(yè)特效，瀏覽器兼容性處理。其中包括JavaScript基本操作和DOM基本元素操作及常見事件處理，涵蓋頁(yè)面常見效果輪播圖、放大鏡、tab欄切換等基本特效實(shí)現(xiàn)，完成此項(xiàng)目基本可以獨(dú)立
項(xiàng)目簡(jiǎn)介：
該項(xiàng)目主要實(shí)現(xiàn)在線教育平臺(tái)相關(guān)資源數(shù)據(jù)的管理功能，主要實(shí)現(xiàn)講師、課程等數(shù)據(jù)資源的增刪改查等相關(guān)操作。
項(xiàng)目特色：
該項(xiàng)目緊密聯(lián)系實(shí)際工作場(chǎng)景，整合了很多常用的前端插件，融入真實(shí)的業(yè)務(wù)場(chǎng)景，并且包含了前端相關(guān)的jQuery、Ajax，文件上傳、后臺(tái)接口對(duì)接等大量的知識(shí)點(diǎn)，可以在強(qiáng)化知識(shí)點(diǎn)掌握的同時(shí)進(jìn)一步培養(yǎng)實(shí)踐能力
項(xiàng)目簡(jiǎn)介：
如何快速抓住用戶眼球：二維碼掃描->跳轉(zhuǎn)，朋友圈分享->跳轉(zhuǎn)。移動(dòng)設(shè)備這類操作在頻繁不過(guò)了.跳轉(zhuǎn)之后看到的都是一個(gè)酷炫的宣傳頁(yè)面，有聲音，有動(dòng)畫，可能還會(huì)有定位等功能，那么這個(gè)頁(yè)面在移動(dòng)端如何通過(guò)HTML5 & CSS3等技術(shù)去實(shí)現(xiàn)呢
項(xiàng)目特色：
使用HTML5原生技術(shù)實(shí)現(xiàn)媒體播放功能，結(jié)合第三方地圖API實(shí)現(xiàn)定位及地圖繪制，使用CSS3實(shí)現(xiàn)酷炫的過(guò)渡，動(dòng)畫效果，運(yùn)用動(dòng)畫框架來(lái)制作一些更有靈性的動(dòng)畫；頁(yè)面之間的滑動(dòng)切換效果，原生跟框架的實(shí)現(xiàn)方式，咱們都來(lái)一遍，讓大伙真實(shí)體驗(yàn)到公司中此類頁(yè)面的開發(fā)“姿勢(shì)”
項(xiàng)目簡(jiǎn)介：
人們溝通的方式增多了，但是如何找到志同道合的人呢，輕博客正越來(lái)越受到咱們年輕人的歡迎，可以分享生活，分享心得，通過(guò)發(fā)現(xiàn)以及創(chuàng)建圈子快速找到感興趣的話題.如果不想分享內(nèi)容，也可以做一個(gè)安靜的觀眾，靜靜地看著他人分享的精彩生活;無(wú)論哪種方式都能夠讓你收獲精彩的內(nèi)容.
項(xiàng)目特色：
：體驗(yàn)移動(dòng)端webAPP的開發(fā)方式，掌握如何在種類繁多的屏幕中實(shí)現(xiàn)顯示效果統(tǒng)一，如何在不同的移動(dòng)操作系統(tǒng)下處理諸如字體設(shè)置，圖片設(shè)置等問(wèn)題.喜歡原生，沒問(wèn)題，我們一起來(lái)手寫頁(yè)面；想要快速開發(fā)，沒問(wèn)題，我們一同體驗(yàn)框架開發(fā)的簡(jiǎn)單與高效。CSS代碼增多，維護(hù)與編寫成本增加，我們有CSS預(yù)處理程序來(lái)幫忙。多角度，多方向讓大伙感受移動(dòng)端webAPP的開發(fā)"姿勢(shì)"
項(xiàng)目簡(jiǎn)介：
該項(xiàng)目是基于鞋類的垂直電商平臺(tái)，改項(xiàng)目包含整個(gè)電商核心模塊，用戶模塊，購(gòu)物車模塊，分類模塊，商品模塊，產(chǎn)品模塊。報(bào)表模塊.. 系統(tǒng)前臺(tái)是面向網(wǎng)站用戶訪問(wèn)的,用戶可以通過(guò)移動(dòng)端進(jìn)行注冊(cè)，修改個(gè)人的一些信息，商品搜索，把商品保存到自己的購(gòu)物車。系統(tǒng)后臺(tái)是面向電商后臺(tái)管理人員使用的，主要功能包含用戶管理，分類管理，品牌管理，商品管理，報(bào)表統(tǒng)計(jì)等功能。
項(xiàng)目特色：
1:該項(xiàng)目移動(dòng)端采用當(dāng)前流行的mui移動(dòng)框架搭建而成，使移動(dòng)端的開發(fā)變得簡(jiǎn)單高效；2：獨(dú)立頁(yè)面里面采用流式布局，rem，以及伸縮布局來(lái)搭建內(nèi)層網(wǎng)頁(yè)；3：該項(xiàng)目所有的交互都采用前后端分離，移動(dòng)端使用各種交互特效，下拉刷新，滾動(dòng)加載等特效； 4：后臺(tái)采用bootstrap 進(jìn)行頁(yè)面布局，后臺(tái)開發(fā)迅速方便維護(hù)，使用bootstrap 的常見的插件；5：后臺(tái)使用jQuery fileupload 上傳組件，支持多文件上傳，以及預(yù)覽的功能；6：使用echart 技術(shù)做相關(guān)的報(bào)表統(tǒng)計(jì)技術(shù)"
項(xiàng)目簡(jiǎn)介：
整個(gè)項(xiàng)目使用webpack打包工具集合Vue.js框架完成一個(gè)移動(dòng)版的webapp，整個(gè)項(xiàng)目完全從0起步一步步帶領(lǐng)學(xué)員完成腳手架的搭建，單頁(yè)程序的架構(gòu)以及新聞資訊，圖片分享，商品購(gòu)買，購(gòu)物車，登錄等功能，并且整個(gè)項(xiàng)目開發(fā)流程完全模擬團(tuán)隊(duì)協(xié)作，使用git進(jìn)行版本管理
項(xiàng)目特色：
純手工實(shí)現(xiàn)一個(gè)個(gè)功能，主要邏輯拒絕拷貝代碼。以真實(shí)項(xiàng)目作為原型來(lái)實(shí)現(xiàn)其中的一部分功能，業(yè)務(wù)都是公司常用的。教會(huì)學(xué)員如何去查找開源組件，并且用在項(xiàng)目中滿足業(yè)務(wù)的開發(fā)，授人以魚不如授人以漁。項(xiàng)目的講解過(guò)程幾乎接近于公司真實(shí)項(xiàng)目的開發(fā)和協(xié)作流程，例如：交互稿，UI設(shè)計(jì)稿都有
二維碼圖片的方式(上)
二維碼圖片的方式(下)
ifelse和代碼的調(diào)試
表單元素(一)
表單元素(二)
數(shù)組
每日測(cè)評(píng)
每晚對(duì)學(xué)員當(dāng)天知識(shí)的吸收程度、老師授課內(nèi)容難易程度進(jìn)行評(píng)分，老師會(huì)根據(jù)學(xué)員反饋進(jìn)行分析，對(duì)學(xué)員吸收情況調(diào)整授課內(nèi)容、課程節(jié)奏，最終讓每位學(xué)員都可以跟上班級(jí)學(xué)習(xí)的整體節(jié)奏。
技術(shù)輔導(dǎo)
為每個(gè)就業(yè)班都安排了一名優(yōu)秀的技術(shù)指導(dǎo)老師，不管是白天還是晚自習(xí)時(shí)間，隨時(shí)解答學(xué)員問(wèn)題，進(jìn)一步鞏固和加強(qiáng)課上知識(shí)。
學(xué)習(xí)系統(tǒng)
為了能輔助學(xué)員掌握所學(xué)知識(shí)，黑馬程序員自主研發(fā)了6大學(xué)習(xí)系統(tǒng)，包括教學(xué)反饋系統(tǒng)、學(xué)習(xí)難易和吸收分析系統(tǒng)、學(xué)習(xí)測(cè)試系統(tǒng)、在線作業(yè)系統(tǒng)、學(xué)習(xí)任務(wù)手冊(cè)、學(xué)員綜合能力評(píng)定分析等。
末位輔導(dǎo)
末位輔導(dǎo)隊(duì)列的學(xué)員，將會(huì)得到重點(diǎn)關(guān)心。技術(shù)輔導(dǎo)老師會(huì)在學(xué)員休息時(shí)間，針對(duì)學(xué)員的疑惑進(jìn)行知識(shí)點(diǎn)梳理、答疑、輔導(dǎo)。以確保知識(shí)點(diǎn)掌握上沒有一個(gè)學(xué)員掉隊(duì)，真正落實(shí)不拋棄，不放棄任何一個(gè)學(xué)員。
生活關(guān)懷
從學(xué)員學(xué)習(xí)中的心態(tài)調(diào)整，到生活中的困難協(xié)助，從課上班級(jí)氛圍塑造到課下多彩的班級(jí)活動(dòng)，班主任360度暖心鼓勵(lì)相伴。
就業(yè)輔導(dǎo)
小到五險(xiǎn)一金的解釋、面試禮儀的培訓(xùn)；大到500強(qiáng)企業(yè)面試實(shí)訓(xùn)及如何針對(duì)性地制定復(fù)習(xí)計(jì)劃，幫助學(xué)員拿到高薪Offer。
