Top

JAVA SERVLETJSP DAY04

  1. JSP基本元素练习
  2. JSP指令练习
  3. 员工管理——使用JSP实现员工信息列表1
  4. 员工管理——使用JSP实现员工信息列表2

1 JSP基本元素练习

1.1 问题

在JSP页面中输出20行“Hello JSP”。

1.2 方案

使用表达式、小脚本、注释配合HTML标记的方式实现动态页面的生成。

1.3 步骤

步骤一:新建hello.jsp页面

新建web Project,在webRoot下右键,新建File,名称为hello.jsp。点击Finish。如图-1所示:

图 - 1

步骤二:添加页面代码

在hello.jsp页面内编写如下代码,实现循环输出10行Hello JSP。再使用表达式输出10行Hello JSP。并且为两种输出添加注释。如图-2所示:

图 - 2

步骤三:部署,访问应用

部署应用,在地址栏中输入地址“/localhost:8080/部署应用名/hello.jsp”查看页面效果以及页面源码,会发现第二种注释中的java代码会执行也会出现在源代码中,但第一种注释既不会运行也不会出现在结果的源代码中。

1.4 完整代码

hello.jsp文件代码如下:

<%@ page pageEncoding="UTF-8" %>
<html>
	<head></head>
	<body style="font-size:24px">
		<%-- 使用out.print("Hello JSP");方式输出 --%>
		<%
			for(int i=0;i<10;i++){
				out.println("Hello JSP<br>");			
			}
		%>
		<hr>
		<!-- 使用<%="Hello JSP"%>方式输出-->
		<%
			for(int i=0;i<10;i++){		
		%>
				<%="No."+(i+1)+"Hello JSP" %><br>
		<%
			}
	    %>
	</body>
</html>

2 JSP指令练习

2.1 问题

在页面中输出当前系统时间,并且该时间能够嵌入到其他页面中。

2.2 方案

使用page指令的import导包,contentType控制编码,pageEncoding控制显示中文,使用include指令实现页面内包含其他页面的效果。

2.3 步骤

步骤一:新建date.jsp页面

在WebRoot节点上右键(New(File,文件名称为date.jsp。在页面内添加page指令及小脚本,如图-3所示:

图 - 3

步骤二:新建includeDemo.jsp页面

webRoot节点上右键,创建New File为 includeDemo.jsp页面,用于包含其他页面。使用include指令添加,file属性说明文件的位置。如图-4:

图 - 4

步骤三:部署应用,查看结果

部署后输入地址访问页面,查看结果如图-5:

图 - 5

步骤四:小技巧,创建自定义的JSP模板

在随便哪一个JSP页面上,右键,选择Preferences,选择JSP Template,点击New,为模板命名并填写模板内容,步骤如图-6:

图 - 6

步骤五:使用自定义的模板创建JSP页面

在webRoot节点上右键选择New(JSP,填写文件名称后,点击Next,如图-7:

图 - 7

2.4 完整代码

date.jsp文件代码:

<%@page import="java.util.*,java.text.SimpleDateFormat" 
	pageEncoding="UTF-8" 
	contentType="text/html;charset=UTF-8"%>

<div style="font-size:20px;border:1px solid red;
			width:350px;padding:20px">
	<%
		Date date = new Date();
		SimpleDateFormat sdf = 
		new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");    	
	%>
	当前系统时间:<%=sdf.format(date)%>
</div>

includeDemo.jsp文件代码:

<%@ page    pageEncoding="UTF-8"%>
<html>
	<head>	
		<title>Insert title here</title>
	</head>
	<body>
	<%@include file="date.jsp" %><br>
	时间来自于date.jsp页面!
	</body>
</html>

3 员工管理——使用JSP实现员工信息列表1

3.1 问题

在页面中显示员工信息列表,并且能够实现奇偶行背景交错变换的效果。

3.2 方案

在JSP页面中,通过创建EmployeeDAO的实例来获取所有雇员信息,再使用循环语句以表格的形式输出雇员信息。交错行变色为不同的背景样式决定的,所以在输出行标记时根据行坐标输出不同的样式即可。

3.3 步骤

步骤一:新建listEmp1.jsp页面

图 - 8

步骤二:添加循环输出表格

图 - 9

步骤三:部署查看结果

运行结果如图-10所示:

图 - 10

步骤四:添加两个CSS类样式

图 - 11

步骤五:为表格添加类样式

图 - 12

3.4 完整代码

dao包中的DBUtil.java、EmployeeDAO.java和entity包中的Employee.java文件源码参考第三天代码。

listEmp1.jsp文件代码:

<%@ page contentType="text/html; charset=UTF-8" 
         pageEncoding="UTF-8"%>
<%@ page import="dao.*,entity.*,java.util.*"%>

<html>
<head>
<style type="text/css">
.row1 {
	background-color: #E4E4F1
}

.row2 {
	background-color: #FBD10A
}
</style>
</head>
<body style="font-size:24px">
	<table border="1" cellpadding="0" cellspacing="0" width="500px">
		<caption>员工信息</caption>
		<tr>
			<td>编号</td>
			<td>姓名</td>
			<td>薪水</td>
			<td>年龄</td>
		</tr>
		<%
			EmployeeDAO dao = new EmployeeDAO();
			List<Employee> emps = dao.findAll();
			for (int i = 0; i < emps.size(); i++) {
				Employee emp = emps.get(i);
		%>
		<tr class="row<%=i % 2 + 1%>">
			<td><%=emp.getId()%></td>
			<td><%=emp.getName()%></td>
			<td><%=emp.getSalary()%></td>
			<td><%=emp.getAge()%></td>
		</tr>
		<%
			}
		%>
	</table>
</body>
</html>

4 员工管理——使用JSP实现员工信息列表2

4.1 问题

使用美工提供的静态页面实现员工管理的信息列表展示,如图-13:

图 - 13

4.2 方案

将静态页面代码复制到jsp页面中,添加page指令,修改表格的输出,使用循环控制集合的展示,修改行标题,修改行的背景样式。

4.3 步骤

步骤一:新建listEmp2.jsp页面

依据自定义模板,新建listEmp2.jsp页面。

步骤二:复制静态页面代码到jsp页面中

打开准备好的静态页面,选择emplist.html页面,将页面的全部代码拷贝到listEmp2.jsp页面中,并且css和img两个文件夹也要拷贝到工程的WebRoot文件夹下。

图 - 14

步骤三:修改page指令,添加java代码

修改page指令,添加import及content-Type属性,保证导入dao和实体的包,以及正确设定浏览器对内容的解码方式。

图- 15

步骤四:修改行的背景样式

图 - 16

步骤五:部署,访问应用

运行结果如图-17所示:

图 - 17

4.4 完整代码

listEmp2.jsp文件代码如下:

<%@ page contentType="text/html; charset=UTF-8" 
         pageEncoding="UTF-8"%>
<%@ page import="dao.*,entity.*,java.util.*"%>
<html>
	<head>
		<title>员工信息</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" type="text/css" href="css/style.css" />
	</head>
	<body>
		<div id="wrap">
			<div id="top_content">
				<div id="header">
					<div id="rightheader">
						<p>
							2009/11/20
							<br />
						</p>
					</div>
					<div id="topheader">
						<h1 id="title">
							<a href="#">main</a>
						</h1>
					</div>
					<div id="navigation">
					</div>
				</div>
				<div id="content">
					<p id="whereami">
					</p>
					<h1>
						员工信息列表
					</h1>
					<table class="table">
						<tr class="table_header">
							<td>
								编号
							</td>
							<td>
								姓名
							</td>
							<td>
								薪水
							</td>
							<td>
								年龄
							</td>
							<td>
								操作
							</td>
						</tr>
						<%
							EmployeeDAO dao = new EmployeeDAO();
							List<Employee> emps = dao.findAll();
							for (int i = 0; i < emps.size(); i++) {
								Employee emp = emps.get(i);
						%>
						<tr class="row<%=i % 2 + 1%>">
							<td><%=emp.getId()%></td>
							<td><%=emp.getName()%></td>
							<td><%=emp.getSalary()%></td>
							<td><%=emp.getAge()%></td>
							<td>
								<a href="emplist.html#">删除</a>&nbsp;<a href="#">更新</a>
							</td>
						</tr>
						<%
							}
						%>
						
					</table>
					<p>
						<input type="button" class="button" value="Add Employee" onclick="location='#'"/>
					</p>
				</div>
			</div>
			<div id="footer">
				<div id="footer_bg">
				ABC@126.com
				</div>
			</div>
		</div>
	</body>
</html>