1. 引言
现如今网络应用越来越广泛，一些基本的网络应用编程成为计算机相关专业学生必备的一项技能。Web编程简单而实用，成为学生们学习的一个兴趣点和热点。而学生在学习Web编程时会遇到各种各样的问题，如何让学生快速的学会Web应用程序设计，掌握web编程的核心技术，成为学校相关课程中迫切要解决的问题，这将有助于日后学生进入社会后的更好地适应其工作岗位及工作安排。本文即是针对这一目的来进行的探索研究。
2. 层次案例的设计原则
为了让学生能循序渐进的学会如何完成一个Web应用系统，案例的选择和设计将给学生的学习带来重大的影响。循序渐进就是要从简单应用到复杂应用，从基本应用到大型应用，让学生扎扎实实的学会如何去设计实现Web应用系统。
第一层次：简单案例。当学生对web应用还没有概念的时候，先要以一个简单案例给学生展示并讲解。该Web应用案例功能简单明了，不需要太多的界面修饰，只为了能把学到的基本知识点应用到实践中。而在实际编程中，学生往往会遇到各种各样的问题，比如说不熟悉开发环境、不了解编程模式，不适应WEB开发等等。这时需要通过该简单案例一步一步的将开发环境及开发过程展示给学生，让学生有了开发框架及开发过程的基本概念。比如简单个人信息管理系统，包括信息的录入、信息查询、信息删除、信息展示等功能，让学生边学边做，在学习基本开发过程中将系统完成。
第二层次：功能案例。当学生学习了基本概念后，要让学生根据自己的兴趣自主完成一些具有不同功能的Web应用系统。在该层次的学习中，可以结合不同的功能案例进行讲解。该类案例通常会有一定特定功能，比如简单邮件系统，作业管理系统等等。学生可以根据自己的兴趣点选择学习不同的功能案例，并能举一反三，自主完成不同功能网站的设计及实现。
第三层次：综合案例。当学生对各项web功能都熟悉的情况下，可以让学生接触一些比较复杂的，涵盖面比较广的综合案例，并能自己提出一些新的想法和目标，设计自己的web应用系统。这是学习的最终目标，让学生能学会如何去进行web应用系统设计开发。该层次可以选择一些综合功能案例来帮助学习，比如企业信息管理系统，包括人员信息管理、邮件系统、任务管理等等。学生可以结合上一层次学习的内容，将不同的功能有机的组合起来，完成更大的系统。
这三个层次案例之间是递进的关系，从简单案例学习到功能案例学习再到综合案例学习，具体可以通过图1来表示。
3. 层次案例分析及设计
3.1. 简单案例分析与设计
学生学习Web应用系统开发，长远来看，将来会有更好的工作前景；近期而言，可以丰富学生的知
Figure 1. The relation of hierarchical instance
图1. 层次案例渐进关系图
识体系，增强学生的学习成就感。学习的第一步是要对Web应用系统开发有一个最基本、最基础的认识，针对这一需求，该阶段的案例设计要满足如下要点：
1) 有基本的登录页面和注册页面，并能在页面上进行输入格式验证；
2) 能够连接数据库，将注册的用户信息写入数据库以及将用户信息读出数据库；
3) 能够使用页面上各种控件，可以对数据进行展示、排序、分页、格式输出等；
4) 对文件进行简单处理，完成上传、下载文件的功能。
为此，可以设计简单个人信息管理系统案例用于讲解及学生练习。首先对用户进行注册，注册后用户可以进行登录。这里页面上将用到输入控件，验证控件等，学生可以通过学习以及练习掌握这些控件的使用。其次用户个人信息应写入数据库表中。这里数据库表部分要首先设计好，然后通过学习及练习掌握数据控件的使用。再次进入主页面后可以根据需要设计一些不同的控件组合，比如个人基本资料页面、兴趣爱好页面、工作日程页面等等，可以将多种控件进行组合，并掌握其应用方法。最后，可以根据需要上传下载喜欢的文件，可以包括音乐、小视频等等。简单案例分析设计都比较简单，这里不再举例说明。
3.2. 功能案例分析与设计
所谓功能案例，是指的有特定功能的应用系统，该系统要求学生在熟悉开发环境后利用一些特殊控件来完成更为复杂的功能，学生可以自主学习到更多的收获。比如邮件系统，该系统中除了基本网站的用户注册、登录、信息录入、输出等基本功能外，还具有邮件的收发功能，收到邮件后可以将邮件保存在本地，还可以对邮件进行各种操作，这使学生能综合使用不同的控件，学习邮件系统的配置，丰富自己的知识。比如作业管理系统，除了基本功能外还要对作业进行在线撰写、批改、反馈等功能，这些需要在功能设计后用编辑插件来完成，这使学生能扩展学到的知识，进一步完善知识体系。功能案例分析设计过程如图2所示。
功能案例还有许多，比如各类学习系统、考试系统、某方面的专门系统(绘画、音乐、棋牌等)。教师可以选取其中部分有特色的案例进行讲解，学生根据自己的兴趣进行案例选择，并进行分析设计，最终完成系统编程。
3.3. 综合案例分析与设计
综合案例是指的功能复杂、用到的技术多样的案例。该种案例系统要求学生的技术基础较好，综合能力较强。比如大企业信息管理系统，里面包括人事管理系统、产品管理系统、财务管理系统、企业内
Figure 2. The analysis and design process of functional instance
图2. 功能案例分析设计过程
部邮件系统、信息交流平台等。该系统除了基本控件外，会用到一些第三方插件或者控件，学生首先要根据需求进行功能分析设计，然后选择需要用到控件、插件，综合完成系统的设计及编程。综合案例分析设计过程如图3所示。这里基本内容应该都学习过了，就不再给学生学习基础知识的过程了。
4. 案例举例
Web应用系统案例很多，作为简单案例功能比较简单，主要是为了让学生练习web应用中的各种控件、各种简单功能，这里就不再赘述其案例实现。功能案例比较多样，我们选取其中之一作为案例实现的例子。综合案例可以看作是功能案例的组合，由于篇幅关系，这里也不再举例。这里以一个插画交流网站为例，来看一下如何分析及设计该web系统。
4.1. 需求分析
整体功能需求：作为一个以绘画作品交流为重点的网站，其核心目标是让用户可以快速、准确地找到自身感兴趣的作品并进行评价，对于创作者们则要保证他们可以方便地将自己的创作作品上传到网站上并且可以根据需要进行修改加工。网站的核心是浏览者阅览并评价作品，创作者上传并根据需要编辑作品。下面就这两个角色进行详细需求分析。
详细需求分析：1) 浏览者应当能通过网站检索到符合期望的作品，考虑到目前大环境下的使用习惯，浏览者可以通过关键字检索作品以及通过图搜图的功能；浏览者可以对作品进行评价操作，同时也要对评价的次数进行限制，防止刷分等恶意现象的发生；对于喜欢的作品或创作者，可以进行标记。
2) 创作者应当能够在网站上传自己的创作作品；创作者间可以交流心得体会；创作者有自己的独立页面以便管理作品，可以对作品进行编辑、删除操作；在网站中可提供在线绘画工具保证创作者可以便利地进行创作活动上传本站；创作者能够获知自己被关注的情况作品评价。
系统结构可以采用B/S结构，系统后台放置在专门的服务器上，而浏览器端可以根据需要进行访问。
4.2. 整体设计
通过总结功能需求，得到相应系统功能模块结构图如图4。
而系统数据库结构采用关系型数据库，设置若干张数据表存储相关数据，设计表间关系，将数据库服务器和功能服务部分放置在同一台服务器上或者放在同的服务器上。
4.3. 详细设计
4.3.1. 功能详细设计
有关功能的详细设计，这里以搜索功能为例进行介绍。系统的搜索功能包括两种，一是关键字搜索，二是按图片搜索。关键字搜索将会根据输入的关键字在数据库中寻找标题或标签符合条件的作品，功能较为简单，篇幅关系不再详细介绍。
Figure 3. The analysis and design process of multiple instance
图3. 综合案例分析设计过程图
Figure 4. The system function module structure diagram
图4. 系统功能模块结构图
按图片搜索将会根据用户上传的图像在网站数据库记录中搜索符合条件的作品，这里需要一个计算图片相似的算法，在研究了一些计算图片相似度的算法 [1] [2] [3] 后，这里选取均值感知哈希算法来进行这一部分的处理，此算法于2011年由Neal Krawetz博士提出 [4] 。感知哈希算法的作用是提取文件特征并生成可用于比较的指纹，主要用于图片、视频等媒体资源的比较和检索等领域。算法的具体步骤如下：
Step1：将图片缩小到8*8的尺寸，大幅度去除图像的高频成分，同时避免在接下来的计算中可能因原图大小尺寸带来的差异。
Step2：将缩小后的图片转化为灰度图，至此原图将只保留明暗和结构的基本信息。
Step3：计算当前已经只有64个像素的图片的平均灰度值。
Step4：将图中每个像素的灰度值同方才得出的平均值一个一个地进行比较。大于或等于平均值，记为1；小于平均值，记为0。最后将比较得到的0和1组合起来，将会成为一个64位的数据，此数据即可代表被检测图片的指纹记录。
Step5：需要比较时，将会根据两个比较对象之间的差距判定两者是否是类似作品。将两个上一步得到的字符串进行比较，统计两个64字符串间的不同位数，其结果将是两者间的汉明距离。最后根据汉明距离是否超过了阀值对两张图片相似与否进行判断。
之后就可根据具体步骤分别设计各步骤的算法程序了。
4.3.2. 数据库表设计
数据库表应包括用户表、作品表、评论表、消息表，图5是数据库的E-R图：
数据库部分设计就不一一介绍了，根据功能案例的不同设计自己需要的数据库表即可。
4.3.3. 界面详细设计
在正常流程下，首页将会是来访者进入本网站后所见到的第一个网页。从提升宣传效果以及使用体验的方向考虑，在首页配置了公告、当前推送的专题活动、今日公告、新作这些板块(图6)。
之后可以根据用户需要进行不同的页面，这里以作品详情页为例来讲解。在作品详情页中，页面内主要由作者信息、作品信息、作品内容、评论信息这些部分组成。由于作品内容是最关键的部分所以应居中设置。根据作品种类不同，内容中将会出现图片或文章，如图7。其他页面还有很多，不再赘述。
5. 总结与展望
在进行Web应用案例研究的时候，要注意不要将太难的题目布置给基础较差的同学，同样给基础好的学生布置的题目也不能太过容易，这都会打击学生的学习积极性。老师要结合学生的现有水平来提升学生的学习兴趣，因此多层次多级别的案例将大大的提升学习的效率，循序渐进的学会需要的知识。
Figure 6. The design draft of the home page
图6. 首页设计稿
Figure 7. The design draft of work details
图7. 作品详情页设计稿
基金项目
本项目北京信息科技大学2015年度教学改革立项资助；“教师队伍建设–教师教学促进–外培计划教师教学能力提升项目(市级)–计算机科学与技术”资助；“教师队伍建设–教师教学促进–双培计划虚拟教学团队建设(市级)–计算机科学与技术、软件工程”资助。