一、项目环境环境搭建
二、功能模块介绍及要求
- 图书信息新增
1.1 基本信息添加
1.2 图片上传及回显功能 - 图书信息删除
2.1 单个删除
2.2 批量删除 - 图书信息修改
3.1 修改相应信息 - 图书信息查询
4.1 所有数据查询
4.2 3条件限制查询
4.3 分页显示数据 - 页面展示
三、代码及演示
数据库
1.1 BookInfo图书表
1.2 BookType图书类型表
pojo层
/** * BookInfo实体类 */ public class BookInfo implements Serializable{ private Integer bookId; private String bookCode; private String bookName; private BookType bookType; private String bookAuthor; private String publishPress; private Date publishDate; private Boolean isBorrow; //true 已借阅 false 未借阅 private String path; public Integer getBookId() { return bookId; } public void setBookId(Integer bookId) { this.bookId = bookId; } public String getBookCode() { return bookCode; } public void setBookCode(String bookCode) { this.bookCode = bookCode == null ? null : bookCode.trim(); } public String getBookName() { return bookName; } public void setBookName(String bookName) { this.bookName = bookName == null ? null : bookName.trim(); } public BookType getBookType() { return bookType; } public void setBookType(BookType bookType) { this.bookType = bookType; } public String getBookAuthor() { return bookAuthor; } public void setBookAuthor(String bookAuthor) { this.bookAuthor = bookAuthor == null ? null : bookAuthor.trim(); } public String getPublishPress() { return publishPress; } public void setPublishPress(String publishPress) { this.publishPress = publishPress == null ? null : publishPress.trim(); } public Date getPublishDate() { return publishDate; } public void setPublishDate(Date publishDate) { this.publishDate = publishDate; } public Boolean getIsBorrow() { return isBorrow; } public void setIsBorrow(Boolean isBorrow) { this.isBorrow = isBorrow; } public String getPath() { return path; } public void setPath(String path) { this.path = path == null ? null : path.trim(); } @Override public String toString() { return "BookInfo{" + "bookId=" + bookId + ", bookCode='" + bookCode + '\'' + ", bookName='" + bookName + '\'' + ", bookType=" + bookType + ", bookAuthor='" + bookAuthor + '\'' + ", publishPress='" + publishPress + '\'' + ", publishDate=" + publishDate + ", isBorrow=" + isBorrow + ", path='" + path + '\'' + '}'; } }
/** *BookType实体类 */ public class BookType implements Serializable{ private Integer id; private String typeName; public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public String getTypeName() { return typeName; } public void setTypeName(String typeName) { this.typeName = typeName == null ? null : typeName.trim(); } @Override public String toString() { return "BookType{" + "id=" + id + ", typeName='" + typeName + '\'' + '}'; } }
日期转换类[与配置文件挂钩]
/** * 日期转换器 */ public class DataConvert implements Converter<String,Date>{ @Override public Date convert(String s) { SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd"); if (s!=null){ try { return sdf.parse(s); } catch (ParseException e) { e.printStackTrace(); } } return null; } }
Controller层
4.1 BookInfo
@Controller
public class BookInfoController implements ServletContextAware{
@Autowired
private BookInfoService bookInfoService;
private ServletContext servletContext;
@Override
public void setServletContext(ServletContext servletContext) {
this.servletContext=servletContext;
}
/**
* 查询数据分页显示(含三条件查询)
* @param booktype
* @param bookname
* @param borrow
* @param pageNum
* @return
*/
@RequestMapping(value = "queryByConditions.do",produces = {"application/json;charset=UTF-8"})
@ResponseBody
public String queryBooksByConditions(String booktype, String bookname, Boolean borrow,@RequestParam(required = false,defaultValue = "1") Integer pageNum){
PageHelper.startPage(pageNum,4);
List<BookInfo> bookInfos = bookInfoService.queryBooksByCondition(booktype, bookname, borrow);
PageInfo<BookInfo> pageInfo=new PageInfo<BookInfo>(bookInfos);
JSONObject json=new JSONObject();
json.put("pageInfo",pageInfo);
String s = JSON.toJSONStringWithDateFormat(json, "yyyy-MM-dd");
return s;
}
/**
* 添加图书信息时 图片上传及回显
* @param fileImage
* @return
*/
@RequestMapping("imgPath.do")
@ResponseBody
public String imgPath(@RequestParam("fileImage") CommonsMultipartFile fileImage){
System.err.println("进来了");
// 获取上传图片的位置
String realPath = servletContext.getRealPath("/images/");
System.err.println("上传路径为:"+realPath);
// 获取文件名称
String originalFilename = fileImage.getOriginalFilename();
// 创建file对象 写入
File file=new File(realPath,originalFilename);
try {
fileImage.getFileItem().write(file);
} catch (Exception e) {
e.printStackTrace();
}
// 将上传的图片路径以json的方式返回客户端
String path="/images/"+originalFilename;
System.err.println("json Path:"+path);
JSONObject json=new JSONObject();
json.put("imagePath",path);
System.err.println(json.toJSONString());
return json.toJSONString();
}
/**
* 添加图书信息
* @param bookInfo
* @return
*/
@RequestMapping("addBooks.do")
@ResponseBody
public String addBook(BookInfo bookInfo){
bookInfo.setIsBorrow(false);
int i = bookInfoService.addBooks(bookInfo);
JSONObject json=new JSONObject();
if(i>0){
json.put("addFlag",true);
}else {
json.put("addFlag",false);
}
return json.toJSONString();
}
/**
* 根据id值查询图书信息
* @param choose 1-详细 2-修改+回显
* @param bookId
* @param map
* @return
*/
@RequestMapping(value = "queryBookById.do")
public String queryBookById(Integer choose,Integer bookId,ModelMap map){
switch (choose){
case 1:
//详细
BookInfo bookInfoQ = bookInfoService.queryBookById(bookId);
map.put("bookInfo",bookInfoQ);
return "showBooks";
case 2:
//修改(part 1)-显示信息
BookInfo bookInfoU = bookInfoService.queryBookById(bookId);
map.put("bookInfo",bookInfoU);
return "modifyBooks";
}
//错误页面
return null;
}
/**
* 修改图书信息
* @param bookInfo
* @return
*/
@RequestMapping(value = "updateBook.do",produces = {"application/json;charset=utf-8"})
@ResponseBody
public String updateBook(BookInfo bookInfo){
//修改(part 2)-保存更改信息
int i = bookInfoService.updateBookById(bookInfo);
JSONObject json=new JSONObject();
if (i>0){
json.put("updateFlag",true);
}else {
json.put("updateFlag",false);
}
return json.toJSONString();
}
/**
* 批量删除图书信息
* @param ids
* @return
*/
@RequestMapping(value = "deleteBooksByIds.do",produces = {"application/json;charset=utf-8"})
@ResponseBody
public String deleteBooksByIds(@RequestParam("delGroup") List<Integer> ids){
int i = bookInfoService.deleteBooksByIds(ids);
JSONObject json=new JSONObject();
if (i>0){
json.put("delsFlag",true);
}else {
json.put("delsFlag",false);
}
json.put("delIds",ids);
return json.toJSONString();
}
/**
* 删除图书信息
* @param bookId
* @return
*/
@RequestMapping(value = "deleteBookById.do",produces = {"application/json;charset=utf-8"})
@ResponseBody
public String deleteBookById(Integer bookId){
int i = bookInfoService.deleteBookById(bookId);
JSONObject json=new JSONObject();
if (i>0){
json.put("delFlag",true);
}else {
json.put("delFlag",false);
}
json.put("delId",bookId);
return json.toJSONString();
}
}
4.2 BookType
@Controller
@SessionAttributes("bookTypes")
public class BookTypeController {
@Autowired
private BookTypeService bookTypeService;
@RequestMapping("bookTypes.do")
public String getBookTypes(ModelMap map){
List<BookType> bookTypes = bookTypeService.queryBookTypes();
map.put("bookTypes",bookTypes);
return "forward:/main.jsp";
}
}
四、页面代码
index.jsp
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> </head> <body> <c:redirect url="/bookTypes.do"></c:redirect> </body> </html>
main.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <html> <head> <title>Title</title> <link rel="stylesheet" type="text/css" href="/css/alltype.css"> <style> td{text-align: center;} </style> <script type="text/javascript" src="/js/jquery.js"></script> <script type="text/javascript" src="/js/jquery-form.js"></script> <script> $(function () { /*三条件动态查询*/ $("#queryBooks").click(function () { $("#pageNum").val(1); $("#qForm").ajaxSubmit({ url:"/queryByConditions.do", dataType:"json", type:"post", success:function (data) { loadBooks(data) } }) }) /*批量删除-全选or全不选*/ $("#indexBox").click(function () { $("input[name=delGroup]").attr("checked", this.checked); }) }) /*ajax成功方法*/ function loadBooks(data) { $("#tabBody").html(""); $("#tabFoot").html(""); var temp=data.pageInfo; $.each(temp.list,function (n,vals) { var borrow=vals.isBorrow==true?"已借阅":"未借阅"; $("#tabBody").append("<tr id='"+vals.bookId+"'>\n" + " <td><input type='checkbox' name='delGroup' value='"+vals.bookId+"'></td>\n "+ " <td>"+vals.bookCode+"</td>\n" + " <td>"+vals.bookType.typeName+"</td>\n" + " <td>"+vals.bookName+"</td>\n" + " <td>"+vals.bookAuthor+"</td>\n" + " <td>"+vals.publishPress+"</td>\n" + " <td><img style='width: 64px;height: 48px;' src='"+vals.path+"'></td>\n"+ " <td>"+borrow+"</td>\n" + " <td><a href='/queryBookById.do?choose=1&bookId="+vals.bookId+"'>详细</a></td>\n" + " <td><a href='javascript:deleteById("+vals.bookId+");'>删除</a></td>\n" + " <td><a href='/queryBookById.do?choose=2&bookId="+vals.bookId+"'>修改</a></td>\n" + " </tr>"); }); $("#tabFoot").append( "<tr>\n"+ " <td colspan='11' id='page'>" + " <input id='prePage' type='hidden' value='"+temp.prePage+"'>"+ " 当前页 "+temp.pageNum+",共"+temp.pages+"页,总记录数 "+temp.total+". \n"+ " <a href='javascript:queryByPages(1);'>首页</a> " + " </td>\n"+ " </tr>\n" ); if (temp.hasPreviousPage){ $("#page").append("<a href='javascript:queryByPages("+temp.prePage+");'>上一页</a> "); } if (temp.hasNextPage){ $("#page").append("<a href='javascript:queryByPages("+temp.nextPage+");'>下一页</a> \n"); } $("#page").append("<a href='javascript:queryByPages("+temp.pages+");'>尾页</a>"); } /*根据页数查询数据*/ function queryByPages(pageNum) { $("#pageNum").val(pageNum); $("#qForm").ajaxSubmit({ url:"/queryByConditions.do", dataType:"json", data:"post", success:function (data) { loadBooks(data); } }) } /*页面加载时查询所有数据*/ function loadBody() { $("#qForm").ajaxSubmit({ url:"/queryByConditions.do", dataType:"json", type:"post", success:function (data) { loadBooks(data) } }) } /*单删*/ function deleteById(id) { $.ajax({ url:"/deleteBookById.do", dataType:"json", data:{"bookId":id}, type:"post", success:function (data) { var flag=data.delFlag==true?"删除成功":"删除失败"; var num = data.delId; alert(flag); refresh(num,true) } }) } /*批删*/ function deleteByIds() { $("#aForm").ajaxSubmit({ url:"/deleteBooksByIds.do", dataType:"json", type:"post", success:function (data) { var flag=data.delsFlag==true?"批量删除成功":"批量删除失败"; var ids = data.delIds; alert(flag); refresh(ids,false); } }) } /* 删除后刷新页面*/ function refresh(list,type) { var page = $("#prePage").val(); if (type==true){ //单删 $("#"+list).remove(); }else { //批删 for (var i=0;i<list.length;i++){ $("#"+list[i]).remove(); } } judgeIsEmpty(page); } /*当前页删除干净后返回上一页*/ function judgeIsEmpty(page) { var content=$("#tabBody").html(); if (content==""){ location.href="javascript:queryByPages("+page+");" } } </script> </head> <body onload="loadBody()"> <div class="total"> <h2>图书管理系统</h2> <hr> <%--查询栏--%> <div class="find"> <form action="" method="post" id="qForm"> 图书分类: <select name="booktype" id="condition1"> <option value="0" selected>请选择</option> <c:forEach items="${sessionScope.bookTypes}" var="list"> <option value="${list.id}">${list.typeName}</option> </c:forEach> </select> 图书名称: <input type="text" name="bookname" id="condition2"> 是否借阅: <select name="borrow" id="condition3"> <option value="">请选择</option> <option value="true">是</option> <option value="false">否</option> </select> <input type="hidden" name="pageNum" id="pageNum"> <input type="button" value="查询" id="queryBooks"> </form> </div> <div class="del"> <a href="javascript:deleteByIds()">批量删除</a> </div> <%--添加信息选项--%> <div class="add"> <a href="/addBooks.htm">添加</a> <a href="/index.jsp">显示所有信息</a> </div> <div style="clear: both"></div> <%--页面显示信息--%> <div class="tablecss"> <form method="post" enctype="multipart/form-data" id="aForm" action=""> <table border="1" cellpadding="5px" cellspacing="0" style="width: 1055px"> <thead> <tr id="1"> <td width="35px"><input type="checkbox" id="indexBox"></td> <td width="95px">图书编号</td> <td width="80px">图书分类</td> <td width="180px">图书名称</td> <td width="150px">作者</td> <td width="220px">出版社</td> <td width="80px">图片</td> <td width="65px">操作</td> <td width="45px">详细</td> <td width="45px">删除</td> <td width="45px">修改</td> </tr> </thead> <tbody id="tabBody"></tbody> <tfoot id="tabFoot"></tfoot> </table> </form> </div> <div> <!-- 直接跳到指定页 --> <input type="text" size="3" id="num"> <input type="button" value="go" id="changeUrl"> </div> </div> </body> </html>
addBooks.jsp
<%@ page import="java.util.Date" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> <link rel="stylesheet" type="text/css" href="/css/alltype.css"> <style rel="stylesheet" type="text/css"> input[type="text"]{width: 440px;height: 25px} </style> <script src="/js/jquery.js"></script> <script src="/js/jquery-form.js"></script> <script src="/js/allJs.js"></script> <script> $(function () { /*图片上传及回显*/ $("#imgFile").change(function () { $("#iForm").ajaxSubmit({ url:"/imgPath.do", //请求的url地址 dataType:"json", //返回格式为json type:"POST", //请求方式 success:function (data) { $("#imgs").show(); $("#imgs").attr("src",data.imagePath); $("#path").attr("value",data.imagePath); } }) }) /*添加表单信息至后台*/ $("#submit").click(function () { $("#iForm").ajaxSubmit({ url:"/addBooks.do", //请求的url地址 dataType:"json", //返回格式为json type:"POST", //请求方式 success:function (data) { var flag=data.addFlag==true?"添加成功":"添加失败"; alert(flag); location.href="/main.jsp"; } }) }) /*返回首页*/ $("#backsapce").click(function () { location.href="/main.jsp"; }) }) </script> </head> <body> <div class="total"> <h2>图书借阅系统</h2> <hr> <div class="tablecss" style="margin-left: 242px"> <form action="" method="post" id="iForm" enctype="multipart/form-data"> <table border="1" cellspacing="0" cellpadding="5px" style="width: 570px"> <tr> <td class="basic">图书编号</td> <td><input type="text" name="bookCode"></td> </tr> <tr> <td class="basic">图书名称</td> <td><input type="text" name="bookName"></td> </tr> <tr> <td class="basic">图书类别</td> <td> <select name="bookType.id" > <option value="0" selected>请选择</option> <c:forEach items="${sessionScope.bookTypes}" var="list"> <option value="${list.id}">${list.typeName}</option> </c:forEach> </select> </td> </tr> <tr> <td class="basic">作 者</td> <td><input type="text" name="bookAuthor"></td> </tr> <tr> <td class="basic">出 版 社</td> <td><input type="text" name="publishPress"></td> </tr> <tr> <td class="basic">出版时间</td> <td><input type="date" name="publishDate" value="<fmt:formatDate value='<%=new Date()%>' pattern="yyyy-MM-dd"/>"></td> </tr> <tr> <td class="basic">上传图片 </td> <td> <input name="fileImage" type="file" id="imgFile"> <img id="imgs" style="width: 256px;height: 192px;display: none;"> <input type="hidden" name="path" id="path" > </td> </tr> </table> <div class="button"> <input type="button" value="提交" id="submit"> <input type="button" value="取消" id="backsapce"> </div> </form> </div> </div> </body> </html>
showBooks.jsp
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>图书详细信息</title> <link rel="stylesheet" type="text/css" href="/css/alltype.css"> <script type="text/javascript" src="/js/jquery.js"></script> <script type="text/javascript"> $(function () { /*返回首页*/ $("#backsapce").click(function () { location.href="/main.jsp"; }) }) </script> </head> <body> <div class="total"> <h2>图书借阅系统</h2> <hr> <div class="tablecss" style="margin-left: 242px"> <table border="1" cellspacing="0" cellpadding="5px" style="width: 570px"> <tr> <td class="basic"><label >图书编号</label></td> <td>${bookInfo.bookCode}</td> </tr> <tr> <td class="basic"><label>图书名称</label></td> <td>${bookInfo.bookName}</td> </tr> <tr> <td class="basic"><label >图书分类</label></td> <td>${bookInfo.bookType.typeName}</td> </tr> <tr> <td class="basic"><label >作 者</label></td> <td>${bookInfo.bookAuthor}</td> </tr> <tr> <td class="basic"><label >出 版 社</label></td> <td>${bookInfo.publishPress}</td> </tr> <tr> <td class="basic"><label>出版时间</label> </td> <td><fmt:formatDate value="${bookInfo.publishDate}" pattern="yyyy-MM-dd"/> </td> </tr> <tr> <td class="basic"><label>图书状态</label> </td> <td> <c:choose> <c:when test="${bookInfo.isBorrow==false}"> 未借阅 </c:when> <c:otherwise> 已借阅 </c:otherwise> </c:choose> </td> </tr> <tr> <td class="basic"><label>图书图片</label></td> <td><img src="${bookInfo.path}" style="width: 256px;height: 192px;"></td> </tr> </table> <div class="button"> <input type="button" value="取消" id="backsapce"> </div> </div> </div> </body> </html>
modifyBooks.jsp
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>修改图书信息</title> <link rel="stylesheet" type="text/css" href="/css/alltype.css"> <style>.basic{text-align: center;width: 85px;} input[type="text"]{width: 440px;height: 25px}</style> <script type="text/javascript" src="/js/jquery.js"></script> <script type="text/javascript" src="/js/jquery-form.js"></script> <script> $(function () { /*图片上传及回显*/ $("#imgFile").change(function () { $("#iForm").ajaxSubmit({ url:"/imgPath.do", //请求的url地址 dataType:"json", //返回格式为json type:"POST", //请求方式 success:function (data) { $("#imgs").attr("src",data.imagePath); $("#path").attr("value",data.imagePath); } }) }) $("#updateInfo").click(function () { $("#iForm").ajaxSubmit({ url:"/updateBook.do", dataType:"json", type:"post", success:function (data) { var flag=data.updateFlag==true?"修改成功":"修改失败"; alert(flag); location.href="/main.jsp"; } }) }) /*返回首页*/ $("#backsapce").click(function () { location.href="/main.jsp"; }) }) </script> </head> <body> <div class="total"> <h2>图书借阅系统</h2> <hr> <div class="tablecss" style="margin-left: 242px"> <form action="" method="post" id="iForm" enctype="multipart/form-data"> <input type="hidden" value="${bookInfo.bookId}" name="bookId"> <table border="1" cellspacing="0" cellpadding="5px" style="width: 570px"> <tr> <td class="basic">图书编号</td> <td><input type="text" readonly value="${bookInfo.bookCode}" name="bookCode"></td> </tr> <tr> <td class="basic">图书名称</td> <td><input type="text" value="${bookInfo.bookName}" name="bookName"></td> </tr> <tr> <td class="basic">图书分类</td> <td> <select name="bookType.id"> <c:forEach items="${sessionScope.bookTypes}" var="types"> <option value="${types.id}" <c:if test="${types.id==bookInfo.bookType.id}">selected</c:if>>${types.typeName}</option> </c:forEach> </select> </td> </tr> <tr> <td class="basic">作 者</td> <td><input type="text" value="${bookInfo.bookAuthor}" name="bookAuthor"></td> </tr> <tr> <td class="basic">出 版 社</td> <td><input type="text" value="${bookInfo.publishPress}" name="publishPress"></td> </tr> <tr> <td class="basic">出版时间 </td> <td><input type="date" value="<fmt:formatDate value='${bookInfo.publishDate}' pattern='yyyy-MM-dd'/>" name="publishDate"> </td> </tr> <tr> <td class="basic">图书状态</td> <td> <select name="isBorrow"> <option value="false" &amp;amp;lt;c:if test="${bookInfo.isBorrow==false}">selected</c:if>>未借阅</option> <option value="true" &amp;amp;lt;c:if test="${bookInfo.isBorrow==true}">selected</c:if>>已借阅</option> </select> </td> </tr> <tr> <td class="basic">图书图片</td> <td> <input name="fileImage" type="file" id="imgFile"> <img id="imgs" src="${bookInfo.path}" style="width: 256px;height: 192px;"> <input type="hidden" name="path" id="path" value="${bookInfo.path}"> </td> </tr> </table> <div class="button"> <input type="button" value="修改" id="updateInfo"> <input type="button" value="取消" id="backsapce"> </div> </form> </div> </div> </body> </html>