課程描述INTRODUCTION
· 高層管理者· 中層領(lǐng)導(dǎo)· 其他人員
培訓(xùn)講師：講師團
課程價格：￥元/人
培訓(xùn)天數(shù)：90天
日程安排SCHEDULE
課程大綱Syllabus
Web前端培訓(xùn)
北京、上海、廣州、深圳、天津、濟南、武漢、成都、重慶、西安、鄭州、長沙、石家莊和杭州 同步開課 線下價格21700
課程介紹
本課程面向?qū)幊谈信d趣或者從事過軟件編程方面的工作的學(xué)員，從最基本的網(wǎng)頁編程開始學(xué)習(xí)。掌握Web前端技術(shù)的基本原理、發(fā)展歷史 以及作為Web前端工程師的學(xué)習(xí)發(fā)展經(jīng)驗；了解并掌握HTML5、CSS3、JavaScript、VUE、Node.js應(yīng)用場景。整個學(xué)習(xí)過程關(guān)聯(lián)不同應(yīng)用場 景的案例,以便更加深入了解技術(shù),達到中高級工程師級別。
課程時長：700小時100天
課程內(nèi)容
第一階段： HTML 網(wǎng)頁開發(fā)
HTML5技術(shù)
前端開發(fā)認(rèn)知
互聯(lián)網(wǎng)原理
HTML版本規(guī)范、標(biāo)簽語法
HTML元素、屬性
編輯器、HTML基本骨架
HTML常用標(biāo)簽
相對路徑、*路徑
HTML表單、Frame框架
HTML字符實體
案例:網(wǎng)格布局瑞通購超市
HTML5新增語義化標(biāo)簽
HTML5多媒體音頻標(biāo)簽
HTML5多媒體視頻標(biāo)簽
HTML5新增input表單
HTML5新增可輸入表單
HTML5新增表單屬性
canvas繪圖
svg繪圖
地理定位
拖放API
Web Worker、Web Storage
Websocket
Web服務(wù)器發(fā)送事件
案例:音樂播放器
CSS3基本語法
CSS 教程
CSS 簡介
CSS 基礎(chǔ)語法
CSS 高級語法
CSS 派生選擇器
CSS id 選擇器
CSS 類選擇器
CSS 引入方式
CSS 背景
CSS 文本
CSS 字體
CSS 列表
CSS 表格
CSS 輪廓
繼承性
層疊性
取色器
案例：商品資料卡案例
CSS3核心樣式
css常用樣式
盒子模型
盒子模型拓展_清除默認(rèn)樣式
盒子模型拓展_height應(yīng)用
盒子模型拓展_父子盒模型
盒子模型拓展_margin塌陷現(xiàn)象
浮動定義、性質(zhì)
相對定位、*定位、固定定位
PS學(xué)習(xí)、切圖工具
兼容性問題
幾種常見網(wǎng)頁布局
屏幕適配
案例：靜態(tài)輪播圖布局
CSS3特性
CSS3 邊框
CSS3 背景
CSS3 文本效果
CSS3 字體
CSS3 2D 轉(zhuǎn)換
CSS3 3D 轉(zhuǎn)換
CSS3 過渡
CSS3 動畫
CSS3 多列
CSS3 用戶界面
使用RGBA實現(xiàn)透明效果
使用“@Font-Face”實現(xiàn)定制字體
案例：逐幀動畫演示
項目一：PC端靜態(tài)網(wǎng)頁應(yīng)用開發(fā)項目
網(wǎng)頁項目開發(fā)流程
網(wǎng)頁開發(fā)的常見概念和布局流程
瑞通購超市-head內(nèi)部配置
瑞通購超市-base.css
瑞通購超市-header整體布局
瑞通購超市-logo和選擇地區(qū)
瑞通購超市-導(dǎo)航nav
瑞通購超市-導(dǎo)航右側(cè)
瑞通購超市-login-banner大結(jié)構(gòu)
瑞通購超市--login-form
瑞通購超市-search區(qū)域
瑞通購超市-content區(qū)域
瑞通購超市-main區(qū)域大結(jié)構(gòu)
瑞通購超市-aside側(cè)邊欄部分
瑞通購超市-banner焦點圖部分
瑞通購超市-熱門商品
瑞通購超市-猜你喜歡
瑞通購超市-其它登錄方式
瑞通購超市-二維碼定位效果
瑞通購超市-返回頂部
瑞通購超市-快速搭建公共頁面
項目二：京東項目網(wǎng)頁應(yīng)用開發(fā)
四種不同布局方式實現(xiàn)：
移動端開發(fā)基礎(chǔ)
流式布局
Flex布局
Rem布局
響應(yīng)式布局
第二階段： Javascript網(wǎng)頁編程
模塊名稱
課程內(nèi)容
JavaScrip語法基礎(chǔ)
網(wǎng)頁、網(wǎng)站和應(yīng)用程序
前端三層和javaScript應(yīng)用場景
Js簡介
Js實現(xiàn)
Js語句
Js注釋、變量、運算符
Js操作符
Js流程控制
Js消息框
Js函數(shù)
Js異常處理
Js特殊字符
Js指導(dǎo)方針
案例：登錄、注冊校驗用戶名規(guī)則
JavaScript對象
Js對象簡介
Js字符串
Js日期
Js數(shù)組
Js邏輯
Js算數(shù)
Js RegExp
Js HTML DOM
案例：萬年歷
JavaScript高級特性
WebAPI使用
Js瀏覽器
JS BOM
Js Cookies
Js 驗證
Js 圖像地圖
Js 計時
Js 創(chuàng)建對象
ES6新特性
案例：貪吃蛇游戲
jQuery基礎(chǔ)、核心語法
jQuery簡介
jQuery入門Demo
$()方法
jQuery對象
JQ對象和js對象轉(zhuǎn)換
jQuery選擇器
篩選選擇器和篩選方法
html()、text()、val()方法
attr()、removeAttr()方法
prop()、css()方法
操作類名方法
jQuery常用事件方法
jQuery節(jié)點操作
發(fā)送驗證碼控制按鈕
放大鏡切換項
jQuery插件
案例： 三級聯(lián)動
jQuery動畫
eq()排序
Index()排序
排他思想
animate() 動畫方法
動畫排隊
動畫延遲
動畫停止
自定義動畫
案例：情人節(jié)動畫特效
Ajax網(wǎng)絡(luò)編程
客戶端與服務(wù)器
URL地址的概念及組成部分
抓包
Ajax概念
Ajax的應(yīng)用場景
Ajax 入門Demo
同步、異步
原生Ajax
接口概念
接口文檔
Postman工具接口調(diào)試
其他請求
案例：學(xué)生信息管理（模擬CRUD操作）
Ajax高級
模板引擎
Xhr的基本使用
數(shù)據(jù)格式交換
封裝Ajax函數(shù)
Xhr Lever2的新特性
axios概述
axios使用
案例：文件上傳
跨域問題解決
跨域請求介紹
同源策略
JSONP原理
Jquery對JSONP支持
cors跨域
AartTemplate使用
用戶評價-瀏覽熱評
用戶評價-新評價
用戶評價-刪除、修改評價
案例：商品搜索場景應(yīng)用
數(shù)據(jù)庫操作
HTTP協(xié)議與報文
基于Express的路由、中間件
MongoDB數(shù)據(jù)庫基礎(chǔ)
數(shù)據(jù)庫搭建
數(shù)據(jù)庫建表
數(shù)據(jù)庫增刪改查
mongoose的使用
非關(guān)系型數(shù)據(jù)庫特點
服務(wù)器同數(shù)據(jù)庫交互
sha1、MD5加密隱私數(shù)據(jù)
項目 新聞熱點速覽
項目需求分析
項目架構(gòu)設(shè)計
使用Github項目管理工具
登錄注冊
快速實現(xiàn)首頁布局效果
渲染圖片
密碼加密操作
控制用戶權(quán)限
路由處理
新聞類別
新聞發(fā)布
新聞撤銷
新聞修改
分頁顯示
項目部署發(fā)布
第三階段： 后臺技術(shù)開發(fā)
Node.js基礎(chǔ)
Node.js介紹
Node優(yōu)勢及發(fā)展趨勢
Node中的時間輪詢機制
npm、cnpm、yarn包管理器
Node.js核心基礎(chǔ)
Buffer緩沖器
Node文件系統(tǒng)（簡單、流式文件操作）
原生Node搭建服務(wù)器
Express搭建服務(wù)器
ejs模板渲染
cookie、session的使用
Web服務(wù)器和客戶端
IP地址和域名
DNS服務(wù)器
端口
創(chuàng)建服務(wù)器雛形
腳手架工具
自動化構(gòu)建
案例：服務(wù)器端搭建
Gulp
Gulp認(rèn)知
Gulp組合任務(wù)
Gulp文件操作
構(gòu)建樣式文件
Autoprefixer
構(gòu)建腳本文件
構(gòu)建HTML文件
構(gòu)建圖片文件
文件清楚
服務(wù)器發(fā)布
使用BootStrap
Reload
Gulp與Yeoman
案例：項目模擬發(fā)布
模塊化開發(fā)
模塊化開發(fā)概述
模塊化的演變過程
模塊化規(guī)范的出現(xiàn)
ES Modules 常見特性
ES Modules 導(dǎo)入導(dǎo)出
ES Modules 環(huán)境兼容ES Modules in Node.js支持
ESModules in Node.js與CommonJS
ES Modules in Node.js-Babel兼容方案
案例：模塊化開發(fā)應(yīng)用
Webpack打包
Webpack簡介
Webpack核心
Webpack配置文件
Webpack的工作原理
Webpack四個核心概念
Webpack的loader與plugin
webpack打包各種資源
webpack開發(fā)環(huán)境打包
webpack生產(chǎn)環(huán)境打包
Webpack模塊熱替換
webpack tree shaking
webpack代碼分離
webpack懶加載
DIY webpack配置環(huán)境
webpack打包優(yōu)化
Webpack在VUE中應(yīng)用
Webpack在React中應(yīng)用
案例：瑞通購超市項目打包部署
版本控制
SVN版本管理工具
git版本管理工具
SVN服務(wù)端常見操作
linux常見命令
創(chuàng)建本地倉庫
檢出、克隆本地倉庫
拉取遠(yuǎn)程代碼
分支的操作
處理沖突實戰(zhàn)
svn與git對比
git中差異對比
git中版本回退
github的使用
github創(chuàng)建組織
github的pullRequest操作
github的issues
githubPages的使用
SVN版本管理工具
git版本管理工具
SVN服務(wù)端常見操作
linux常見命令
創(chuàng)建本地倉庫
檢出、克隆本地倉庫
拉取遠(yuǎn)程代碼
分支的操作
處理沖突實戰(zhàn)
svn與git對比
git中差異對比
git中版本回退
github的使用
github創(chuàng)建組織
github的pullRequest操作
github的issues
githubPages的使用
第四階段： React實戰(zhàn)開發(fā)
React框架基本使用
React的基本認(rèn)識
React的基本使用
React JSX
模塊與模塊化和組件與組件化
React組件的基本使用
組件三大屬性1: state
組件三大屬性2: props
組件三大屬性3: refs
React事件處理
React組件的組合使用
React受控與非受控組件
組件生命周期
React腳手架的使用
項目的打包與發(fā)布
React DEMO: 評論管理
組件間通信
props
組件間通信
消息訂閱與發(fā)布
React框架進階
React ajax之a(chǎn)xios
React ajax之fetch
React DEMO: github users
React Router4基本路由
React Router4嵌套路由
React Router4向路由組件傳遞數(shù)據(jù)
React Router4編程式路由導(dǎo)航
ReactUI組件庫之material-ui
ReactUI組件庫之a(chǎn)nt-design
redux庫: 管理組件狀態(tài)
react-redux庫: 簡化使用
redux-thunk庫: redux異步
redux調(diào)用插件
自定義redux: createStore
自定義redux: combineReducers
自定義react-redux:Provider
自定義react-redux:connect
項目一：小米商城電商項目實戰(zhàn)
項目介紹
技術(shù)棧介紹
安裝mongodb數(shù)據(jù)庫軟件
創(chuàng)建lagou-carefully-selected項目
根據(jù)開發(fā)環(huán)境切換服務(wù)器端API接口地址
安裝Chrome擴展插件
創(chuàng)建應(yīng)用路由及Layout組件
全局store初始化
將路由狀態(tài)同步到全局store
構(gòu)建注冊登錄表單
實現(xiàn)注冊Redux工作流
重置注冊狀態(tài)
實現(xiàn)登錄
管理員Dashbaord組件添加鏈接和管理員信息
創(chuàng)建添加分類
實現(xiàn)分類列表
實現(xiàn)商品添加
構(gòu)建首頁搜索框布局
完成首頁獲取商品列表的redux流程
首頁商品列表數(shù)據(jù)展示
實現(xiàn)購物車
實現(xiàn)支付
第五階段：VUE.js框架及原理
模塊名稱
課程內(nèi)容
VUE.js基本使用
Vue的基本認(rèn)識與使用
模板語法
計算屬性和監(jiān)視
class與style綁定
條件渲染與列表渲染
事件處理與表單數(shù)據(jù)收集
Vue實例生命周期
過渡與動畫
自定義過濾器
內(nèi)置指令與自定義指令
自定義Vue插件
使用vue-cli創(chuàng)建模板項目
eslint編碼規(guī)范檢查
組件定義與使用
組件間通信1: props
組件間通信2: vue自定義事件
Vue框架進階
組件間通信3: 消息訂閱與發(fā)布
組件間通信4: slot
Vue ajax: axios與vue-resource
Vue DEMO: todo list
Vue DEMO: user search
Vue UI組件庫: mint-ui
vue-router: 基本路由
vue-router: 嵌套路由
vue-router: 向路由組件傳遞數(shù)據(jù)
vue-router: 緩存路由組件
vue-router: 編程式路由導(dǎo)航
vuex: 理解與基本使用
vuex: 相關(guān)API與結(jié)構(gòu)分析
vuex: 計數(shù)器應(yīng)用
vuex: todo list應(yīng)用
VUE源碼分析
vue源碼分析: 數(shù)據(jù)代理
vue源碼分析: 數(shù)據(jù)劫持
vue源碼分析: setter,getter分析
vue源碼分析: Object.defineProperty
vue源碼分析: 斷點調(diào)試
vue源碼分析: 數(shù)據(jù)劫持
vue源碼分析: 插值解析
vue源碼分析: 指令解析
vue源碼分析: 單向數(shù)據(jù)綁定
vue源碼分析: 雙向數(shù)據(jù)綁定
vue源碼分析: MVVM原理圖
MVC和MVVM區(qū)別
項目一 我贏職場項目系統(tǒng)實戰(zhàn)
項目簡介
使用VUE CLI創(chuàng)建項目
加入GIT版本管理
目錄結(jié)構(gòu)說明
調(diào)整初始目錄
代碼規(guī)范和風(fēng)格指南
自定義校驗規(guī)則
Element 組件庫
樣式處理
共享全局樣式
路由處理-基礎(chǔ)功能設(shè)置
路由處理-功能優(yōu)化
布局處理-布局容器
布局處理-側(cè)邊欄菜單
布局處理-頭部
布局處理-頭部（左側(cè)）
布局處理-頭部（右側(cè)）
接口處理-封裝請求模塊
登錄功能-頁面布局
登錄功能-接口測試
登錄功能-表單校驗
登錄功能-登錄請求發(fā)送
登錄功能-響應(yīng)處理
登錄功能-處理重復(fù)請求
登錄功能-封裝請求方法
身份認(rèn)證簡介
VUEX
VUEX安裝引入
VUEX-State
VUEX-Mutation
VUEX-Action
身份認(rèn)證
Token過期處理
權(quán)限管理
角色管理與用戶管理
課程內(nèi)容管理
項目發(fā)布部署
項目二 我贏職場移動端項目開發(fā)
項目搭建架構(gòu)與選課功能
登錄、用戶功能
學(xué)習(xí)、課程詳情、課時視頻功能
支付、打包優(yōu)化
第六階段：Flutter開發(fā)
模塊名稱
課程內(nèi)容
Flutter應(yīng)用開發(fā)
Flutter認(rèn)知
Flutter環(huán)境搭建
Dart基礎(chǔ)語法
Flutter列表和網(wǎng)格視圖Widget
布局
Flutter線程
Flutter文件機制,資源加載和網(wǎng)絡(luò)請求
Flutter與Native通信
自定義View
動畫
網(wǎng)絡(luò)開發(fā)
Flutter優(yōu)化
案例：Flutter世界杯新聞
第七階段：小程序
模塊名稱
課程內(nèi)容
小程序開發(fā)基礎(chǔ)
小程序簡介
微信小程序基礎(chǔ)
生命周期
云ＡＰＩ
Index頁面
Logs頁面
申請接口
調(diào)試接口
項目界面
功能組合
申請搞得地圖開發(fā)者
微信小程序SDK
引入高德導(dǎo)航
查找周圍興趣點
出行方式選擇
選擇城市
發(fā)布小程序
UniApp
Uni-app框架簡介
使用Weex/nvue 注意事項
使用HTML5+注意事項
條件編譯
uni-app跨端開發(fā)注意事項
高效開發(fā)技巧
uni-app性能優(yōu)化建議
uni-app開放生態(tài)
其他項目轉(zhuǎn) uni-app
uni-app混合開發(fā)
案例：新冠抗議系統(tǒng)
環(huán)球暢游點評實戰(zhàn)項目
項目介紹及頁面基礎(chǔ)搭建
首頁輪播布局
請求攔截與API管理
推薦資源平滑切換
推薦瀑布流
設(shè)置動態(tài)輪播高度
設(shè)置推薦咨詢位置
下拉刷新與上拉加載
動態(tài)瀑布流頁面布局
分包構(gòu)建
富文本解析
點評組件
用戶登錄、注冊
登錄狀態(tài)管理
個人中心
用戶設(shè)置
集合使用mixins
登陸后評論
UGC動態(tài)發(fā)布
多項目打包發(fā)布
Web前端培訓(xùn)
轉(zhuǎn)載：http://www.jkyingpanluxiangji.com/gkk_detail/285076.html