前言
本篇博客基于上一篇的基础，在上一篇博客的代码上改动的，如果有需要请自行下载。
实现功能：分页插件PageHelper的使用，各种查询的实现，删除功能以及详情页。
环境
idea 2018.2
jdk 1.8
tomcat 8.0
mysql 5.6
maven 3.3.9
源码下载
百度网盘：errg
代码实现
新增页面的修改
修改表单与数据库字段对齐
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" isELIgnored="false" %><%--允许使用el表达式--%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.form/4.2.2/jquery.form.js"></script>
<title>新增书籍</title>
<style type="text/css">
#body {
margin: 0px auto;
width: 800px;
height: 600px;
}
</style>
</head>
<body>
<div id="body">
<div style="margin: 0px auto; width: 500px;">
<form action="/addBook.do" method="post" enctype="multipart/form-data" id="imgf">
<table border="1px" style="text-align: center;">
<tr>
<td>图书名称</td>
<td><input name="bookname"></td>
</tr>
<tr>
<td>图书分类</td>
<td style="text-align: left;">
<select name="booktype">
<c:forEach items="${bookTypes}" var="bookType">
<option value="${bookType.id }">${bookType.booktypename}</option>
</c:forEach>
</select></td>
</tr>
<tr>
<td>作者</td>
<td><input name="author"></td>
</tr>
<tr>
<td>出版社</td>
<td><input name="press"></td>
</tr>
<tr>
<td>出版时间</td>
<td><input name="publishdate" type="date"></td>
</tr>
<tr>
<td>图片上传</td>
<td><img id="img" src="" width="100px" height="80px"><!-- 显示图片的 -->
<input name="fileImage" type="file" onchange="uploadImage();">
<input type="hidden" name="path" id="pic" >
</td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="提交">
<input type="button" value="取消"></td>
</tr>
</table>
</form>
</div>
</div>
</body>
<script type="text/javascript">
function uploadImage() {
//编写ajax
var obj={
url:"imageupload.do",
dataType:"json",
type:"post",
success:function(data){
$("#img").attr("src",data.imagePath);
$("#pic").attr("value",data.imagePath);
}
};
//提交form
$("#imgf").ajaxSubmit(obj);
};
</script>
</html>
添加数据后端代码修改
如果增加成功，则跳到主页，否则留在本页面。
//添加数据
@RequestMapping("addBook.do")
public String addBook(BookInfo bookInfo, @RequestParam("booktype") String booktype){
bookInfo.setBooktypeid(Integer.parseInt(booktype));
int rows = bookInfoService.insert(bookInfo);
if (rows>0)
return "forward:index.do";
else
return "forward:toAdd.do";
}主页代码的编写
后端代码
/**
*
* @param map 储存数据
* @param now 要查询的页数
* @param booktypeid 要查询的书籍类型id
* @param bookname 要查询的书籍姓名，模糊查询实现
* @return
*/
@RequestMapping("index.do")
public String index(ModelMap map,
@RequestParam(value = "now", required = false, defaultValue = "1")Integer now,
@RequestParam(value = "booktypeid", required = false, defaultValue = "-1")Integer booktypeid,
@RequestParam(value = "bookname", required = false, defaultValue ="")String bookname){
BookInfoExample bookInfoExample = new BookInfoExample();
//按id逆序查询，新添加的在上面
bookInfoExample.setOrderByClause("book_info.id desc");
//新建条件查询
BookInfoExample.Criteria criteria = bookInfoExample.createCriteria();
//如果booktypeid==-1则没有类别，否则加上书籍类型查询
if(booktypeid!=-1) {
criteria.andBooktypeidEqualTo(booktypeid);
}
//如果书名不为空，则模糊查询
if(!bookname.equals(""))
criteria.andBooknameLike("%"+bookname+"%");
//查询所有书籍类型
List<BookType> bookTypes = bookTypeService.selectByExample(new BookTypeExample());
//now为当前页数，pageSize为当前页显示数量,固定用法
PageHelper.startPage(now,3);
List<BookInfo> bookInfos = bookInfoService.selectByExample(bookInfoExample);
PageInfo<BookInfo> pageInfo = new PageInfo<>(bookInfos);
//将要回显的数据放到request域中
map.put("pageInfo",pageInfo);
map.put("bookTypes",bookTypes);
map.put("bookname",bookname);
map.put("booktypeid",booktypeid);
return "index";
}index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" isELIgnored="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>主页</title>
<script src="/resource/js/jquery_2.1.4_baidu_min.js"></script>
<script type="text/javascript">
function doPage(pageno) {
//.给表单的当前也那么赋值
$("#pageno").val(pageno);
//提交查询的表单
$("#query").submit();
}
function changecheckBox(check) {
var input = $("input[name='id']");
if (check) {
$(input).each(function (i) {
this.setAttribute("checked","checked");
//this.setAttribute("checked","true");
})
} else {
$(input).each(function (i) {
this.removeAttribute("checked");
})
}
}
function deleteAll() {
$("#delete").submit();
}
</script>
</head>
<body>
<div style="height: 600px; width: 800px; margin: 0px auto;">
<form action="index.do" method="post" id="query">
图书分类<select name="booktypeid">
<option value="-1">全部</option>
<c:forEach items="${bookTypes}" var="type">
<option value="${type.id}"
<c:if test="${type.id==booktypeid}">selected="selected"</c:if>>${type.booktypename}</option>
</c:forEach>
</select> 图书名称<input name="bookname" value="${bookname}">
</select> <input type="hidden" name="now" id="pageno"> <input
type="submit" value="查询">
</form>
<a href="/toAdd.do">添加</a>
<button onclick="deleteAll();">批量删除</button>
<form id="delete" action="bookservlet.do" method="post">
<input type="hidden" name="choose" value="7">
<table>
<tr>
<td><input type="checkbox"
onclick="changecheckBox(this.checked);"></td>
<td>图书编号</td>
<td>图书分类</td>
<td>图书名称</td>
<td>作者</td>
<td>出版社</td>
<td>详情</td>
<td>删除</td>
<td>修改</td>
</tr>
<c:forEach items="${pageInfo.list}" var="book">
<tr>
<td><input type="checkbox" name="bookid"
value="${book.id }"></td>
<td>${book.id }</td>
<td>${book.bookType.booktypename}</td>
<td>${book.bookname }</td>
<td>${book.author }</td>
<td>${book.press }</td>
<td><a href="detail.do?id=${book.id }">详情</a></td>
<td><a href="delete.do?id=${book.id }">删除</a></td>
<td><a href="update.do?id=${book.id }">修改</a></td>
</tr>
</c:forEach>
<tr>
<td colspan="9"><a href="javascript:doPage(1);">首页</a>
<a href="javascript:doPage(${pageInfo.pageNum-1});">上一页</a>
<a href="javascript:doPage(${pageInfo.pageNum+1});">下一页</a>
<a href="javascript:doPage(${pageInfo.pages});">末页</a>
${pageInfo.pageNum}/${pageInfo.pages}页</td>
</tr>
</table>
</form>
</div>
</body>
</html>
删除方法
/**
*
* @param id 接受参数
* @param response
* @throws IOException
*/
@RequestMapping("delete.do")
public void detele(int id, HttpServletResponse response) throws IOException {
//根据id删除书籍
int rows = bookInfoService.deleteByPrimaryKey(id);
//设置编码格式
response.setContentType("text/html;charset=UTF-8");
PrintWriter writer = response.getWriter();
if(rows>0){
writer.write("<script type=\"text/javascript\">alert('删除成功');location.href=\"index.do\";</script>");
}else{
writer.write("<script type=\"text/javascript\">alert('删除失败');location.href=\"index.do\";</script>");
}
// return "forward:index.do";
}实现效果：
详情页
根据id精确查询
@RequestMapping("/detail.do")
public String detail(int id,ModelMap map){
BookInfo bookInfo = bookInfoService.selectByPrimaryKey(id);
System.out.println(bookInfo);
map.put("book",bookInfo);
return "detail";
}fmt标签解析不了，不知道为啥，字符串先用着吧
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" isELIgnored="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>图书详情</title>
</head>
<body>
<table border="1px" style="text-align: center;">
<tr>
<td>图书编号</td>
<td>${book.id }</td>
</tr>
<tr>
<td>图书名称</td>
<td>${book.bookname }</td>
</tr>
<tr>
<td>图书分类</td>
<td >${book.bookType.booktypename }</td>
</tr>
<tr>
<td>作者</td>
<td>${book.author }</td>
</tr>
<tr>
<td>出版社</td>
<td>${book.press}</td>
</tr>
<tr>
<td>出版时间</td>
<td><%--<fmt:formatDate value="${book.publishdate }" pattern="yyyy-MM-dd"/>--%>${book.publishdate } </td>
</tr>
<tr>
<td colspan="2">
<a href="javascript:history.go(-1);">返回首页</a>
</td>
</tr>
</table>
</body>
</html>
效果：
======================================================================
更新功能、批量删除功能、下载功能，以及其他功能的完善：博客3
2216
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
