需求:
有一批企业的基本信息需要展示出来,要求一级页以列表形式展示企业清单,点击公司名称后进入二级页面,二级页面展示企业简介和几张图片。
实现效果:
开发环境:
Win7,Eclipse,Mysql
数据库表设计:
cpid | 主键 |
cpname | 公司名称 |
cpbody | 公司简介 |
cpimg1 | 图片1路径 |
cpimg2 | 图片2路径 |
cpimg3 | 图片3路径 |
cpimg4 | 图片4路径 |
展示公司列表代码company.jsp
<%@page import="java.sql.*"%>
<%@ page language="java" contentType="text/html;
charset=UTF-8"
pageEncoding="UTF-8" info="this is the company platform index page"%> <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>company</title> <style>
body {
margin: 0 auto;
} h1 {
margin: 0 auto;
line-height: 100px;
text-align: center;
color: #FFFFFF;
font-family: 微软雅黑;
} .container {
width: 1000px;
margin: 0 auto;
background: none;
height: 1000px;
} .cphead {
width: 1000px;
height: 100px;
background-color: #B40F0B;
margin: 0 auto;
} .cpintro {
width: 1000px;
height: 15px;
margin: 0 auto;
line-height: 15px;
color: #B4120F;
} .cplist {
width: 1000px;
margin: 0 auto;
height: 600px;
} .cplist table {
width: 100%;
} .cplist td {
height: 45px;
font-family: 微软雅黑;
font-size: 18px;
line-height: 40px;
} .cptdleft {
width: 3%;
} .cptdmiddle {
width: 85%;
} .cptdright {
text-align: center;
} .cplist a {
text-decoration: none;
color: #000000;
} .cplist a:hover {
text-decoration: underline;
color: #F10A0E;
} .bluefont {
color: blue;
font-style: bold;
} .bluefont a {
text-decoration: underline;
color: blue;
}
</style> </head> <body>
<jsp:include page="cphead.jsp"></jsp:include>
<div class="container">
<div class="cplist" id="cplistheight">
<table>
<%
try {
//注册数据驱动
Class.forName("com.mysql.jdbc.Driver");
//获取数据库连接
Connection conn = DriverManager.getConnection(
"jdbc:mysql://localhost:3306/db_gongxiang", "root",
"123456");
//创建statement
Statement stmt = conn.createStatement();
//执行查询 ResultSet rs = stmt.executeQuery("select * from tb_company"); int intPageSize; //一页显示的记录数
int intRowCount; //记录的总数
int intPageCount; //总页数
int intPage; //待显示的页码
String strPage;
int i;
//设置一页显示的记录数
intPageSize = 10;
//取得待显示的页码
strPage = request.getParameter("page");
//判断strPage是否等于null,如果是,显示第一页数据
if (strPage == null) {
intPage = 1;
} else {
//将字符串转换为整型
intPage = java.lang.Integer.parseInt(strPage);
}
if (intPage < 1) {
intPage = 1;
}
//获取记录总数
rs.last();
intRowCount = rs.getRow();
//计算机总页数
intPageCount = (intRowCount + intPageSize - 1) / intPageSize;
//调整待显示的页码
if (intPage > intPageCount)
intPage = intPageCount;
if (intPageCount > 0) {
//将记录指针定位到待显示页的第一条记录上
rs.absolute((intPage - 1) * intPageSize + 1);
}
//下面用于显示数据
i = 0;
while (i < intPageSize && !rs.isAfterLast()) {
%> <tr>
<td class="cptdleft"><img src="data:images/14.jpg"></td>
<td class="cptdmiddle"><a
href="cp1.jsp?cpid=<%=rs.getString(1)%>" target="_blank"><%=rs.getString(2)%></a></td>
<td class="cptdright">2015-06-20</td> </tr>
<%
rs.next();
i++;
}
//关闭连接、释放资源
rs.close();
stmt.close();
conn.close();
%>
<tr>
<td colspan="2" align="center">共<span class="bluefont"><%=intRowCount%></span>个记录,分<span
class="bluefont"><%=intPageCount%></span>页显示,当前页是:第<span
class="bluefont"><%=intPage%></span>页 <span class="bluefont">
<%
for (int j = 1; j <= intPageCount; j++) {
out.print(" <a href='company.jsp?page=" + j
+ "'>" + j + "</a>");
}
%>
</span> <%
} catch (Exception e) {
e.printStackTrace();
}
%>
</td>
</tr> </table> </div> <jsp:include page="footer.jsp"></jsp:include>
</div>
</body>
</html>
公司详情页代码cp1.jsp
<%@page import="java.sql.*"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%> <%
// out.println( request.getParameter("cpid"));
String aa= request.getParameter("cpid");
//注册数据驱动
Class.forName("com.mysql.jdbc.Driver");
//获取数据库连接
Connection conn = DriverManager.getConnection(
"jdbc:mysql://localhost:3306/db_gongxiang", "root",
"123456");
//创建statement
Statement stmt = conn.createStatement();
//执行查询 ResultSet rs = stmt
.executeQuery("select * from tb_company where cpid="+aa); %> <%
while (rs.next()) {
%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><%=rs.getString(2)%></title>
<!--
<script language="Javascript">
document.oncontextmenu=new Function("event.returnValue=false"); //禁止右键
document.onselectstart=new Function("event.returnValue=false"); //禁止复制文字
</script>
-->
<style>
body {
margin: 0 auto;
} h1 {
margin: 0 auto;
line-height: 100px;
text-align: center;
color: #FFFFFF;
font-family: 微软雅黑;
} .cpname {
margin: 0 auto;
text-align: center;
color: #B4120F;
} .container {
width: 980px;
margin: 0 auto;
background: none; } .cphead {
width: 980px;
height: 100px;
background-color: #B40F0B;
margin: 0 auto;
} .cpintro {
width: 980px;
height: 15px;
margin: 0 auto;
line-height: 15px;
color: #B4120F;
} .cpdetail {
width: 980px;
margin: 0 auto;
height: auto;
} .cpdetailtop {
width: 90%;
font-size:18px;
margin: 0 auto;
font-size: 18px;
line-height: 32px;
font-family: 微软雅黑;
} .cpimg {
height:auto;
} </style>
</head>
<body>
<div class="container">
<div class="cphead">
<h1>全国居*食加工企业展示平台</h1>
</div>
<div class="cpintro">
<h3>
<img src="data:images/16.jpg"> 全国居*食加工企业
</h3>
</div>
<hr width="980px" color="#B40F0B">
<div class="cpdetail">
<!--公司详情开始-->
<h3>公司简介</h3>
<div class="cpdetailtop">
<!-- 上部div文字介绍--> <h3 class="cpname"><%=rs.getString(2)%></h3>
<p>
<%=rs.getString(3)%></p> </div>
<div class="cpimg">
<!--下部div图片滚动效果-->
<h3>公司形象</h3>
<table align="center">
<tr>
<td><img src="<%=rs.getString(4)%>" width="220px"
height="150px" alt="图像加载失败"></td>
<td><img src="<%=rs.getString(5)%>" width="220px"
height="150px" alt="图像加载失败"></td>
<td><img src="<%=rs.getString(6)%>" width="220px"
height="150px" alt="图像加载失败"></td>
<td><img src="<%=rs.getString(7)%>" width="220px"
height="150px" alt="图像加载失败"></td>
</tr>
</table>
</div> </div>
<!--公司详情结束--> <jsp:include page="footer.jsp"></jsp:include>
</div> <%
}
%>
</body>
</html>
现在处于jsp学习比较初级的阶段,代码中肯定有需要改进的地方,希望博客园的园友们不吝赐教.