主页面
【index.html】
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/index.css">
<script charset="GBK" language="JavaScript" type="text/javascript" src="js/index.js" >
</script>
</head>
<body>
<div id="div_container">
<div id="div_fruit_list">
<p class="center f30">欢迎使用水果库存后台管理系统</p>
<div style="border:0px solid red;width:60%;margin-left:20%;text-align: right;">
<!-- 关键字查询功能:启动页面以及未输入关键字直接点击搜索按钮时,都是直接显示所有列表信息 -->
<form th:action="@{/index}" method="post" style="float: left;">
<input type="hidden" name="operate" value="search"/>
请输入查询关键字:<input type="text" name="keyword" th:value="${session.keyword}">
<input type="submit" value="查询" class="btn">
</form>
<!-- 添加数据链接 -->
<a th:href="@{/add.html}" style="border:0px solid blue;margin-bottom:4px;">添加库存记录</a>
</div>
<!-- 列表显示 -->
<table id="tbl_fruit">
<tr>
<th class="w20">名称</th>
<th class="w20">单价</th>
<th class="w20">库存</th>
<th>操作</th>
</tr>
<!-- 查询列表为空的情况 -->
<tr th:if="${#lists.isEmpty(session.fruitList)}">
<td colspan="4">对不起,库存为空!</td>
</tr>
<!-- 点击进入editServlet,将需要修改的内容传至编辑页面 -->
<tr th:unless="${#lists.isEmpty(session.fruitList)}" th:each="fruit : ${session.fruitList}">
<!--<td><a th:text="${fruit.fname}" th:href="@{'/edit.do?fid=' + ${fruit.fid}}"> 苹果 </a></td>
-->
<!-- 查询列表不为空的情况 -->
<td><a th:text="${fruit.fname}" th:href="@{/edit.do(fid=${fruit.fid})}"> 苹果 </a></td>
<td th:text="${fruit.price}">5</td>
<td th:text="${fruit.fcount}">20</td>
<!--<td><img src="imgs/deleteIcon.jpg" class="deleteImg" th:οnclick="'delFruit('+${fruit.fid}+')'"/></td>
-->
<!-- 删除操作 -->
<td><img src="imgs/deleteIcon.jpg" class="deleteImg" th:onclick="|delFruit(${fruit.fid})|"/></td>
</tr>
</table>
<!--分页功能-->
<div style="width:60%;margin-left:20%;padding-top: 4px;" class="center">
<input type="button" value="首 页" class="btn" th:onclick="|page(1)|" th:disabled="${session.pageNum==1}">
<input type="button" value="上一页" class="btn" th:onclick="|page(${session.pageNum-1})|" th:disabled="${session.pageNum==1}">
<input type="button" value="下一页" class="btn" th:onclick="|page(${session.pageNum+1})|" th:disabled="${session.pageNum==session.pageCount}">
<input type="button" value="尾 页" class="btn" th:onclick="|page(${session.pageCount})|" th:disabled="${session.pageNum==session.pageCount}">
</div>
</div>
</div>
</body>
</html>
主页面对应的CSS
【index.css】
*{
color:threeddarkshadow;
}
a{
text-decoration: none;
}
body{
margin:0;
padding:0;
background-color:#808080;
}
div{
position:relative;
float:left;
}
#div_container{
width:80%;
height:100%;
border:0px solid blue;
margin-left:10%;
float:left;
background-color:honeydew;
/*设置边框轮廓为圆角*/
border-radius:25px;
}
#div_fruit_list{
width:100%;
border:0px solid red;
}
#tbl_fruit{
/*设置表格宽度:页面宽度的60%*/
width:60%;
/*设置每行单元格高度*/
line-height:28px;
/*设置表格和页面边框上方的距离*/
margin-top:20px;
/*设置表格和页面边框左边的距离*/
margin-left:20%;
}
#tbl_fruit, #tbl_fruit tr,#tbl_fruit th,#tbl_fruit td{
border:1px solid gray;
/*单元格边界合并*/
border-collapse:collapse;
/*单元格文字居中*/
text-align:center;
/*设置单元格文字样式*/
font-size:16px;
font-family:"楷体";
font-weight:lighter;
color:threeddarkshadow;
}
.w20{
width:20%;
}
.deleteImg{
width:24px;
height:24px;
}
#add_friut_div{
border:0px solid red;
width:40%;
margin-left:30%;
}
#add_friut_table{
margin-top:32px;
width:80%;
/*设置每行单元格高度*/
line-height:28px;
margin-left:10%;
/*单元格边界合并*/
border-collapse:collapse;
}
#add_friut_table,#add_friut_table tr,#add_friut_table td{
border:1px solid lightgrey;
/*单元格文字居中*/
text-align:center;
/*设置单元格文字样式*/
font-size:16px;
font-family:"楷体";
font-weight:lighter;
color:threeddarkshadow;
}
.btn{
border:1px solid lightgrey;
width:100px;
}
.w30{
width:30%;
}
.input{
padding-left:4px;
border:1px solid lightgrey;
width:80%;
}
.center{
text-align: center;
}
.f30{
font-size: 30px;
}
主页面对应的JS
【index.js】
function delFruit(fid) {
if (confirm('是否确认删除?')) {
window.location.href='del.do?fid=' + fid;
}
}
function page(pageNum) {
window.location.href="index?pageNum=" + pageNum;
}
主页面对应的Servlet(查询与分页)
【indexServlet.java】
//servlet从3.0版本开始支持注解方式的注册
@WebServlet("/index")
public class indexServlet extends ViewBaseServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
HttpSession session = request.getSession();
//设置当前页:默认值为1
int pageNum = 1;
//
String operate = request.getParameter("operate");
//如果operate!=null,说明:通过表单的查询按钮点击过来的
//如果operate==null,说明:不是通过表单的查询按钮点击过来的
String keyword = null;
if (StringUtil.isNotEmpty(operate) && "search".equals(operate)) {
//说明是点击表单查询发送过来的请求
//此时,pageNum应该还原为1,keyword应该从请求参数中获取
pageNum = 1;
keyword = request.getParameter("keyword");
//如果keyword为null,需要设置为"",否则查询时会拼接成 %null%,我们期望的是 %%
if (StringUtil.isEmpty(keyword)) {
keyword = "";
}
//将keyword把偶才能(覆盖)到session中
session.setAttribute("keyword",keyword);
}else {
//说明此处不是是点击表单查询发送过来的请求,比如点击上一页,下一页或者直接在地址栏输入网址
//此时keyword 应该从session的作用域获取
String pageNumStr = request.getParameter("pageNum");
if(StringUtil.isNotEmpty(pageNumStr)) {
//如果从请求中读取到pageNum,则类型转换,否则默认为1
pageNum = Integer.parseInt(pageNumStr);
}
//如果不是点击的查询按钮,那么查询是基于session中保存的现有keyword进行查询
Object keywordObj = session.getAttribute("keyword");
if (keywordObj != null) {
keyword = (String) keywordObj;
}else {
keyword = "";
}
}
//重新更新当前页的值
session.setAttribute("pageNum",pageNum);
FruitDAO fruitDAO = new FruitDAOImpl();
//List<Fruit> fruitList = fruitDAO.getFruitList();
List<Fruit> fruitList = fruitDAO.getFruitList(keyword,pageNum);
// System.out.println(fruitList);
//保存到session作用域
session.setAttribute("fruitList", fruitList);
int count = fruitDAO.getFruitCount(keyword);
int pageCount = (count + 5 - 1) / 5;
/*
总记录条数 总页数
1 1
5 1
6 2
10 2
11 3
count (count + 5 -1)%5
*/
session.setAttribute("pageCount", pageCount);
//此处的视图名称是 index
//那么thymeleaf会将这个 逻辑视图名称 对应到 物理视图名称 上去
//逻辑视图名称:index
//物理视图名称:view-prefix + 逻辑视图名称 + view-suffix
//所以真实的视图名称:/index.html
super.processTemplate("index",request,response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
}
添加页面
【add.html】
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/add.css">
<!--<script type="text/javascript" src="js/demo09.js">-->
</script>
</head>
<body>
<div id="div_container">
<div id="div_fruit_list">
<p class="center f30">编辑库存信息1</p>
<!--<form th:action = "@{/add.do}" method="post">-->
<form action="add.do" method="post">
<table id="tbl_fruit" >
<tr>
<th class="w20">名称</th>
<!--<td><input type="text" name="fname" th:value="${fruit.fname}"/></td>-->
<td><input type="text" name="fname"/></td>
</tr>
<tr>
<th class="w20">单价</th>
<td><input type="text" name="price"/></td>
</tr>
<tr>
<th class="w20">库存</th>
<td><input type="text" name="fcount"/></td>
</tr>
<tr>
<th class="w20">备注</th>
<td><input type="text" name="remark"/></td>
</tr>
<tr>
<th colspan="2">
<input type="submit" value="添加"/>
</th>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
注:add.css与index.css一致
添加页面对应的Servlet
【addServlet.java】
@WebServlet("/add.do")
public class AddServlet extends ViewBaseServlet {
private FruitDAO fruitDAO = new FruitDAOImpl();
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
String fname = request.getParameter("fname");
int price = Integer.parseInt(request.getParameter("price"));
String remark = request.getParameter("remark");
int fcount = Integer.parseInt(request.getParameter("fcount"));
Fruit fruit = new Fruit(fname,price,fcount,remark);
System.out.println(fruit);
fruitDAO.addFruit(fruit);
response.sendRedirect("index");
}
}
编辑(修改)页面对应的Servlet
【edit.html】
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/edit.css">
<!--<script type="text/javascript" src="js/demo09.js">-->
</script>
</head>
<body>
<div id="div_container">
<div id="div_fruit_list">
<p class="center f30">编辑库存信息2</p>
<form th:action = "@{/update.do}" method="post" th:object="${fruit}">
<!--隐藏域:功能类似于文本框,它的值会随着表单的发送也会发送给服务器,但是界面上用户看不到-->
<input type="hidden" name="fid" th:value="*{fid}"/>
<table id="tbl_fruit" >
<tr>
<th class="w20">名称</th>
<!--<td><input type="text" name="fname" th:value="${fruit.fname}"/></td>-->
<td><input type="text" name="fname" th:value="*{fname}"/></td>
</tr>
<tr>
<th class="w20">单价</th>
<td><input type="text" name="price" th:value="*{price}"/></td>
</tr>
<tr>
<th class="w20">库存</th>
<td><input type="text" name="fcount" th:value="*{fcount}"/></td>
</tr>
<tr>
<th class="w20">备注</th>
<td><input type="text" name="remark" th:value="*{remark}"/></td>
</tr>
<tr>
<th colspan="2"><input type="submit" value="提交"/></th>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
注:edit.css与index.css一致
编辑(修改)页面对应的Servlet
【EditServlet.java】
@WebServlet("/edit.do")
public class EditServlet extends ViewBaseServlet {
private FruitDAO fruitDAO = new FruitDAOImpl();
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String strId = request.getParameter("fid");
//当fid不为空时,将对应的fruit信息传至edit.html页面
if (StringUtil.isNotEmpty(strId)) {
int fid = Integer.parseInt(strId);
Fruit fruit = fruitDAO.getFruitByFid(fid);
request.setAttribute("fruit", fruit);
super.processTemplate("edit", request,response);
}
}
}
【UpdateServlet.java】
@WebServlet("/update.do")
public class UpdateServlet extends ViewBaseServlet {
private FruitDAO fruitDAO = new FruitDAOImpl();
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.设置编码
request.setCharacterEncoding("UTF-8");
//2.获取参数
String fname = request.getParameter("fname");
String priceStr = request.getParameter("price");
int price = Integer.parseInt(priceStr);
String countStr = request.getParameter("fcount");
int fcount = Integer.parseInt(countStr);
String remark = request.getParameter("remark");
String FidStr = request.getParameter("fid");
int fid = Integer.parseInt(FidStr);
//3.执行更新
Fruit fruit = new Fruit(fid, fname,price,fcount,remark);
fruitDAO.updateFruit(fruit);
//4.资源跳转
//super.processTemplate("index",request,response);
//相当于request.getRequestDispatcher("index.html").forward(request,response);
//此处需要重定向,目的是重新给IndexServlet发请求,重新获取fruitList,然后覆盖到session中,这样index.html页面显示的session的数据才是最新的
response.sendRedirect("index");
}
}
删除操作对应的Servlet
【deleteServlet.java】
@WebServlet("/del.do")
public class DelServlet extends ViewBaseServlet {
private FruitDAO fruitDAO = new FruitDAOImpl();
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String fidStr = request.getParameter("fid");
if (StringUtil.isNotEmpty(fidStr)) {
int fid = Integer.parseInt(fidStr);
fruitDAO.delFruit(fid);
response.sendRedirect("index");
}
}
}