人机交互 软件说明书.docx
《人机交互 软件说明书.docx》由会员分享，可在线阅读，更多相关《人机交互 软件说明书.docx（18页珍藏版）》请在冰豆网上搜索。
人机交互软件说明书
JIANGSUUNIVERSITYOFTECHNOLOGY
人机交互技术
——软件说明书
学院名称：
计算机工程学院
专业：
软件工程
班级：
10软件1W
学号：
10144107
姓名：
董鑫
二〇一三年六月
引言
人机交互技术（Human-ComputerInteractionTechniques）是指通过计算机输入、输出设备，以有效的方式实现人与计算机对话的技术。
它包括机器通过输出或显示设备给人提供大量有关信息及提示请示等，人通过输入设备给机器输入有关信息及提示请示等，人通过设备给机器输入有关信息，回答问题等。
人机交互技术是计算机用户界面设计中的重要内容。
它与认知学、人机工程学、心里学等学科领域有密切的联系。
第1章数据库设计
1.1基本实体表
序号
表名
说明
1
users
用户表，用于存储用户编码，姓，名称等
1.2表设计
表1-1用户表字段
字段名
说明
类型
是否为空
主键
id
用户编码
int
否
是
firstname
姓
varchar
是
否
lastname
名称
varchar
是
否
phone
电话号码
varchar
是
否
email
电子邮件
Varchar
是
否
第2章详细设计
2.1．界面
在浏览器输入地址后，会显示如下界面。
有工具栏，“编辑、增加、删除”。
展示信息、三个选项卡和显示图片。
2.2.dongxin.html代码：
DOCTYPEhtml>
"/>
董鑫的资料
#fm{
margin:
0;
padding:
10px30px;
}
.ftitle{
font-size:
14px;
font-weight:
bold;
color:
#666;
padding:
5px0;
margin-bottom:
10px;
border-bottom:
1pxsolid#ccc;
}
.fitem{
margin-bottom:
5px;
}
.fitemlabel{
display:
inline-block;
width:
80px;
}
#cc{
border:
0pxsolid;
border-color:
white;
border-collapse:
collapse;
width:
550px;
height:
150px;
}
th{
border:
1pxsolid;
background-color:
#E4E4E4;
text-align:
center;
}
td{
border:
1pxsolid;
text-align:
center;
}
.over{
background-color:
white;
}
.imgsize{
width:
100%;
height:
100%;
}
varurl;
functionnewUser（）{
$（'#dlg'）.dialog（'open'）.dialog（'setTitle','NewUser'）;
$（'#fm'）.form（'clear'）;
url='save_user.php';
}
functioneditUser（）{
varrow=$（'#dg'）.datagrid（'getSelected'）;
if（row）{
$（'#dlg'）.dialog（'open'）.dialog（'setTitle','EditUser'）;
$（'#fm'）.form（'load',row）;
url='update_user.php?
id='+row.id+'&firstname='+row.firstname+'&lastname='+row.lastname+'&phone='+row.phone+'&email='+row.email;
}
}
functionsaveUser（）{
$（'#fm'）.form（'submit',{
url:
url,
onSubmit:
function（）{
return$（this）.form（'validate'）;
},
success:
function（result）{
varresult=eval（'（'+result+'）'）;
if（result.success）{
$（'#dlg'）.dialog（'close'）;//closethedialog
$（'#dg'）.datagrid（'reload'）;//reloadtheuserdata
}else{
$.messager.show（{
title:
'Error',
msg:
result.msg
}）;
}
}
}）;
}
functionremoveUser（）{
varrow=$（'#dg'）.datagrid（'getSelected'）;
if（row）{
$.messager.confirm（'Confirm','Areyousureyouwanttoremovethisuser?
',function（r）{
if（r）{
$.post（'remove_user.php',{id:
row.id},function（result）{
if（result.success）{
$（'#dg'）.datagrid（'reload'）;//reloadtheuserdata
}else{
$.messager.show（{//showerrormessage
title:
'Error',
msg:
result.msg
}）;
}
},'json'）;
}
}）;
}
}
'north'"title="董鑫的资料"style="height:
75px;padding:
10px;">
'icon-edit',plain:
true">编辑
'icon-add',plain:
true">增加
'icon-remove',plain:
true">删除