课程参数
教学服务
随到随学
随时随地皆可学习，无需等待，使你的学习更灵活，更高效。
学前测试
基本信息调查和基础测试，全面了解学前情况，为你制定更适合的学习内容和方法。
专属学习档案
导师时刻关注学习效果，随时指导修订学习路径，全面记录你的专属学习历程。
班主任督导
班主任全程跟进，提供全方位暖心服务，为你的学习保驾护航。
新手任务
新手专属任务，带你快速体验线上学习，适应学习节奏，保障后续学习更高效。
每周学习反馈
每周反馈你的学习数据，提供针对性的指导，关注你的每一个进步，使学习更有动力。
闯关式学习
进阶式地达成每一个目标，不断提高成就感，稳扎稳打，完成课程。
答疑辅导
答疑解惑，及时扫清学习过程中的障碍，助你顺利完成学习。
直播串讲
循环+专项直播，带你梳理知识体系，让学习过程更顺畅。
作业批改
批改作业，指出问题，发现你的薄弱环节，提出建议，使你更有重心的学习。
全方位学习测评
小节测试、课后练习，阶段作业多维度测评，有效保障你的学习效果。
问答讨论
提供高效便捷的答疑平台，与同伴互相交流和借鉴，提升自己。
配套教辅
高度契合的配套讲义、大纲，保证让你全方位的理解知识。
源码开放
提供全部课程源码，搭建真实的开发环境，保证你的练习更高效。
就业服务
一对一职业规划，就业指导，为你高薪就业保驾护航。
结业证书
以官方名义提供的学习经历和成果证明， 是对你能力的肯定和获得企业认可的敲门砖。
入学须知
帮助你更快速的进入学习状态。
集中答疑
定期收集和解答你的技术问题，助你顺利完成学习。
就业指导
简历指导，面试辅导，帮你解惑面试问题。
课程更新
在服务期内，如果课程有更新，你可以享受更新后的课程内容。
学习计划
个性化制定每天学习任务
单元测试
根据每个小节学习的知识点测试学习情况

随着移动互联网的深入发展，多屏互动和多端兼容友好的界面成为目前系统重要的需求，让前端开发工程师一跃成为目前市场紧俏的人才。 本课程内容包含目前的Vue、React前端框架，把全栈工程师要掌握的前端技术、Node.js相关后台技术、HTML5移动方向开发技术做了系统整合， 致力于培养前端开发工程师。

学完收获：

熟练掌握前端开发HTML、CSS、JavaScript等核心技术

熟练使用面向对象思想进行编程，掌握应对业务编程的能力

熟练掌握前后端分工开发流程、原生 Ajax 请求流程与细节，掌握常见跨域技巧

能够基于jQuery相关 API 熟练开发网页功能

熟练运用bootstrap和CSS3媒体查询、rem等开发响应式网页

熟练掌握模块化编程方式，熟练使用 Node.js和Express框架对MySQL 数据库进行增删改查操作

熟练掌握artTemplate模板引擎的应用

熟练掌握基于cookie、session、token的持久化和身份验证

熟练掌握前后端分离开发模式

熟练掌握 Webpack 项目打包配置流程

熟练掌握Vue2.0、Vue3.0、React前端流行开发框架

熟练掌握微信小程序项目开发

在校大学生

刚刚毕业的技术小白

零基础 想转行的
非在职IT人员

有基础想转行的
在职IT人员

希望得到技能提
升的IT研发人员

阶段一 : HTML+CSS网页布局

33小时

|

54
项技术点

学习目标： 借助PxCook工具，参照设计稿，进行PC端静态网页开发。

HTML

HTML 是网页开发的基础，从简单的网页开发基础入手，使用常见的标签制作网页内容，包含了以下技术点：
标签语法 | 排版标签 | 布局标签 | 多媒体标签 | 符号实体 | 语义化 | 路径 | 元数据 | 文档声明

CSS

在 HTML 结构的基础上，通过浮动、定位、Flex 精细控制网页布局，通过背景、圆角、阴影、渐变等美装饰美化网页内容，结合转换、过渡、动画特性增强用户体验，能够编写大型综合性网页。
选择器 | 规则声明 | 盒模型 | 文档流 | 浮动 | 字体 | 背景 | 伪类 | 3大特征 | 圆角 | 限影 | 过渡 | 透明 | 伪元素 | 定位 | Web 字体

【项目】电商网页制作

基于设计稿编写网页，确保网页布局的高还原度，综合运用 HTML、CSS 的基础知识，归纳使用技巧，提升综合实战水平，借助蓝湖协同平台，体验真实团队开发流程。
元素居中 | 自适应布局 | BFC | 浏览器内核 | 性能优化 | 文档编码 | 设计稿 | PxCook

市场价值 : 能够根据HTML+CSS，借助PxCook工具，完成PC端静态网页的开发工作，学完此阶段，尚不能够达到企业用人标准。

阶段二 : 移动Web网页开发

24小时

|

49
项技术点

学习目标： 解决移动设备屏幕所呈现网页的开发，高度还原设计稿，熟悉静态网页的开发流程。

2D&3D 转换与动画

基于 CSS 的 2D 与 3D 转换特性制作动效网页
2D 转换 | 3D 转换 | 动画 animation | 立方体制作

移动端布局

深入理解屏幕相关知识，了解 PC 屏幕与移动屏幕本质上的差异，结合视口、媒体查询、rem 等基础知识整合出稳定高效的移动屏幕适配方案。
Flex布局 | Less基础语法 | 媒体查询 | 分辨率 | 像素密度 | 像素 | 视口 | 媒体查询 | rem | 屏幕适配

响应式布局

基于媒体查询开发跨终端的网页，通过 Bootstrap 体会框架封装的高效性及组件化的复用性等实战化特征。
Bootstrap | 响应断点 | 栅格化 | 组件

市场价值 : 能够完成移动Web网页、响应式页面以及炫酷页面的开发工作，学完此阶段，尚不能够达到企业用人标准。

阶段三 : JavaScript网页编程

63小时

|

124
项技术点

学习目标： 网页操作和用户交互是网页开发中不可或缺的组成部分，让网页“动”起来。

JavaScript基础语法

了解语言的基本概念，熟识语法规则，培养语言基础逻辑能力，建立良好的编程思维，具有一定的语言驾驭能力。
变量 | 数据类型 | 运算符 | 类型转称 | 函数 | 对象 | 流程控制 | 数组 | Math | 内置函数

WebAPI编程

学习客户端开发技术，能够根据产品需求完成开发任务，如视觉交互、数据处理、安全、性能等，熟练掌握 DOM 操作的方法，能够分析视觉交互需求，结合 CSS 规则设计合理的 DOM 结构，完成开发任务。
宿主环境 | 节点查找 | 节点操作 | 节点关系 | 事件 | 事件流 | 事件委托 | 间歇函数 | 高阶函数 | 伪数组 | 执行环境 | 自执行函数 | 命名空间 | 排序 | 延时函数 | 正则 | 表单 | 自定义属性 | 重绘 | 回流 | 预加载 | 懒加载 | 生命周期

JavaScript进阶/ES6+

深入理解 ECMAScript 的知识体系及工作机制，熟悉 ES6+ 新的语法特性，注重抽象思维的培养，具备面向对象编程的的能力。
字面量 | 构造函数 | 单体对象 | 面向对象 | 原型 | class | getter | setter | 柯里化 | 解构 | 箭头函数 | Object | Array | const | 严格模式 | 闭包

jQuery

借助 jQuery 提升开发的效率，同时借鉴和学习 jQuery 的封装实现思想，巩固面向对象的相关知识，加深对面象对象的理解。
选择器 | 节点方法 | 动画 | 动画队列 | 事件 | 事件委托 | 链式操作 | 插件 | 插件机制

【项目】 基于ECharts数据可视化项目

综合 JavaScript、HTML、CSS 所学的知识，针对企业现实开发需求，基于 ECharts 数据可视化插件归纳数据可视化领域解决方案，提升知识综合运用水平。
Flex / 媒体查询 / 点九图 / ECharts / jQuery

市场价值 : 能够完成PC端网页、移动Web网页、响应式页面中的功能和特殊效果的开发工作，学完此阶段，具备一定的企业基础用人标准，但尚未达到初级前端开发工程师水平

阶段四 ： Node与Ajax

43小时

|

97
项技术点

学习目标： 实现客户端与服务端的交互，快速搭建服务器，具备大前端的基本功。

Ajax

系统的学习网页数据交互的 Ajax 技术，建立前后端交互的知识体系，为学生夯实网络编程的基础，为后期课程的学习做好铺垫。
客户端与服务器 | URL 地址 | jQuery 中的 Ajax | 接口 | form 表单提交 | 模板引擎 | XMLHttpRequest | XHR Level2 | 数据交换格式 | 封装 ajax | 文件上传 | axios 基本使用 | 跨域 | 防抖节流 | HTTP 协议

Git

关于版本控制、Git基础概念、安装并配置Git、Git的基本操作、开源相关的概念、github、分支

Node基础

node介绍和环境安装、node-fs模块、node-path模块、【案例】node-时钟案例、node-http模块、node-服务器概念、node-创建基本web服务器、node-根据不同的url响应不同的html内容、【案例】node-时钟web服务器案例、node-模块化

npm

掌握 npm 的使用，能够在实际开发中利用 npm 上的资源提高自己的开发效率，根据项目需求下载并安装合适的包。同时也能够根据遵守规范的包结构开发出属于自己的包并发布到 npm。
包的概念 | 包的安装与使用 | 包管理配置文件 | nrm | 全局包 | 规范的包结构 | 发布包 | nodemon

Express

掌握如何使用 Express 结合 MySQL 编写后端 API 接口项目，为学生构建完整的前后端知识体系，培养出懂后端的前端程序员，提升学生的职场竞争力，迈出从前端程序员进阶到全栈程序员关键的一步。
创建 Express 服务器 | 托管静态资源 | 路由 | 中间件 | 自定义中间件 | 实现 GET 接口 | 实现 POST 接口 | 实现 JSONP 接口 | 实现 CORS 接口 | Web 开发模式 | 身份认证 | session | jwt

MySQL数据库

了解后端数据库的基本使用，能够使用常见的 SQL 语句操作数据库，并且能够使用 MySQL 模块在项目中操作 MySQL 数据库，为实现从前端程序员进阶到全栈程序员做准备。
数据库的基本概念 | 安装并配置 MySQL | MySQL Workbench | SQL 语句 | mysql 模块身份认证
web开发模式、身份认证+session、jwt

【项目】大事件后台管理项目

基于 jQuery + Ajax + 模板引擎 + Git 等技术，完成综合性的后台管理项目开发，巩固前面课程所学的技术点，积累项目开发经验，提升综合解决问题的能力。
登录 | 注册 | Token 身份认证 | 后台主页 | 基本资料 | 重置密码 | 更换头像 | 文字类别管理 | 文章列表管理 | 分页 | 文章管理

市场价值 : 能够完成前后端数据交互、基于前后端分离模式进行开发，学完此阶段，具备企业基础用人标准，能够达到初级前端开发工程师水平

阶段五 : Vue.js 项目实战

174小时

|

261
项技术点

学习目标： 满足前端工程师的岗位要求，重中之重，也是主流框架之一，必会技能。

webpack

掌握 ES6 模块化的基本使用，熟悉异步编程的用法。同时建立前端工程化的开发思想，为工程化项目中脚手架的使用做基础铺垫。
ES6 模块化 | Promise | async/await | EventLoop | 宏任务&微任务 | 前端工程化 | build 过程 | 入口 | 出口 | 加载器 | 插件 | 热更新 | 打包发布 | SourceMap

Vue基础

掌握 Vue3.x 中常用指令及 API 的使用，使用 Vue 语法对常见页面进行开发，了解组件化的开发思想，掌握路由的使用，熟悉组件之间实现数据共享的方式，知道 ElementUI 的基本使用，掌握组件封装的原理，熟悉脚手架工具的使用，了解数据驱动视图的思想。
MVMV | SPA | Vue 调试工具 | 指令 | 模板 | 选项 | 生命周期 | Vite | 样式穿透 | 样式绑定 | 插槽 | 跨域接口代理 | 组件化 | 自定义指令 | ref | 动态组件 | $nextTick | 自定义事件 | 计算属性 | 侦听器 | 组件库 Element | 组件封装 | 组件通信 | 路由 | 导航守卫 | vue-cli | 工程化基础 | axios | interceptors | 经典案例实战

【项目】社交媒体-黑马头条项目

运用 Vue 的基本语法开发移动端网站，熟悉组件封装的技巧，掌握 Vant 的使用，了解项目业务的开发思路，了解节流和防抖的应用场景。
移动端项目搭建 | Vant | REM 适配方案 | Token 过期处理 | 动态编辑 | 上拉加载 | 下拉刷新 | 评论与回复 | 搜索功能 | DayJS | 数据持久化 | 图片预览 | 头像裁切 | 组件定制 | 组件封装 | 性能优化

【项目】HR-saas中台管理项目

深度使用 Vue 相关的技术，包括 Vue.js（MVVM 框架）、Vuex（状态共享）、Vue-Router（路由表）、Vue-CLI（Vue 脚手架）、ElementUI（VueUI 框架）开发人力资源管理平台，对人力资源各种常见的业务使用以上技术进行实现。展示常见的路由权限拦截、Token 角色认证、动态路由解析、重置、权限点设置、审批流程、PDF 打印、Excel 导入导出、跨域反向代理等业务，掌握 Vue 开发复杂 PC 管理项目的使用，掌握 Vuex 在 Vue 项目的深度应用。
vue-element-admin（请求模块化，请求工具拦截，scss 样式，布局组件） | Vuex 持久化（state，mutations，actions，getters 和 modules） | Vue CLI 配置(webpack) | 反向代理 | ElementUI 表单校验（async-validator） | vue-router 导航守卫 | token 认证 | token 失效控制（主动介入和被动处理）| 角色管理业务 | RBAC 权限 | Vuex + 路由 + RBAC | 动态路由 | 角色权限 | 混入 mixns | 工作日历 | Echarts 雷达图 | 审批业务 | 全屏（screenfull） | tabs 页多页签组件 | vue-i18n 国际化方案 | history 路由模式的应用 | element 列表的数据过滤 | 导入导出 Excel | Excel 复杂型表头 | PDF 打印（vue-print-nb）| el-upload 上传第三方云服务器 | 二维码 qrcode | 打包性能分析 | CDN 加速的实践应用 | 组件封装 | 业务组件封装

【项目】Vue3.0小兔鲜儿电商项目

基于 vue3.0 的组合 AP I方式与选项 API 的方式开发的一个综合品类的电商前台系统。 实现了一套完整的电商业务流程，从首页，类目，搜索，品牌，商品详情，购物车，结算，支付，个人中心，订单管理，收货地址管理，评价中心，和其他个人信息管理业务。
核心技术：vue3.0 框架，vue-cli 项目脚手架，vue-router 路由，vuex 状态管理，vuex-persistedstate 状态持久化，less 预处理器，style-resoures-loader 样式资源加载器，normalize.css 样式库，@vueuse/core 组合API工具库，power set 算法库，dayjs 日期库，vue-infinite-loading 滚动加载，vee-validate 表单校验，mockjs 本地数据模拟，soket.io 即时通讯。 封装 UI 组件库：carousel 组件，more 组件，bread 组件，skeleton 组件，checkbox 组件，radio 组件，select 组件，dialog 组件，message 组件，confirm 组件，pagination 组件，steps 组件，timeline 组件，tabs 组件，loading 组件，city 组件，v-lazy 指令。 核心业务：数据懒加载，图片懒加载，骨架屏效果，无限列表，sku 规格选择，云端购物车 & 本地购物车，微信支付 & 支付宝支付，商品类目，订单管理。

Vue原理

理解 MVVM 模式的实现原理，了解 defineProperty 的使用，了解 Proxy 的使用，掌握组件封装的原理。
发布订阅模式 | compile | observer | watcher | Object.property | Proxy | 组件开发 | 组件通信 | slot | render

市场价值 : 能够实现基于Vue技术栈项目的开发能力，学完此阶段，具备企业用人标准，能够达到中级前端开发工程师水平

阶段六 : 微信小程序

30小时

|

58
项技术点

学习目标： 满足前端工程师的岗位要求，受众广泛，提高就业能力，找工作时的加分项。

微信小程序基础

了解小程序开发的一般流程序，熟悉小程基础组件的使用，能够基于 wxml 和 wxss 实现小程序的界面布局，基于模板的数据绑定实现数据的动态渲染，基于 API 实现与服务端的数据通信，以及熟悉其它 API 的使用。
账号申请 | 开发工具 | 工程目录 | 项目配置 | 屏幕适配 | 资源托管 | 字体图标 | 数据绑定 | 事件处理 | 生命周期 | 场景值 | 模块化 | 网络请求 | 路由 | WXS | 模板 | 组件 | UI 框架 | 表单 | Promise

uni-app

理解 uni-app 实现跨平台开发的原理机制，理清单文件组件与原生小程序组件的对应关系，以及 uni-app 开发小程序时开发时与原生小程序的差异。
脚手架 | 项目配置 | 单文件组件 | 生命周期 | 条件编译 | 计算属性 | 跨平台支持 | less | sass | 组件通信

【项目】黑马优购电商项目

基于真实需求综合运用小程序开发的相关知识，突出小程序 API 的真实应用场景，强化和巩固小程序开发的相关知识，提升综合解决问题的能力。
客户消息 | 微信支付 | 微信地址 | 小程序转发 | 区域滚动 | 上拉加载 | 下拉刷新 | 数据缓存 | 用户信息 | 自定义组件 | 微信登录 | 意见反馈 | 上线发布

市场价值 : 能够使用小程序原生框架和uniapp框架进行微信小程序项目开发，学完此阶段，具备企业用人标准，能够达到中级前端开发工程师水平

阶段七：React.js项目实战

39小时

|

62
项技术点

学习目标： 深入理解组件化和模块化开发思想，三大主流框架之一，满足企业招聘中的岗位要求。

React基础

React基本使用、JSX语法、React组件基础、React组件进阶、React原理及优化、React路由

【项目】好客租房项目

项目介绍和初始化、项目首页布局+功能实现、百度地图API使用、城市选择和渲染、顶部导航组件封装、CSS Modules、地图找房功能实现、FilterTitle、FilterPicker、FilterMore组件实现、房源筛选及房屋详情功能、用户登录功能实现、房源收藏功能实现、发布房源和搜索房源功能实现、项目打包及项目优

市场价值 : 能够实现基于React技术栈项目开发能力，配合常用组件库解决项目中的一些共性问题，满足前端开发行业中的常见需求，学完此阶段，具备企业用人标准，能够达到中级前端开发工程师水平

01.HTML+CSS小兔鲜儿项目介绍

HTML+CSS小兔鲜儿项目属于电商平台，该项目主要实现了电商首页布局，在项目中使用PxCook软件参照设计图，结合HTML+CSS进行页面布局和hover效果实现完成了该项目的头部布局、导航布局、主体布局和底部布局，主要用到了 浮动、定位、盒模型、hover效果等 重点内容。

02.ECharts数据可视化项目

是一个数据可视化展示平台， 该项目在企业后台中应用较为广泛，项目中页面布局使用rem+flex+felxible.js进行适配，项目中的地图展示、图表等全部是基于ECharts进行实现。

03.大事件项目

是一个CMS内容管理系统，该项目的布局和交互主要使用Layui实现，实现的功能主要有注册、登录、编写文章、发布文章、修改文章、文章类别管理、删除文章、分页、上传文章图片封面、文章数据可视化、重置密码、更换头像等功能。

04.黑马头条项目

黑马头条是一款新闻资讯类App，项目包括用户注册登录、文章列表、文章详情、文章评论、个人资料、用户中心、频道管理、文章搜索、用户收藏、智能客服等功能。系统采用前后端分离的开发模式，前台使用了Vue.js等技术栈构建的SPA应用程序，UI层面使用基于Vue的Mobile组件库Vant，页面风格统一，提高开发效率，适合有Vue基础或者有其他MVVM框架应用经验的同学进行学习。

05. HR-saas中台管理项目

iHRM是一款基于SaaS平台的人力资源管理系统， 企业通过该系统可以完成员工管理、审批管理、考勤管理、社保公积金管理、薪资管理等功能，为企业的人力资源管理提供一站式解决方案。

06. Vue3.0小兔鲜儿电商项目

该项目实现了电商平台主线业务功能，电商首页、一级分类、二级分类、商品详情、购物车、结算、支付、个人中心、订单管理、订单详情。项目采用前后端分离模式，前台使用了VUE3.0技术栈构建，自己封装的UI组件库，接入了QQ登录，支付宝支付业务，以及前端SKU解决方案，本地线上购物车解决方案。该项目适合有一定VUE基础或者其他MVVM框架应用经验的同学学习。

07.黑马优购商城项目

黑马优购商城是一个小程序电商业务项目，该项目从企业中的经典业务需求入手，涵盖了商品分类、商品列表、 商品详情、购物车、订单、微信支付、客服等核心模块。

08.好客租房项目

好客租房项目采用目前前端的React技术栈进行开发，涵盖了React中常用的技术以及移动端场景问题的解决方案， 使用React官方脚手架工具提供的工作流快速搭建和开发项目，使用阿里旗下antd-mobile组件库搭建页面结构， 使用React-Router-DOM作为前端路由管理复杂页面，使用百度地图API实现地理定位，在地图中直接查找房源等实用功能。

推荐课程