图书管理项目 2
1 前期准备工作
- pojo
pojo包中添加book类，关联数据库信息
@Data
@AllArgsConstructor
@NoArgsConstructor
//加入有参构造和无参构造
public class Books {
private int bookID;
private int bookName;
private int bookCount;
private String detail;
}
- dao层（BookMapper.java）
关联数据库信息，写入增删改查插方法
public interface BookMapper {
// 增加书籍
int addBook(Books books);
// 删除书籍
int deleteBook(@Param("bookId") int id);
// 更新书籍
int updateBook(Books books);
// 查询书籍
Books queryBookById(@Param("bookId")int id);
// 查询全部书籍
List<Books> queryAllBooks();
}
- service层注入dao（BookServiceImpl.java）
@Service
public class BookServiceImpl implements BookService{
//service注入dao层
@Autowired
private BookMapper bookMapper;
public void setBookMapper(BookMapper bookMapper) {
this.bookMapper = bookMapper;
}
@Override
public int addBook(Books books) {
return bookMapper.addBook(books);
}
@Override
public int deleteBook(int id) {
return bookMapper.deleteBook(id);
}
@Override
public int updateBook(Books books) {
return bookMapper.updateBook(books);
}
@Override
public Books queryBookById(int id) {
return bookMapper.queryBookById(id);
}
@Override
public List<Books> queryAllBooks() {
return bookMapper.queryAllBooks();
}
}
- controller层注入service
2 查询书籍
controller层
在BookController.java(controller层)
@Controller
@RequestMapping("/book")
public class BookController {
//controller层调用service层
@Autowired
@Qualifier("BookServiceImpl")
private BookService bookService;
//查询全部书籍，返回到书籍展示页面
@RequestMapping("/allBook")
public String list(Model model){
List<Books> list = bookService.queryAllBooks();
model.addAttribute("list",list);
return "allBook";
}
}
通过book / allBook跳转到展示所有书籍页面
queryAllBooks()方法就是查询全部书籍
java后端代码就完成了，如何在前端将页面展示出来呢？
2.1 index.jsp
这是打开网页后的第一个页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>首页</title>
<style>
a{
text-decoration:none;
color: #000000;
font-size: 18px;
}
h3{
width: 180px;
height: 38px;
margin: 100px auto;
text-align: center;
line-height: 38px;
background: #00bfff;
/*border-radius加一个圆角边框*/
border-radius: 5px;
}
</style>
</head>
<body>
<h3>
<a href="${pageContext.request.contextPath}/book/allBook">进入书籍页面</a>
</h3>
</body>
</html>
a href="${pageContext.request.contextPath}/book/allBook"
这句代码通过book下的allBook页面，实现跳转
2.2 allBook.jsp
<html>
<head>
<title>书籍展示页面</title>
<%-- BookStrap 美化界面--%>
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<%--container 栅格系统，把页面分为几个部分--%>
<div class="container">
<div class="row clearfix">
<%--col-md-12 把屏幕分成12份 --%>
<div class="col-md-12 column">
<div class="page-header">
<h1>
<small>书籍列表 ----- 显示所有书籍</small>
</h1>
</div>
</div>
</div>
******************************************************
添加书籍先不用管
<%-- 增加书籍--%>
<div class="row">
<div class="col-md-4 column">
<a class="btn btn-primary" href="${pageContext.request.contextPath}/book/toAllBook"></a>
</div>
</div>
******************************************************
<div class="row clearfix">
<div class="col-md-12 column">
<table class="table table-hover table-striped">
<thead>
<tr>
<th>书籍编号</th>
<th>书籍名称</th>
<th>书籍数量</th>
<th>书籍详情</th>
</tr>
</thead>
<%--书籍从数据库中查出来的，从list中遍历
List<Books> list = bookService.queryAllBooks();
model.addAttribute("list",list);
--%>
<%--从item中遍历，遍历出的值写在book中--%>
<tbody>
<c:forEach var="book" items="${list}">
<tr>
<td>${book.bookID}</td>
<td>${book.bookName}</td>
<td>${book.bookCounts}</td>
<td>${book.detail}</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
</div>
<h1>展示</h1>
</body>
</html>
3 添加书籍
和1 一样 就是把展示变成了添加，加了一部分操作而已
controller层
@Controller
@RequestMapping("/book")
public class BookController {
//controller层调用service层
@Autowired
@Qualifier("BookServiceImpl")
private BookService bookService;
// 跳转到增加书籍页面
@RequestMapping("/toAllBook")
public String toAddPaper(){
return "addBook";
}
// 添加书籍的请求
@RequestMapping("/addBook")
public String addBook(Books books){
bookService.addBook(books);
// 添加完之后，需要重定向，才能跳转回主页面
return "redirect:/book/allBook";
}
}
3.1 addBook.jsp
<body>
<div class="container">
<div class="row clearfix">
<%--col-md-12 把屏幕分成12份 --%>
<div class="col-md-12 column">
<div class="page-header">
<h1>
<small>书籍列表 ----- 新增书籍</small>
</h1>
</div>
</div>
</div>
<%--点击提交，通过action命令，跳转到bookcontroller的book/addBook方法，required参数代表整个表单必须填完才能提交--%>
<form action="${pageContext.request.contextPath}/book/addBook" method="post">
<div class="from-group">
<label>书籍名称</label>
<input type="text" class="from-control" name="bookName" required>
</div>
<div class="from-group">
<label>书籍数量</label>
<input type="text" class="from-control" name="bookCount" required>
</div>
<div class="from-group">
<label >书籍描述</label>
<input type="text" class="from-control" name="detail" required>
</div>
<div class="from-group">
<input type="submit" class="from-control" value="提交" required>
</div>
</form>
</div>
</body>
4 修改、删除书籍
4.1 配置事务
修改书籍，修改后跳转回主页面，会出现底层修改完成，页面没有显示的情况，这里就涉及到事务
在spring-service.xml中，配置事务
<!-- aop事务支持-->
<tx:advice id="txAdvice" transaction-manager="transactionManager">
<tx:attributes>
<tx:method name="*" propagation="REQUIRED"/>
</tx:attributes>
</tx:advice>
<aop:config>
<aop:pointcut id="txPointCut" expression="execution(* com.wwh.dao.*.*(..))"/>
<aop:advisor advice-ref="txAdvice" pointcut-ref="txPointCut"></aop:advisor>
</aop:config>
4.2 controller层
@Controller
@RequestMapping("/book")
public class BookController {
// 跳转到修改页面
@RequestMapping("/toUpdateBook/{bookId}")
public String toupDateBook(@PathVariable("bookId") int id,Model model){
Books books = bookService.queryBookById(id);
Model model1 = model.addAttribute("Qbooks",books);
return "updateBook";
}
// 修改书籍
@RequestMapping("updateBook")
public String updateBook(Books books){
bookService.updateBook(books);
return "redirect:/book/allBook";
}
// 删除书籍
@RequestMapping("/deleteBook/{bookId}")
public String deleteBook(@PathVariable("bookId") int id){
bookService.deleteBook(id);
return "redirect:/book/allBook";
}
}
这里需要在主页面中添加修改和删除按钮
<tbody>
<c:forEach var="book" items="${list}">
<tr>
<td>${book.bookID}</td>
<td>${book.bookName}</td>
<td>${book.bookCounts}</td>
<td>${book.detail}</td>
<td>
<%-- 命令意思为 点击修改，跳转到 book/toUpdateBook（到了controller中），跳转到updateBook页面--%>
<a href="${pageContext.request.contextPath}/book/toUpdateBook/${book.bookID}">修改</a>
|
<a href="${pageContext.request.contextPath}/book/deleteBook">删除</a>
</td>
</tr>
</c:forEach>
</tbody>
这里写updateBook.jsp
<body>
<div class="container">
<div class="row clearfix">
<%--col-md-12 把屏幕分成12份 --%>
<div class="col-md-12 column">
<div class="page-header">
<h1>
<small>修改书籍</small>
</h1>
</div>
</div>
</div>
<%--点击提交，通过action命令，跳转到bookcontroller的book/addBook方法，required参数代表整个表单必须填完才能提交--%>
<form action="${pageContext.request.contextPath}/book/updateBook" method="post">
<%-- 我们提交了修改的sql请求，初次考虑事务，配置完毕后还是失败--%>
<%-- sql语句中，需要我们传入bookId，但是并没有传,但是sql自动穿id，这时候需要隐藏域--%>
<input type="hidden" name="bookId" value="${Qbooks.bookId}">
<div class="from-group">
<label>书籍名称</label>
<input type="text" class="from-control" name="bookName" value="${Qbooks.bookName}" required>
</div>
<div class="from-group">
<label>书籍数量</label>
<input type="text" class="from-control" name="bookCount" value="${Qbooks.bookCounts}" required>
</div>
<div class="from-group">
<label >书籍描述</label>
<input type="text" class="from-control" name="detail" value="${Qbooks.detail}" required>
</div>
<div class="from-group">
<input type="submit" class="from-control" value="提交" required>
</div>
</form>
</div>
</body>
5 查询书籍
5.1 dao层 ==> controller层
- dao层：添加搜索书籍的方法，BookMapper.java中添加
// 搜索书籍
Books queryBookByName(@Param("bookId") String bookName);
同时在BookMapper.xml中添加sql语句
<select id="queryBookByName" resultType="Books">
select * from ssmbuild.books where bookName=#{bookId}
</select>
- service层，注入dao
@Override
public Books queryBookByName(String bookName) {
return bookMapper.queryBookByName(bookName);
}
- controller层，注入service
@Controller
@RequestMapping("/book")
public class BookController {
//controller层调用service层
@Autowired
@Qualifier("BookServiceImpl")
private BookService bookService;
// 查询书籍
@RequestMapping("/queryBook")
public String queryBook(String queryBookName,Model model){
Books books = bookService.queryBookByName(queryBookName);
// 把books对象封装到list中
List<Books> list = new ArrayList<>();
list.add(books);
// 如果查询为空
if (books==null){
List<Books> booksList = bookService.queryAllBooks();
list.add((Books) booksList);
model.addAttribute("error","未查到");
}
model.addAttribute("list",list);
return "allBook";
}
}
5.2.jsp页面
在allBook.jsp页面，添加一个div，把搜索框写出来
<div class="col-md-4 column">
<%--class="form-inline" 把查询框、查询按钮、提示框放在一行--%>
<form class="form-inline" action="${pageContext.request.contextPath}/book/queryBook" method="post" style="float: right">
<span style="color: red;font-weight: bold">${error}</span>
<input type="text" name="queryBookName" class="from-control" placeholder="请输入要查询的书籍名称">
<input type="submit" value="查询" class="btn btn-primary">
</form>
</div>
1245
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
