课程大纲：

Web前端培训

北京、上海、广州、深圳、天津、济南、武汉、成都、重庆、西安、郑州、长沙、石家庄和杭州 同步开课线下价格21700

课程介绍
本课程面向对编程感兴趣或者从事过软件编程方面的工作的学员，从最基本的网页编程开始学习。掌握Web前端技术的基本原理、发展历史 以及作为Web前端工程师的学习发展经验；了解并掌握HTML5、CSS3、JavaScript、VUE、Node.js应用场景。整个学习过程关联不同应用场 景的案例,以便更加深入了解技术,达到中高级工程师级别。

课程时长：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的使用

第四阶段： 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世界杯新闻

第七阶段：小程序
模块名称
课程内容
小程序开发基础
小程序简介
微信小程序基础
生命周期
云ＡＰＩ
Index页面
Logs页面
申请接口
调试接口
项目界面
功能组合
申请搞得地图开发者
微信小程序SDK
引入高德导航
查找周围兴趣点
出行方式选择
选择城市
发布小程序
UniApp
Uni-app框架简介
使用Weex/nvue 注意事项
使用HTML5+注意事项
条件编译
uni-app跨端开发注意事项
高效开发技巧
uni-app性能优化建议
uni-app开放生态
其他项目转 uni-app
uni-app混合开发
案例：新冠抗议系统
环球畅游点评实战项目
项目介绍及页面基础搭建
首页轮播布局
请求拦截与API管理
推荐资源平滑切换
推荐瀑布流
设置动态轮播高度
设置推荐咨询位置
下拉刷新与上拉加载
动态瀑布流页面布局
分包构建
富文本解析
点评组件
用户登录、注册
登录状态管理
个人中心
用户设置
集合使用mixins
登陆后评论
UGC动态发布
多项目打包发布

Web前端培训