培训背景
对目前的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后端接入
|