Web前端工程師

階段一：前端基礎入門

1、HTML5基礎語法與標簽

這是入門前端的，學會IDE插件安裝和使用，掌握H5語法和基礎標簽的應用，學完這些內容可以進行簡單的頁面結構搭建。

課程安排：

1、了解前端行業發展

2、了解HTML5對于網頁的意義

3、學習常用標簽/屬性，進行結構搭建

4、掌握無序列表/有序列表/自定義列表

5、學習表單標簽/屬性，能創建常見表單結構

6、掌握標簽嵌套規則/行內元素/塊元素的使用

7、學習VSCode開發工具使用，能創建簡單網頁

2、CSS3基礎語法與盒模型

CSS3是網頁的"美容師"，開始學習CSS3樣式，掌握語法結構、選擇器、盒子模型、文本和字體樣式設置，能夠對網頁進行簡單的樣式開發。

課程安排：

1、掌握CSS3基本語法和使用

2、掌握CSS3各類選擇器/樣式屬性，快速進行樣式設置

3、學習文本、字體等常見屬性

4、盒子模型核心知識講解，深入理解原理

5、掌握行內元素和塊級元素設置與轉換

3、CSS3浮動定位與背景樣式

簡單的樣式開發還不夠，通過掌握浮動、定位、邊框、背景樣式以及2D&3D轉換，以及布局技巧。能夠進行特殊圖形繪制，開發更美觀的網頁效果。

課程安排：

1、浮動與定位核心知識，靈活運用實現網頁布局

2、常見布局方法，解決布局常見問題

3、如何繪制圓角邊框/陰影框/圖片邊框等特殊圖形

4、掌握元素扭曲/移位/旋轉，更自由的裝飾HTML

5、BFC規范和瀏覽器差異

4、CSS3動畫與窮游首頁開發實戰

CSS3也能實現炫酷的網頁動態效果，結合企業級上線“旅游網”項目，綜合運用前面所學的知識，完成窮游首頁排版布局和CSS3動畫特效開發。

課程安排：

1、大項目：結合H5/CSS3，完成PC端仿窮游首頁布局開發

2、掌握不同布局結構與技巧

3、掌握過渡的使用與緩動效果，實現常見小案例

4、運用動畫效果，實現炫酷動畫效果

5、大作業：棧家居網頁布局開發

5、JS基礎語法與表達式

JS是網頁編程，開始學習JS編程語言，掌握基礎語法結構、變量聲明和命名規則、數據類型、表達式和操作符，學完這些內容可以進行簡單的JS代碼編寫。

課程安排：

1、掌握JS基本語法使用

2、掌握JS變量聲明與提升的機理

3、掌握JS運算符操作與表達式

4、學習基本數據類型和復雜數據類型使用

5、深入理解數據類型轉換與檢測

6、小案例：計算器和表達式綜合運用

6、JS流程控制語句與數組

繼續深入學習JS編程語言，掌握條件分支語句、循環語句和數組，學完這些內容可以用簡潔的代碼實現強大功能。

課程安排：

1、掌握if，if elseif，switch等條件分支語句使用

2、掌握for、while、do while循環語句使用

3、掌握數組基本使用和常用方法

4、break和continue語句的特點及應用

5、運用數組知識，學習基本算法

6、使用簡單的邏輯實現復雜業務邏輯

7、小案例：常見算法綜合運用

7、JS函數與DOM

如想實現更炫的動態效果，那么操控網頁元素很重要，通過掌握函數編程、DOM操作、事件以及BOM對象，讓你能實現典型的觸發和動態交互效果。

課程安排：

1、掌握DOM操作和DOM事件

2、掌握函數基礎與函數高級應用

3、掌握BOM瀏覽器對象模型，與瀏覽器“對話”

4、掌握函數封裝，提升編碼質量

5、小案例：有趣的動畫效果開發

8、面向對象

面向對象是開發中非常重要的思想，我們將開始運用面向對象思想進行程序開發，編寫高質量代碼，解決企業級編程協同問題。

課程安排：

1、學習this規則與使用

2、掌握構造函數概念以及創建、調用與使用

3、理解原型和原型鏈的關系與運用

4、閉包和作用域應用

5、熟練使用面向對象思想進行DOM編程

6、掌握JS模塊化編程方式，編寫高質量代碼

7、掌握模塊化開發技巧，解決企業級編程協同問題

8、小案例：俄羅斯方塊游戲開發

9、項目實戰：仿窮游JS特效開發

實戰出真知，綜合運用H5、CSS3和JS所學知識，從0到1完成一個具備CSS3動畫和JS特效的多特效旅游網頁。掌握企業常見的網頁開發方式和各類特效實現方案。

課程安排：

1、結合H5/CSS3/JS，完成PC端仿窮游首頁特效開發

2、項目動畫效果分析，幫助更快梳理思路

3、實現典型JS特效效果：Banner圖、返回頂部動畫、垂直菜單

4、學習正則表達式，完成常見手機號、郵箱、姓名等功能驗證

3、大作業：棧家居網頁JS特效開發

階段二：組件化與移動WebApp開發

1、ES6基礎入門

ES6是JavaScript新的語法規范，讓代碼更規范、可讀性高、方便操作。將開啟ES6的學習，這是學習前端必備的一步。掌握ES6相關知識后，能夠更便捷的編寫代碼，提高開發效率。

課程安排：

1、ES6基本語法與使用

2、掌握ES6中變量和常量的使用與區別

3、學習可以嵌入表達式的字符串字面量--模板字符串

4、掌握箭頭函數的特點與應用

5、掌握如何自動解析數組或對象中的值

6、了解對象字面量更加簡潔與靈活的表達方式

7、掌握參數默認值的使用

2、ES6語法擴展

繼續學習ES6的基礎，通過進一步學習ES6引入的新特性，了解ES6的新方法，掌握新的集合類型，更深入的了解數據的遍歷。

課程安排：

1、剩余參數與展開運算符的對比進行學習

2、了解如何實現減少邏輯或操作符的使用

3、認識ES6中新增的數據結構

4、了解ES6中新增的方法

5、了解遍歷原理，以及學習新的循環方式

3、ES6之Promise與Class類

Promise 和 Class（類）是ES6中非常重要的知識點。Promise 是異步編程的一種解決方案，比傳統的回調函數更合理和更強大。Class（類）來作為對象的模板使用，強化面向對象的使用。

課程安排：

1、學習如何高效解決回調地域問題

2、了解如何運用ES6 Promise進行異步編程

3、掌握Class基本語法的使用

4、掌握更加清晰與便捷的對象繼承方式

5、掌握更高級的面向對象編程思想

4、ES6之Module模塊與Babel編譯

ES6 在語言標準的層面上，實現了模塊功能。可以實現將一個大程序拆分成互相依賴的小文件。而babel的使用，完美的解決了ES6的兼容性問題，讓ES6有更多可能性，使前后端差異越來越小。

課程安排：

1、了解企業級的開發形式——模塊化的使用

2、學習將一個復雜的功能拆分，從而提高復用率

3、了解如何更好的維護代碼

4、掌握babel轉換器的使用，解決ES6的兼容問題

5、學習如何將Webpack與配合Babel使用，完成更高效的開發

6、掌握Webpack項目構建配置

5、HTTP 協議、存儲、Ajax

開啟前后端數據交互的學習，來理解前后端開發的區別，了解網絡通信的相關概念，并對與后臺通信、獲取數據有一個初體驗。概念比較抽象，先作為了解。在后面項目開發環節，隨著對知識的運用，對概念會有更深一步的理解。

課程安排：

1、了解如何區分前后端

2、理解HTTP協議，熟悉網絡通信相關概念

3、學習本地存儲的多種方式，了解數據緩存機制

4、了解JOSN數據的幾種書寫格式

5、熟悉原生Ajax請求流程與細節

6、掌握常見的跨域技巧

7、學習如何自己封裝Ajax

8、了解基于promise的Ajax插件——Axios

6、項目實戰：仿窮游組件化開發

組件化開發是一種高級編程思想，適用于團隊協作開發，是企業中常見的一種開發模式。會使用組件化方式來完成“仿窮游商城首頁”的重構。掌握組件化開發能夠更好的促進團隊協作，提高開發和調試效率，可維護性更高。

課程安排：

1、綜合運用H5/CSS3/ES6等知識，使用“組件化的開發思想”重構旅游網首頁

2、了解項目組件化劃分方式

3、了解模塊化與組件化區別

4、采用模塊化與組件化結合的開發方式

5、使用Webpack構建項目

6、運用 art-template 模板引擎，高效開發

7、真實的數據接口，實現前后臺聯動

8、通過自己封裝的Ajax向后端請求數據

9、使用Class、Module模塊完成圖的基類，實現模塊化，提高復用率

7、移動基礎

移動開發基礎是進行webApp開發。開啟前端學習的新篇章。通過移動端基礎知識的學習，能夠獨立實現適配不同移動端終端的頁面。

課程安排：

1、學習移動基礎概念

2、理解移動端與pc端web開發的區別

3、掌握移動端常用的Rem適配方案

4、掌握Flex布局的使用

5、學習響應式布局開發

6、不同的適配方法

7、學習柵格系統的使用

8、了解移動端屏幕、移動端瀏覽器、操作系統的不同

8、移動進階之高效開發

移動端高質量的開發，是移動端開發的必備技能。繼續移動端的學習，學習移動端的事件、開發中的常見問題，以及如何使項目的性能更加優化。

課程安排：

1、掌握移動端常用的事件

2、小案例：移動端幻燈片的實現

3、移動端開發中常見的問題

4、主流移動端頁面開發技術選型與解決方案

5、學習如何從HTML、CSS、JavaScript三方面優化性能

9、項目實戰：仿窮游移動webapp開發

接下來的一周，我們將迎來webApp項目的開發，實現從PC端開發邁向移動端。從項目分析、組件劃分、結構搭建、功能實現、性能優化。體驗真實企業中移動端項目的開發流程

課程安排：

1、綜合運用H5/CSS3/ES6/移動知識，重構旅游網WebAPP的首頁、目的地頁

2、符合企業標準的開發流程，從項目分析、項目搭建、模塊開發到數據對接

3、采用模塊化與組件化結合的開發方式

4、使用Webpack構建項目

5、運用 art-template 模板引擎，高效開發。

6、完成 18 個典型組件開發（搜索、商品、導航等組件）

7、運用Swiper高效移動端插件開發Banner圖

8、使用Ajax 處理與獲取數據

9、如何處理多次請求的解決方案

10、如何運用組件化思維，拆分和復用組件

11、完成各組件性能的優化

階段三：小程序與主流框架開發

1、小程序基礎與棧程小程序實戰

開始學習爆火的輕應用開發技術——小程序 。通過對小程序知識的學習，能夠獨立開發企業級小程序，擁有解決主流小程序功能需求的能力。

課程安排：

1、大項目：結合Flex/Template模板，開發棧程小程序首頁/活動頁/熱門排行頁

2、了解小程序注冊流程/注冊方式/注冊主體

3、小程序的全局生命周期和頁面級生命周期

4、小程序基礎語法與常用API

5、小程序開發工具的調試辦法

6、小程序多頁面下的開發工作流及目錄結構

2、Re****js基礎語法與新聞網站實戰

Re****js是企業開發熱門框架之一 。通過對Re****js基礎和項目的學習，具備構建企業級項目和解決核心業務問題的能力，快速接入企業項目。

課程安排：

1、大作業：運用React組件完成新聞網站項目常見功能開發

2、理解React的開發理念與內部原理

3、React的基本使用及Ant Design組件庫進行項目開發

4、使用React封裝項目中用到組件，實現復用

5、React項目中常見問題的解決方案

6、如何運用React-Redux進行狀態管理

7、聲明式編程的思想與組件化開發的思想

3、Sass基礎與Vu**js基礎語法

Vu**js是企業開發另一熱門框架，易用、靈活、高效，對于初學者很友好。通過對Vu**js基礎和Sass布局技術的學習，為后續的全棧項目開發打下基礎。

課程安排：

1、大作業：訂單列表和購物車列表頁

2、掌握Webpack項目構建配置

3、掌握基礎語法與常見API

4、組件的使用及組件的生命周期

5、Axios網絡請求及路由使用

6、Vuex的引入、應用場景及項目中的實現

7、使用Vu**js技術棧進行項目開發的方式方法

8、掌握Sass布局基礎

4、項目實戰：Vu**js仿京東到家電商全棧項目前端開發（上）

開始進入到電商全棧項目開發，首先使用Vu**js前端實戰的首頁和商家詳情頁，還原實際開發流程，綜合運用所學知識，完成頁面開發，掌握開發中常見問題解決技巧。

課程安排：

1、綜合運用Sass和Vu**js完成登錄頁/注冊頁/首頁/商家詳情頁

2、使用vu******.0創建開發環境

3、使用axios發送Mock請求

4、使用路由守衛實現基礎登陸校驗功能

5、動態路由/異步路由與組件拆分復用

6、首頁/商家詳情頁數據渲染

7、Vu**js項目中常見問題的解決方案

5、項目實戰：Vu**js仿京東到家電商全棧項目前端（下）

Vu**js前端項目實戰的第二部分，實現電商核心業務訂單和地址管理模塊，掌握開發中常見問題解決技巧，真實數據訪問，開發完整的Vu**js電商前端項目。

課程安排：

1、綜合運用Sass和Vu**js完成訂單提交頁/地址列表頁/地址編輯/地址新建頁

2、使用axios發送Mock 請求

3、動態路由/異步路由與組件拆分復用

4、訂單提交頁/地址列表頁數據渲染

5、Vu**js項目中常見問題的解決方案

6、步驟大作業：完成訂單列表頁和購物車列表頁開發

階段四：No***js全棧開發

1、全棧必備基礎No***js

學前端不至于前端，開始學習服務端基礎知識，掌握什么是服務端以及服務端必備no***js，夯實基礎，邁進前端全棧開發。

課程安排：

1、案例：搭建no***js服務器及創建MongoDB數據庫

2、了解什么是服務端，服務端與前端的關系

3、掌握commonjs模塊化與npm插件使用

4、掌握inspect調試方法

2、koa2中間件與MongoDB數據庫

真實企業開發離不開數據庫，Koa2框架有效的提高開發效率，掌握前端必備的前端全棧開發知識，為后面開發全棧項目蓄力。

課程安排：

1、了解koa2中間件與洋蔥圈模型

2、了解關系型數據庫與MongoDB基礎API詳解

3、掌握no***js操作MongoDB方法與mongoose規范數據模型

3、項目實戰：no***js仿京東到家電商全棧項目后端開發

開始進入到電商全棧項目的后端開發，對標企業標準開發流程。從登錄實現方案、項目需求分析、接口和數據結構設計到業務開發，幫你打通前后端任督二脈，突破全棧技術瓶頸，為就業加碼。

課程安排：

1、綜合運用No***js+koa2+MongoDB，實現電商全棧項目的后端

2、掌握企業的開發流程與技巧，從0到1一步步實現

3、項目采用前后端分離開發模式

4、核心業務的數據庫設計與實現

5、真實數據接口和設計與實現

6、Koa工作流程及常見Koa中間件使用

7、掌握前后端數據聯調技巧，打通前后的數據交互

8、常見MongoDB與nodejs集成

9、了解cookie 和session的關系

10、大作業：訂單和購物車列表頁的數據庫和接口設計

4、就業必備基礎技術面試分析

面試是通往成功就業的關鍵一步，包含布局基礎以及JS和ES6等常見考點和經典面試題分析，帶你把知識串成線，掌握前端面試技巧，順利通過基礎技能面試。

課程安排：

1、H5語義化/CSS布局/定位/圖文樣式/響應式面試解題技巧

2、原型和原型鏈的5個原則與面試解題技巧

3、變量類型/計算/構造函數的面試解題技巧

4、作用域和閉包的執行上下文/this面試解題技巧

5、異步和單線程/常見的內置對象面試解題技巧

6、DOM本質/節點操作/BOM操作面試解題技巧

7、AJAX與事件解面試題技巧

5、就業必備框架與全棧技術面試分析

框架、小程序以及全棧相關內容也是面試必考。帶大家梳理的常見考點和經典面試題分析，理清面試解題方法，完成最后一厘米的沖刺。

課程安排：

1、Vu**js原理/MVVM面試解題技巧

2、組件生命周期/父子組件傳值面試解題技巧

3、組件異步加載/緩存/抽離公共邏輯面試解題技巧

4、vue-router/data監聽面試解題技巧+5道Vu**js真題演練

5、React基礎語法/事件面試解題技巧

6、React組件生命周期/父子組件通訊面試解題技巧

7、React函數組件與class組件區別面試解題技巧

8、Redux/react-router面試解題技巧