前言
本篇文章是ssm框架整合的最后一篇，第一篇和第二篇分别讲了如何整合ssm，以及添加，分页查询，删除功能的实现，这一篇主要实现的批量删除，更新，删除功能的实现。
源码下载
百度网盘：6hfh
数据库表修改
book_info新增了图片路径和是否借阅字段
批量删除功能的实现
思路：前端利用多选框接受选中的id值，传到后端，然后编写方法，由于MyBatis没有自动生成批量删除的接口，sql语句，所以我们需要自己实现。代码实现如下：
前端代码实现如下：前端水平很差，凑合着看吧
<%@ 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 name="borrow">
<option value="-1">请选择</option>
<option value="0"
<c:if test="${borrow==0 }">selected="selected" </c:if>>未借阅</option>
<option value="1"
<c:if test="${borrow==1 }">selected="selected" </c:if>>已借阅</option>
</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="/deleteAll.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>
<td>下载</td>
</tr>
<c:forEach items="${pageInfo.list}" var="book">
<tr>
<td><input type="checkbox" name="id" 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="edit.do?id=${book.id }">修改</a></td>
<td><a href="download.do?imgpath=${book.imgpath}">下载</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>
后端代码 ：
由于自动生成的代码没有自动生成批量删除的功能，所以我们需要从接口开始。
定义接口
int deleteAll(String[] ids);xml中实现
<delete id="deleteAll">
delete from book_info where id in
<foreach collection="array" item="id" open="(" separator="," close=")" >
#{id}
</foreach>
</delete>service层
int deleteAll(String[] ids);service.impl
@Override
public int deleteAll(String[] ids) {
return bookInfoService.deleteAll(ids);
}controller层方法
@RequestMapping("/deleteAll.do")
public void deleteAll(String[] id,HttpServletResponse response) throws IOException {
for (String ids:id) {
System.out.println(ids);
}
int rows = bookInfoService.deleteAll(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>");
}
}实现效果：
更新功能实现：
实现思路：点击详情，向后端传参id，查询详细信息，回显到前端，修改后在传递到后端进行修改。
后端代码：
controller层方法
//编辑页面的回显信息
@RequestMapping("edit.do")
public String edit(Integer id,ModelMap map){
//书籍信息
BookInfo bookInfo = bookInfoService.selectByPrimaryKey(id);
map.put("book",bookInfo);
//书籍类别名称，为了明确显示书籍类别
List<BookType> bookTypes = bookTypeService.selectByExample(new BookTypeExample());
map.put("bookTypes",bookTypes);
return "edit";
}
//更新数据
@RequestMapping("updateBook.do")
public void update(BookInfo bookInfo, @RequestParam("booktype") String booktype, HttpServletResponse response) throws IOException {
bookInfo.setBooktypeid(Integer.parseInt(booktype));
System.out.println(bookInfo);
int rows = bookInfoService.updateByPrimaryKeySelective(bookInfo);
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=\"edit.do\";</script>");
}
}更新页面
<%@ 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"%>
<%@ 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>
<!-- jQuery.form.js是一个form插件,支持ajax表单提交和ajax文件上传 -->
<script src="/resource/js/jquery-form.js"></script>
<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").val(data.imagePath);
}
};
//提交form
$("#imm").ajaxSubmit(obj);
}
</script>
</head>
<body>
<form id="imm" action="updateBook.do" method="post">
<table border="1px" style="text-align: center;">
<tr>
<td>图书编号</td>
<td><input name="id" value="${book.id }" disabled></td>
</tr>
<tr>
<td>图书名称</td>
<td><input name="bookname" value="${book.bookname }">
</td>
</tr>
<tr>
<td>图书分类</td>
<td><select name="booktype">
<c:forEach items="${bookTypes}" var="type">
<option value="${type.id}"
<c:if test="${type.id==book.booktypeid}">selected="selected"</c:if>>${type.booktypename}</option>
</c:forEach>
</select></td>
</tr>
<tr>
<td>作者</td>
<td><input type="text" name="author"
value="${book.author }"></td>
</tr>
<tr>
<td>出版社</td>
<td><input type="text" name="press"
value="${book.press }"></td>
</tr>
<tr>
<td>出版时间</td>
<td><input type="text" name="publishdate"
value="<%--<fmt:formatDate value="${book.publishdate }" pattern="yyyy-MM-dd"/>--%> ${book.publishdate }">
</td>
</tr>
<tr>
<td>图片上传</td>
<td><img id="img" src="${book.imgpath}">
<!-- 显示图片的 --> <input name="fileImage" type="file"
onchange="uploadImage();"> <input type="hidden" name="imgpath"
id="pic" value="${book.imgpath}"></td>
</tr>
<tr>
<td colspan="2"><input type="hidden" name="id"
value="${book.id }"> <input type="submit" value="提交">
</td>
</tr>
</table>
</form>
</body>
</html>
封面下载
思路：前端点击下载链接时，将前端存储的路径传到后端，后端根据真实位置将图片转换为文件流传到前端，完成下载。
@Controller
public class DownLoadController {
@RequestMapping("/download.do")
public ResponseEntity<byte[]> download(String imgpath) throws IOException {
String path = "D:\\idea-workspace\\ssm1\\target\\ssm1"+imgpath;
File file = new File(path);
HttpHeaders headers = new HttpHeaders();
//为了解决中文名称乱码问题
headers.setContentDispositionFormData("attachment", new String("封面.jpg".getBytes("UTF-8"),"iso-8859-1"));
headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);
return new ResponseEntity<byte[]>(FileUtils.readFileToByteArray(file), headers, HttpStatus.CREATED);
}
}
总结：写了三天终于完了，通过这个小项目，熟悉了ssm框架的流程，由于是新手，如果有什么问题，在所难免，欢迎反馈。
431
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
