《前端开发框架技术》课程教学大纲
一、课程基本信息
课程名称
前端开发框架技术
课程类别
□通识必修 □通识选修□专业必修■方向必修 □任意选修 □创业必修 □创业选修
课程性质
■理论+实践 □理论 □实践
执行学期
考核方式
■考试 □考查
总学分
总学时
理论学时
实践学时
开课单位
适用专业
(方向)
先修课程
网页设计、JavaScript
教学环境
理论：■一体化机房 □多媒体教室 □讨论课教室
实践：□一体化机房 ■实验机房
二、课程简介
本课程是面向软件工程专业开设的一门专业必修课，涉及网页设计、CSS样式、JavaScript、面向对象程序设计，响应式、前端常用框架等内容，通过本课程的学习，学生能够了解web前端开发中，使用面向对象编程思想进行代码封装的基本方法与基本思路；在此基础上学习目前较为流行的、优秀的前端框架，比如jQuery，Angular.js和Vue.js；并且通过这些框架的学习和使用，培养学生运用新技术，解决web前端开发的综合能力。
本课程是在《网页设计》、《JavaScript》、《面向对象程序设计》的基础上开设的课程，为后继课程《混合式开发技术》等课程奠定理论和实践的基础。
三、课程教学内容对指标点的支撑
（1）理论教学安排
序号
知识模块
支持毕业要求的细化指标
教学内容
学时分配
学生任务
1
JavaScript面向对象编程
1.▲掌握js语言面向对象编程的特点
2.★掌握js对象与构造函数jquery在线免费学习技术
3.★掌握js原型与原型链
4.理解js继承
1.js语言面向对象编程的特点
2.js对象与构造函数
3.js原型与原型链
4.js继承
2
1.掌握课上基本内容
2.使用面向对象的思想，封装一个自己的AJAX库
2
框架封装
1.▲理解框架封装的原理
2.★▲掌握封装自己的框架
1.框架封装的原理
2.封装自己的框架
4
1.封装自己的动画框架
2.封装自己的属性框架
3.封装自己的DOM框架
3
jQuery高级
1.▲理解jQuery框架分析
2.★掌握jQuery常用api
3.★▲掌握jsonp
4.掌握常用web api
5.★掌握art-template
1.jQuery框架分析
2.jQuery常用api
3.jsonp
4.常用web api
5.art-template
6
完成通过访问聚合数据api，制作菜谱案例
常见前段框架概述
1.理解传统框架与新兴框架的差别
1.常见的前段框架介绍
2.新型前端框架与传统框架的差别简介
2
下载，安装，测试课堂所提到的常见框架包
4
Vue.js框架概述
1.理解Vue.js是什么
2.▲理解MVVM模式
3.★掌握如何使用Vue.js
4.理解Vue.js的开发模式
1.Vue.js是什么
2.如何使用Vue.js
3.Vue.js的开发模式 
2
使用Vue.js开发自己的第一个前端程序hello world
5
Vue.js基本用法
1.★掌握Vue.js的基本语法
2.★▲掌握Vue.js的基本框架用法
3.★了解Vue.js常见组件及其用法
1.Vue基本语法
2.Vue常用系统指令
3.数据绑定
4.过滤器
5.生命周期
6.路由
7.过渡效果
8.组件
10
1.掌握课堂内容，独立完成课堂演示demo
2.开始策划和分析商城案例
6
Angular框架概述
1.了解其他常见框架
2.了解Angular框架优势
3.★了解Angular基本用法
1.Angular基本介绍
2.Angular与Vue等其他框架的区别
3.Angular基本用法
2
无
7
综合项目分析
1.★掌握综合使用前端框架技术开发实际项目的基本方法和基本原则
2.理解模块划分原则
3.掌握前端和后端完全独立的开发模式
1.综合项目分析
4
独立完成美食食谱案例的开发
注：★表示重点内容，▲表示难点内容
（2）实践教学安排
序号
项目名称
支持毕业要求的细化指标
学时分配
项目类型
每组人数
学生任务                                                             
1
天气查询1
1.掌握VS Code开发工具
2.掌握原生AJAX技术
3.掌握原生jsonp跨域请求
4.掌握封装框架的基本原理
4
验证
1
1.封装自己的框架
2.完成天气查询项目
2
天气查询2
1.掌握jQuery基本用法
2.掌握jQuery下的jsonp跨域请求
3.掌握art-template用法
4
验证
1
1.使用jQuery和art-template改造天气查询
3
美食菜谱
4.掌握正确的代码书写风格
5.掌握vue.js基本用法
6.掌握使用互联网查询技术文档的能力
7.掌握使用常见互联网平台提供的api数据服务
8.掌握前端和后端完全独立的开发模式
9.理解模块划分原则
10.了解团队开发模式
8
设计
3-4
1.设计美食菜谱UI
2.设计美食菜谱
3.任务划分
注：项目类型可以是验证型、设计型、综合型
四、课程考核
表1 课程考核细则
考核环节
考核要求
分值比例（%）
分项
总评
平时
考核
考勤
每次上课班长点名，旷课1节20分，无故旷课5节以上取消考试资格
100%
10%
实践
考核
项目1
天气查询1
1.HMTL/CSS/JS代码分离（25%）
2.界面美观（25%）
3.类库封装规范，采用了面向对象思想进行封装（50%）
25%
20%
项目2
天气查询2
1.HMTL/CSS/JS代码分离（25%）
2.界面美观（25%）
3.正确使用art-templ （50%）
25%
项目3
美食菜谱
1.界面美观（25%）
2.正确使用Bootstrap，实现响应式布局（25%）
3.正确使用互联网数据平台提供的api服务（25%）
3.正确使用Vue.js框架，功能模块齐全（25%）
50%
结课
考核
期末测试
提交作品：
1.HMTL/CSS/JS代码分离（10%）
2.界面美观（20%）
3.正确使用Bootstrap，实现响应式布局（20%）
4.正确使用互联网数据平台提供的api服务（10%）
5.正确使用Vue.js框架，功能模块齐全（20%）
6.认真撰写项目报告（20%）
100%
70%
五、课程评价及改进
课程考核结束后，任课教师遵循软件学院教学工作指导委员会通过的课程达成度评价机制和评价方法，对本课程的毕业要求达成度进行自我评价。此外，学院的教学工作委员会将指派专门的教师，依据学生的考试成绩和平时成绩等资料，对本课程的达成度进行评价，并出具达成度评价报告。教师根据评价结果，改进其教学方法和教学内容，以便更好地支撑学生毕业要求的达成。
七、教材及参考资料
参考书籍： 

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。