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
<%@page language="java"contentType="text/html;charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="c"uri="https://www.sodocs.net/doc/9414795221.html,/jsp/jstl/core"%>>
"https://www.sodocs.net/doc/9414795221.html,/TR/html4/loose.dtd">
href="<%=request.getContextPath()%>/User/css/userlogin.css">
用户注册界面实现:
UserRegister.jsp
<%@page language="java"import="java.util.*"pageEncoding="UTF-8"%>
<%
String path=request.getContextPath();
String basePath=
request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort ()+path+"/";
%>
<%@taglib prefix="c"uri="https://www.sodocs.net/doc/9414795221.html,/jsp/jstl/core"%>
href="<%=request.getContextPath()%>/User/css/userregister.css">
用户注册CSS实现:
UserRegister.css
@CHARSET"UTF-8";
#divMain{margin-left:240px;}
#divTitle{line-height:30px;width:880px;height:30px;border:1px solid #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:1px solid
#d0d0d0;border-bottom:1px solid#d0d0d0;border-right:1px solid#d0d0d0;} .tdText{width:300px;text-align:right;}
.tdError{width:300px;}
#tableForm{line-height:40px;}
.inputClass{width:240px;height:32px;border:1px solid#7f9db9;line-height: 32px;padding-left:10px;}
#imgVerifyCode{width:100px;}
#divVerifyCode{text-align:center;border:1px solid#e2e2e2;}
.errorClass{background:url(/carSystem/images/error.png)no-repeat;color: #f40000;font-size:10pt;border:1px solid#ffb8b8;background-color:#fef2f2; padding:8px8px8px35px;}
用户注册javascript实现:
/*
*验证码换一张
**/
function_hyz(){
$("#imgVerifyCode").attr("src","/carSystem/VerifyCodeServlet?a="+new Date().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(){
var labelId=$(this).attr("id")+"Error";
$("#"+labelId).text("");
showError($("#"+labelId));
})
$(".inputClass").blur(function(){
var id=$(this).attr("id");
var
funName="valitade"+id.substring(0,1).toUpperCase()+id.substring(1)+"()";
eval(funName);
})
})
/*
*登陆名校验*/
function valitadeLoginname(){
var id="loginname";
var value=$("#"+id).val();
/*
*1进行非空校验
*/
if(!value){
$("#"+id+"Error").text("用户名不能为空!");
showError($("#"+id+"Error"));
return false;
}
/*
*2长度校验
*/
if(value.length<3||value.length>20){
$("#"+id+"Error").text("用户名长度必须在3~20之间!");
showError($("#"+id+"Error"));
return false;
/*
*3是否注册校验
*/
return true;
}
/*
*密码校验
*/
function valitadeLoginpass(){
var id="loginpass";
var value=$("#"+id).val();
/*
*1进行非空校验
*/
if(!value){
$("#"+id+"Error").text("密码不能为空!");
showError($("#"+id+"Error"));
return false;
}
/*
*2长度校验
*/
if(value.length<3||value.length>20){
$("#"+id+"Error").text("密码长度必须在3~20之间!");
showError($("#"+id+"Error"));
return false;
}
return true;
}
/*
*确认密码校验
*/
function valitadeReloginpass(){
var id="reloginpass";
var value=$("#"+id).val();
/*
*1进行非空校验
*/
if(!value){
$("#"+id+"Error").text("确认密码不能为空!");
showError($("#"+id+"Error"));
return false;
}
*2长度校验
*/
if(value!==$("#loginpass").val()){
$("#"+id+"Error").text("两次输入不一致");
showError($("#"+id+"Error"));
return false;
}
return true;
}
/*
*Emile校验
*
*/
function valitadeLoginemile(){
var id="loginemile";
var value=$("#"+id).val();
/*
*1进行非空校验
*/
if(!value){
$("#"+id+"Error").text("邮箱不能为空!");
showError($("#"+id+"Error"));
return false;
}
/*
*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"));
return false;
}
return true;
}
/*
*电话号码校验
*/
function valitadeLoginphone(){
var id="loginphone";
var value=$("#"+id).val();
/*
*1进行非空校验
*/
if(!value){
$("#"+id+"Error").text("电话号不能为空!");
showError($("#"+id+"Error"));
return false;
}
/*
*2长度校验
*/
if(value.length!==11){
$("#"+id+"Error").text("不是正确的电电话号码!");
showError($("#"+id+"Error"));
return false;
}
return true;
}
/*
*验证码校验
*/
function valitadeLogincode(){
var id="logincode";
var value=$("#"+id).val();
/*
*1进行非空校验
*/
if(!value){
$("#"+id+"Error").text("验证码不能为空!");
showError($("#"+id+"Error"));
return false;
}
/*
*2长度校验
*/
if(value.length!==4){
$("#"+id+"Error").text("验证码错误!");
showError($("#"+id+"Error"));
return false;
}
return true;
}
/*
*判断当前元素是否存在内容
*/
function showError(ele){
var text=ele.text();
if(!text){
ele.css("display","none");
}else{
ele.css("display","");
}
}
管理员后台实现:
<%@page language="java"contentType="text/html;charset=UTF-8"
pageEncoding="UTF-8"%>
"https://www.sodocs.net/doc/9414795221.html,/TR/html4/loose.dtd">
href="<%=request.getContextPath()%>/Admin/css/admin.css">