三、创建工程以及信息录入JSP

工程创建

1.File-new-Dynamic Web Project

创建一个动态的JAVAWeb项目

2.写上工程名字,选择使用的Tomcat和版本


然后next

3.这个页面是说java文件的存放目录,默认选择src,继续next


4.第一个框是说JSP文件或者Html文件存放目录,选择默认的,然后勾选xml文件,会生成一个web.xml文件,该文件用来写servlet的配置信息。


这样一个动态JAVAWeb工程就创建完了。

---------------------------------------------------------------------------------------------------------------------------

下面是项目的工程目录


项目写的很长,其实可以压缩起来的,不过之前因为不懂,基本都是参考大神代码,所以都分开来。

------------------------------------------------------------------------------------------------------------------

先说AddMessage.jsp

学生信息录入页面

贴完整代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<link rel="stylesheet" type="text/css" href="css/daohanglan1.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>学生录入</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<style>
label:before{
	content:"*";
	color:red;
}
label {
	cursor: pointer;
    display: inline-block;
    padding: 3px 6px;
    text-align: left;
    width: 120px;
    vertical-align: top;
}
#btn {
	text-align:center; 
}
.btn {
			    width: 70px;  
		        padding:8px;  
		        background-color: white;  
		        border-color: black;  
		        color: black;  
		        -moz-border-radius: 10px;  
		        -webkit-border-radius: 10px;  
		        border-radius: 10px; /* future proofing */  
		        -khtml-border-radius: 10px; /* for old Konqueror browsers */  
		        text-align: center;  
		        vertical-align: middle;  
		        border: 1px solid black;  
		        font-weight: 900;  
		        font-size:13px;
}
#fieldset1{
	height:500px;
}
#div1 {
	height:50%;
	width:100%;
}
#div2 {
	margin-left:30%;
	float:left;
	height:50%;
	width:40%;
}
.error{
	color:red;
}
</style>
<script type="text/javascript">
$.validator.setDefaults({
    submitHandler: function(form) {
      form.submit();
    }
});
$().ready(function(){
	$("#form1").validate({
		rules:{
			name:"required",
			id: {
				digits:true,
				required:true,
				maxlength:4,
				minlength:4,
			},
			institute:"required",
			professional:"required",
		},
		message:{
			name:"请输入名字",
			id:{
				digits:"请输入4位数字",
				required:"请输入4位学号",
				maxlength:"请输入4位学号",
				minlength:"请输入4位学号",
			},
			institute:"请输入学院",
			professional:"请输入专业",
		}
	})
});
</script>
</head>

<body>
<div >
	<ul class="nav">  
	 	<li><a href="AddMessage.jsp">学生录入</a></li>
		<li><a href="AddWorkTime.jsp">工时录入</a></li>  
		<li><a href="TimeManage.jsp">工时管理</a></li>  
	</ul>  
</div>
	<div id="div1">
		<div id="div2">
			<form action="AddMessage" method="post" id="form1">
				<fieldset id="fieldset1">
				<legend>学生信息</legend>
				<p><label>学生姓名:</label><input type="text" name="name" ></p>
				<p><label>性别:</label>
					<input type="radio" name="sex" value="male" checked>男 
					<input type="radio" name="sex" value="female">女 </p>
				<p><label>入学年份:</label><select name="year">
					<option value="2014">2014</option>
					<option value="2015">2015</option>
					<option value="2016">2016</option>
					<option value="2017">2017</option>
					<option value="2018">2018</option>
					<option value="2019">2019</option>
					<option value="2020">2020</option>
				</select></p>
				<p><label>学号:</label><input type="text" name="id" ></p>
				<p><label>学院:</label><input type="text" name="institute" ></p>
				<p><label>专业:</label><input type="text" name="professional" ></p>
				<p><label>贫困等级:</label>
				<select name="level">
				<option value="poor">贫困</option>
				<option value="hard">特困</option>
				</select></p>
				<div id="btn">
					<input type="submit" value="提交" class="btn"/>
				</div>
				</fieldset>
			</form>
		</div>
	</div>
</body>
</html>

-----------------------------------------------------------------

<link rel="stylesheet" type="text/css" href="css/daohanglan1.css"/>

这个的是链接了css文件夹下daohanglan1.css的css样式

这是位置。

内容是导航栏的样式,感觉很好看

@charset "UTF-8";
.nav{  
    border-top:5px solid #000000;/*定义上边框*/  
    border-bottom:1px solid #000000;/*定义下边框*/  
    padding:.45em .5em;/*内边距,上下0.45字高,左右0.5字高,相对于父元素的font-size*/  
}  
.nav a{  
    color:#000000;  
    text-decoration:none;/*默认超链接项带下划线,这里把下划线去掉*/  
}  
.nav a:hover, .nav a:focus{/*设置鼠标放在导航元素上或获得焦点(tab键)时的动作*/  
    background:#D3D3D3;  
    border-top:2px solid #D3D3D3;  
    border-right:10px solid #D3D3D3;  
    border-bottom:2px solid #D3D3D3;  
    border-left:10px solid #D3D3D3;  
    border-radius:5px;/*设置边框圆角*/  
      
}  
.nav li{  
    display:inline-block;/*行内块元素,不换行又可设置宽高等*/  
    padding:0em 1.15em 0em 1.15em;  
    border-left:1px solid #000000;  
}  
  
.nav li:first-child{/*设置第一个子元素定义样式*/  
    border-left:none;  
} 

另一个css是table的css,这里也一起贴出来,后面信息录入表格显示的时候会用到

@charset "UTF-8";
input {
	margin-left:20px;
}
th{  
    text-align: center;  
    width:100px;
}  
td{  
	 text-align: center;  
	 width:100px;
}

-----------------------------------------------------------

页面中使用了一些jQuery插件,因为看起来很舒服

插件是jQuery Validate,参考链接http://www.runoob.com/jquery/jquery-plugin-validate.html

说实话,很喜欢菜鸟教程

1.直接导入了js库

<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>

2.写验证信息

<script type="text/javascript">
$.validator.setDefaults({
    submitHandler: function(form) {
      form.submit();	//验证正确则提交表单信息
    }
});
$().ready(function(){
	$("#form1").validate({	//form1就是制定规则的是哪一个form,与下方的form的id对应
		rules:{				//rules是规则,就是form1里每一个name与里面的一一对应一些输入的规则,相当于验证
			name:"required", //name是必填字段
			id: {
				digits:true,//id为数字整型
				required:true,//id为必填字段
				maxlength:4,//最大长度4
				minlength:4,//最小长度4,所以设为了学号必为4位数
			},
			institute:"required",
			professional:"required",
		},
		message:{			//message是如果出错则弹出的信息
			name:"请输入名字",
			id:{
				digits:"请输入4位数字",//如果id填入的信息不是数字或者不是整形则弹出的信息
				required:"请输入4位学号",
				maxlength:"请输入4位学号",
				minlength:"请输入4位学号",
			},
			institute:"请输入学院",
			professional:"请输入专业",
		}
	})
});
</script>

3.form的HTML,id必须为form1才能与javascript对应

			<form action="AddMessage" method="post" id="form1">
				<fieldset id="fieldset1">
				<legend>学生信息</legend>
				<p><label>学生姓名:</label><input type="text" name="name" ></p>
				<p><label>性别:</label>
					<input type="radio" name="sex" value="male" checked>男 
					<input type="radio" name="sex" value="female">女 </p>
				<p><label>入学年份:</label><select name="year">
					<option value="2014">2014</option>
					<option value="2015">2015</option>
					<option value="2016">2016</option>
					<option value="2017">2017</option>
					<option value="2018">2018</option>
					<option value="2019">2019</option>
					<option value="2020">2020</option>
				</select></p>
				<p><label>学号:</label><input type="text" name="id" ></p>
				<p><label>学院:</label><input type="text" name="institute" ></p>
				<p><label>专业:</label><input type="text" name="professional" ></p>
				<p><label>贫困等级:</label>
				<select name="level">
				<option value="poor">贫困</option>
				<option value="hard">特困</option>
				</select></p>
				<div id="btn">
					<input type="submit" value="提交" class="btn"/>
				</div>
				</fieldset>
			</form>

然后因为是要提交表单,必须要有一个button,且type为submit,才能提交信息

每一栏都要有一个name,因为数据库的话是根据name将信息录入

-------------------------------------------------------------

同理,工时信息的录入一样

AddWorkTime.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/daohanglan1.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>工时录入</title>
<style>
		label:before{
		    content:"*";
		    color:red;
		}
	   label {
            cursor: pointer;
            display: inline-block;
            padding: 3px 6px;
            text-align: left;
            width: 150px;
            vertical-align: top;
        }
		#btn {
			text-align:center; 
		}
        .btn {
		        width: 70px;  
		        padding:8px;  
		        background-color: white;  
		        border-color: black;  
		        color: black;  
		        -moz-border-radius: 10px;  
		        -webkit-border-radius: 10px;  
		        border-radius: 10px; /* future proofing */  
		        -khtml-border-radius: 10px; /* for old Konqueror browsers */  
		        text-align: center;  
		        vertical-align: middle;  
		        border: 1px solid black;  
		        font-weight: 900;  
		        font-size:13px;
		}
		#fieldset2{
			height:400px;
		}
		#div3 {
			margin-left:30%;
			float:left;
			height:50%;
			width:40%;
		} 
		.error{
			color:red;
			font-size:14px;
		}
</style>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script type="text/javascript">
	$.validator.setDefaults({
		submitHandler:function(){
			form.submit();
		}
	});
	$().ready(function() {
		$("#worktime").validate({
			rules:{
				id:{
					required:true,
					maxlength:4,
					minlength:4,
					digits:true
				},
				activity:"required",
				worktime:"required",
				workdate:"required",
			},
			messages:{
				id:"请输入正确四位学号"
			}
		});
	});
</script>
</head>
<body>
		<div >
			<ul class="nav">  
		    <li><a href="AddMessage.jsp">学生录入</a></li>
		    <li><a href="AddWorkTime.jsp">工时录入</a></li>  
		    <li><a href="TimeManage.jsp">工时管理</a></li>   
		</ul>  
		</div>
		<div id="div3">
			<form id="worktime" action="AddWorkTime" method="post" >
				<fieldset id="fieldset2">
				<legend>工时信息</legend>
				<p><label>学生学号(4位):</label><input type="text" name="id" class="textBox" align="left" /></p>
				<p><label>活动名称:</label><input type="text" name="activity" class="textBox" align="left"/></p>
				<p><label>工时数:</label><input type="text" name="worktime" class="textBox" align="left"/></p>
				<p><label>日期:</label><input type="date" name="workdate" class="textBox" align="left"/></p>
				<div id="btn">
					<input type="submit" value="提交" class="btn">
				</div>
				</fieldset>
			</form>
		</div>
</body>
</html>










阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页