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