一贤壁、先根據(jù)上上一篇的SSM整合搭建的內(nèi)容將SSM環(huán)境搭建好
二、在resource目錄下創(chuàng)建一個Mapper文件夾逸尖，在Mapper下創(chuàng)建一個BookMapper.xml，里面編寫SQL查詢語句
注：該系統(tǒng)實現(xiàn)mybatis的方式為接口+xml方式彩扔，所以namespace必須為dao接口的全路徑
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<!--
第二種實現(xiàn)mybatis的方式為：接口+xml方式
這種方式有特別的要求
1. namespace必須是接口的全路徑
2. 每個節(jié)點(diǎn)的id必須是接口中的方法名
3. 該接口中的方法不允許重載，否則namespace+id將不唯一
4. 注意該接口中的增刪改的方法的返回值僻爽，最好使用int
-->
<mapper namespace="com.qianfeng.dao.BookDao">
<!--查詢?nèi)繄D書（進(jìn)行展示）,以及分頁展示-->
<select id="getAllBooks" resultType="com.qianfeng.bean.BookBean">
select * from springmvcbook limit #{start},#{pageSize}
</select>
<!--根據(jù)id刪除圖書-->
<select id="deleteBookById" resultType="com.qianfeng.bean.BookBean">
delete from springmvcbook where id=#{id}
</select>
<!--根據(jù)id獲取這本書的所有信息虫碉，以用于在更新頁面展示出來-->
<select id="getBookById" resultType="com.qianfeng.bean.BookBean">
select * from springmvcbook where id=#{id}
</select>
<!--更新圖書信息-->
<select id="updateBook" resultType="com.qianfeng.bean.BookBean">
update springmvcbook set name=#{name},price=#{price} where id=#{id}
</select>
<!--增加新圖書-->
<select id="addBook" resultType="com.qianfeng.bean.BookBean">
insert into springmvcbook values (default ,#{name},#{price})
</select>
<!--獲取圖書數(shù)量,便于分頁-->
<select id="getBookCount" resultType="int">
select count (1) from springmvcbook
</select>
</mapper>
三、創(chuàng)建dao層胸梆，在里面建一個bookDao接口：
public interface BookDao {
/*查詢?nèi)繄D書（進(jìn)行展示）,以及分頁展示*/
List<BookBean> getAllBooks(BookBean bookBean);
/*根據(jù)id刪除圖書*/
void deleteBookById(int id);
/*根據(jù)id獲取這本書的所有信息敦捧，以用于在更新頁面展示出來*/
BookBean getBookById(int id);
/*更新圖書*/
BookBean updateBook(BookBean bookBean);
/*增加新圖書*/
BookBean addBook(BookBean bookBean);
/*void addBook(BookBean bookBean);要不要返回值都行,因為后面用不到*/
/*獲取圖書數(shù)量，用于分頁*/
int getBookCount();
}
四碰镜、創(chuàng)建service層：
注：1绞惦、注意Service的實現(xiàn)類之上一定要添加service注解
2、因為BookDao是接口洋措，沒有實現(xiàn)類，所以不能new出杰刽，要使用動態(tài)注入dao組件菠发。在上面添加@Resource注解
/**
* 注意Service的實現(xiàn)類之上一定要添加service注解
*/
@Service
public class BookService {
/**
* 動態(tài)注入dao組件
*/
@Resource
private BookDao bookDao;
public List<BookBean> getAllBooks(BookBean bookBean){
return bookDao.getAllBooks(bookBean);
}
public void deleteBookById(int id){
bookDao.deleteBookById(id);
}
public BookBean getBookById(int id){
return bookDao.getBookById(id);
}
public BookBean updateBook(BookBean bookBean){
return bookDao.updateBook(bookBean);
}
public BookBean addBook(BookBean bookBean){
return bookDao.addBook(bookBean);
}
public int getBookCount(){
return bookDao.getBookCount();
}
}
五、創(chuàng)建controller層：
注：要想在頁面展示贺嫂，則用@Controller注解
@Controller
public class BookController {
/**
* 動態(tài)注入service組件
*/
@Resource
private BookService bookService;
/*
* 查詢所有圖書展示
* */
@RequestMapping("/book")
public String getAllBooks(HttpSession session, HttpServletRequest request,BookBean bookBean){
/*
* 想要點(diǎn)擊下一頁時數(shù)據(jù)變化滓鸠，一定要將注意執(zhí)行順序，
* 即分頁的這幾行代碼要放在展示代碼之上第喳。原因是如果順序不對就會在執(zhí)行分頁之前就
* 執(zhí)行了查詢語句糜俗，start不變，查的一直是limit（0,5）
* */
int count = bookService.getBookCount();
String paging = Paging.getPage(bookBean,count,"/book",request.getParameterMap());
session.setAttribute("paging",paging);
/*
* 向bookService.getAllBook(bookBean)中放bookBean曲饱，是為了
* 獲取start悠抹，pageSize，currentPage分頁扩淀，因為bookBean
* 繼承于BaseBeen
* */
List<BookBean> list = bookService.getAllBooks(bookBean);
session.setAttribute("list",list);
return "book.jsp";
}
/*
* 根據(jù)id刪除圖書
* */
@GetMapping("/deleteById/{id}")
public String deleteBookById(@PathVariable int id){
bookService.deleteBookById(id);
return "redirect:/book";
}
/*
* 根據(jù)id獲取這本書的信息楔敌，并展示在更新頁面中
* */
@GetMapping("/getBookById/{id}")
public String toUpdatePage(@PathVariable int id,HttpSession session){
BookBean book = bookService.getBookById(id);
session.setAttribute("book",book);
return "update.jsp";
}
/*
* 更新
* */
@PostMapping("/update")
public String updateBook(BookBean bookBean){
bookService.updateBook(bookBean);
return "redirect:/book";
}
/*
* 跳轉(zhuǎn)增加頁面
* */
@GetMapping("/toAddPage")
public String toAddPage(){
return "add.jsp";
}
/*
* 增加操作
* */
@PostMapping("/addBook")
public String addBook(BookBean bookBean){
bookService.addBook(bookBean);
return "redirect:/book";
}
}
六、頁面編寫驻谆。(運(yùn)用了boostrap改變了表格效果等卵凑，即鼠標(biāo)移動到哪一列哪一列變?yōu)樯钌４a可去w3cschool復(fù)制胜臊，然后進(jìn)行修改)
1勺卢、書架展示頁面book.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<style>
#paging{
position: absolute;
bottom: 30px;
left: 0;
}
</style>
<link rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script></head><body><table class="table table-hover">
<thead>
<tr>
<th>編號</th>
<th>書名</th>
<th>價格</th>
<th>其他</th>
</tr>
</thead>
<tbody>
<c:forEach items="${list}" var="item">
<tr>
<td >${item.id}</td>
<td >${item.name}</td>
<td >${item.price}</td>
<td><a href="/getBookById/${item.id}">修改</a>
<a href="/deleteById/${item.id}">刪除</a>
</td>
</tr>
</c:forEach>
<div>
<button><a href="/toAddPage">添加新書</a></button>
</div>
</tbody></table></body>
<div id="paging">${paging}</div>
</html>
效果圖如下：
book.jsp.png
2、更新頁面update.jsp
<html>
<head>
<title>修改</title>
</head>
<link rel="stylesheet" >
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script></head><body><form class="form-horizontal" role="form" method="post" action="/update">
<div class="form-group">
<label for="id" class="col-sm-2 control-label">編號</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="id" name="id" readonly="readonly" value="${book.id}"
placeholder="編號">
</div>
</div>
<div class="form-group">
<label for="name" class="col-sm-2 control-label">書名</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" value="${book.name}"
placeholder="請輸入新的書名">
</div>
</div>
<div class="form-group">
<label for="price" class="col-sm-2 control-label">價格</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="price" name="price" value="${book.price}"
placeholder="請輸入新的價格">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">修改</button>
</div>
</div></form></body>
</html>
效果圖如下：
update.jsp.png
3象对、增加頁面add.jsp
<html>
<head>
<title>增加</title>
</head>
<link rel="stylesheet" >
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script></head><body><form class="form-horizontal" role="form" method="post" action="/addBook">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">書名</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name"
placeholder="請輸入新書書名">
</div>
</div>
<div class="form-group">
<label for="price" class="col-sm-2 control-label">價格</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="price" name="price"
placeholder="請輸入新書價格">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">提交</button>
</div>
</div></form></body>
</html>
效果圖如下：
add.jsp.png
