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