WEB开发技术教学大纲

第一章 WEB开发技术概述（2学时）

教学内容：了解Web前端开发方法介绍、概念、行业背景、发展史与前景。

教学重点：前沿Web开发平台和框架的应用。

教学目标及要求：了解Web前端开发基础知识、基本技术；了解前沿Web开发平台和框架；理解网页和标记语言的相关概念；了解Web前端开发设计最新技术动态。

课程思政：元素：树立文化自信，赋予科技兴国的时代使命感。案例：国产三大前端开源框架之一Vue.js发展历程，尤雨溪，前端框架Vue.js的作者，HTML5版Clear的打造人，独立开源开发者。

第二章 HTML5（6学时）

教学内容：HTML5常用标记的用法。

教学重点：HTML标记在网页设计中的使用方法。

教学目标及要求：掌握文本格式标记用法；掌握文本修饰标记用法；熟练掌握列表标记用法；熟练掌握图像标记用法；掌握超链接标记用法；熟练掌握表格标记用法；掌握表单标记用法；掌握容器标记以及其他常用标记用法；掌握HTML5的基本用法、新特点。

第三章 CSS、BootStrap网页布局（10学时）

教学内容：CSS语法；CSS选择器；CSS组合选择器；CSS对网页元素样式的设计；CSS+DIV网页布局技术，应用BootStrap框架布局简单含有文本的页面实例，熟练掌握BootStrap框架在不同类别网页中的应用实例。

教学重点：CSS盒子模型；CSS+DIV网页布局技术；BootStrap框架中的网格布局系统；BootStrap布局网页中伪类的应用。

教学目标及要求：掌握CSS（层叠样式表）的基本概念和用途；熟练掌握CSS的语法、定义、分类以及特性；熟练掌握CSS中的选择器及其属性；掌握在HTML中使用CSS、CSS3的新特性；熟练掌握盒子模型在网页布局中的应用；熟练掌握用CSS控制WEB页面元素的方法；熟练掌握DIV+CSS的网页布局技术；应用BootStrap框架布局不同分栏类型页面的方法；应用BootStrap框架布局不同类型的前台页面细节内容，例如网站轮播图片展示、新闻；应用BootStrap设计导航栏的布局以及几种常用导航的设计方法。

第四章 JavaScript语法基础（8学时）

教学内容：JavaScript简介；JavaScript语言基础；JavaScript的变量；JavaScript的运算符；JavaScript数据类型；JavaScript的保留字；JavaScript语句；结合CSS、DIV、BootStrap、JavaScript设计交互式页面；JavaScript对象；浏览器对象模型；文件对象模型；事件处理。

教学重点：重点：掌握JavaScript的基本语法，JavaScript的重要特性。 JavaScript的特点；JavaScript的用途；网页中插入JavaScript脚本的方法； JavaScript语言基础；JavaScript的变量；JavaScript的运算符；JavaScript数据类型；JavaScript的保留字；JavaScript语句。

教学目标及要求：掌握JavaScript语法基础，JavaScript的应用场合及特点，JavaScript的重要特性，掌握JavaScript的特点；JavaScript的用途；网页中插入JavaScript脚本的方法； JavaScript的变量；JavaScript的运算符；JavaScript数据类型；JavaScript的保留字；JavaScript语句。

第五章 Vue.js（10学时）

教学内容：JavaScript语法基础；DOM模型；JQuery插件下载方法及在网页中的应用；掌握Vue.js下载和引用的方法；应用前沿前端开发Vue等框架设计开发Web前端；ElementUI；数据可视化ECharts应用；Vue项目文件目录结构；Vue指令和事件处理。

教学重点：DOM主要对象；JQuery插件下载方法及在网页中的应用；掌握JQuery框架，使用方法及其主要功能； 使用ScriptManager以及UpdatePanel控件的使用；Vue数据绑定的方法；Vue方法事件处理器。

教学目标及要求：了解JavaScript语言；掌握JavaScript编程基础；掌握DOM主要对象，掌握 Vue指令和事件处理。

第六章 WEB前后端交互（2学时）

教学内容：基于api前端显示课程详细信息：调整Course.vue模块；调整Detail.vue模块。推荐课程切换及详情展示：测试使用router-link是否合适；添加点击事件处理推荐课程点击切换。用户登录功能实现：前端添加Login.vue模块；django后台auth接口配置；跨域问题处理；rest-framework登录验证；用vuex实现在各个组件中共享值；vue-cookies应用。拦截器：页面访问登录判断；添加拦截器；登录后直接显示登录前页面。用户认证：通过token进行用户认证；通过rest认证组件实现用户认证。vue接口归总：在vuex中设置apiList字段归总所有rest接口；替换各个模块中的url地址。

教学重点：重点：结合 HTML5 History API，应用实例建立一个客户端路由器；简单状态管理起步使用；Vue.js组件、Vue.js组件自定义事件应用。 导航菜单实例、订单列表、搜索页面、编辑文本实例、切换不同部件实例Vue.js实现。

教学目标及要求：掌握Vue 响应式系统的底层的细节；去除重复数据对于避免不必要的计算和 DOM 操作。

课程思政元素：“精益求精”的工匠精神。案例：结合所选取或设定的Web前端开发设计案例，充分运用已学习的Web开发相关理论知识应用到Web前端开发实践中去。对待解决的复杂问题进行综合分析，提出可行的开发设计方案，并对所提出的方案从规范化、效率等角度进行科学评价、实现优化设计。