培训背景
对目前的web来说,前后端分离已经变得越来越流行了,越来越多的企业/网站都开始往这个方向靠拢。那么,为什么要选择前后端分离呢?前后端分离对实际开发有什么好处?
而前后端分离开发,可以很好的解决前后端分工不均的问题,将更多的交互逻辑分配给前端来处理,而后端则可以专注于其本职工作,比如提供API接口,进行权限控制以及进行运算工作。而前端开发人员则可以利用nodejs来搭建自己的本地服务器,直接在本地开发,然后通过一些插件来将api请求转发到后台,这样就可以完全模拟线上的场景,并且与后台解耦。前端可以独立完成与用户交互的整一个过程,两者都可以同时开工,不互相依赖,开发效率更快,而且分工比较均衡。
培训目标
1.掌握前后端分离开发模式框架思想;
2.掌握前后端分离开发协作模式;
3.掌握前后端接口定义规则及测试方式;
4.掌握前端主流开发技术;
5.掌握Vue基础语法;
6.掌握Vue组件、VueRouter、Vuex;
7.掌握ElementUI及ElementAdmin框架。
培训特色
1.Bat技术主管级别讲师;
2.小班课不超15人 学员更多辅导机会;
3.培训内容及案例根据技术变化动态调整;
4.案例皆为真实企业级项目、从容应对工作挑战。
课程大纲
时间 | 内容 | 备注 |
---|---|---|
第一天 上午 |
前后端分离开发及 后端接口设计与实现 |
1.传统的开发模式 2.前后端分离的开发模式 3.开发流程 4.前后职责分离 5.前后技术分离 6.前后分离的优点 7.跨域问题解决 8.接口设计 9.数据接口规范流程 10.完整的响应结果 11.认识 REST 12.RESTFul API的交互方式 13.实现 REST 框架 14.后端接口设计及实现案例 15.Postman接口测试 16.Swagger插件生成接口API文档 |
第一天 下午 | ES6 |
1.ECMA介绍,名称、版本 2.Let命令 3.Const命令 4.字符串模板 5.字符串新增方法 6.函数默认参数 7.箭头函数 8.Rest运算符 9.变量的解构赋值(数组) 10.变量的解构赋值(对象) 11.数组方法forEach、map、filter、find 12.数组方法ervery、some、reduce 13.对象扩展 14.Class基本语法 15.Class的继承 16.面向对象实例 17.Promise 18.模块化 |
第二天 上午 | Vue基础 |
1.MVVM前端架构思想 2.Vue总体特性 ●数据驱动 ●双向数据绑定 ●观察者模式与Vue架构实现 3.Vue实例 ●构造器 ●Vue实例生命周期 4.条件渲染 5.列表渲染 6.计算属性 7.Watchers 8.事件处理器 9.事件修饰符 10.样式绑定 11.表单控件 ●基础用法 ●绑定Value ●参数特性 12.过渡&动画 ●CSS过渡 ●JavaScript过渡 13.渐进过渡 |
第二天 下午 |
Ajax Vue组件 |
1.Ajax数据获取 ●Axios实质 ●Axios安装 ●Axios使用 2.组件 ●组件语法 ●组件生命周期 ●vue全局组件 ●vue中的局部组件 ●vue声明父子组件 ●父子传递数据 ●子父传递数据 ●数据同步 ●子组件更改数据不同步数据 ●vue组件自定义事件 ●vue中的slot |
第三天 上午 |
VueRouter VueX |
3.VueRouter ●安装及使用用法 ●嵌套路由 ●路由规则 ●路由匹配 ●具名路径 ●路由选项 ●Router-view ●V-link 4.Vuex ●vuex之state用法 ●2.vuex之getters用法 ●3.vuex之mutations用法 ●4.vuex之actions用法 |
第三天 下午 |
ElementUI ElementAdmin |
5.Element 框架简介 ●安装及使用用法 ●基础组件库 ●栅格布局 ●布局容器 ●字体及图标 ●菜单及导航 6.ElementAdmin ●ElementAdmin工程结构 ●ElementAdmin组件开发 ●ElementAdmin后端接入 |