一、先根据上上一篇的SSM整合搭建的内容将SSM环境搭建好

二、在resource目录下创建一个Mapper文件夹，在Mapper下创建一个BookMapper.xml，里面编写SQL查询语句

注：该系统实现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">


<!--
    第二种实现mybatis的方式为：接口+xml方式
    这种方式有特别的要求
        1.  namespace必须是接口的全路径
        2.  每个节点的id必须是接口中的方法名
        3.  该接口中的方法不允许重载，否则namespace+id将不唯一
        4.  注意该接口中的增删改的方法的返回值，最好使用int
-->
<mapper namespace="com.qianfeng.dao.BookDao">

    <!--查询全部图书（进行展示）,以及分页展示-->
    <select id="getAllBooks" resultType="com.qianfeng.bean.BookBean">
        select * from springmvcbook limit #{start},#{pageSize}
    </select>

    <!--根据id删除图书-->
    <select id="deleteBookById" resultType="com.qianfeng.bean.BookBean">
        delete from springmvcbook where id=#{id}
    </select>

    <!--根据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>

    <!--获取图书数量,便于分页-->
    <select id="getBookCount" resultType="int">
        select count (1) from springmvcbook
    </select>
</mapper>

三、创建dao层，在里面建一个bookDao接口：

public interface BookDao {

    /*查询全部图书（进行展示）,以及分页展示*/
    List<BookBean> getAllBooks(BookBean bookBean);

    /*根据id删除图书*/
    void deleteBookById(int id);

    /*根据id获取这本书的所有信息，以用于在更新页面展示出来*/
    BookBean getBookById(int id);

    /*更新图书*/
    BookBean updateBook(BookBean bookBean);

    /*增加新图书*/
    BookBean addBook(BookBean bookBean);
    /*void addBook(BookBean bookBean);要不要返回值都行,因为后面用不到*/

    /*获取图书数量，用于分页*/
    int getBookCount();
}

四、创建service层：

注：1、注意Service的实现类之上一定要添加service注解
2、因为BookDao是接口，没有实现类，所以不能new出，要使用动态注入dao组件。在上面添加@Resource注解

/**
 * 注意Service的实现类之上一定要添加service注解
 */
@Service
public class BookService {

    /**
     * 动态注入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();
    }
}

五、创建controller层：

注：要想在页面展示，则用@Controller注解

@Controller
public class BookController {

    /**
     * 动态注入service组件
     */
    @Resource
    private BookService bookService;


    /*
    * 查询所有图书展示
    * */
    @RequestMapping("/book")
    public String getAllBooks(HttpSession session, HttpServletRequest request,BookBean bookBean){

        /*
         * 想要点击下一页时数据变化，一定要将注意执行顺序，
         * 即分页的这几行代码要放在展示代码之上。原因是如果顺序不对就会在执行分页之前就
         * 执行了查询语句，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";
    }

    /*
    * 根据id删除图书
    * */
    @GetMapping("/deleteById/{id}")
    public String deleteBookById(@PathVariable int id){
        bookService.deleteBookById(id);
        return "redirect:/book";
    }


    /*
    * 根据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";
    }


    /*
    * 跳转增加页面
    * */
    @GetMapping("/toAddPage")
    public String toAddPage(){
        return "add.jsp";
    }



    /*
    * 增加操作
    * */
    @PostMapping("/addBook")
    public String addBook(BookBean bookBean){
        bookService.addBook(bookBean);
        return "redirect:/book";
    }
}

六、页面编写。(运用了boostrap改变了表格效果等，即鼠标移动到哪一列哪一列变为深色。代码可去w3cschool复制，然后进行修改)

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 href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="//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" href="//apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//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" href="//apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//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