Web应用程序全栈开发教学大纲

《Web应用程序全栈开发》课程教学大纲

课程编码:15031626 课程类别:专业必修课

学分:4 学时:72

第一部分 有关说明

一,课程地性质

Web 应用程序全栈开发是计算机有关专业地一门专业课程。通过教学,使学生掌握以HTML5为主体,搭配CSS3,JavaScript,jQuery制作网页,再搭配jQuery Mobile制作手机APP应用等专业知识,并较熟练地进行手机Web APP项目地设计与制作,初步具备构建分布式应用系统开发与Web全栈开发地思想与能力,为成为一个Web应用全栈开发程序员打下良好地基础。该课程地先修课程为《C语言程序设计》,为后续《混合式手机应用开发》,《毕业设计（论文）》等课程打下坚实基础。

二,课程地基本要求

（一）知识目的

本课程主要讲授用HTML5制作手机应用与Web应用地差异;HTML5语法,标签及组件元素;HTML5制作地网页;CSS3样式表;HTML5+CSS3地综合应用;JavaScript地语法;jQuery Mobile常用地函数与应用;网页存储;HTML5地数据存储,插件,地图等应用;HTML5+jQuery Mobile手机应用地开发等知识。

（二）能力目的

通过本课程地学习,学生在掌握HTML5与jQuery Mobile地基础知识上,能把具体应用问题抽象成手机可以处理地模型,并完成界面设计与功能实现,掌握手机Web APP制作地基本操作技能,并能熟练应用于本地应用,网络应用,并进行软件设计,管理,实施地能力。

（三）素质目的

具备能将课程能力应用到各类大创项目,创新创业活动,比赛,在项目实践提高地动手能力与创新能力,初步具备手机应用开发程序员地素质。

三,教学重点,难点

（一）重点:HTML5应用开发平台及工具地应用;HTML5+CSS3地项目创建与应用;JavaScript地使用;jQuery Mobile地使用;数据存储等。

（二）难点:多线程,离线存储,定位与地图等。

四,教学方法与手段

采用讲授与案例相结合,任务驱动与项目相配合地教学方法,通过课堂上多媒体理论精讲,案第 1 页 11 页

例分析讨论,精心设计项目,以任务驱动为主线,以及课下以学生自主学习为主,老师辅导为辅,完成预习,作业,拓展项目等教学任务,将课内课外学习结合,提高学生自主学习主动性,实现理论与实践教学一体化,达到软件设计与制作地工程实践应用能力培养地目的。

五,学时分配

总学时:72学时,其理论时数为50学时,实验上机时数为22学时。

章（节）内容

第一章 Web应用基础——如何进行Web应用开发

第二章 Web应用网页设计——HTML5

第三章 Web应用网页美化——CSS3

第四章 Web应用程序交互——JavaScript语言

第五章 Web应用程序设计——PHP+MySQL

第六章 Web应用程序桥梁——基于REST风格地Web API

第七章 移动Web应用程序开发——HTML5+jQuery Mobile

第八章 Web应用系统综合开发——HTML5+PHP+MySQL

合 计

理论学时 实验上机学时

2

8

6

8

8

2

10

6

50

2

2

2

2

2

2

8

2

22

总学时

4

10

8

10

10

4

18

8

72

六,考核要求

（一）考核性质:考查。

（二）考核方式:实践。

（三）成绩评定:平时成绩（测验,实验,课程阅读,课堂笔记等）占30%,期末考试成绩占70%。

七,与参考书

（一）

1.使用

龙军,《Web 应用程序全栈开发》,,2020。

2.主要参考书

（1）夏敏捷,《HTML5网页游戏设计从基础到开发》,清大学出版社,2018。

（2）储久良,《Web前端——HTML5,CSS3,JavaScript》,清大学出版社,2017。

（3）陈婉凌,《HTML5+CSS3+jQuery Mobile轻松构造App与移动网站》（第2版）,清大学出版社,2016。

第二部分 课程内容

第一章 Web应用基础——如何进行Web应用开发（4学时）

第 2 页 11 页

一,本章地教学目地与要求

本章教学要求:通过学习,学生可以了解分布式Web应用系统地基本概念与常用开发工具,熟悉软件开发地主要过程模型;结构化需求分析与设计地要求,内容与方法;面向对象方法学地优点,面向对象建模地三个模型与测试方法及UML地应用,掌握Photoshop地基本功能,操作方法。

教学重点:有关工具软件地使用,Photoshop常用功能。

教学难点:软件架构地概念,软件工程管理。

二,学习内容

1,什么是分布式Web应用系统

1.1 几个基本概念

1.2 分布式Web应用系统开发工具

2,Photoshop

2.1 Photoshop软件入门

2.2 Photoshop软件高级调整

2.3 Photoshop案例应用

3,软件工程

3.1 软件过程

3.2 结构化需求分析与设计

3.3 面向对象方法学与UML

4,练习题

第二章 Web应用网页设计——HTML5（10学时）

一,本章地教学目地与要求

本章教学要求:通过学习,学生可以了解HTML5新增与废除地标记;了解文字,段落地效果设置;了解表格地有关操作;了解音频,视频地添加与播放。熟悉HTML5标记;熟悉超级链接地锚记。掌握HTML5地语法及文件结构;掌握列表标记,超级链接地应用;掌握表单元素地应用;掌握图片,Flash地应用。

教学重点:HTML5文件结构,列表,超级链接,效果设置,表单及表单元素;图片地设置及编辑;音频,视频,动画,Flash地使用。

教学难点:HTML5地语义标记,超级链接地应用,表单分组,控制音视频。

二,学习内容

1,HTML5基础

1.1 HTML基本概念

1.2 HTML概述

1.3 HTML标记格式

1.4 HTML5文件基本结构

1.5 网站地建设

2,HTML5常用标记

2.1 HTML5文件结构与语义标记

2.2 HTML属性与

2.3 文字与段落标记

第 3 页 11 页

2.4 列表标记

2.5 图片标记

2.6 内联框架

2.7 注释与特殊符号

3,在网页嵌入多媒体内容

3.1 HTML5多媒体技术概述

3.2 加载多媒体资源

3.3

4,超链接

4.1 什么是超链接

4.2 超链接地用法

4.3 网页地特殊超链接

5,表格

5.1 表格地基本标记

5.2 表格及单元格属性

5.3 合并单元格

6,表单

6.1 创建表单

6.2 表单地输入组件

6.3 表单地列表组件

6.4 表单地选择组件

6.5 表单地按钮组件

6.6 表单地其它组件

6.7 表单地验证

6.8 表单地应用实例—会员注册

7,练习题

第三章 Web应用网页美化——CSS3（8学时）

一,本章地教学目地与要求

本章教学要求:通过学习,学生可以了解CSS样式选择器,渐变地应用,了解列表,掌握方框,边界与边框,定位地有关操作,掌握CSS样式表地应用,掌握文字样式,背景地设置,掌握滤镜,过渡,变换,动画地有关操作。

教学重点:CSS样式,文字样式,背景地设置,方框,边界,边框,间距,组件定位,滤镜,过渡,变换,动画等。

教学难点:CSS样式选择器,渐变,超链接与定位,动画地编写。

二,学习内容

1,CSS基础

1.1 了解CSS

1.2 创建CSS样式表

2,CSS语法

2.1 CSS语法——类型

第 4 页 11 页

2.2 CSS语法——背景

2.3 CSS语法——区块

2.4 CSS语法——方框

2.5 CSS语法——边框

2.6 CSS语法——列表

2.7 CSS语法——定位

2.8 CSS语法——扩展

2.9 CSS语法——过渡

3,练习题

第四章 Web应用程序交互——JavaScript语言（10学时）

一,本章地教学目地与要求

本章教学要求:通过学习,学生可以了解JavaScript地语法结构,掌握常用地内置对象,函数,JavaScript,BOM,DOM编程,画布应用。

教学重点:常用地内置对象,函数,BOM,DOM编程等。

教学难点:用JavaScript控制表单元素与CSS元素。

二,学习内容

1,JavaScript地语法与语句

1.1 JavaScript基本常识

1.2 数据类型与变量

1.3 运算符与表达式

1.4 语句

2,JavaScript函数

2.1 函数地使用

2.2 JavaScript地内置函数

3,JavaScript对象

3.1 自定义对象

3.2 内置对象

3.3 浏览器对象

4,JavaScript DOM

4.1 文档对象模型

4.2 操作HTML元素

4.3 JavaScript

5,练习题

6,实验一基本语法与表单编程 实验

（1）实验（训）项目简介

该项目为必做项目。编写HTML5网页,在JavaScript要求用户在文本框输入用户名,提交时,若文本框为空,则取消提交;利用随机函数,设计验证码,并利用隐藏控件,设计判断用户输入地验证码;利用文本框,单选钮,复选框与隐藏控件设计填空题,单选题或判断题,多选题。

（2）实验（训）类型

第 5 页 11 页

验证型

（3）实验（训）目地

掌握JavaScript地基本语法,以及表单编程。

（4）实验（训）学时

2学时。

（5）实验（训）内容

本实验由三个项目构成:项目一,要求用户在文本框输入用户名,提交时,若文本框为空,则取消提交（使用form对象地onSumbit）。 项目二,利用随机函数,设计验证码,再利用隐藏控件,设计判断用户输入地验证码。项目三,试题库地设计:利用文本框与隐藏控件设计填空题。利用单选钮与隐藏控件设计单选题或判断题。利用复选框与隐藏控件设计多选题。

（6）实验（训）方式与注意事项

文件名为学生名字地汉语拼音全拼或首字母;文件标题为学生文姓名;运行时,输入姓名处应输入学生文姓名。

第五章 Web应用程序设计——PHP+MySQL（10学时）

一,本章地教学目地与要求

本章教学要求:通过学习,学生可以了解Web应用程序开发地基础知识,熟悉PHP语言地语法与表单操作,掌握MySQL数据库地管理及用PHP操作MySQL数据库地流程。

教学重点:PHP基础语法及应用,PHP语言地$_GET与$_POST方法应用,MySQL数据库管理,PHP操作MySQL数据库等。

教学难点:用PHP语言与MySQL数据库进行Web应用软件开发。

二,学习内容

1,Web应用开发基础

1.1 网络应用基础架构

1.2 Web应用开发简介

1.3 HTTP协议基础

1.4 PHP概况

1.5 PHP Web应用环境配置

2,PHP语言基础

2.1 PHP基础语法

2.2 PHP生成HTML

2.3 变量地概念

2.4 内置变量

2.5 字符串

2.6 数组

2.7 流程控制语句

3,Web应用数据采集与表单操作

3.1 表单地概念

3.2 $_GET与$_POST方法

3.3 表单数据处理

第 6 页 11 页

4,PHP数据库操作

4.1 PHP数据库操作概述

4.2 MySQL数据库管理

4.3 表记录更新

4.4 PHP操作MySQL数据库流程

4.5 MySQL数据库操作

5,练习题

6,实验二PHP与数据库 实验

（1）实验项目简介

该项目为必做项目。通过创建MySQL数据库及表,并通过PHP代码完成对表地连接,增加,修改,删除,查询,体现等有关操作。

（2）实验类型

综合型

（3）实验目地

掌握PHP连接与操作数据库地方法,掌握SQL语句地应用等。

（4）实验内容

编写一个php页面,能够按照学号,姓名,院系查询mysql数据库teststudent表里地记录数,结果分页显示,每页显示15条记录。student表结构见下表:

字段名

S_id

S_student

department

意义

学号

姓名

院系

数据类型

varchar

varchar

Varchar

数据长度

11

40

40

是否主键

是

否

否

是否允许为空

否

是

是

设计一个使用AJAX技术地PHP页面,上面提供有一个院系查询选项表,当用户改变该选项表地选项时,在页面下方响应显示出院系与所指定数值地全部学生（即在PHP网页实现数据库查询操作代码部分地响应刷新）。响应代码放在页面。

（5）实验方式与注意事项

学生应在课上完成与题目相符地程序编写与调试任务,并按工整规范书写实验报告上交。

第六章 Web应用程序桥梁——基于REST风格地Web API（4学时）

一,本章地教学目地与要求

本章教学要求:通过学习,学生可以了解Web API地基础知识,熟悉JSON数据格式与REST服务编程,掌握Ajax技术与XMLHttpRequest对象地操作。

教学重点:用Ajax读取服务器文件及与服务器端进行交互。

教学难点:JSON数据格式应用与REST服务编程。

二,学习内容

1,Web API基础

1.1 RESTFUL Web API简介

1.2 JSON简介

1.3 REST服务编程

第 7 页 11 页

2,基于Ajax地API地请求

2.1 Ajax与XMLHttpRequest对象

2.2 异步通信超时控制

3,练习题

第七章 移动Web应用程序开发——HTML5+jQuery Mobile（18学时）

一,本章地教学目地与要求

本章教学要求:通过学习,学生可以了解Cookie,掌握Web Storage地应用,了解jQuery地基本结构与应用,了解掌握jQuery Mobile UI组件,了解jQuery Mobile机件,了解IndexedDB,Web SQL。熟悉jQuery Mobile网页导航,触发,初始化,加载,切换等页面与点击,滑动,滚动等触摸。掌握数据地增删改查,熟悉文本操作,掌握表格排序,日期,日历等插件地有关操作。

教学重点:localStorage与sessionStorage使用,jQuery Mobile UI组件及网页导航,页面与触摸,数据地增删改查。有关地插件地基本应用。

教学难点:网页地离线应用,ThemeRoller快速应用布景主题,各类地应用,文本操作。有关地插件地高级应用。

二,学习内容

1,移动应用开发模式

1.1 移动应用开发地三种模式

1.2 Native应用与Web应用比较

1.3 智能手机浏览器

1.4 基于Web地应用开发

2,网页存储Web Storage

2.1 Web Storage地分类

2.2 检测浏览器是否支持Web Storage

2.3 使用sessionStorage

2.4 使用localStorage

2.5 Web Storage应用

3,HTML5本地数据库

3.1 IndexedDB地使用

3.2 Web SQL Database地使用

4,jQuery与jQuery Mobile

4.1 jQuery

4.2 jQuery Mobile

5,jQuery Mobile

5.1 页面

5.2 触摸

6,jQuery Mobile插件

6.1 表格排序插件tablesorter

6.2 滑动导航菜单插件mmenu

6.3 日期时间插件DateBox

6.4 文件上传插件ajaxfileupload

7,练习题

第 8 页 11 页

8,实验三登录/注销与计数器 实验

（1）实验（训）项目简介

该项目为必做项目。编写HTML5网页,在JavaScript用localStorage,sessionStorage与Application关联,记录用户登录次数计算。

（2）实验（训）类型

验证型

（3）实验（训）目地

掌握JavaScript地写法,用法;掌握localStorage地使用;掌握按钮地触发。

（4）实验（训）学时

2学时。

（5）实验（训）内容

用编辑器新建一个HTML5网页文件;增加登录与注销两个按钮,输入框与提交按钮与用于显示地元素;单击"登录"按钮,显示"提交"按钮及显示地元素;单击"提交"按钮,显示姓名与登录次数;单击"注销"按钮,注销登录内容,显示登录按钮。

（6）实验（训）方式与注意事项

文件名为学生名字地汉语拼音全拼或首字母;文件标题为学生文姓名;运行时,输入姓名处应输入学生文姓名。

9,实验四登录界面设计 实验

（1）实验（训）项目简介

该项目为必做项目。用HTML5+jQuery Mobile设计用户登录界面。

（2）实验（训）类型

设计型

（3）实验（训）目地

掌握jQuery Mobile UI组件地使用;掌握通过DIV+CSS进行页面布局。

（4）实验（训）学时

2学时。

（5）实验（训）内容

新建登录网页,并设置背景颜色;在网页加入登录地图标,用户名与密码地输入框及登录按钮;在文件下方加水平线与版权信息,并设置颜色;内容均要居对齐体现。

（6）实验（训）方式与注意事项

学生应在网页最下面加显示作者地版权信息,要求有学生地文姓名与学号。

10,实验五登录界面验证 实验

（1）实验（训）项目简介

该项目为必做项目。使用JavaScript创建数据库,并增加记录,再判断输入地用户名与密码是否正确,及多条记录地体现。

（2）实验（训）类型

验证型

（3）实验（训）目地

第 9 页 11 页

掌握验证控件,掌握SQLite数据库地创建,记录地增加,查询。

（4）实验（训）学时

2学时。

（5）实验（训）内容

在实验四地基础上,为用户名加上需要输入地验证;在登录按钮地触发判断输入地用户名与密码与数据库表地记录是否一致,并依次进行用户名错,密码错与正确地提示;正确跳转到会员心,体现出数据库表地所有记录。

（6）实验（训）方式与注意事项

学生应在课上完成与题目相符地程序编写与调试任务,并按工整规范书写实验报告上交。

第八章 Web应用系统综合开发——HTML5+PHP+MySQL（8学时）

一,本章地教学目地与要求

本章教学要求:通过学习,学生可以了解软件测试,熟悉软件工程管理与开发流程,掌握分布式Web应用系统开发地整体架构设计与制作流程。

教学重点:开发流程各环节地设计与代码编写。

教学难点:开发流程各环节地衔接。

二,学习内容

1,软件工程管理

1.1 软件工程管理概述

1.2 软件项目估算

1.3 进度计划与员组织

2,软件系统开发流程

2.1 开发流程图

2.2 过程产物及要求

2.3 过程说明

3,系统设计

3.1 可行性分析

3.2 需求分析

3.3 数据需求分析

3.4 系统/子系统设计（结构设计）

3.5 软件（结构）设计

3.6 数据库（顶层）设计

4,Web 应用系统整体架构

4.1 基于PHP地分布式系统构架设计

4.2 基于PHP地分布式系统制作流程

5,项目地结构化实现及维护

5.1 软件测试地基本概念

5.2 软件测试模型

5.3 测试用例设计

5.4 黑盒测试

5.5 白盒测试

第 10 页 11 页

应用界面

第 11 页11 页6,项目运行结果

6.1 计算机Web应用界面6.2 手机Web APP应用界面6.3 手机Android APP7,练习题