基于HTML5的校园移动客户端的设计与实现

1、天津职业技术师范大学Tianjin University of Technology and Education毕 业 设 计专 业： 计算机科学与技术 (五年)班级学号： 1013 29 学生姓名： 张宇行 指导教师： 龚良波 讲师 二一五年六月天津职业技术师范大学本科生毕业设计基于HTML5综合服务系统移动客户端的设计与实现Design and Implementation of a Comprehensive Service System HTML5-based Mobile Client专业班级：计科1013学生姓名：张宇行指导教师：龚良波 讲师学 院：信息技术工程学院2015 年 6

2、 月摘 要开发本系统的主要工作目的是将最新的超文本标记语言HTML5、CSS3，以及jQuery Mobile框架应用到实际项目中，借助这些最新的网站设计技术实现页面布局、色彩显示和控件显示。很好的解决不同设备之间的兼容性问题，降低网站的开发成本。同时，推进这些互联网新技术的应用。在整个项目的开发中使用多浏览器兼容的javascript库jQuery处理HTML事件、实现动画效果，以及为网站提供AJAX交互。同时，使用.NET Web组件里的一般处理程序处理传入到服务器的HTTP请求，以返回我们需要的字符串或者对数据表中的内容进行修改。最终实现了基于HTML5的综合服务系统移动客户端。该客户端

3、实现了“新闻公告”、“课表查询”、“四六级报名”、“我要请假”、“云记事”等页面。使同学们不必再在网站上下载手机App就可以直接访问综合服务系统，降低了访问成本。同时，提高了访问网站的效率。实践证明，虽然目前诸如jQuery Mobile这些插件还存在一些需要完善的地方，且目前人们对基于HTML5的移动Web开发的认识还不够深刻，但是借助于这些新的技术确实可以有效的提高项目开发的效率。关键词：综合服务系统；jQuery Mobile；jQuery；HTML5ABSTRACTThe main purpose of the development of this system is the lat

4、est HTML HTML5, CSS3, and jQuery Mobile framework is applied to actual projects, with the latest web design technology page layout, color display and control displays. Good resolve compatibility issues between different devices, reduce the cost of site development. At the same time, promote the appl

5、ication of these new Internet technologies.Use in the development of the entire project in multi-browser compatible with HTML jQuery javascript library events, to achieve animation effects, as well as the site offers interactive AJAX. At the same time, the use of .NET Web components in general handl

6、er incoming HTTP requests to the server, we need to return a string of data in a table or modify the content.Ultimately the HTML5-based mobile clients integrated service system. The client achieved a "news bulletin", "curriculum inquiry", "forty-six registration", "

7、;I want to leave", "Cloud Events" and other pages. So that students do not have to download the mobile App on the site can be accessed directly integrated service system, reducing the cost of access. At the same time, improve the efficiency of access to the site.Practice has proved th

8、at, although these plug-ins such as jQuery Mobile are still some need to be perfected, and now people are moving to HTML5-based Web development knowledge not impressive enough, but the help of these new technologies really can effectively improve the efficiency of project development .Key Words：Inte

9、grated service system; jQuery Mobile; jQuery; HTML5目 录1 引言11.1应用背景11.2研究设想11.3预期结果22 可行性分析32.1技术可行性32.2经济可行性32.3操作可行性32.4数据流图32.5数据字典43 需求分析73.1网站规划73.2需求分析73.3系统E-R图83.4软硬件要求83.5运行环境要求94 总体设计104.1总体设计104.1.1功能模块图104.2数据库设计114.3输出API设计155 功能实现185.1开发环境185.2前台页面设计与实现185.2.1系统封面185.2.2用户登陆195.2.3主界面20

10、5.2.4新闻公告215.2.5课表查询255.2.6四六级报名285.2.7云笔记295.2.8普通话报名305.2.9我要请假316 系统测试356.1系统测试的目的356.2测试环境356.3测试方法356.4测试步骤356.5详细测试366.5.1自动加载页366.5.2用户登陆页366.5.3主界面366.5.4新闻公告页366.5.5课表查询页366.5.6四六级报名页376.5.7云笔记页376.5.8普通话报名页386.5.9我要请假页386.6整体测试和验收测试38结 论39参考文献41附录一：主要业务数据流定义42附录二：主要数据存储的定义46致 谢4850天津职业技术师范

11、大学2015届本科生毕业设计1 引言1.1应用背景最近几年发展最快的产业莫过于移动互联网，移动互联网的迅速发展带来了许多商机。因此，吸引了很多企业和个人加入，而这恰恰又推动了移动互联网相关的新技术的推广和更新。移动互联网的发展离不开智能手持设备的迅速推广，而智能手持设备则因其相对廉价的硬件成本和使用的便捷性而得到广泛的应用。根据2014年智能手机的出货量数据统计，使用Android和IOS操作系统的智能手机占全球智能手机出货量的96.3%。因此，Google公司的Android和苹果公司的IOS占据了主要的市场份额。那么，我们在开发移动应用的时候至少要考虑这两种情况，而这势必增加企业或个人的开

12、发成本。而基于浏览器的Web App的出现无疑会大大降低企业的开发成本，同样的，对于用户也不必再下载不同版本的手机应用程序，只要打开对应的网址即可。作为社会成员的一部分，我校的学生也有同样的需求。因此，非常有必要开发一款基于手机Web浏览器的综合服务系统，供同学们使用。开发基于手机或平板电脑浏览器的Web网站将有助于大家更进一步的了解这些最新的技术，有助于新技术的普及。在移动Web开发方面，国外的一些研发团队开发了诸如jQuery Mobile、JQ Touch、Sencha Touch、PhoneGap等框架。而在我们国内，能够参与开发这些框架的人就很少了，更多的人是在使用和推广这些框架。在

13、互联网上或图书馆中，自己可以查阅的关于jQuery Mobile的完整的项目实例很少，自己只能够查阅到一些模块化的资料。因此，就更有必要开发一个完整的项目并将这些代码分享给大家，供大家学习。1.2研究设想目前，国内的一些大的网站已经开始开发和应用自己的移动Web网站了，作为一名计算机专业的毕业生，应该主动去接触、应用和推广这些新技术。学习了五年的计算机技术，自己已经具备了学习新技术的能力。同时，借助于互联网上的资料和图书馆里的资源自己应该能够开发出一款带给同学们方便的应用系统。本系统将基于jQuery Mobile这个框架进行开发，该框架支持国内主流的移动平台，很好的解决了浏览器兼容性的问题，

14、在项目开发的过程中主要使用jQuery Mobile自带的组件、主题进行开发。同时，在处理事件的时候主要使用jQuery脚本，只有在jQuery没有办法实现的情况下才考虑使用javascript脚本。在网页设计中使用HTML5作为网站的编码标准，同时，依靠基于CSS3标准的层叠样式表来对网页进行设计。开发该系统将以提高网站的可访问性为宗旨，尽可能的提高用户体验度。1.3预期结果基于HTML5和CSS3，以及jQuery Mobile完全可以实现系统的界面设计。同时，借助于SQL Server 2008和.NET就可以很好的实现数据存储和数据的输出转换。相信，在指导老师的引领和自己的努力之下，一

15、定可以开发出一个基于移动Web浏览器的综合服务系统，借助于该系统大家可以轻松的查看学校发布的公告、通知。同时，类似于“四六级报名”、“普通话报名”、“请假”等事情也可以直接借助于本系统来完成。从此，大家不仅可以选择以App的形式访问学校综合服务系统，而且可以通过访问移动Web的形式访问综合服务系统。移动Web网站的使用使大家无论是高端的智能手机还是内存较小的移动终端，只要它可以打开浏览器，就可以获取到最新的校园公告。 2 可行性分析2.1技术可行性自万维网联盟在2012年宣布HTML5规范正式定稿以来，HTML5在网站开发方面的应用铺天盖地席卷而来。与此同时，支持HTML5的浏览器也越来越多，

16、从国外的Chrome、IE9、Safari、Opera到国内的傲游浏览器、搜狗浏览器、QQ浏览器等都开始具备支持和兼容HTML5的能力。由此可见，开发基于HTML5的综合服务系统可以在较广泛的浏览器中运行。伴随着智能手持设备迅速占据整个移动市场，在移动设备上开发具有较高兼容性的网站已经成为了一种非常急迫和实用的需求。与早期版本的网页设计语言相比，HTML5和CSS3在页面布局与设计方面具有使用起来更方便、样式更加灵活以及兼容性更高等优势。另一方面，诸如jQuery Mobile等手机Web开发框架的出现，已经在某种程度上很好地解决了不同手持设备的兼容性问题。2.2经济可行性在经济方面，借助于现

17、有的笔记本电脑、图书馆里的资料以及互联网上的资料完全可以在有限的时间内开发出满足同学们需求的系统。不需要额外购买更多的硬件设备或软件。具备经济可行性。2.3操作可行性系统将参照原有电脑版、安卓版综合服务系统的设计风格。同时，界面将设计的更加简洁，从而使系统更具实用性。对用户来说，只要会使用手机浏览器上网，就有足够的能力轻松地访问本系统。同时，在系统中，将给出较多友好的文字提示，以方便大家使用该系统。2.4数据流图数据流图作为交流信息的基本工具，在分析员和用户之间起着“桥梁”的作用。由于数据流图中主要使用了四种基本符号，并且不包含程序具体实现的细节。因此，大多数非计算机专业的人都可以较容易的理解

18、它。本系统的数据流图如图2-1所示：图2-1系统数据流图2.5数据字典数据字典包含了数据流图中所有元素定义的解释，以方便用户查阅。以下是对系统中所涉及的元素的定义：1、 数据项定义：系统的数据项描述如表2-1所示：表2-1系统的数据项描述序号列 名字段描述数据类型可否为空I01-01user_id学号varchar(11)否I01-02user_password登录密码varchar(20)否I01-03user_name姓名nvarchar(20)否I01-04user_class班级nvarchar(20)否I01-05user_academy学院nvarchar(20)是I01-06us

19、er_sex性别nvarchar(1)是I01-07Cet四、六级报名tinyint是I01-08com云记事nvarchar(max)是表2-1续表I01-09chi普通话报名bit是I01-10ID_card身份证号varchar(18)是I01-11cet_done是否报过CETbit否I01-12news_id紧急通知IDint否I01-13news_title标题nvarchar(50)否I01-14news_adddate添加日期smalldatetime否I01-15news_source发布人nchar(20)否I01-16news_content详细内容nvarchar(30

20、00)否I01-17news_id2新闻消息IDint否I01-18news_title2标题nvarchar(50)否I01-19news_adddate2添加日期date否I01-20news_source2发布人nchar(20)否I01-21news_content2详细内容nvarchar(3000)否I01-22id课程号int否I01-23class班级nvarchar(20)否I01-24c1课程1nvarchar(200)否I01-25c2-c25课程2-25nvarchar(200)否I01-26aID假条IDint否I01-27aKind请假类型nvarchar(20)否

21、I01-28aStartTime请假开始时间datetime否I01-29aStopTime请假结束时间datetime否I01-30aTell联系电话char(12)否I01-31aReason请假事由nvarchar(200)否I01-32aUser_id用户登录IDvarchar(11)否I01-33aSubmitTime假条提交时间datetime否I01-34AuthPerson审批人nvarchar(20)是I01-35AuthTime审批时间datetime是I01-36AuthStep审批人类型nvarchar(50)是I01-37AuthResult审批结果nvarchar(

22、20)是2、 主要业务数据流定义：数据流编号：D1-01数据流名称：用户信息数据流来源：用户数据流去向：P1-01数据流组成：I01-01+I01-02数据流编号：D1-02数据流名称：验证信息数据流来源：F1-01数据流去向：P1-01数据流组成：I01-01+I01-02该部分内容较多，详细内容，请参见附录一。3、 主要数据存储的定义：名称：用户信息表编号：F1-01简述：用来存储用户信息的表流出的数据流：D1-02组成：I01-01+I01-02+I01-03+I01-04+I01-05+I01-06+I01-07+I01-08+I01-09+I01-10+I01-11名称：紧急通知表编

23、号：F1-02简述：用来存储新闻消息紧急通知信息的表流出的数据流：组成：I01-12+I01-13+I01-14+I01-15+I01-16该部分内容较多，详细内容请参见附录二。3 需求分析3.1网站规划开发本系统的过程中，应该考虑以下几点：1、 网站的设计风格参照电脑版综合服务系统在开发本网站的过程中页面主要选择以蓝色为基调。这参照了电脑版综合服务系统的设计风格。这种设计将有助于大家尽快的习惯移动版综合服务系统。2、 对页面的样式文件和脚本文件统一部署对复杂页面的CSS和jQuery代码统一放在tute.css文件和tute.js文件中。这有助于网站的后期维护，同时有助于统一网站的编码风格。

24、亦可以减少重复CSS代码的编写。3.2需求分析本系统是一个联系学校和同学们的校园内部门户网站，可以在同学们和学校之间架起一座通信的桥梁。同学们可以借助于该网站随时随地的查看学校发布的通知，以及下载学校发布在校园网上的文件。除此之外，之前只可以在电脑端完成的操作，以后同学们在手机上就可以实现。比如，在手机端实现大学英语四六级报名、普通话报名。另外，当同学们身边没有电脑时，也可以直接在手机端综合服务系统里申请假条，这将极大地方便同学们的出行。还有，当同学们在上课、听讲座或者开会由于某种原因而没有带记事本的时候，可以拿出手机将自己的笔记记录在云笔记中，便于课下或会后整理。保存在云笔记中的内容将会存储

25、到学校服务器上，即便手机丢失，自己记录的文字也不会丢失。因此，针对我校学生的实际需求，整理和定义了以下需求，如表3-1所示：表3-1系统功能需求分析功能模块实现功能用户登录验证用户名和密码新闻公告查看学校发布的新闻公告、紧急通知课表查询查询某班级的课表四、六级报名大学英语四、六级报名云笔记临时记录课堂、会议内容普通话报名报名普通话我要请假申请休假、查看自己的请假记录3.3系统E-R图实体-联系图是根据用户的要求建立的概念性的数据模型，用于辅助用户与系统分析员进行交流。本系统对应的实体-联系图如图4-2所示：图3-1系统E-R图3.4软硬件要求本系统后台基于SQL Server 2008 Ent

26、erprise开发，前台页面基于jQuery Mobile 框架和jQuery脚本语言开发。对于SQL Server 2008 Enterprise，可以存储TP级图3-1续图的数据，其关键在于数据表的设计。对于校园综合服务系统存储的数据GB级就足以满足需求了；而对于瞬时访问量，通常SQL Server 2008 Enterprise瞬时可以承受数千次的并发写，而本系统主要提供信息查阅。所以，提供瞬时上千次的读是没有问题的。众所周知，数据写要比数据读对系统的要求高很多。综上所述，软件方面，现有的PC版综合服务系统使用的SQL Server 2008 Enterprise就可以满足需求。学校现有

27、的硬件设备，可以使PC版综合服务系统稳定的运行，而将要开发的这个移动版的系统占用的资源会更少，整个网站总的大小加起来约800KB（不包含后台数据）。所以，现有的硬件资源也是够用的。3.5运行环境要求所有支持HTML5的手机、平板等移动设备都可以通过浏览器登录移动端综合服务系统。4 总体设计4.1总体设计参照现有的Android 版综合服务系统，以及PC版综合服务系统，本系统对要实现的功能进行了适当的优化。首先，登录模块是必不可少的，在登录模块中设置了用户名和密码的验证，只有当用户名和密码都验证成功后方可进入系统的主页。在主页上显示了本系统所实现的全部功能。第一个功能是信息公告。在信息公告页，同

28、学们能够获取到学校发布的最新的“紧急通知”和“新闻消息”。此页面中包含了全部的校园新闻公告。系统省掉了原有PC版系统中的党建工作和综合信息模块，原因是在党建工作和综合信息模块下的信息更新较慢，几乎是几个月没有新的消息出现，如果有消息直接公布到现有的新闻消息页面即可。第二个页面是课表查询。对于大一、大二的新生，因课程较多而容易记混，保留此功能是合理的。第三个页面是请假模块。应毕业设计老师的要求，在本系统中添加了请假模块，该模块主要提供两个大的功能，功能之一：“申请假条”，同学们在该模块中可以提交自己的请假信息。功能之二：查看“请假记录”。该部分提供了查看最近十次请假记录的功能。之所以未把全部的请

29、假信息都进行显示，是因为过去的请假信息对于请假者本人往往是没有太多意义的。当然，如果请假者想查看自己全部的请假信息也是可以的，登录PC版综合服务系统就可以看到了。接下来，设计了“普通话报名”和“四六级报名”功能。在普通话报名页，设计了一个单选按钮，只要在普通话报名的时间段，同学们进入本系统中普通话报名页选择普通话报名选项并点击提交按钮即可实现报名。在非普通话报名时间段进行报名是无效的，通常在开启普通话报名功能时，系统管理员应该对后台数据库中普通话报名列的值进行归0设置。同理，“四六级报名”部分也是一样的，只不过在四六级报名模块中，设置了两个单选按钮供用户选择。网站的最后一个功能是云记事功能，该

30、模块提供了简单的记事功能，当同学们临时需要记录一些文本内容的时候可以直接记录在云笔记中，这些内容将会保存在后台数据库中，不会因为手机的丢失而导致数据丢失。4.1.1功能模块图基于网站的总体设计，我设计了如下的功能模块图。借助于此图，大家对网站要实现的功能便一目了然了。如图4-1所示：图4-1 系统功能模块图4.2数据库设计在名为tute的数据库中新建5个表：users、news、news2、course、Ask，分别用于保存学生信息、新闻公告、紧急通知、课表信息、请假信息，其完整的结构如下：1) 学生表（users）该表用于存储学生基本信息（学号、登录密码、姓名、班级、学院、性别、身份证号）以

31、及四六级报名、普通话报名、云记事等信息，其结构如表4-1所示：以SQL Server 2008为例，生成users表的数据库脚本代码如下：CREATE TABLE dbo.users(user_id varchar(11) COLLATE Chinese_PRC_CI_AS NOT NULL,user_password varchar(20) COLLATE Chinese_PRC_CI_AS NOT NULL,user_name nvarchar(20) COLLATE Chinese_PRC_CI_AS NOT NULL,user_class nvarchar(20) COLLATE Ch

32、inese_PRC_CI_AS NOT NULL,user_academy nvarchar(20) COLLATE Chinese_PRC_CI_AS NULL,user_sex nvarchar(1) COLLATE Chinese_PRC_CI_AS NULL,cet tinyint NULL,com nvarchar(max) COLLATE Chinese_PRC_CI_AS NULL,chi bit NULL,ID_card varchar(18) COLLATE Chinese_PRC_CI_AS NULL,cet_done bit NOT NULL, CONSTRAINT PK

33、_users PRIMARY KEY CLUSTERED ( user_id ASC )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON,ALLOW_PAGE_LOCKS =ON)ON PRIMARY)ONPRIMARY表4-1 users（学生表）字段名描述类型是否为空是否是主键user_id学号varchar(11)否是user_password登录密码varchar(20)否否user_name姓名nvarchar(20)否否user_class班

34、级nvarchar(20)否否user_academy学院nvarchar(20)是否user_sex性别nvarchar(1)是否Cet四、六级报名tinyint是否com云记事nvarchar(max)是否chi普通话报名bit是否ID_card身份证号varchar(18)是否cet_done是否报过CETbit否否users表在数据库中的测试数据如图4-2所示：图4-2 users 表中的测试数据2) 新闻公告表该表用于存储新闻公告里的全部信息，其结构如表4-2所示：以SQL Server 2008为例，生成news表的SQL语句如下：CREATE TABLE news(news_id

35、 int IDENTITY(1,1) NOT NULL,news_title nvarchar(50) NOT NULL,news_adddate smalldatetime NOT NULL,表4-2 news（新闻公告表）字段名描述类型是否为空是否为主键news_id新闻IDint否是，自增项news_title新闻标题nvarchar(50)否否news_adddate新闻添加日期smalldatetime否否news_source新闻发布人nchar(20)否否news_content新闻内容nvarchar(3000)否否news_source nchar(20) NOT NULL,

36、news_content nvarchar(3000) NOT NULL) ON PRIMARYnews表在数据库中的测试数据如图4-3所示：图4-3 news 表中的测试数据注：紧急通知表与新闻公告表表格式一样，仅表名不同，此处不再说明。3) 课程表该表用于存储全部班级的课程信息，其表结构如表4-3所示：表4-3 course（课程表）字段名描述类型是否为空是否为主键id课程号int否是，自增项class班级nvarchar(20)否否c1课程1nvarchar(200)否否c2课程2nvarchar(200)否否c3c25课程325nvarchar(200)否否以SQL Server 20

37、08为例，生成course表的SQL语句如下所示：CREATE TABLE course(id int IDENTITY(1,1) NOT NULL,class nvarchar(20) NOT NULL,c1 nvarchar(200) NULL,c2 nvarchar(200) NULL,、/此处省略c3-c24。c25 nvarchar(200) NULL) ON PRIMARYcourse表在数据库中的示例数据如图4-4所示:图4-4 course表中的测试数据4) 请假表该表用于存储学生请假信息，其表结构如表4-4所示：表4-4 Ask （请假表）字段名描述类型是否为空是否为主键aI

38、D假条IDint否是，自增项aKind请假类型nvarchar(20)否否aStartTime请假开始时间datetime否否aStopTime请假结束时间datetime否否aTell联系电话char(12)否否aReason请假事由nvarchar(200)否否aUser_id用户登录IDvarchar(11)否外键，参照users. user_idaSubmitTime假条提交时间datetime是否AuthPerson审批人nvarchar(20)是否AuthTime审批时间datetime是否AuthStep审批人类型nvarchar(50)是否AuthResult审批结果nvarc

39、har(20)是否以SQL Server 2008为例，生成Ask表的数据库脚本代码如下：CREATE TABLE dbo.Ask(aID int IDENTITY(1,1) NOT NULL,aKind nvarchar(20) NOT NULL,aStartTime datetime NOT NULL,aStopTime datetime NOT NULL,aTell char(12) NOT NULL,aReason nvarchar(200) NOT NULL,aUser_id varchar(11) NOT NULL,aSubmitTime datetime NOT NULL,Aut

40、hPerson nvarchar(20) NULL,AuthTime datetime NULL,AuthStep nvarchar(50) NULL,AuthResult nvarchar(20) NULL, CONSTRAINT PK_Ask PRIMARY KEY CLUSTERED (aID ASC)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON PRIMARY) ON PRIMARYGOS

41、ET ANSI_PADDING OFFGOALTER TABLE dbo.Ask WITH CHECK ADD CONSTRAINT FK_Ask_users FOREIGN KEY(aUser_id)REFERENCES dbo.users (user_id)GOALTER TABLE dbo.Ask CHECK CONSTRAINT FK_Ask_usersGOAsk表在数据库中的示例数据如图4-5所示:图4-5 Ask表中的测试数据4.3输出API设计系统中除通过数据库存储数据外，还需要用于数据输出的API接口文件，以供前端页面调用。根据系统的实际需求，设计了12个相对应的API接口，说

42、明如下：1) 验证“用户登录”的URL地址为：http:/localhost:2128/NewsApi.ashx?act=login&userName=admin&userPass=admin其中，“NewsApi.ashx”为.NET中的一般处理程序，“act”为操作类型参数，该接口返回的JSON数据如下所示："Table":"Column1":12) 用于新闻公告“紧急通知”页中列表信息的输出的URL地址为：http:/localhost:2128/NewsApi.ashx?act=news_list该接口返回的部分JSON数据如下：

43、"Table":"news_id":5,"news_title":"关于*的*","news_adddate":"2015/5/2 0:00:00","news_source":"学校某部","news_id":4,"news_title":"紧急通知","news_adddate":"2015/5/1 0:00:00","ne

44、ws_source":"转自气象局"3) 用于新闻公告“紧急通知”页详细信息页输出的URL地址为：http:/localhost:2128/NewsApi.ashx?act=detail&newsid=20其中，“newsid”为用户点击的消息的“id”号，该接口返回的部分JSON数据如下："Table":"news_id":20,"news_title":"倾城之恋","news_adddate":"2014/2/15 0:00:00"

45、,"news_source":"张爱玲","news_content":"爱学习，不搞对象。爱学习，不搞对象。爱学习，不搞对象。"4) 新闻公告“信息公告”页列表输出的URL地址中的操作类型参数与“紧急通知”页不同，显示内容的格式相同，此处不再说明。另，“信息公告”“详细信息”页也与“紧急通知”“详细信息”页输出格式一样，亦不再说明。5) “课表查询”页输出课表信息的URL地址为：http:/localhost:2128/NewsApi.ashx?act=Course&cid=2其中，“cid”为课表“id

46、”号。该接口返回的部分JSON数据如下："Table":"id":2,"class":"计科1201·","c1":"学科教学法罗梅B205，3-18周","c2":"","c3":"","c4":"EDA技术及应用于雅楠C203，3-17周单周","c5":"","c6":"&

47、quot;,"c7":"单片机原理与应用谷兆麟老教114,4-18周双周上","c8":"专业英语吕志老教501,3-18周","c9":"单片机原理与应用谷兆麟老教114,4-18周上","c10":"EDA技术及应用于雅楠C203，3-18周","c11":"","c12":"","c13":"","c1

48、4":"","c15":"","c16":"","c17":"","c18":"","c19":"","c20":"","c21":"教育测量与评价A乔翠芳C204,4-14周","c22":"","c23":"&quo

49、t;,"c24":"","c25":""6) “四六级报名”页执行数据保存的URL地址为：http:/localhost:2128/NewsApi.ashx?act=CET&userName='02210101329'&cetGrade='6'其中，“userName”为用户的登录“id”，“cetGrade”是报名信息对应的后台要修改的列。以上URL是为学号为“02210101329”的同学，报名大学英语6级。7) “普通话报名”页执行数据保存的URL与“四六级报名

50、”页执行数据保存的URL相类似，仅操作类型参数和传入值的名称不同（数据表中修改的列不同），此处不再说明。8) “云笔记”页执行数据保存的URL地址为：http:/localhost:2128/NewsApi.ashx?act=Note&userName='02210101329'&note_Com='云笔记内容'其中，“userName”为用户的登录“id”，“note_Com”是要保存的笔记内容。上述URL是给学号为“02210101329”的同学保存笔记内容。9) “我要请假”页提交请假信息的URL地址为：http:/localhost:21

51、28/NewsApi.ashx?act=Ask&userName='"'" + $user_id + "'" + '&CLASS=' + "'" + strC + "'" + '&startT=' + "'" + $start + "'" + '&endT=' + "'" + $end + "'&

52、quot; + '&tellC=' + "'" + $tellcode + "'" + '&REASON=' + "'" + $Reason + "'" + '&TIME=' + "'" + $time + "'"其中，操作类型参数后面跟着的是向数据表中插入一条请假记录所需的参数，包括学号：“$user_id”，请假类型：“CLASS”等。10) “我要请假

53、”页获取用户请假信息的URL地址为：http:/localhost:2128/NewsApi.ashx?act=Ask2&userName='02210101329'上述URL是获取学号为“02210101329”的同学的请假信息。该接口返回的部分JSON数据如下："Table":"aID":45,"aKind":"","aStartTime":"1900/1/1 0:00:00","aStopTime":"1900/1/

54、1 0:00:00","aTell":"","aReason":"","aUser_id":"02210101329","aSubmitTime":"2015/5/21 14:07:00","AuthPerson":"","AuthTime":"","AuthStep":"","AuthResult

55、":""11) 主页上用于显示用户名的URL、是否报名过四六级的URL、是否报名过普通话的URL以及用户报名信息的URL地址较为简单，此处不再赘述。5 功能实现5.1开发环境操作系统版本：windows 7 旗舰版数据库版本：SQL Server 2008 Enterprise开发软件版本：Microsoft Visual studio 2010测试软件：Google Chrome和Opera Mobile Emulator 12.15.2前台页面设计与实现5.2.1系统封面本系统可以通过移动设备的浏览器查看，也能直接打包成apk。如果打包成apk，最好有一个系统

56、封面页，借此对系统的功能进行简单的说明，然后跳转至登陆页。关键代码：/系统封面页页面创建事件function changepage() window.location.href = "Login.htm"$('#load_index').live("pagecreate", function () var id = setInterval("changepage()", 3000);)注：1) live()方法为被选元素绑定一个或多个事件，并设定当这些事件发生时执行的函数。2) setInterval()方法可按指定的

57、周期（以毫秒计）来调用函数或计算表达式。下面是系统封面页在Opera Mobile Emulator 12.1下的运行效果，如图5-1所示。在实现自动跳转功能的JavaScript代码中，首先写一个函数changepage()，在该函数中，设置“window”对象的“location.href”的属性值，以实现将当前页面跳转至登陆页的功能；其次，将当前页面绑定至“pagecreate”事件，并在该事件中调用setInterval()方法，该方法将每隔3秒钟自动执行自定义函数changepage()，从而实现页面的自动跳转功能。图5-1 系统封面页效果图5.2.2用户登陆用户登录页，提供用户名和

58、密码的验证。在该页面中添加有三个<input>标签，该标签用于获取用户登录信息。<input>元素有多种类型，此处用到了text、password、button三种类型。在页面的javascript代码中为button按钮添加事件，在用户输入的用户名和密码都不为空的情况下对用户名和密码进行验证，验证的逻辑是：根据用户名和密码进行查询，如果获取到的返回数值大于0（为1），说明该用户存在且用户名、密码验证通过，然后跳转至网站首页。否则，做出相应的提示。实现该验证的javascript代码如下所示： function UserLogin(name, pass) var $lst_login = function () var $value1 = 0 ; /用于记录返回值，返回值大于0说