1、编写Web层,与前端进行联调
图书列表管理页面流程示意图:
修改pages/manager/manager.jsp页面中 [图书管理] 的请求地址
BookServlet程序中的list方法
/**
* 列表查询(查询全部图书)
*
* @param request
* @param response
* @throws ServletException
* @throws IOException
*/
protected void list(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 1 . 获取请求的参数 ( 如果有 )
// 2 . 调用BookService.queryBooks()查询全部图书
List<Book> books = bookService.queryBooks();
// 3 . 把图书信息到Request域中
request.setAttribute("books", books);
// 4 . 请求转发到
// /pages/manager/book_manager.jsp页面
request.getRequestDispatcher("/pages/manager/book_manager.jsp").forward(request,response);
}
修改pages/manager/book_manager.jsp页面
注: 需要在页面顶端导入jstl标签库的核心jar包
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图书管理</title>
<%--静态包含 公共的base标签,css样式,jquery文件 --%>
<%@include file="/pages/common/header.jsp"%>
</head>
<body>
<div id="header">
<img class="logo_img" alt="" src="../../static/img/logo.gif" >
<span class="wel_word">图书管理系统</span>
<%-- 静态包含后面管理模块的菜单 --%>
<%@ include file="/pages/common/manager_menu.jsp"%>
</div>
<div id="main">
<table>
<tr>
<td>名称</td>
<td>价格</td>
<td>作者</td>
<td>销量</td>
<td>库存</td>
<td colspan="2">操作</td>
</tr>
<c:forEach items="${ requestScope.books }" var="book">
<tr>
<td>${ book.name }</td>
<td>${ book.price }</td>
<td>${ book.author }</td>
<td>${ book.sales }</td>
<td>${ book.stock }</td>
<td><a href="book_edit.jsp">修改</a></td>
<td><a href="#">删除</a></td>
</tr>
</c:forEach>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><a href="book_edit.jsp">添加图书</a></td>
</tr>
</table>
</div>
<div id="bottom">
<span>
尚硅谷书城.Copyright ©2015
</span>
</div>
</body>
</html>
表单重复提交问题 浏览器会记录页面上最后一次的请求.只要用户按下功能键F5 ,就会发起最后一次请求给服务器.就会造成表单重复提交
2、添加图书功能的实现
添加图书功能的流程示意图:
先修改pages/manager/book_manger.jsp页面中[添加图书]的请求地址
修改pages/manager/book_edit.jsp页面
<form action="manager/bookServlet" method="get">
<input type="hidden" name="action" value="add">
<table>
<tr>
<td>名称</td>
<td>价格</td>
<td>作者</td>
<td>销量</td>
<td>库存</td>
<td colspan="2">操作</td>
</tr>
<tr>
<td><input name="name" type="text" value="时间简史"/></td>
<td><input name="price" type="text" value="30.00"/></td>
<td><input name="author" type="text" value="霍金"/></td>
<td><input name="sales" type="text" value="200"/></td>
<td><input name="stock" type="text" value="300"/></td>
<td><input type="submit" value="提交"/></td>
</tr>
</table>
</form>
BookServlet程序中的add方法:
/**
* 添加图书
*
* @param request
* @param response
* @throws ServletException
* @throws IOException
*/
protected void add(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 1 获取请求的参数,封装为Book对象
Book book = WebUtils.copyParamToBean(new Book(), request.getParameterMap());
//2 调用 BookService.addBook(Book)添加图书
bookService.addBook(book) ;
// // 3 查询全部图书,保存到reqeust域中
// request.setAttribute("books", bookService.queryBooks());
// // 4 请求转发到/pages/manager/book_manager.jsp页面
// request.getRequestDispatcher("/pages/manager/book_manager.jsp").forward(request,response) ;
response.sendRedirect(request.getContextPath()
+ "/manager/bookServlet?action=list");
}
3、删除图书功能的实现示意图:
修改book_manager.jsp页面中[删除]的地址 :
BookServlet程序中delete方法
/**
* 删除图书
*
* @param request
* @param response
* @throws ServletException
* @throws IOException
*/
protected void delete(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1 获取请求的参数 id
int id = WebUtils.parseInt(request.getParameter("id"), 0);
//2 调用bookService.deleteBookById(id) 删除图书
bookService.deleteBookById(id);
// 3 重定向回图书列表管理页面
response.sendRedirect(request
.getContextPath() + "/manager/bookServlet?action=list");
}
给删除添加确认提示操作代码:
<script type="text/javascript">
$(function () {
// 根据a标签和它的样式,查找绑定单击事件
$("a.deleteBook").click(function () {
var text = $(this).parent().parent().find("td:first").text();
// confirm是javaScript语言提供的一个确认提示框操作函数
// 它的参数是提示框的提示内容
// 它有两个按钮,一个确定,一个取消
// 当用户点击确定,返回true,
// 当用户点击取消,返回false
return confirm('你确定要删除 ' + text + ' 吗?');
});
});
</script>
8、修改图书功能的实现:
修改图书流程示意图:
修改book_manager.jsp页面 [修改] 的请求地址
**BookServlet程序中getBook方法**
protected void getBook(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 1 获取请求的参数图书信息
int id = WebUtils.parseInt(request.getParameter("id"), 0);
//2 调用 bookService.queryBookById(id):Book图书信息;
Book book = bookService.queryBookById(id);
// 3 保存图书信息到Request域中
request.setAttribute("book",book);
// 4 请求转发到book_edit.jsp页面
request.getRequestDispatcher("/pages/manager/book_edit.jsp")
.forward(request,response);
}
在book_edit.jsp页面中回显要修改的数据:
<form action="manager/bookServlet" method="get">
<input type="hidden" name="action" value="${ empty param.id ? "add" : "update" }">
<input type="hidden" name="id" value="${requestScope.book.id}">
<table>
<tr>
<td>名称</td>
<td>价格</td>
<td>作者</td>
<td>销量</td>
<td>库存</td>
<td colspan="2">操作</td>
</tr>
<tr>
<td><input name="name" type="text" value="${requestScope.book.name}"/></td>
<td><input name="price" type="text" value="${requestScope.book.price}"/></td>
<td><input name="author" type="text" value="${requestScope.book.author}"/></td>
<td><input name="sales" type="text" value="${requestScope.book.sales}"/></td>
<td><input name="stock" type="text" value="${requestScope.book.stock}"/></td>
<td><input type="submit" value="提交"/></td>
</tr>
</table>
</form>
解决book_edit.jsp页面即要添加.又要修改的问题.
<input type="hidden" name="action" value="${ empty param.id ? "add" : "update" }">
<input type="hidden" name="id" value="${requestScope.book.id}">
<table>
<tr>
<td>名称</td>
<td>价格</td>
<td>作者</td>
<td>销量</td>
<td>库存</td>
<td colspan="2">操作</td>
</tr>
<tr>
<td><input name="name" type="text" value="${requestScope.book.name}"/></td>
<td><input name="price" type="text" value="${requestScope.book.price}"/></td>
<td><input name="author" type="text" value="${requestScope.book.author}"/></td>
<td><input name="sales" type="text" value="${requestScope.book.sales}"/></td>
<td><input name="stock" type="text" value="${requestScope.book.stock}"/></td>
<td><input type="submit" value="提交"/></td>
</tr>
</table>
</form>
BookServlet程序中update方法
/**
* 更新图书
*
* @param request
* @param response
* @throws ServletException
* @throws IOException
*/
protected void update(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 获取请求的全部参数.封装为book对象
Book book = WebUtils.copyParamToBean(new Book(), request.getParameterMap());
// 调用 bookService.updateBookById(book);
bookService.updateBookById(book);
// 重定向到图书列表管理页面
response.sendRedirect(request.getContextPath()
+ "/manager/bookServlet?action=list");
}