<
全链路前端开发
> 成都市国信安教育培训中心
全链路前端开发
引导式项目教学,每一个阶段项目都取自行业经典,让学员具备编写互联网系统的前端页面、交互代码、后台通信代码的能力。项目驱动教学，课程配备三分之一的课时进行项目实战, 4阶段项目实战均与java共同开发。使用nginx进行反向完成web服务器搭建，实现前后端完全分离。使学员在前端领域能游刃有余。
| 阶段 | 课程名称 | 阶段目标 | 知识点 | 学时 | 课程亮点 |
一阶段：web开发流程及规范、H5C3基础于进阶 | 软件开发流程 | 1. 专业零基础入门，了解互联网，了解 Web 相关技术。 2. 具备静态设计与制作能力，可实现 PC 端与移动端布局。 3. 熟悉开发工具的使用，浏览器调试控制台的使用等。 4. 会使用切图软件进行页面制作，如 PhotoShop 的使用。 5. 对 HTML5 新特性以及 CSS3 新特性有深入理解与掌握。 6. 适配不同分辨率下的屏幕 | 1、web应用开发流程。2、需求分析、业务流程、分类。3、xmind梳理实例业务功能网页基本结构4、Axure基本元件。5、简单悬停效果、原型图绘制 6、图片格式及常用的图片格式、图片处理方式 7、PS切片、裁剪、基本抠图、智能图片对象使用原则 8、Axure动态面板使用、轮播制作原理 | 12天（包含3天项目） | 本阶段通过掌握web应用开发流程，进行业务以及功能分析，对axrue、ps相关软件进行基础操作，完成高保真制作。让学员清楚的了解到需求分析是软件开发必不可少的一部分，对以后的业务梳理打下坚实的基础。 |
| axrue草图制作 | |||||
| 网页图片处理 | |||||
| 网页基础标签 | 1、html5（语义化标签、表格、表单）2、浏览器与浏览器内核、语法及使用、常用标签、语义化标签、3、表单元素。4、HTML5新增标签 | 利用网校平台针对每天知识点进行复习与巩固、并加以实操作业进行实践练习，发现问题，解决问题，上课前针对作业难点进行分析及评价 | |||
| 网页样式（上）：css基础 | 1、常用的基本选择器用法与技巧。2复合选择器使用。3、数值与单位 4。5、文字文本样式。6、浮动及flex弹性盒模型7、CSS盒子模型。8、CSS背景技巧。9、圆角、阴影、过渡等新属性。10、定位和浮动、伪类和伪元素。11、chrome调试工具、。12、transform（2D、3D变换）。13、animation动画、炫酷页面开发。 | ||||
| 网页样式（下）：Css3 | 1、CSS技巧（滑动门、CSS三角等）2、CSS动画技巧3、CSS常见布局技巧大全。4、网页开发规范以及流程。5、CSS企业级网页开发。6、网页开发常见问题以及解决方案。7、CSS常见兼容性问题以及解决方案 | ||||
| 一阶段项目实训：axrue项目高保真，利用html+css完成项目 | 利用axrue制作制作网页高保真，让学员对制作流程有初步的认识，着重让学员学会梳理业务流程以及功能流程，根据公司要求实现静态页面 | 项目实战- 企业（HTML5+CSS3+Photoshop）企业作为一家公司的互联网名片，是每家企业必备。强化学员对HTML+CSS+PS(切图)、各种布局等初期所学全部知识的综合应用，由于是一个企业级项目，着重熟悉项目开发流程和培养使用HTML+CSS遇到问题时的分析和调试能力。 | |||
| 考试 | 基础知识点考核及项目考核 | ||||
| 第二阶段 web前端逻辑基础 | 计算机逻辑基础及网页操作 | 能够独立完成常见的网页效果，如标签页、弹窗、轮播图等。 具备编程思维能力，可独立思考逻辑，会利用算法及数据结构进行开发训练。 掌握 jQuery 库的基本使用，并能了解其实现的原理，并对 jQuery 插件进行使用。熟练使用bootstrap进行响应式开发，并适配移动端及平板、PC端 | 1、掌握基本语法。2、常用数据结构。3、编码规范约定。4、内置对象常用方法。5、ES6从基础到项目运用 (解构赋值、扩展运算符、数组、对象、函数的扩展)。6、正则规则。7、基础算法 | 24天（包含5天项目） | 企业越来越重视开发人员对于原生JS的掌握情况，而能否熟练掌握原生JS也关系到对JS框架的应用。针对这一情况，加强了对原生JS内容的讲解，知识点的深度和难度都有进一步提高，对于课程中援引的案例，也进行了更新，增加了案例的难度，使学员们能够更好地掌握原生JS。 |
| 1、熟练掌握dom操作。2、bom操作。3.掌握window。4、location。5、history。6、navigator。7、document。8、 Form等对象的使用。9、掌握事件处理及event对象的使用。10、运用ES6语法进行页面操作 | |||||
| js进阶 | 1、面向对象思想、2、创建对象、3、中的对象深入理解。4、工厂方法创建对象 | 项目初始化、背景绘制、背景音乐管理、英雄飞机模块、子弹模块、敌机模块、子弹和敌机的碰撞检测、子弹碰撞敌机爆炸动画、玩家分数处理、游戏结束模块处理、 | |||
| js面向对象逻辑训练（js游戏） 1、打飞机。 2、冒险岛. 3、坦克大战 | |||||
| 1、jQuery的优势。2、jQuery选择器。3、jQuery中的动画。4、链式编程和隐式迭代。5、插件使用和制作。6、常见网页特效制作大全。7、团队协作开发流程 | 精讲tab交互、轮播、瀑布流，模态框及时间轴交互 | ||||
| 1、栅格化使用。2、媒体查询器。3、pc端适配方案。4、栅格化实现原理。5、常用组件使用。6 | 精讲栅格化原理、实现利用媒体查询器实现bootstrap栅格化 | ||||
| 第二阶段项目实训：管理系统商业项目小组实战训练与考核 | 利用jquery和bootstrap搭建后天管理系统前台界面，强化学生js基础以及dom操作在实际项目中的应用场景，对项目进行响应式开发 | 项目实战 -1、大型超市管理系统。2、 幼儿园管理系统。3、人力资源管理系统4、影楼CRM管理系统 | |||
| 阶段考试：阶段知识学习效果检验与巩固 | 二阶段考试 | ||||
| 第三阶段 web前端进阶课程 - 全栈开发 | 数据库操作及范式理论（mysql） | 熟悉前后端分工，前端与后端如何进行配合，完成一个高质量的项目。掌握 ES6 到 ES10 提供的新语法及新特性，深入理解 promise 及模块化编程。熟练完成项目功能点、完成数据渲染使用echarts进行数据可视化 | 1、MySQL的概念。2、MySQL安装3、建库和建表。4、增删改查语句 | 13天（包含5天项目） | 关系型数据库的学习能够更好的梳理出项目的业务流程。服务器的学习能够让学员清晰的明白整个软件开发，对未来三五年的进阶会起到举足轻重的作用，自动化构建、模块化编程、可视化接口、版本控制系统、可视化图表，确保学员在校学习与企业无缝对接，毕业等于就业 |
| 1、范式理论以。2、数据库设计 | |||||
| node.js | 1、1、node.js环境安装。2、如何用node.js运行代码。3、Commonjs。4、模块化。5、模块与包。6、NPM。7、CNPM和Yarn。8、核心模块使用。9、第三方模块使用。10、RESTFulAPI。11、静态和动态。12、http模块使用。13、请求响应原理。14、HTTP协议。15、处理页面请求。16、处理表单。17、会话技术(Cookie、Session、token) 。18、AJAX的作用。19、原生AJAX 。20、同步与异步。21、http协议。22、AJAX的封装。23、缓存问题及解决方案。24、跨域请求及解决方案。25、前端模板引擎。26、使用promise及async进行异步处理。对promise的使用及原理。27、async函数的实现及原理精讲 | ||||
| 上传下载 | 断点上传下载 | ||||
| 邮件发送、短信验证登录 | 一键发送邮件，登录短信验证 | ||||
| html5应用 | 1、本地储存2、离线缓存3、Canvas介绍4、Canvas标签。5、Canvas栅格坐标系。6、绘制基本形状（矩形、路径、三角形、圆）。7、绘制样式和颜色处理。8、绘制文本。9、绘制图片。10、图片合成与裁剪。11、图片裁剪与上传。11、数据可视化框架Echarts。12、掌握基于CSS的预处理框架Less/Sass/stylus | ||||
| git、svn | 1、git历史。2、git与svn。3、git基本使用。4、git分支。5、git远程仓库。6、git冲突及解决方案。 | ||||
| 企业pc强化课程：电商项目实战开发 1.商城实战项目2.名宿租赁 | 从前台页面到服务器、数据库进行全栈开发，掌握软件开发流程，接口调试 | 实战上手、需求分析，数据库设计，原型图设计、页面实现，接口实现，完成页面数据绑定。 技术栈：Bootstrap4+less+node+Mysql | |||
| 第三阶段项目考核：个人独立项目作品实现 | 项目考核、项目提案、阶段测试 | ||||
| 第四阶段 web前端框架课程 | 应用 | 能够独立完成前后台相关功能，胜任 H5 全栈开发工程师职位。 掌握项目工程化、自动编译、脚手架等内容，实现完整项目开发。 掌握企业流行框架，可上手并能配合后端人员进行开发。 掌握移动 Web App 的开发模式，能够独立架构项目系统。 掌握小程序云开发，独立进行多端开发，适配各类小程序及h5应用 | 1、闭包原理以及使用场景、2、原型以及原型链深入剖析、3、作用域链深入分析、4、函数的调用方式及this指向总结、5、Class类、constructor、super.6、jquery源码解析。7、闭包。8、promise、模板字符串、解构。9、async函数、设计模式 | 51天 | Vue框架由于项目搭建易上手，组件化程度高、稳定性强等优点，受到了不少开发者的追捧，也被越来越多的企业广泛应用到实际生产环境中。 面对企业开发应用过程中的新需求，国信安引入了Vue框架的相关知识点及应用实践，确保学员们能够掌握当下流行的技术，在求职中更胜一筹。 腾讯的一举一动都牵动着广大开发者，在顺应潮流的同时，也推动着潮流的发展。使用简洁、安装删除方便、功能丰富、依托于平台，是小程序的四大优势，加上小程序的开发入门更加简单，同时相较于H5有着更好的体验度，未来小程序的兴起必然是大势所趋。项目经历的多寡直接关系到学员就业的难易，综合实训也是检验学员对理论知识掌握和运用的平台。为了进一步培养学员对知识的灵活运用，提员的项目经验，增强学员的实战能力，极度贴近企业实际应用过程中的技术，学员能够获得切实有效的实践，提高自身的实战能力。 |
| Mvvm框架之Vue.js | 1、创建Vue实例。2、文本与属性绑定。3、计算属性computed。4、侦听器watch。5、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中操作D0M。21、路由嵌套。22、路由权限验证。23、动态路由渲染。24、vuex状态管理。25、vuex原理。 | ||||
| typescript | 在vue中利用typescript进行强类型约束 | ||||
| webpack | 1、安装与基本配置。2、打包模块。3、打包CSS模块。4、打包图片和字体文件模块。5、打包less/sass/stylus资源模块.6、ES6、7、8、9转ES5。7、打包.vue资源模块8、配置ESLint代码校验工具9、使用clean-webpack-plugin插件。10、使用HtmlWebpackPlugin打包HTML资源。11、使用webpack-dev-server开发服务器。12、模块打包热更新。16、生产环境和开发环境分离打包。18、打包优化--懒加载19、打包优化--缓存 | ||||
| nginx | 使用nginx进行反向并部署web服务器，进行前后端完全分离 | ||||
| vue项目 | 与java一起进行项目开发，利用vue全家桶进行后台管理项目开发，熟练掌握mvvm前端架构，充分了解前后端分离，部署web服务器使用nginx进行反向，完成前后端完全分离 | ||||
| 第三阶段项目考核：个人独立项目作品实现 | 项目考核、项目提案、阶段测试 | ||||
| 公众号 | 公众号在网页登陆并获取用户信息 | ||||
| 小程序、小程序 | 1、小程序注册。2、小程序开发者工具使用教程。3、小程序配置文件。4、小程序常用组件。5、小程序的模板语法。6、小程序中的样式编写。7、小程序中的。8、小程序应用及页的生命周期。9、小程序常用API。10、小程序中的自定组件。11、小程序插件开发。12、小程序分包加载。13、小程序基础库版及兼容处理。14、小程序运行机制。15、小程序性能分析及优化。17、小程序上线和发布。 | ||||
| uni.app | 掌握uni.app，可利用 uni开发小程序，并理解与 掌握与 Vue 语法的异同点。及移动端项目适配方案 | ||||
| 小程序项目 | 与java共同进行项目开发、利用uni进行APP开发，实现网页登陆并获取用户信息 | ||||
| Mvvm架构之React+mobx/react+react-rudex+redux-saga | 1、create-react-app脚手架工具。2、JSX语法。3、条件渲染。4、列表渲染和key。5、React组件系统。6、PureComponent。7、setState()。8、事件处理。9、表单处理。10、组件通讯。11、props。12、高阶组件。13、虚拟D0M和Diff算法。14、ReactRouter4路由系统。15、react-Redux状态管理架构。16、redux-saga异步操作。17、mobx状态管理。18、AntDesign组件库 | ||||
| react项目 | |||||
| 第五阶段 web前端工程师求职 简历作品包装及就业指导 | 简历辅导 | 1、礼仪及注意事项 2、简历书写指导，作品包装 3、面试技巧 | 根据学员不同学习情况，进行简历辅导，讲解企业面试技巧、测试技巧等 | ||
| 企业级标准 | 1、采用真实面试方式进行模拟 2、根据面试提出意见和建议 3、解决学员就业疑惑 |
国信安于2002年由成都市倡导发起，中国电科三十所投资成立，是中国电科下属子集团--网安的全资子公司。作为一家拥有中国电科、网安双重国企办学背景的IT职业培训学校,国信安教育具有强大的行业、产业、集团企业的背景。
采用实战化教学，每个学习阶段均配备丰富的企业级项目实战训练，每年均会新增企业项目，帮助学员积累丰富熟练的开发经验,通过大量的贯穿全课程的真实企业级项目实战,在项目的实施中提升技术能力、学习能力和解决问题的能力，成功征服面试官。
课程内容以实际授课为准
