JAVA SERVLETJSP DAY04
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
步骤三：部署，访问应用
部署应用，在地址栏中输入地址“http://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> <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>