手机界面交互设计.docx

手机界面交互设计.docx

《手机界面交互设计.docx》由会员分享，可在线阅读，更多相关《手机界面交互设计.docx（20页珍藏版）》请在冰点文库上搜索。

手机界面交互设计

摘要

随着经济的发展，社会的进步，计算机越来越深入到我们日常的工作学习及生活中，成为我们日常生活中不可缺少的辅助工具。

本文介绍了ASP+ACCESS技术开发该城市公交在线查询系统的整个过程。

该系统主要利用了ASP强大的网络数据库访问技术，实现了城市公交在线查询和后台管理功能。

就查询而言用户可以根据实际需要输入站点，两站名，车次来查询公交信息。

这三种查询方式足以查询用户所需要的信息。

对于后台管理而言，是由管理员统一管理公交信息。

当管理员验证通过后可以根据实际需要来添加，删除，修改公交信息。

关键字:

公交车查询管理MISASPB/SAccess

引言1

第一章系统介绍2

1.1功能介绍2

1.2开发环境2

1.3开发背景3

1.4系统优点3

第二章需求分析4

2.1功能需求4

2.2系统流程图4

2.3管理员登录流程6

2.4数据设计结构6

第三章概要设计9

3.1设想供选择的方案9

3.2选择合理的方案9

3.3功能分解9

3.4数据文件设计11

第四章详细设计12

4.1结构程序设计12

4.2人机界面设计14

第五章界面浏览21

5.1首页程序21

5.2管理员登录21

5.3后台管理界面22

结束语26

致谢27

参考文献28

引言

公交车查询管理系统是用计算机管理公交车路线信息的一种计算机应用技术的创新,在计算机还未普及之前公交车查询管理都是由工作人员通过人工查询的方式来操作的.现在一般的公交车查询都采用计算机智能化管理,采用计算机作为工具的实用的计算机公交车查询管理系统是典型的信息管理系统（MIS）,其开发主要包括后台数据库的建立和维护以及前端应用程序的开发两个方面。

对于前者要求建立起数据一致性和完整性强、数据安全性好的数据库。

而对于后者则要求应用程序功能完备,易使用等特点。

系统引用了ASP这一具有强大功能、用于Web开发的框架。

ASP在系统重处于操作系统内核与应用程序之间，使得应用程序可以更好地利用操作系统提供的功能，并使得应用程序的开发更快、更简单。

本系统采用B/S模式，方便用户查询公交信息。

本系统页面简洁大方，实用性强。

第一章系统介绍

1．1功能介绍

公交车查询系统分为两大功能，一个是查询，另一个是后台管理，就查询这个功能，用户通过选择站点，输入站点和两站名来查询公交信息，后台管理是管理员管理公交信息，包括添加，删除公交信息，并可以添加新管理员，修改管理员密码。

具体如下：

图1-1

1.2开发环境

1、基本配置

●WindowsXPProfessional；

●酷睿双核E2160处理器；

●1GB内存；

2、本系统是采用ASP技术为开发环境，其运行环境是：

（1）使用WindowsXPProfessional

（2）IIS5.1（信息服务管理器5.1）

（3）采用ASP与微软的access作为数据库

1．3开发背景

公交车查询系统主要是方便用户查询公交信息，是面向所有的用户。

因为随着经济的发展，公交信息也变的复杂，有了本系统，用户可以根据需要输入相应的信息。

如知道车次，就可以选择车次就能查询公交信息，同样输入站点就可以查询出所有经过此站点的公交信息，此外用户输入两站点名也可以查询到满足条件的公交信息。

这样以来可以方便用户查询公交信息。

是个不错的帮手。

对于线路，车次等情况的改变，管理员会及时修改，不会影响系统功能。

1．4系统优点

1、本系统页面简洁，大方。

2、使用性强，查询方便。

3、配置简单，完全免费。

第二章需求分析

2．1功能需求

随着经济的迅速发展，城市公交线路也随着增多，用户上网查询有时也很不便。

而本系统是建立在B/S模式上的。

有了此系统就可以方便查询，查询信息很准确，节约了时间。

2．2系统流程图

2．3管理员登录流程

管理员登录是需要输入用户名和密码。

如果登录成功后即可对其操作。

具体如下图：

2．4数据设计结构

在本设计中建立了Hsg数据库，在本数据库中包含两个表（allusers和allxl）。

其中allusers表中是管理员信息，包含的字段有usersname（姓名），pwd（密码），cx（权限），addtime（添加时间）而allxl表中包含字段有xl（线路），tj（途径站点），addtime（添加时间）。

即

第三章概要设计

3．1设想供选择的方案

方案1：

就查询系统而言，用户可以选择车次，输入站点名和两站名来查询，这三种查询方式是可以满足所有用户需要查询公交信息的。

在主页面中已经列举了所有的公交线路，车次等情况。

用户直接浏览查阅信息。

当然用户可以通过下拉列表框选择车次查阅信息，同样用户在站点文本框中输入要查询的站点名，也可以输入两站点名。

这样所要查询的站点名和车次以及该这次经过其他站点的信息。

这种方案覆盖面广，满足广大用户查询需求。

就后台管理系统而言，公交查询系统的数据是很多了，而且公交线路也会发生变化。

所以需要后台管理这些信息。

当合法的管理员登录成功后就可以修改公交线路等信息，也可以修改自己的密码。

这样能保持正常的公交查询系统的更新。

方案2：

在查询系统中，我们也可以为了简便不列举公交线路的所有信息，让用户根据需要来查询信息。

也可以在主页面中仅包含查询信息，后台管理是作为掩藏的页面。

只有管理员知道了，这样也为了防止不法用户破坏公交信息。

3．2选择合理的方案

在我们设计本系统前我们也去上网查阅了其他公交线路信息。

发现公交信息查询时主要是通过车次，站点，两站来查询。

这三种查询模式已经能让用户查阅所以的信息。

之后的后台管理页面也是需要验证用户名和密码的。

对于我们这些浏览信息的用户来说是不能进入的。

之后我们相互讨论，觉得主要的模式就是这样，有查询，有后台管理。

页面颜色也很简单，大方。

避免花哨，毕竟只是一个查询系统网站。

3．3功能分解

1、查询：

2、后台管理：

3．4数据文件设计

在数据文件中包含两个表（allusers和allxl）。

其中allusers表中是管理员信息，包含的字段有usersname（姓名），pwd（密码），cx（权限），addtime（添加时间），而allxl表中包含字段有xl（线路），tj（途径站点），addtime（添加时间）。

即：

Allusers存放的是管理员数据信息，当管理员要管理公交车信息时必须输入姓名和密码，如果登陆的姓名和密码与allusers中的字段相对应即登陆成功了。

那么没有输入相应信息或输入错误都是不行的。

allxl表中存放的是公交路线的信息。

当用户输入站点，车次，两站名都可以查询。

通过与数据库的连接来实现的。

在存取数据库之前，必须使用ADO对象模块的Connection对象打开数据库的连接，在本设计具体的操作中是与hsg.mdb数据库连接的，在程序中可以用如下代码：

<%

Dimobjconn

Setobjconn=server.createobject（“ADODB.connection”）

Objconn.connectionstring=”driver={Microsoft.accessdriver（*.mdb）};”&_”dbq=”&server.mappath（“hsg.mdb”）

Objconn.open

%>

在实际过程中就可以进行操作了。

第四章详细设计

4．1结构程序设计

在公交车系统中index.asp是主页面，这个系统是为了方便用户查询公交车信息，用户不需要注册即可，在主页面左边是超级连接，在右上方是查询表单，包括线路查询的下拉列表框，两个站点文本框，点击“立即搜索”来查询信息。

右下方显示了所有的公交线路信息包括线路名称和所经过的站点名。

最右上方是“后台登录”连接到default.htm。

具体的界面如下：

在这个界面中，默认情况下用户可以查看所有公交车信息，用户也可以通过选择车次，站点，两站名点击查询来获得信息，如选择车次为51路（如图4-2）在图4-3显示查询的界面：

输入如输入站点为：

下村，点击“立即搜索”显示界面如下：

如输入两站名为职业技术学院，造船厂，就显示如下界面：

图4-5

在查询中如果输入的两站点没有车次到达就不显示信息，如果用户输入的站点名不存在那么也不显示信息。

只有满足条件才会显示所需要的公交信息。

在查询页面中支持模糊查询，如要要查询站点名为“职业技术学院”，那么可以输入“职业”即可查询。

4．2人机界面设计

主页面（index.asp）主要是查询公交线路信息。

如选择车次，实现过程如下：

在index.asp页面中的下拉列表框中选择要查询的车次，如选择车次是51路，那么系统获得该数据后，就在allxl表中找的xl字段依次查找关键字“51路”，如果查到后就将相对应的xl，tj字段内容输出到页面中。

主要是由以下代码实现的：

所有

<%

sql="selectxlfromallxlorderbyiddesc"

rs.opensql,conn,1,1

ifrs.eofthen

else

dowhilenotrs.eof

%>

"><%=rs（"xl"）%>

<%

rs.movenext

loop

endif

rs.close

%>

如输入站名，实现如下：

在index.asp页面中的输入要查询的站名，如输入站名是“下村”，那么系统获得该数据后，就依次在allxl表中的tj字段查找关键字“职业技术学院”，如果查到后就将相对应的xl，tj字段内容输出到页面中。

如果没有查询到就不显示。

如输入两站来查询，实现如下：

在index.asp页面中的输入要查询的两站名，如输入站名是“职业技术学院”“造船厂”，那么系统获得该数据后，就依次在allxl表中的tj字段查找关键字“职业技术学院”，“造船厂”，如果查到后就将相对应的xl，tj字段内容输出到页面中。

如果没有查询到就不显示。

登录页面（default.htm）主要是管理员进行后台管理之前的登录页面。

防止其他人进入。

这是管理在default.htm页面中当用户输入用户名和密码，点击“登录系统”通过以下代码来判断登录是否正确。

iftrim（request（"username"））<>""andtrim（request（"pwd"））<>""then

servername=request.ServerVariables（"REMOTE_HOST"）'

sql="select*fromalluserswhereusername='"&trim（request（"username"））&"'andpwd='"&trim（request（"pwd"））&"'"

setrs=server.createobject（"adodb.recordset"）

rs.opensql,conn,1,1

ifrs.eofthen

response.Write（""）

else

response.Cookies（"username1"）=trim（request（"username"））

response.Cookies（"cx"）="1"

'conn.execute（"updatealluserssethits=hits+1whereusername='"&trim（request（"username"））&"'"）

response.redirect（"default.asp"）

endif

后台管理页面（default.asp）

登录成功后进入default.asp。

在这个页面中，我们可以通过左边的导航条来进行添加删除等操作。

这个页面是通过框架来控制的。

如管理员要修改密码可以通过如下代码实现：

<%

iftrim（request（"mdf"））="1"then

dimpwdd

pwdd=trim（request（"ymm"））

dimpwdd2

pwdd2=trim（request（"xmm1"））

dimsql

sql="selectusername,pwdfromalluserswhereusername='"&request.Cookies（"username1"）&"'"

setrs=server.createobject（"adodb.recordset"）

rs.opensql,conn,3,3

ifrs.eofthen

rs.close

response.write（""）

else

ifrs（"pwd"）<>pwddthen

rs.close

response.write（""）

else

rs（"pwd"）=pwdd2

rs.update

rs.close

response.write（""）

endif

endif

setrs=nothing

endif

%>

2、后台管理功能

后台管理主要包括添加管理员，修改管理员密码，添加，删除线路等功能。

添加管理员的实现如下：

用户输入用户名和密码，当输入的两次密码相一致。

将所输入的信息写到allusers表中。

用户名与表中的username，密码与表中的pwd相对应。

并且在页面中可以显示添加的信息。

线路添加的实现如下：

在文本框中输入车次名和线路。

将所输入的信息写到allxl表中。

用户名与表中的xl，密码与表中的tj相对应。

并且在页面中可以显示添加的信息。

主要代码如下：

<%

connopen（）

setrs=server.createobject（"adodb.recordset"）

iftrim（request（"xl"））<>""then'添加新用户

sql="insertintoallxl（xl,tj）values（'"&trim（request（"xl"））&"','"&trim（request（"tj"））&"'）"

conn.execute（sql）

response.write（""）

endif%>

删除线路实现如下：

在线路列表中选择需要删除的信息。

当要删除信息时，首先获得公交线路的序号，然后在allxl中找到相同的序号，并将这一组信息删除。

主要代码如下：

<%

connopen（）

sql="deletefrom"&trim（request（"tablename"））&"whereid="&trim（request（"id"））

conn.execute（sql）

response.redirect（request.ServerVariables（"HTTP_REFERER"））

%>

修改密码实现如下；

在文本框中输入原密码和新密码，将新密码的值添加到表allusers的pwd字段中。

第五章页面浏览

5．1首页程序

本系统的首页是index.asp，主要是查询和后台登录两部分。

可以有站点，车次，两站来查询。

此页面中显示了所有公交线路的具体信息。

用户可以直接浏览查询。

页面如下：

5．2管理员登录

管理员页面为default.asp，通过输入用户ID和密码验证。

页面如下：

5．3后台管理界面（default.asp）

该页面左边是导航条，选择左边的导航条后右边显示具体页面。

如果选择“用户帐号管理”，该界面上方是添加新管理员的信息，包括用户名，密码和确认密码。

下方显示的是现有管理员的信息。

界面见下图：

如选择“线路添加”该界面显示要添加的线路名称和途径。

界面见下图：

如选择“线路管理”该界面显示所有公交信息，管理员可以根据需要删除信息。

界面见下图：

如选择“修改密码”该界面主要是通过输入原密码和新密码，确认密码来修改。

界面见下图：

结论

本软件的设计目的是为方便人们出行提供公交车查询帮助。

通过这几个月的毕业设计，我学到很多以前没有学到的ASP开发技术，在软件工程学上更是取得了很大的进步。

经过大量的测试和试用，作者深信本软件达到了方便和实用的设计目的，并在软件界面和易用实用等方面有着独到之处。

但本系统中也存在不足，比如就查询而言，当输入站点显示公交信息时并不能将要查询的站点用特别标记标识，同样如果输入的两站名没有公交线路到达，就不显示信息，其实可以显示其他方案，比如先乘坐哪路公交然后在乘坐哪路公交。

这样更显得完善。

但总体而言查询和后台管理的功能都实现了。

页面也美观大方。

致谢

我首先感谢我的指导老师程老师，在他严格的要求下我懂得了开发软件要有一种极其认真负责的态度。

无论做什么事都要大胆的去想去做，这样会有好的创意，才能更有作为。

在这里我还要感谢我的同学，在他们的帮助下使自己知识有了提高。

参考文献

[1]陈明.软件工程学教程.科技出版社，2002

[2]萨师煊，王珊.数据库系统概论.第三版.高等教育出版社，2000

[3]黄爽,郭胜,高平茹ASP网络程序设计教程北京清华大学出版社

[4]刘雪梅,赵长海ASP应用开发技术人民邮电出版社

[5]邓文渊,陈惠珍,陈俊荣ASP与网页数据库设计中国铁道出版社

[6]宋颜浩,费文华ASP与相关数据库技术高级指南中国水利水电出版社

[7]朱敏,朱婷婷,李媛媛JSPWeb应用教程清华大学出版社

[8]何川,方兴,都志辉JSP编程实践清华大学出版社

.