《前端开发框架技术》课程教学大纲.docxVIP

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