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

天津职业技术师范大学2015届本科生毕业设计

[aTell] [char](12) NOT NULL, [aReason] [nvarchar](200) NOT NULL, [aUser_id] [varchar](11) NOT NULL, [aSubmitTime] [datetime] NOT NULL, [AuthPerson] [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 [PRIMARY] GO

SET ANSI_PADDING OFF GO

ALTER TABLE [dbo].[Ask] WITH CHECK ADD CONSTRAINT [FK_Ask_users] FOREIGN KEY([aUser_id])

REFERENCES [dbo].[users] ([user_id]) GO

ALTER TABLE [dbo].[Ask] CHECK CONSTRAINT [FK_Ask_users] GO

Ask表在数据库中的示例数据如图4-5所示:

图4-5 Ask表中的测试数据

4.3输出API设计

系统中除通过数据库存储数据外，还需要用于数据输出的API接口文件，以供前

15

天津职业技术师范大学2015届本科生毕业设计

端页面调用。根据系统的实际需求，设计了12个相对应的API接口，说明如下：

1) 验证“用户登录”的URL地址为：

http://localhost:2128/NewsApi.ashx?act=login&userName=’admin’&userPass=’admin’

其中，“NewsApi.ashx”为.NET中的一般处理程序，“act”为操作类型参数，该接口返回的JSON数据如下所示：

{\

2) 用于新闻公告“紧急通知”页中列表信息的输出的URL地址为： http://localhost:2128/NewsApi.ashx?act=news_list 该接口返回的部分JSON数据如下：

{\关于***的***\15/5/2 0:00:00\学校某部\紧急通知\转自气象局\

3) 用于新闻公告“紧急通知”页详细信息页输出的URL地址为： http://localhost:2128/NewsApi.ashx?act=detail&newsid=20

其中，“newsid”为用户点击的消息的“id”号，该接口返回的部分JSON数据如下：

{\倾城之恋\2/15 0:00:00\张爱玲\爱学习，不搞对象。爱学习，不搞对象。爱学习，不搞对象。\

4) 新闻公告“信息公告”页列表输出的URL地址中的操作类型参数与“紧急通

知”页不同，显示内容的格式相同，此处不再说明。另，“信息公告”“详细信息”页也与“紧急通知”“详细信息”页输出格式一样，亦不再说明。 5) “课表查询”页输出课表信息的URL地址为： http://localhost:2128/NewsApi.ashx?act=Course&cid=2

其中，“cid”为课表“id”号。该接口返回的部分JSON数据如下：

{\计科1201·\@罗梅@B205，3-18周\技术及应用@于雅楠@C203，3-17周单周\\单片机原理与应用@谷兆麟@老教114,4-18周双周上\专业英语@吕志@老教501,3-18周\单片机原理与应用@谷兆麟@老教114,4-18周上\技术及应用@于雅楠@C203，3-18周\\教育测量与评价A@乔翠芳@C204,4-14周\\

16

天津职业技术师范大学2015届本科生毕业设计

6) “四六级报名”页执行数据保存的URL地址为：

http://localhost:2128/NewsApi.ashx?act=CET&userName='02210101329'&cetGrade='6'

其中，“userName”为用户的登录“id”，“cetGrade”是报名信息对应的后台要修改的列。以上URL是为学号为“02210101329”的同学，报名大学英语6级。

7) “普通话报名”页执行数据保存的URL与“四六级报名”页执行数据保存的

URL相类似，仅操作类型参数和传入值的名称不同（数据表中修改的列不同），此处不再说明。

8) “云笔记”页执行数据保存的URL地址为：

http://localhost:2128/NewsApi.ashx?act=Note&userName='02210101329'¬e_Com='云笔记内容'

其中，“userName”为用户的登录“id”，“note_Com”是要保存的笔记内容。上述URL是给学号为“02210101329”的同学保存笔记内容。

9) “我要请假”页提交请假信息的URL地址为：

http://localhost:2128/NewsApi.ashx?act=Ask&userName='\ \&endT=' + \=' + \

其中，操作类型参数后面跟着的是向数据表中插入一条请假记录所需的参数，包括学号：“$user_id”，请假类型：“CLASS”等。

10) “我要请假”页获取用户请假信息的URL地址为：

http://localhost:2128/NewsApi.ashx?act=Ask2&userName='02210101329' 上述URL是获取学号为“02210101329”的同学的请假信息。 该接口返回的部分JSON数据如下：

{\Time\\p\

11) 主页上用于显示用户名的URL、是否报名过四六级的URL、是否报名过普通话

的URL以及用户报名信息的URL地址较为简单，此处不再赘述。

17

天津职业技术师范大学2015届本科生毕业设计

5 功能实现

5.1开发环境

操作系统版本：windows 7 旗舰版

数据库版本：SQL Server 2008 Enterprise 开发软件版本：Microsoft Visual studio 2010

测试软件：Google Chrome和Opera Mobile Emulator 12.1

5.2前台页面设计与实现

5.2.1系统封面

本系统可以通过移动设备的浏览器查看，也能直接打包成apk。如果打包成apk，最好有一个系统封面页，借此对系统的功能进行简单的说明，然后跳转至登陆页。

关键代码：

//系统封面页页面创建事件 function changepage() {

window.location.href = \}

$('#load_index').live(\ var id = setInterval(\}) 注：

1) live()方法为被选元素绑定一个或多个事件，并设定当这些事件发生时执行

的函数。

2) setInterval()方法可按指定的周期（以毫秒计）来调用函数或计算表达式。 下面是系统封面页在Opera Mobile Emulator 12.1下的运行效果，如图5-1所示。

在实现自动跳转功能的JavaScript代码中，首先写一个函数changepage()，在该函数中，设置“window”对象的“location.href”的属性值，以实现将当前页面跳转至登陆页的功能；其次，将当前页面绑定至“pagecreate”事件，并在该事件中调用setInterval()方法，该方法将每隔3秒钟自动执行自定义函数changepage()，从而实现页面的自动跳转功能。

18

天津职业技术师范大学2015届本科生毕业设计

图5-1 系统封面页效果图

5.2.2用户登陆

用户登录页，提供用户名和密码的验证。在该页面中添加有三个标签，

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

实现该验证的javascript代码如下所示： function UserLogin(name, pass) { var $lst_login = function () {

var $value1 = 0 ; //用于记录返回值，返回值大于0说明该用户验证通过，等于0说明用户输入的用户名或密码存在错误。 var $webU = \

$webU = '/NewsApi.ashx?act=login&userName=' + \

19

百度搜索“77cn”或“免费范文网”即可找到本站免费阅读全部范文。收藏本站方便下次阅读，免费范文网，提供经典小说综合文库基于HTML5的校园移动客户端的设计与实现。(5)在线全文阅读。