web前端培训-好口碑web前端培训 | 杨亦涛-关注知识分享博客网站

网页布局基础班阶段一
课时:10天技术点:68项测验:1次学习方式:新型面授

学习目标
借助PxCook工具，参照设计稿，能综合使用HTML+CSS技术完成企业级小兔鲜儿电商项目PC端首页开发。

主讲内容
1. HTMLHTML 负责网页的结构层，是网页开发的基础，从最简单的网页骨架搭建入手，使用常见的 HTML 标签丰富网页结构。

2. CSS在 HTML 搭建的网页结构基础上，通过 CSS 选择器精准选择标签，使用外观、盒模型相关属性完成网页全部内容，学习传统浮动、定位等完成网页布局，侧重使用 Flex 布局技巧精准控制网页布局，最终结合背景、圆角、阴影等装饰属性进一步美化网页效果，达到能够编写企业级大型综合网页。

选择器|外观|文字|背景|标准流|三大特性|盒模型|伪元素|浮动|伪类|定位|圆角|阴影|透明|过渡|flex 布局

3. 企业级小兔鲜儿电商项目首页制作借助PxCook工具，基于设计稿编写网页，确保网页的高度还原，通过综合运用 HTML + CSS 技术，按照实际项目开发流程，归纳开发技巧，提升综合实战水平，最终完成企业级小兔鲜儿电商项目PC端首页开发。

精灵图|文档编码|性能优化|布局技巧|SEO|性能优化|版心|设计稿|PxCook

移动Web高手班阶段一
课时:5天技术点:18项测验:1次学习方式:线下面授

学习目标
1. 使用CSS高级特效，丰富网页元素的呈现方式和效果| 2. 使用rem或vw|vh实现网页元素宽高随着视口变化等比缩放的效果| 3. 使用bootstrap框架布局响应式网页

主讲内容
1. CSS高级特效使用css高级特效丰富网页元素的呈现方式和效果。

字体图标|2D转换|3D转换|动画

2. 移动适配首先介绍Flex布局模型,实现移动端网页的基本布局;再讲解两种移动端网页适配不同分辨率的解决方案,并使用不同的解决方案制作网页元素宽高随着视口的变化而等比缩放的效果。

rem|vw/vh|Less基础语法|视口|分辨率|二倍图|移动适配|媒体查询

3. 响应式学习响应式的原理,并使用bootstrap框架完成响应式网页的布局。

媒体查询|bootstrap框架|栅格系统|组件|响应式网页布局

JavaScript高手班阶段二
课时:23天技术点:98项学习方式:线下面授

主讲内容
1. JavaScript核心学习JavaScript基础语法规则。

变量|基本数据类型|数据类型的转换|运算符|if分支|switch分支|三元表达式|while循环|for循环|数组|函数|对象|内置对象|let|const|字面量

2. WebAPI学习DOM和BOM对象的属性和方法,以完成网页常见的交互效果。

3. JavaScript高级深入理解 ECMAScript 的知识体系及工作机制，熟悉 ES6+ 新的语法特性，注重抽象思维的培养，具备面向对象编程的的能力。

构造函数|单体对象|面向对象|原型 |解构|剩余|展开|箭头函数|Object|Array |严格模式|闭包|继承|防抖|节流|异常处理|深浅拷贝

4. Ajax利用 axios 发起 Ajax 请求，实现前后端的数据交互。并讲解 HTTP 请求的过程以及 Ajax 的底层原理。深入学习 JS 异步的底层原理，能够使用 Promise 处理异步操作，并使用 async/await 简化异步操作。

5. Git能够创建 Git 仓库管理前端项目，基于 Git 分支进行多人协同开发，并且能够把本地的 Git 仓库同步到远程码云或 Github 仓库中。

安装和配置 Git|Git 本地操作的常用命令|.gitignore 忽略文件|Git 分支与常用命令|远程仓库的使用

数据可视化看板项目高手班阶段三
课时:3天技术点:8项学习方式:线下面授

数据看板是一个数据可视化项目，通过折线图|K线图|柱状图等图表形式归纳汇总大量数据，以实现更加直观的数据表达效果。学员通过学习该项目，能够掌握数据可视化|异步编程|实时数据获取等技术解决方案，适合有基础希望技能强化的IT人员继续学习。

主讲解决方案
1. 基于 bootstrap 的响应式页面布局方案| 2. 基于 echarts 的数据可视化解决方案| 3. 基于 token 的访问权限控制解决方案

主讲知识点
1.基于axios 实现网站注册和登录功能| 2.基于 Echarts 结合需求高度自定义不同类型的可视化图表| 3.Ajax|数据渲染和服务端推送前后端分离技术的应用| 4.基于 token 的访问权限控制功能

Vue.js高手班阶段四
课时:41天技术点:270项学习方式:线下面授

学习目标
1. 通过 Vue2 和 Vue3 的核心知识学习，掌握企业开发中常见业务功能实现| 2. 通过深入 Vue 技术栈学习 vue-router vuex vant element-ui 等主流技术，掌握企业级项目开发方式，如移动端H5项目与PC端管理项目| 3. 通过 Vue3 结合 TypeScript 的技术学习，以及 Vue3 技术栈 pinia 的学习，掌握大型企业级项目开发技巧| 4. 掌握 qiankun 微前端技术，具备重构巨石应用的能力，实现技术栈无关开发方式

主讲内容
1. 框架前置课掌握模块化思想，npm包管理，webpack基础，初探工程化开发。

2. Vue2.x 核心运用Vue2.0全家桶核心内容实现开发中常见的功能，如购物车，经典列表、TodoMVC等。运用 Vant 开发移动端，运用element-ui开发PC后台管理系统。

3. Vue3.x 核心掌握 Vue3 新特性、Vite 新一代构建工具、组合式 API、Pinia 等。

4. 微前端掌握 qiankun 微前端库，重构巨石应用、做到与技术无关。

5. TypeScript掌握TypeScript基础语法，且在Vue3项目中熟练运用TypeScript。

6. Vue 原理掌握 Vue 底层原理

Vue2项目高手班阶段五
课时:5天学习方式:线下面授

面经全端项目极客园H5项目

项目简介技术点:35项
面经系统，由面试经验文章PC管理后台，个人H5端面试文章浏览组成。学员学习该项目，能够锻炼对 Vue 完整技术栈的运用。同时该项目还涵盖了 token 身份认证、Vue 组件库、文件上传、富文本编辑器等前端技术解决方案，移动端开发，适合刚入手 Vue 框架、希望通过项目开发来巩固 Vue 基础的前端开发者学习。

Vue2进阶项目高手班阶段六
课时:11天学习方式:线下面授

智慧园区微前端项目人力资源项目

项目简介技术点:194项
黑马智数是一个数字化园区管理项目，该项目后台可以在线管理园区内的楼宇、企业、车辆和一体杆等资源，可视化大屏通过园区3D模型实时展示园区概况。学员通过该项目能学到如何用qiankun搭建微前端架构、用Echarts进行数据可视化、以及前沿的3D模型展示等技术方案。

进入项目体验学习目标
1.掌握Vue + Element技术栈在开发管理型后台项目的技术开发能力| 2.具备角色、人员、权限类系统的设计整体设计及应用能力| 3.拥有Vue.js相关的技术要点及配套的插件，解决方案深度使用能力| 4.具备使用 qiankun 搭建微前端项目的能力| 5.具备使用 echarts spline 等图形工具，开发 2D、3D数据可视化平台能力

神领物流平台高手班阶段七
课时:4天技术点:24项学习方式:团队实战

学习目标
分小组实战，多人开发协作，共同完成基于 vue-admin-template 搭建企业级中后台项目，能独立分析需求并按需求实现功能，能够解决测试过程中发现的BUG|掌握完整的业务开发流程，完成基础数据管理|车辆管理|订单和运单管理|调度管理等特色业务。

基于Vue2和ElementUI开发的神领物流平台对标主流快递物流公司的TMS系统，包含运输任务管理|订单管理|线路管理以及运费管理等核心业务。TMS系统能够对车辆|驾驶员|线路等进行全面详细的统计考核，能大大提高运作效率，降低运输成本。

Vue3 + TS项目高手班阶段八
课时:11天学习方式:线下面授

优医问诊 H5 项目小兔鲜儿PC前台电商项目

项目简介技术点:233项
优医问诊是一个连接医生和患者的移动医疗行业H5应用，通过高效、快速的在线问诊服务，为患者提供健康帮助，涵盖了找医生、快速问诊、开药门诊、疾病查询，健康百科等功能。该项目基于Vue3+TypeScript进行开发，且引入下一代状态管理工具 Pinia 和最热门的前端移动UI组件库 Vant ，采用全新技术栈，给学员带来最佳的企业实战项目，助力学员高薪就业。

进入项目体验学习目标
1. 掌握使用Vue3 + TypeScript 开发大型前端项目的能力| 2. 掌握使用Vant组件库开发移动端项目能力| 3. 掌握 Pinia 状态管理工具实现项目状态管理| 4. 掌握第三方登录和第三方支付业务解决能力| 5. 掌握快速问诊等在线问诊主流业务开发能力

小程序高手班阶段九
课时:13天技术点:87项学习方式:线下面授

学习目标
1. 掌握原生小程序开发，能够独立完成原生小程序项目开发| 2. 掌握 uni-app 多端框架，能够独立开发小程序和其他端的开发

主讲内容
1. 原生小程序了解小程序开发的一般流程序，熟悉小程基础组件的使用，能够基于 wxml 和 wxss 实现小程序的界面布局，基于模板的数据绑定实现数据的动态渲染，基于 API 实现与服务端的数据通信，以及熟悉其它高级 API 的使用。

2. uni-app理解 uni-app 实现跨平台开发的原理机制，理清单文件组件与原生小程序组件的对应关系，以及 uni-app 开发小程序时开发时与原生小程序的差异。

享+生活原生小程序项目高手班阶段十
课时:5天技术点:27项学习方式:线下面授

学习目标
1. 掌握开发原生小程序项目能力| 2. 掌握微信请求工具封装和使用| 3. 掌握微信用户登录和登录状态检测解决方案| 4. 掌握基于腾讯位置服务实现地理定位检索| 5. 掌握基于微信二维码服务实现访客通行证

主讲解决方案
1.微信小程序 vant 组件解决方案| 2.微信请求工具解决方案| 3.微信用户登录和登录状态检测解决方案| 4.腾讯位置服务实现地理定位检索解决方案| 5.微信二维码服务解决方案

uni-app小程序项目高手班阶段十一
课时:6天学习方式:线下面授

小兔鲜儿电商 uni-app 项目神领物流小程序司机端

项目简介技术点:30项
小程序无需安装，用完即走的应用方式越来越受到用户的欢迎，企业也都纷纷开展了小程序的开发。小兔鲜儿是一个经典的电商类小程序项目，包括商品、用户、购物车、订单等核心功能模块，采用 uni-app 框架做为跨平台小程序开发方案，并综合运用了原生小程序的组件化、模块化、网络请求、本地存储、微信登录、微信支付等技术，小兔鲜项目以企业的需求为基础，有针对性的对课程进行设计，学习本课程不仅能够培养学员的实践能力，还可以为就业提供有利的支撑。

学习目标
1.能够开发跨平台的小程序| 2.能够独立开发小程序项目| 3.掌握微信登录的实现方式| 4.掌握微信支付的实现方式

主讲解决方案
1.小程序跨平台开发解决方案| 2.小程序微信登录实现方案| 3.小程序微信支付实现方案| 4.下拉刷新/上拉加载交互实现方案| 5.数据缓存实现方案

React.js高手班阶段十二
课时:5天技术点:80项学习方式:线下面授

学习目标
通过 React + Hooks + Redux Toolkit 的学习，实现多种业务场景下的功能开发，如 B站评论|知乎频道管理|美团外卖|记账本等业务功能。

主讲内容
1. React 核心技术基于 React 脚手架（create-react-app）搭建React项目，掌握JSX语法搭建页面结构，使用函数组件实现组件化开发，掌握组件通讯在项目开发中的使用。

2. Hooks 深入+路由掌握 useEffect Hook 的应用，掌握 useRef Hook 的高级用法，理解 Hooks 原理，掌握 react-router-dom 的应用。

3. Redux +中间件 + Redux Toolkit掌握 React 最常用状态管理工具 Redux 的基本使用，使用 react-redux 链接库在 React 中使用 Redux，掌握 Redux 中间件 redux-thunk 用来处理异步请求，掌握 Redux Tookit 简化 Redux 的使用。

4. 记账本案例利用 React + Hooks + Redux Tookit 实现记账本案例，对整个 React 阶段所学内容进行练习，验证我们是否掌握了 React 开发能力。

就业加强课高手班阶段十三
课时:2天技术点:30项学习方式:线下面授

学习目标
通过企业常见面试题的学习，能够解答浏览器原理|vue项目相关|网络通信协议|前端基础类面试题。

主讲内容
1. 就业加强课面试题讲解

React.js 高级线上加薪课阶段一
课时:30天技术点:118项学习方式:线上学习

学习目标
进军大厂必备，结合 TypeScript+Hooks 和函数式编程思想完成项目开发。

主讲内容
1. TypeScript 基础理解类型系统理解并能使用泛型了解类型的推断过程了解类型的高级用法，能理解代码

2. TypeScript 高阶语法理解类型系统理解并能使用泛型了解类型的推断过程了解类型的高级用法，能理解代码

3. Hooks理解 Effect Hooks 和 State Hooks 设计思想理解 Hooks 应用场景掌握使用 Hooks 封装一些组件

useState | useEffect | useContext | 自定义 Hooks

4. 函数式编程掌握 JavaScript 函数式编程范式，为阅读前沿框架源码，学习框架设计思想做储备，例如：React、RxJS、cycleJS、lodashJS、underscoreJS 等。

纯函数 | 柯里化 | 函数组合 | Point Free | 声明式与命令式

5. Redux 中间件理解业内比较主流的 2 种数据管理设计思想掌握如何运用合适的数据管理工具在项目能通过查看源码对项目做一些性能优化

React-Redux | redux-thunk | redux-saga

6. 小兔鲜儿后台管理项目掌握基于 React 组件化技术解决方案掌握结合 Redux 状态管理掌握用户权限解决方案掌握 AI 智能推荐方案掌握秒杀 / 拼团 / 砍价方案掌握物流追踪方案掌握数据导出方案掌握第三方支付方案掌握即时通讯方案掌握短信服务方案掌握流媒体方案掌握单点登录方案掌握服务提醒方案

多端跨平台线上加薪课阶段二
课时:31天技术点:124项学习方式:线上学习

学习目标
高级前端工程师必备技能，真正实现一套代码多端运行，减少开发成本，提高开发效率。

主讲内容
1. Flutter 小兔鲜儿项目掌握 Flutter 开发环境搭建掌握 Dart 语言基础掌握 Flutter 常见的布局方式理解组件的概念及分类掌握基础组件、容器类组件、可滚动组件、功能性组件的应用

2. 小兔鲜儿原生小程序精讲理解 Taro 实现跨平台开发的原理机制理解单 JSX 组件与原生小程序组件的对应关系理解 Taro 开发小程序与原生小程序的差异掌握原生小程序消息推送方案掌握原生小程序多线程方案掌握原生小程序云开发等高级方案

3. PWA了解 PWA 能够实现通过 PWA 技术强化 H5 网页的原生特性了解当前 PWA 技术的浏览器兼容情况

前端工程化线上加薪课阶段三
课时:9天技术点:39项学习方式:线上学习

学习目标
高级前端工程师必备技能，在项目开发中实现自动化|规范化|组件化|模块化。

主讲内容
1. webpack 核心学会 webpack 的配置理解 webpack 的作用与原理上手项目的打包过程配置拥有工程化的前端思维掌握前端工程化的常见工具及工作原理了解 webpack 性能优化了解 webpack 中的 tapable 了解 AST 的应用深入学习 webpack 原理，手写 webpack

2. 脚手架工具掌握 vue-cli 及相关配置掌握 vue-cli 初始化单页及多页项目掌握使用 create-react-app 搭建项目了解 create-react-app 的原理掌握 angular-cli 搭建项目了解 angular-cli 的原理掌握一个基础 cli 的功能实现

vue-cli | create-react-app | angular-cli | CLI 原理

3. git flow 全流程掌握提交相关：git rebase/git commit/git reflog/git log 掌握子模块: submodule/subtree 掌握分支管理：git fetch/git checkout/git merge 掌握重置及回退：git reset/git checkout/git rm 掌握多人协同 git 工作流掌握 git 常见的分支管理命令

前端服务化线上加薪课阶段四
课时:33天技术点:135项学习方式:线上学习

学习目标
高级前端工程师必备技能，SEO 优化策略之一，网站性能监控与埋点方案。

主讲内容
1. Koa / eggKoa / egg / 中间件

对 Egg 的功能有全面的理解 | 掌握使用 Egg 完成项目 | 理解 Koa 的核心设计思想 | 掌握 Koa 的中间件编写

2. NoSQLRedis / MongoDB

理解 redis 核心概念与使用 | 能使用 redis 运用到项目中 | 理解 MongoDB 核心概念与使用 | 能使用 MongoDB 运用到项目中

3. 性能监控服务端日志收集系统设计接入第三方监控平台服务端错误预警分析用户行为建立用户画像

4. SSRSSR 运行原理 SSR 环境搭建缓存和 stream 性能优化

理解 SSR 运行原理及为什么需要使用 SSR | 掌握 SSR 环境搭建 | 掌握使用缓存和 stream 对 SSR 进行优化 | 掌握 Nuxt.js / Next.js 的应用