欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

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

程序员文章站 2022-07-13 14:00:40
...

工程创建

1.File-new-Dynamic Web Project

创建一个动态的JAVAWeb项目

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

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

然后next

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

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

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

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

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

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

下面是项目的工程目录

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

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

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

先说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样式

三、创建工程以及信息录入JSP这是位置。

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

@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>










相关标签： java mysql

上一篇： java中输出三位数，并提取每个数字的个位、十位、百位

下一篇： 判断是不是闰年

推荐阅读