2019年前端与移动开发学科课程大纲

目前课程版本:6.5   升级时间:2019.06.01   查看详细

前端与移动开发课程设计理念

  •  

    前沿应用型技术

    课程设计之初就对目前企业中最流行的技术及知识点进行过多次调研,整套课程设计完成后,又进一步对课程中的技术点进行了100+项的增加与优化,全面覆盖以 React.js、Vue.js 和 Angular 为首的三大框架,最新的数据流方案、服务端渲染方案,当下非常热门的移动端开发技术:Flutter、React Native、微信小程序,让学员能够轻松应对前端在不同领域、不同行业的技术难题。

  •  

    真实企业级项目库

    学员的最终诉求就是能够灵活运用所学知识进行企业项目开发,所以真实的企业级项目是传统培训中最最稀缺的。此次课程核心定位更接近真实企业需求,所以我们从项目选题开始全部以真实就业情况为出发点,横跨电商、金融、在线教育、社交、租房、旅游六大行业,构建真实企业级项目库,,通过超长的项目课程培养学员在真实工作场景中攻克技术难题的的技术实战能力,以及从容应对不同企业需求的业务能力。

  •  

    超全的解决方案库

    企业对于人才最核心的需求并不是对单纯掌握某种应用型技术,而是希望开发者能够通过自己的经验帮助企业解决项目中随时出现的问题。所以本次课程除了升级应用型技术的相关课程,更多的还是提供海量商业项目解决方案,构建超全的解决方案库,让学员在日后的项目中可以灵活复用,做到企业有问题,我们有方案。

  •  

    商业项目团队实战

    新增了学员自主团队开发的阶段,完全模拟企业中的真实开发场景,从交互稿、设计稿、接口文档,到项目打包工具,源代码管理工具,在项目经理的带领下完成真实企业级项目的继续开发,让学员真正体验并掌握从需求到开发再到上线的方方面面,无需过渡期直接适应真正的企业开发。

前端与移动开发基础班课程大纲

学习对象

1.0基础0经验的小白人员,想转型到高薪编程行业或对此行业有浓厚兴趣的人员;
2.在校大学生,希望充实自身技能,毕业后能顺利就业并有更强的市场竞争力;
3.不满足目前工作现状,想要得到更好的发展空间。

注:获取更多免费学习视频+资料+笔记,请加QQ:2632311208。

上课方式

全日制脱产,每周5天上课(实际培训时间可能因法定节假日等因素发生变化)

培训时间

部分校区可能会根据实际情况有所调整,详情可询咨询老师   点击咨询


培训要求

自带笔记本

 

前端与移动开发基础班课程大纲
所处阶段主讲内容技术要点学习目标
第一阶段:
HTML5 + CSS3
HTML51、 浏览器与浏览器内核2、语法及使用、3、 常用标签4. 语义化5、 表单元素6、 HTML 、7 新增标签可掌握的核心能力:

掌握 HTML5 常用标签;
掌握 CSS 语法及使用技巧;
掌握CSS3新增选择器;
掌握CSS3新增样式属性;
掌握 DIV+CSS 布局方式;
掌握常见网页布局技巧;
掌握企业级、电商级网页开发基本的流程、规范;
掌握语义化、模块化、兼容性的PC端网页开发;
掌握 Photoshop 切图以及插件切图;
熟练使用调试工具进行页面调试;
掌握基本的动画效果。


可解决的现实问题:

能够独立把美工提供的PSD效果图还原成PC端静态代码页面。

市场价值:

具备PC端静态网页开发的能力,还达不到企业用人标准。为后面学习网页编程阶段打下坚实基础。
CSS3基础1、CSS基本语法规范2、 常用的选择器用法与技巧 3、复合选择器使用4、 数值与单位5、文字文本样式 6、 CSS3新增选择器
CSS3进阶1、 CSS盒子模型 2、 CSS背景技巧 3、 圆角/阴影/过渡  4、 定位和浮动 5、 伪类和伪元素  6、chrome调试工具  7、CSS高级技巧(精灵图、CSS三角、图标字体等)8、. CSS常见布局技巧大全 9、 网页开发规范以及流程 10、CSS企业级网页开发 11、网页开发常见问题以及解决方案 12、 CSS常见兼容性问题以及解决方案   13、CSS3新增属性 14、 Photoshop 切图 15、cutterman插件一键切图
电商项目1、代码组织原则 2、项目开发实战流程 3、 电商类复杂页面布局规范 4、CSS初始化技术选择(Normalize.css使用)5、 CSS字体图标使用 6、CSS 属性书写顺序规范7、完整的多页面开发 8、 网页语义化设计 9、 CSS页面模块化开发 10、favicon图标制作 11、复杂网页结构排版技巧 12、 常见动画过渡特效 13、电商类常见布局问题解决方案 14. 将电商项目部署到web服务器

前端与移动开发就业班课程大纲

学习对象

本课程适合于计算机专业,有一定css+div基础、通过入学考核的未就业人士。

上课方式

培训时间及周期:全日制脱产,每周5天上课(实际培训时间可能因法定节假日等因素发生变化)

培训要求

自带笔记本

培训时间

部分校区可能会根据实际情况有所调整,详情可询咨询老师   点击咨询


 

前端与移动开发就业班课程大纲
所处阶段主讲内容技术要点学习目标
第二阶段:
移动Web网页开发
CSS3动画1、CSS3的2D和3D变换2、animation动画3、炫酷页面开发(地图大数据热点图、大风车、旋转木马轮播图等)学员能力体现:


掌握CSS32D、3D变换、动画效果;
了解移动端屏幕、移动端浏览器、操作系统的不同;
掌握主流移动端调试方法;
掌握常用移动端适配方案(流式布局、flex布局、rem适配);
掌握主流移动端页面开发技术选型与解决方案;
掌握CSS预处理器less的使用;
掌握常用移动端框架使用方法;
掌握常见移动端页面开发流程与规范;
掌握响应式布局开发;
掌握Bootstrap开发响应式页面;
掌握适配不同终端的移动端页面开发。

可解决的现实问题:

能够独立开发移动端页面,并适配不同移动端终端。

市场价值:

具备移动端页面开发,但是还不能达到企业的用人标准。为后面学习网页编程阶段打下坚实基础。
移动端页面开发1、传统布局的局限性2、移动端屏幕介绍3、移动端浏览器介绍4、物理像素&物理像素比5、真机调试、6、viewport视口、7、移动端技术选型、8、移动端主流适配解决方案、9、移动端特殊样式、10、百分比布局&流失布局、11、Flex布局优势、12、盒子父级常见属性设置、13、盒子子级常见属性设置、14、携程网Flex移动端页面开发、15、rem单位使用、16、rem适配、17、预处理器less、18、media媒体查询、19、淘宝flexible.js移动端适配、20、cssrem插件使用、21、cutterman二倍图三倍图切图、22、移动端页面开发流程与规范、23、京东移动端首页开发
Bootstrap1、传统布局的局限性2、移动端屏幕介绍3、移动端浏览器介绍4、物理像素&物理像素比5、真机调试6、viewport视口7、移动端技术选型8、移动端主流适配解决方案9、移动端特殊样式10、百分比布局&流失布局11、Flex布局优势12、盒子父级常见属性设置13、盒子子级常见属性设置14、携程网Flex移动端页面开发15、rem单位使用16、rem适配17、预处理器less18、media媒体查询19、淘宝flexible.js移动端适配20、cssrem插件使用21、cutterman二倍图三倍图切图22、移动端页面开发流程与规范23、京东移动端首页开发
第三阶段:
JavaScript网页编程
JavaScript基础1、基本输入输出方法2、变量3、数据类型4、类型转换5、运算符6、流程控制语句7、数组8、函数9、自定义对象10、内置对象和常用方法11、网页版小娜小项目学员能力体现:

能够掌握JavaScript基本语法;
掌握常见JavaScript算法;
掌握DOM的各种操作;
熟练使用面向对象思想进行DOM编程;
掌握JavaScript的高级语法;
熟练使用jQuery操作DOM;
熟练使用和编写jQuery插件;
独立完成电商网站的页面搭建(包括HTML结构、CSS样式、JavaScript特效);
掌握应对业务编程的能力;
掌握JavaScript常见兼容性方案;
掌握团队合作开发流程。

可解决的现实问题:

能够使用JavaScript/jQuery开发网页特效/网页应用。

市场价值:

具备网页开发的基础能力(网页布局和网页应用开发),但是无法和服务器交互,还达不到企业用人的标准。
WebAPIs编程1、获取页面元素的常用方法2、页面中的事件和事件机制3、操作元素的样式和属性4、新增元素和移除元素5、BOM操作大全
网页应用/网页特效1、轮播图2、页面放大镜3、待办事项列表4、购物车5、tabs6、JSON7、其它常用网页特效
jQuery快速开发1、jQuery的优势2、jQuery选择器3、jQuery中的动画4、jQuery中的DOM操作5、链式编程和隐式迭代6、插件使用和制作7、常见网页特效制作大全
面向对象编程1、面向对象思想、2、创建对象、3、JavaScript中的对象深入理解、4、闭包原理以及使用场景、5、原型以及原型链深入剖析、6、作用域链深入分析、7、函数的调用方式及this指向总结、8、Class类、constructor、super
第四阶段:
Node.js与AJAX
AJAX编程1、AJAX的作用2、原生AJAX3、同步与异步4、http协议5、AJAX的封装6、jQuery的AJAX7、缓存问题及解决方案8、跨域请求及解决方案9、前端模板引擎学员能力体现:

能够建立客户端服务器交互模型,熟悉网络通信相关概念;
能够使用Node.js进行Web服务端开发;
能够掌握JavaScript异步编程模型;
能够掌握JavaScript模块化编程方式;
能够使用Node.js操作MySQL数据库;
能够理解HTTP协议;
熟悉原生Ajax请求流程与细节,并掌握常见跨域技巧;
能够基于jQuery的Ajax相关API熟练开发常见的前端功能;
能够独立开发基于后台接口的动态网站、Ajax数据交互的项目;
能够独立完成企业网站从前台到后台的基本开发工作。

可解决的现实问题:

能够具备开发具有简单交互能力的网站,能够使用源代码管理工具。

市场价值:

具备基本的网站开发能力,满足企业对初级前端开发的要求。
git1、git历史2、git与svn3、git基本使用4、git分支5、git远程仓库6、git冲突及解决方案
综合项目:
阿里百秀
1、项目初始化2、前后端分离开发3、Postman工具使用4、用户注册/登录/退出5、文章管理模块6、评论管理模块7、用户中心模块8、项目部署与发布
ES61、es6简介2、新增语法3、内置对象扩展4、Promise5、Async函数6、解构7.展开运算
Node.js基础1、node.js环境安装2、如何用node.js运行代码3、Commonjs4、模块化5、模块与包6、NPM7、CNPM和Yarn8、核心模块使用9、第三方模块使用10、RESTFulAPI
服务端开发(Node.js)1、静态和动态网站2、http模块使用3、请求响应原理4、HTTP协议5、处理页面请求6、处理表单7、会话技术(Cookie、Session)
MySQL1、MySQL的概念2、MySQL安装3、建库和建表4、增删改查语句5、Node.js操纵MySQL
Express1、express的概念2、express的安装3、后端路由4、静态资源托管5、中间件的原理6、常用中间件7、模板引擎8、异常处理9、Express常用API10、RESTFulAPI
第五阶段:
Vue.js项目实战
Vue.js基础1、Vue实例2、文本与属性绑定3、计算属性computed4、侦听器watch5、Class与Style绑定6、条件渲染7、列表渲染8、事件处理9、表单输入绑定10、Vue实例生命周期11、开发Vue插件和模板过滤器12、自定义指令13、Vue组件系统14、Vue过渡和动画15、VueRouter路由系统16、组件通信17、axios请求库18、VueCLI脚手架工具19、VueDevTools调试工具20、在Vue中操作DOM可掌握的核心能力:

能够掌握使用Vue技术栈进行项目开发;
能够掌握源代码管理工具的使用;
能够熟练掌握前后端分离开发模式;
能够掌握使用主流框架开发门户网站、管理系统、移动Web等客户端;
能够掌握Webpack项目构建配置流程;
能够掌握Web项目的部署与发布模式;
能够掌握常见网站业务模块开发。
掌握使用echarts/d3.js进行大数据可视化交互开发;

可解决的现实问题:

使用Vue技术栈开发企业级项目
掌握前后端分离的开发方式
掌握项目的打包和发布

市场价值:

理解Vue的开发理念、内部运行原理,梳理使用Vue组件开发常见功能。满足前端开发行业中的常见需求。
社交媒体-
黑马头条自媒体管理系统
1、使用VueCLI初始化项目2、使用Git+Github管理项目源代码3、使用echarts开发数据可视化4、使用axios与服务端交互5、使用VueRouter管理项目中的路由6、使用ElementUI框架7、使用Sass预处理器8、基于JWT的前后端token鉴权9、富文本编辑器解决方案10、项目打包发布上线
webpack1、安装与基本配置2、打包JavaScript模块3、打包CSS模块4、打包图片和字体文件模块5、打包less/sass资源模块6、ES6转ES57、打包.vue资源模块8、配置ESLint代码校验工具9、使用clean-webpack-plugin插件清除打包结果目录10、使用HtmlWebpackPlugin打包HTML资源11、处理打包结果的Sourcemaps12、监视打包模式13、使用webpack-dev-server14、模块打包热更新15、treeshaking打包优化16、生产环境和开发环境分离打包17、打包优化之CodeSplitting代码分割18、打包优化之模块懒加载19、打包优化之缓存
社交媒体-
黑马头条
1、使用VueCLI初始化项目2、使用Git+Github管理项目源代码3、使用axios与服务端交互4、使用VueRouter管理项目中的路由5、使用VantUI框架6、使用Vuex管理组件状态7、使用Sass预处理器8、基于JWT的前后端token鉴权9、使用Socket.io进行实时通信10、移动端富文本编辑器解决方案11、使用Cordova打包移动App12、项目打包发布上线
Vue进阶1、组件封装进阶2、MVVM数据绑定原理3、Render方法原理4、$nextTick方法的使用5、发布订阅模式
服务端渲染1、SSR核心概念2、SSR基本用法3、编写通用代码4、路由和代码分割5、构建配置6、Nuxt.js
大数据可视化1、数据库可视化基础2、echarts/d3.js入门3、其它可视化库4、大数据可视化实战项目:组件开发
第六阶段:
微信小程序
小程序基础1、小程序注册2、小程序开发者工具使用教程3、小程序配置文件4、小程序常用组件5、小程序的模板语法6、小程序中的样式编写7、小程序中的JavaScript8、小程序应用及页的生命周期9、小程序常用API10、小程序中的自定组件11、小程序插件开发12、小程序分包加载13、小程序基础库版及兼容处理14、小程序运行机制15、小程序性能分析及优化16、小程序云开发、云函数、云数据库17、小程序上线和发布可掌握的核心能力:

能够掌握小程序的开发基础;
能够独立开发小程序项目;
能够掌握小程序的部署与发布;
能够掌握微信支付的使用;
能够掌握小程序开发框架的使用;
掌握第三方AI平台的使用。


可解决的现实问题:

掌握整个小程序开发和传统web开发的区别;
掌握企业小程序开发、发布和上线的整体流程;
拥有解决和实现市场上主流小程序的功能需求。

市场价值:

掌握前端行业的小程序发展趋势,熟悉小程序项目的整体运作流程,并且具备独立开发企业级小程序的能力,既可以使用原生小程序也可以使用小程序框架来完成项目。
小程序项目:
黑马优购商城
1、原生框架的搭建2、商品首页模块3、分类商品模块4、商品列表模块5、商品详情模块6、支付和登录模块7、收藏模块8、购物车模块9、订单模块10、搜索页面模块11、个人中心模块12、意见反馈模块13、项目的优化和发布上线
第七阶段:
React.js项目实战
React.js基础1、create-react-app脚手架工具2、JSX语法3、条件渲染4、列表渲染和key5、React组件系统6、PureComponent7、setState()8、事件处理9、表单处理10、组件通讯11、render-props12、高阶组件13、虚拟DOM和Diff算法14、ReactRouter路由系统15、Redux状态管理架构16、axios请求库17、AntDesign组件框架、18、CSSModules可掌握的核心能力:

能够理解React的开发理念;
能够掌握React的基本使用;
能够理解React的内部原理;
能够使用React及其常用组件库进行项目开发;
能够使用React封装项目中用到组件实现复用;
能够掌握React项目中常见问题的解决方案;
能够掌握React-Redux进行状态管理;
能够掌握声明式编程的思想;
能够掌握组件化开发的思想;
能够掌握React项目优化、部署。

可解决的现实问题:

具备使用React开发能力,配合React内部原理,增强解决项目中复杂业务问题的能力,从项目搭建到项目开发再到项目部署上线,让学员可以完成常见企业级项目的开发。

市场价值:

理解React的开发理念、内部运行原理,熟练运用React组件完成项目常见功能开发,配合常用组件库解决项目中的一些共性问题,满足前端开发行业中的常见需求。
好客租房
PC端项目
1、项目初始化2、管理员登录退出3、用户管理4、用户已发布房源查看5、房源列表6、房源列表检索等功能7、使用redux进行状态管理
好客租房
移动Web项目
1、项目初始化2、首页搭建3、地理定位4、城市选择5、地图找房6、房源搜索7、关键词搜索8、房源详情9、个人中心10、用户登录/注册/退出11、房源收藏12、查看用户收藏房源列表13、房源发布14、已发布房源列表查看15、权限路由组件封装16、移动端长列表性能优化17、React复杂表单处理18、React动画等常见解决方案

前端与移动开发在职加薪课程大纲

学习对象

初入前端开发行业的初级、中级前端开发者。

注:获取更多免费学习视频+资料+笔记,请加QQ:2632311208。

上课方式

在线学习

培训时间

随到随学,详情可询咨询老师   点击咨询



前端与移动开发在职加薪班课程大纲
所处阶段主讲内容技术要点学习目标
第八阶段:
框架原理与进阶
前端工程化工程化概念、模块化开发及常用工具(Webpack4、Parcel、Rollup)、项目规范化及常用工具(ESLint、StyleLint)、前端自动化及常用工具、自动化测试及常用工具(istanbul、jest、benchmark)
学员能力体现:
- 能够轻松运用目前市场主流工具应对工程化项目需求;
- 能够基于无服务端平台快速开发应用并了解国内主流的平台服务;
- 能够使用静态站点构建方案快速开发企业站;
- 能够使用 Flow、TypeScript 完成复杂应用业务代码的编写;
- 能够掌握使用 Angular 技术栈进行项目开发;
- 能够理解 React.js / Vue.js 一类的 MVVM 框架的实现原理;
- 能够使用不同的数据流框架应对不同技术栈在大型项目中的数据状态管理;
- 能够使用服务端渲染解决方案解决 React.js / Vue.js / Angular 框架在 SEO 方面的问题;
- 能够掌握不同框架的服务端渲染的实现及运用;
- 能够使用 React16 + Redux4 + ReactRouter4 + Next.js 完成社交类项目的开发。

关键词:
工程化、自动化、无服务端、Gatsby、TypeScript、Flow、Angular、MVVM 框架原理、Mobx、RxJS、SSR、Next.js、Nuxt.js、Universal
闲云旅游项目无服务端方案(LeanCloud)、静态站点生成工具(Gatsby、React Static、VuePress)、旅游类项目业务
JavaScript 进阶Flow 类型检查、TypeScript 适应超大型的应用编码
Angular 实战开发Angular 组件的定义及使用、Angular 服务、Angular 路由、表单、依赖注入
MVVM 框架进阶与实现Vue.js 原理、Vue.js 使用进阶、模拟实现 Vue.js 框架
数据流框架的应用Redux、Mobx、Vuex、RxJS、ngrx
服务端渲染 SSR 专题React.js 服务端渲染方案及 Next.js 框架、Vue.js 服务端渲染方案及 Nuxt.js、Angular 服务端渲染方案及 Universal Angular
学成在线项目React16、Redux4、ReactRouter4、Next.js
跨平台桌面应用开发Electron、Vue.js / React.js 在 Electron 中的使用
第九阶段:
移动 App 开发
混合式 App 开发框架Cordova、Phonegap、Ionic
学员能力体现:
- 能够使用混合式 App 开发框架快速开发移动 App;
- 能够配合原生应用开发 App 内嵌 H5 页面并可以通过 JSBridge 调用原生接口;
- 能够使用 wepy / mpvue 框架开发小程序或快应用项目;
- 能够使用 taro 多端统一解决方案同时完成移动 App、移动 Web、小程序的开发;
- 能够独立使用 React Native 开发原生 App;
- 了解 Weex / Flutter 等其他原生应用的前端技术开发方式。

关键词:
Cordova、Ionic、Webview + H5、JSBridge、mpvue、taro、Weex、Flutter
H5 配合原生开发 AppWebview + H5、JSbridge、NativeScript
黑马