课程参数
教学服务
随到随学
随时随地皆可学习，无需等待，使你的学习更灵活，更高效。
笔记分享
深度反思学习内容，交流学习收获，使你对知识理解的更透彻！
配套教辅
高度契合的配套讲义、大纲，保证让你全方位的理解知识。
源码开放
提供全部课程源码，搭建真实的开发环境，保证你的练习更高效。
入学须知
帮助你更快速的进入学习状态。
集中答疑
定期收集和解答你的技术问题，助你顺利完成学习。
课程更新
在服务期内，如果课程有更新，你可以享受更新后的课程内容。
学习计划
个性化制定每天学习任务
单元测试
根据每个小节学习的知识点测试学习情况

随着移动互联网的深入发展，多屏互动和多端兼容友好的界面成为目前系统重要的需求，让前端开发工程师一跃成为目前市场紧俏的人才。 本课程内容包含目前的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研发人员

亮点1

七大阶段

提炼七大阶段，
紧扣市场需求，
实现前端开发

亮点2

404课时

内容系统，贯通前后端，
课程设计循序渐进，
404课时从理论到实战层层深入

亮点3

7大项目
30+案例

7大实战项目和30+经典案例，
模拟真实企业项目开发

阶段一 : 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实现地理定位，在地图中直接查找房源等实用功能。

该学科热门课程