综合实验指导书.docx
- 文档编号：9968397
- 上传时间：2023-02-07
- 格式：DOCX
- 页数：21
- 大小：808.51KB
综合实验指导书.docx
《综合实验指导书.docx》由会员分享，可在线阅读，更多相关《综合实验指导书.docx（21页珍藏版）》请在冰豆网上搜索。
综合实验指导书
Web开发技术综合实验
班级：
软件123
姓名：
司品青江磊贾光增
一、作业内容
综合运用前面掌握的内容进行一个简单的网站设计。
网站内容自定，要求至少六张网页，要求有常见网页基本元素、静态动态内容都有。
二、作业目的及要求
1、培养综合利用所学知识解决实际问题的能力；
2、学会进行Web应用系统的合理设计；
3、培养团队合作精神
三、设计内容
（一）作业分工
司品青：
负责网站的整体搭建，和前台界面和功能的编写。
江磊：
负责用户和司机的注册和登录界面和功能的实现。
贾光增：
负责网站后台界面的编写和管理。
（二）具体设计
1、网站内容简介
内容和功能：
随时查询车辆信息、客户信息、车辆租赁信息。
进行客户租赁车辆的处理，每个客户可以租赁多辆车，每辆车可以安排有一位司机，租车时说明租期，预付押金。
每辆车不同时间可以租给不同客户。
租赁模式：
有日租、包月等类型。
系统应该可以随时进行当天租金统计和一定时间段的租金统计以及车辆租赁情况统计分析。
好处：
使用汽车租赁管理系统可以规范企业的管理和经营行为，减少企业的经营成本，提高工作效率。
汽车租赁管理系统是为汽车租赁公司提供的一个简单易用的系统,随着科技的发展，设备和管理的现代化，在实际工作中如何提高工作效率成为一个很重要的问题。
而建立管理系统是一个很好的解决办法
2、页面设计和技术介绍
用户登录界面：
一张背景图片，加入几个DIV然后用坐标控制div的位置，其中的一个div加入form表单，采用HTML，CSS，javascript,jquery等技术
车辆管理前台：
通过Jframe,HTML，CSS，javascript,jquery等技术实现
新用户注册界面：
整体上是一个DIV然后里面有一个form表单采用HTML，CSS，javascript,jquery等技术
管理员登录界面：
基本同上
车辆管理界面后台：
使用Jframe框架，一共分为三个部分，头部，列表栏，还有内容区采用HTML，CSS，javascript,jquery等技术
车辆管理管理员界面：
使用Jframe框架，一共分为三个部分，头部，列表栏，还有内容区采用HTML，CSS，javascript,jquery等技术
3、代码
用户登录界面实现：
UserLogin.jsp
<%@pagelanguage="java"contentType="text/html;charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglibprefix="c"uri="%>>
DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http:
//www.w3.org/TR/html4/loose.dtd">
用户登录
用户登录
|
用户名:
用户名不能为空
|
密码:
|
/images/login1.jpg"id="dl"/>
/images/zc2.jpg"id="zc"/>
|
3px;>
/Driver/DriverRegister.jsp"traget="_blank"> /images/sjrz.jpg"id="sjrz"/> |
| /images/sjdl.jpg"id="sjdl"/> |
:
admin
用户注册界面实现：
UserRegister.jsp
<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<%
Stringpath=request.getContextPath（）;
StringbasePath=request.getScheme（）+":
//"+request.getServerName（）+":
"+request.getServerPort（）+path+"/";
%>
<%@taglibprefix="c"uri="%>
DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
">
用户注册
--
-->
新用户注册
"method="post">
用户名
|
密码
|
确认密码
|
Emile
|
电话号码
|
验证码
|
| |
| /images/regist1.jpg"id="submitBtn"/> | |
>
用户注册CSS实现：
UserRegister.css
@CHARSET"UTF-8";
#divMain{margin-left:
240px;}
#divTitle{line-height:
30px;width:
880px;height:
30px;border:
1pxsolid#d0d0d0;background:
url（/carSystem/images/bg_btns.png）repeat-x0px-132px;}
#spanTitle{margin-left:
18px;font-weight:
900;}
#divBody{width:
880px;height:
400px;border-left:
1pxsolid#d0d0d0;border-bottom:
1pxsolid#d0d0d0;border-right:
1pxsolid#d0d0d0;}
.tdText{width:
300px;text-align:
right;}
.tdError{width:
300px;}
#tableForm{line-height:
40px;}
.inputClass{width:
240px;height:
32px;border:
1pxsolid#7f9db9;line-height:
32px;padding-left:
10px;}
#imgVerifyCode{width:
100px;}
#divVerifyCode{text-align:
center;border:
1pxsolid#e2e2e2;}
.errorClass{background:
url（/carSystem/images/error.png）no-repeat;color:
#f40000;font-size:
10pt;border:
1pxsolid#ffb8b8;background-color:
#fef2f2;padding:
8px8px8px35px;}
用户注册javascript实现：
/*
*验证码换一张
**/
function_hyz（）{
$（"#imgVerifyCode"）.attr（"src","/carSystem/VerifyCodeServlet?
a="+newDate（）.getTime（））;
}
/*
*切换注册按钮的图片
**/
$（function（）{
$（".errorClass"）.each（function（）{
showError（$（this））;
}）
$（"#submitBtn"）.hover（
function（）{
$（"#submitBtn"）.attr（"src","/carSystem/images/regist2.jpg"）;
},
function（）{
$（"#submitBtn"）.attr（"src","/carSystem/images/regist1.jpg"）;
}
）
/*
*输入框得到焦点隐藏错误信息
*/
$（".inputClass"）.focus（function（）{
varlabelId=$（this）.attr（"id"）+"Error";
$（"#"+labelId）.text（""）;
showError（$（"#"+labelId））;
}）
$（".inputClass"）.blur（function（）{
varid=$（this）.attr（"id"）;
varfunName="valitade"+id.substring（0,1）.toUpperCase（）+id.substring
（1）+"（）";
eval（funName）;
}）
}）
/*
*登陆名校验*/
functionvalitadeLoginname（）{
varid="loginname";
varvalue=$（"#"+id）.val（）;
/*
*1进行非空校验
*/
if（!
value）{
$（"#"+id+"Error"）.text（"用户名不能为空!
"）;
showError（$（"#"+id+"Error"））;
returnfalse;
}
/*
*2长度校验
*/
if（value.length<3||value.length>20）{
$（"#"+id+"Error"）.text（"用户名长度必须在3~20之间!
"）;
showError（$（"#"+id+"Error"））;
returnfalse;
}
/*
*3是否注册校验
*/
returntrue;
}
/*
*密码校验
*/
functionvalitadeLoginpass（）{
varid="loginpass";
varvalue=$（"#"+id）.val（）;
/*
*1进行非空校验
*/
if（!
value）{
$（"#"+id+"Error"）.text（"密码不能为空!
"）;
showError（$（"#"+id+"Error"））;
returnfalse;
}
/*
*2长度校验
*/
if（value.length<3||value.length>20）{
$（"#"+id+"Error"）.text（"密码长度必须在3~20之间!
"）;
showError（$（"#"+id+"Error"））;
returnfalse;
}
returntrue;
}
/*
*确认密码校验
*/
functionvalitadeReloginpass（）{
varid="reloginpass";
varvalue=$（"#"+id）.val（）;
/*
*1进行非空校验
*/
if（!
value）{
$（"#"+id+"Error"）.text（"确认密码不能为空!
"）;
showError（$（"#"+id+"Error"））;
returnfalse;
}
/*
*2长度校验
*/
if（value!
==$（"#loginpass"）.val（））{
$（"#"+id+"Error"）.text（"两次输入不一致"）;
showError（$（"#"+id+"Error"））;
returnfalse;
}
returntrue;
}
/*
*Emile校验
*
*/
functionvalitadeLoginemile（）{
varid="loginemile";
varvalue=$（"#"+id）.val（）;
/*
*1进行非空校验
*/
if（!
value）{
$（"#"+id+"Error"）.text（"邮箱不能为空!
"）;
showError（$（"#"+id+"Error"））;
returnfalse;
}
/*
*2长度校验
*/
if（!
/^（[a-zA-Z0-9_-]）+@（[a-zA-Z0-9_-]）+（（\.[a-zA-Z0-9_-]{2,3}）{1,2}）$/.test（value））{
$（"#"+id+"Error"）.text（"邮箱格式错误!
"）;
showError（$（"#"+id+"Error"））;
returnfalse;
}
returntrue;
}
/*
*电话号码校验
*/
functionvalitadeLoginphone（）{
varid="loginphone";
varvalue=$（"#"+id）.val（）;
/*
*1进行非空校验
*/
if（!
value）{
$（"#"+id+"Error"）.text（"电话号不能为空!
"）;
showError（$（"#"+id+"Error"））;
returnfalse;
}
/*
*2长度校验
*/
if（value.length!
==11）{
$（"#"+id+"Error"）.text（"不是正确的电电话号码!
"）;
showError（$（"#"+id+"Error"））;
returnfa
- 配套讲稿：
如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制：
部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词：
-
综合
实验
指导书
冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。
1212中级汽车维修工考试试题三.docx
