劍指大前端全棧工程師

本書對大前端技術棧進行了全面的講解，以實戰驅動教學，內容涉及HTML5+CSS3模塊、JS模塊、jQuery模塊、Bootstrap模塊、Node.js模塊、Ajax模塊、ES6新標準、Vue框架、UI組件和模塊化編程等。本書厚度有限，但學習的空間無限。 全書共分為五個階段，共18章。第一階段走進前端之HTML5+CSS3（第1~6章），第二階段探索JS的奧秘（第7~8章），第三階段PC端整棧開發（第9~11章），第四階段ES6+Node+工程化（第12~14章）和第五階段Vue技術棧（第15~18章）。書中引入了豐富的實戰案例，實際性和系統性較強，能夠很好地幫助讀者提升就業競爭力。書中還引入了3個企業級實戰項目，為打造企業剛需人才。 本書適合初、中級前端開發者、渴望瞭解前端知識整體脈絡的程序員，以及希望突破瓶頸進一步提升的工程師閱讀。

 

目錄

 

 

 

 

 

 

 

本書源代碼

 

 

 

 

資料包（教學課件、習題及面試題等）

 

 

 

 

 

 

第一階段走進前端之HTML5+CSS3

 

第1章大前端時代

 

1.1什麽是大前端

 

1.2大前端時代帶來的變革和機遇

 

1.3前端工程師的需求和前景

 

1.3.1前端工程師崗位要求

 

1.3.2市場對前端工程師的需求

 

1.3.3未來前景

 

1.4Web前端開發工具

 

1.5瀏覽器工具

 

第2章HTML5核心技術

 

2.1HTML初識

 

2.2HTML基本結構

 

2.2.1HTML骨架

 

2.2.2基本語法

 

2.2.3註釋

 

2.3HTML常用標簽

 

2.3.1基礎標簽

 

2.3.2文本格式化標簽

 

2.3.3特殊符號

 

2.3.4圖像標簽

 

2.3.5絕對路徑和相對路徑

 

2.3.6超鏈接標簽

 

2.3.7框架標簽

 

2.3.8容器標簽

 

2.4列表

 

2.4.1無序列表

 

2.4.2有序列表

 

2.4.3定義列表

 

2.4.4綜合實戰

 

2.5表格

 

2.5.1表格概述

 

2.5.2表格標題

 

2.5.3表格屬性

 

2.5.4表格行和列的屬性

 

2.5.5合並單元格

 

2.5.6表格嵌套

 

2.5.7綜合實戰

 

2.6表單

 

2.6.1表單標簽form

 

2.6.2輸入標簽input

 

2.6.3標記標簽label

 

2.6.4多行文本標簽textarea

 

2.6.5下拉列表標簽select

 

2.6.6域標簽fieldset

 

2.6.7綜合實戰

 

2.7塊級元素和行內元素的區別

 

第3章HTML5新增標簽和屬性

 

3.1HTML5表單新增

 

3.1.1HTML5新增輸入類型

 

3.1.2HTML5新增元素標簽

 

3.1.3HTML5新增屬性

 

3.2HTML5新增結構標簽

 

3.2.1新增文檔結構標簽

 

3.2.2新增格式標簽

 

3.3HTML5媒體標簽

 

3.3.1聲頻

 

3.3.2視頻

 

第4章CSS3核心模塊

 

4.1CSS核心基礎

 

4.1.1CSS介紹

 

4.1.2CSS的優勢

 

4.1.3基本語法

 

4.1.4CSS引入方式

 

4.1.5CSS引入方式的優先級

 

4.1.6開發者工具(Chrome)

 

4.1.7基礎選擇器

 

4.1.8復合選擇器

 

4.1.9偽類選擇器

 

4.1.10屬性選擇器

 

4.1.11繼承與層疊

 

4.1.12DIV+CSS佈局

 

4.1.13綜合實戰

 

4.2CSS美化頁面元素

 

4.2.1字體樣式

 

4.2.2文本樣式

 

4.2.3顏色

 

4.2.4背景樣式

 

4.2.5列表樣式

 

4.2.6綜合實戰

 

4.3盒模型

 

4.3.1什麽是盒模型

 

4.3.2盒子大小

 

4.3.3定義邊框border

 

4.3.4外邊距margin

 

4.3.5內邊距padding

 

4.3.6綜合實戰

 

4.4浮動和定位

 

4.4.1浮動應用

 

4.4.2清除浮動

 

4.4.3display和overflow屬性

 

4.4.4定位

 

4.4.5zindex屬性

 

4.4.6綜合實戰

 

第5章CSS3新增特性

 

5.1CSS3邊框與漸變

 

5.1.1CSS3特效邊框

 

5.1.2漸變

 

5.2轉換

 

5.2.12D轉換

 

5.2.23D轉換

 

5.3過渡與動畫

 

5.3.1過渡

 

5.3.2動畫

 

5.4響應式

 

5.4.1媒體查詢

 

5.4.2響應式佈局

 

5.4.3多列

 

5.5CSS3高級技巧

 

5.5.1字體圖標

 

5.5.2雪碧圖

 

5.5.3滑動門

 

第6章企業級項目： 小米官網（264min）

 

6.1小米黑色導航條

 

6.2小米白色導航條

 

6.3小米輪播圖和滑動門

 

6.4小米小廣告位

 

6.5小米閃購

 

6.6小米手機部分

 

6.7小米視頻部分

 

6.8頁腳

 

 

第二階段探索JavaScript的奧秘

 

第7章JavaScript基礎

 

7.1快速入門

 

7.1.1JavaScript簡介

 

7.1.2第1個JavaScript 程序

 

7.1.3JavaScript語法

 

7.1.4JavaScript 變量

 

7.1.5數據類型

 

7.1.6JavaScript 輸出

 

7.2運算符

 

7.2.1算術運算符

 

7.2.2賦值運算符

 

7.2.3比較運算符

 

7.2.4邏輯運算符

 

7.2.5三元運算符

 

7.2.6運算符的優先級

 

7.3程序控制語句

 

7.3.1順序結構語句

 

7.3.2分支結構語句

 

7.3.3循環結構語句

 

7.4函數

 

7.4.1常用系統函數

 

7.4.2自定義函數

 

7.5對象

 

7.5.1創建對象

 

7.5.2對象的使用

 

7.6內置對象

 

7.6.1Array

 

7.6.2Math

 

7.6.3Date

 

7.6.4String

 

第8章JavaScript深入解析

 

8.1DOM

 

8.1.1DOM簡介

 

8.1.2節點

 

8.1.3節點獲取

 

8.1.4節點操作

 

8.1.5DOM CSS

 

8.2事件處理

 

8.2.1鼠標事件

 

8.2.2鍵盤事件

 

8.2.3窗口事件

 

8.2.4表單事件

 

8.3BOM

 

8.3.1window對象

 

8.3.2history對象

 

8.3.3location對象

 

8.3.4navigator對象

 

8.3.5screen對象

 

8.4綜合實戰

 

 

 

 

 

 

 

第三階段PC端整棧開發

 

第9章jQuery模塊

 

9.1初識jQuery

 

9.2jQuery對象和DOM對象

 

9.3jQuery 選擇器

 

9.3.1基本選擇器

 

9.3.2層次選擇器

 

9.3.3基本過濾選擇器

 

9.3.4屬性過濾選擇器

 

9.3.5表單選擇器

 

9.4jQuery中的DOM操作

 

9.4.1樣式操作

 

9.4.2內容操作

 

9.4.3節點操作

 

9.4.4屬性操作

 

9.4.5節點遍歷

 

9.5鏈式編程與隱式迭代

 

9.6事件和動畫

 

9.6.1頁面載入

 

9.6.2常用事件

 

9.6.3事件對象的屬性與方法

 

9.6.4常用動畫方法

 

9.6.5自定義動畫方法

 

9.7原生 Ajax

 

9.7.1JSON

 

9.7.2純JS的Ajax請求

 

9.8jQuery Ajax

 

9.9jQuery 插件

 

9.9.1jQuery UI

 

9.9.2自定義jQuery插件

 

9.9.3編寫jQuery插件之放大鏡

 

9.10綜合實戰

 

第10章Bootstrap模塊

 

10.1Bootstrap簡介

 

10.2搭建Bootstrap環境

 

10.3Bootstrap柵格系統

 

10.3.1柵格系統介紹

 

10.3.2在Bootstrap中創建柵格

 

10.3.3響應式列的重置

 

10.3.4列偏移、排序和嵌套

 

10.4全局 CSS 樣式

 

10.4.1排版

 

10.4.2代碼

 

10.4.3表格

 

10.4.4表單

 

10.4.5按鈕

 

10.4.6圖片

 

10.5組件應用

 

10.5.1字體圖標

 

10.5.2下拉菜單

 

10.5.3導航

 

10.5.4按鈕組

 

10.6使用Bootstrap JavaScript插件

 

10.6.1如何使用Bootstrap JavaScript插件

 

10.6.2動畫過渡(Transition)

 

10.6.3模態彈出框(Modal)

 

第11章企業級項目： 藍莓派音樂社區（260min）

 

11.1XAMPP安裝

 

11.2藍莓派音樂頁面登錄Ajax請求

 

11.3藍莓派登錄後台構建

 

11.4藍莓派登錄後頁面結構變更

 

11.5首頁輪播數據構建與Ajax請求

 

11.6首頁輪播數據頁面加載

 

11.7藍莓派模態框處理與加載

 

11.8分頁器原理解析

 

11.9聊聊模塊瀑布流繪制加載

 

11.10聲頻播放控制器結構與按鈕邏輯

 

11.11聲頻按鈕與聲頻播放實現

 

11.12播放時間變換與進度條改變

 

 

第四階段ES6+Node+工程化

 

第12章ES6 新特性

 

12.1ES6 簡介

 

12.2ES6 變量

 

12.2.1let和const

 

12.2.2變量的解構賦值

 

12.3字符串擴展

 

12.3.1模板字符串

 

12.3.2標簽模板

 

12.3.3字符串新增方法

 

12.4數值的擴展

 

12.4.1Symbol數據類型

 

12.4.2Number

 

12.5函數的擴展

 

12.6數組的擴展

 

12.7對象的擴展

 

12.8Set和Map數據結構

 

12.9Class基礎語法

 

12.10Class的繼承

 

12.11模塊化

 

第13章Node.js編程模塊

 

13.1Node.js基礎

 

13.1.1Node.js優點

 

13.1.2Node.js安裝

 

13.1.3全局對象

 

13.1.4回調函數

 

13.1.5模塊(CommonJS規範)

 

13.1.6事件

 

13.1.7文件讀寫

 

13.1.8流和管道

 

13.2Node.js實現Web服務

 

13.2.1創建第1個應用

 

13.2.2模塊化組織代碼

 

13.2.3路由

 

13.2.4重構路由代碼

 

13.2.5使用GET和POST發送數據

 

13.3NPM命令

 

13.3.1使用NPM命令安裝模塊

 

13.3.2package.json

 

13.3.3熱部署

 

13.4Express框架

 

13.4.1Express介紹

 

13.4.2Express環境搭建

 

13.4.3Express初體驗

 

13.4.4Express路由

 

13.4.5GET與POST傳遞參數

 

13.4.6托管靜態資源

 

13.4.7Express中間件

 

第14章前端工程化

 

14.1Less

 

14.1.1Less介紹

 

14.1.2Less環境構建及使用

 

14.1.3Less語法

 

14.2Sass

 

14.3Webpack構建工具

 

14.3.1Webpack簡介

 

14.3.2安裝 Webpack

 

14.3.3Webpack之Loader配置和使用

 

14.3.4Webpack之Plugin的使用

 

14.3.5使用DevServer

 

14.3.6更多配置

 

14.3.7Webpack和Vue結合使用

 

 

第五階段Vue技術棧

 

第15章Vue知識體系

 

15.1Vue簡述及使用

 

15.1.1什麽是Vue

 

15.1.2為什麽選擇Vue

 

15.1.3Vue的3種安裝方式

 

15.1.4第1個Vue程序

 

15.2模板語法

 

15.2.1插值

 

15.2.2指令

 

15.2.3過濾器

 

15.3實例及選項

 

15.3.1數據選項

 

15.3.2屬性選項

 

15.3.3方法選項

 

15.3.4計算屬性

 

15.3.5表單控件

 

15.3.6生命周期

 

15.4模板渲染

 

15.4.1條件渲染

 

15.4.2列表渲染

 

15.4.3template標簽用法

 

15.5事件綁定

 

15.5.1基本用法

 

15.5.2修飾符

 

15.6基礎demo案例

 

15.6.1列表渲染

 

15.6.2功能實現

 

15.7自定義指令

 

15.7.1指令的註冊

 

15.7.2指令的定義對象

 

15.7.3指令實例屬性

 

15.7.4案例： 下拉菜單

 

15.7.5案例： 相對時間轉換

 

15.8組件

 

15.8.1什麽是組件

 

15.8.2組件的基本使用

 

15.8.3DOM模板解析說明

 

15.8.4組件選項

 

15.8.5組件通信

 

15.8.6內容分發

 

15.8.7動態組件

 

15.8.8綜合案例

 

15.9過渡與動畫

 

15.9.1元素/組件過渡

 

15.9.2使用過渡類實現動畫

 

第16章Vue工程化

 

16.1VueCLI

 

16.1.1Node.js

 

16.1.2NPM

 

16.1.3基本使用

 

16.2項目打包與發布

 

16.2.1使用靜態服務器工具包發布打包

 

16.2.2使用動態Web服務器(Tomcat)發布打包

 

16.3Vuedevtools

 

16.3.1Vuedevtools的安裝

 

16.3.2Vuedevtools使用

 

第17章UI組件庫和常用插件

 

17.1elementui

 

17.2Vuerouter

 

17.2.1基本用法

 

17.2.2跳轉

 

17.2.3路由嵌套

 

17.2.4路由參數傳遞

 

17.3Axios

 

17.3.1基本使用

 

17.3.2JSONServer的安裝及使用

 

17.3.3跨域處理

 

17.3.4Vue中Axios的封裝

 

17.4Vuex

 

17.4.1初識Vuex

 

17.4.2基本用法

 

17.4.3模塊組

 

第18章企業級項目： 部門管理系統（173min）

 

18.1技術分析

 

18.2項目構建

 

18.2.1前端項目搭建

 

18.2.2後端項目搭建

 

18.2.3數據庫設計

 

18.3查詢數據

 

18.3.1後端實現

 

18.3.2前端實現

 

18.4加載菜單

 

18.4.1引入elementui

 

18.4.2加載菜單

 

18.5帶分頁數據查詢

 

18.5.1後端接口實現

 

18.5.2前端實現

 

18.6部門員工的錄入

 

18.6.1後端接口實現

 

18.6.2前端實現

 

18.7部門數據編輯

 

18.7.1後端接口實現

 

18.7.2前端實現

 

18.8部門數據刪除

 

18.8.1後端接口實現

 

18.8.2前端實現