技術文章 » SSM整合實戰【一】---簡單的書籍管理系統CRUD（後續一點點更新功能）

SSM整合實戰【一】---簡單的書籍管理系統CRUD（後續一點點更新功能）

2020-08-14 19:09:35

SSM整合實戰【一】

  • 歷時一個半月的框架學習，總算入了個小門，SSM專案整合時做了個簡單的crud框子，後續會新增一些功能
  • 這個小demo整體的技術棧非常簡單：SpringIOC+Mybatis+SpringMVC+Mysql8.0+c3p0+jsp+EL+JSTL+bootstrap+tomcat8.5，構建工具用的maven，，新手拿來練手是非常不錯的小demo

一、框架搭建

1、數據層

框架整合請參考下面 下麪兩篇部落格，本篇部落格只有controller層和檢視層，dao、service、pojo以及組態檔在下面 下麪兩篇部落格中：

2、數據庫記錄

在这里插入图片描述

二、模組劃分

因爲專案比較小，所以整體只用了一個總maven工程，下面 下麪是目錄結構
在这里插入图片描述

三、首頁

index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>首頁</title>
    <style>
      h1{
        width: 280px;
        height: 120px;
        line-height: 120px;
        margin: 200px auto;
        text-align: center;
        font-family: "新宋體";
        background-color: cadetblue;
        border-radius: 10px;
      }
      a{
        text-decoration: none;
        }
    </style>
  </head>
  <body>
  <h1><a href="${pageContext.request.contextPath}/book/allBook">查詢全部書籍</a></h1>
  </body>
</html>

在这里插入图片描述

四、controller層

package cn.kexing.contoller;

import cn.kexing.pojo.Books;
import cn.kexing.service.BookServiceImpl;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Qualifier;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import java.util.List;

@Controller
@RequestMapping("/book")
public class BookController {
    @Autowired
    @Qualifier(value = "bookService")
    private BookServiceImpl bookService;

    @RequestMapping("/allBook")
    public String selectAllBook(Model model){
        List<Books> books = bookService.selectAllBooks();
        model.addAttribute("books",books);
        return "admin_book";
    }

    //新增書籍
    @RequestMapping("/toaddbook")
    public String toAddBook(){
        return "toAddBook";
    }

    //新增書籍增加到數據庫
    @RequestMapping("/addbook")
    public String addBook(Books book){
        bookService.addBook(book);
        return "redirect:/book/allBook";
    }

    //修改頁面
    @RequestMapping("/toupdatebook")
    public String toUpdateBook(int bookID,Model model){
        Books book = bookService.selectBookForID(bookID);
        model.addAttribute("QBook",book);
        return "toUpdateBook";
    }

    //修改書籍到數據庫
    @RequestMapping("/updatebook")
    public String updateBook(Books book){
        bookService.updateBook(book);
        return "redirect:/book/allBook";
    }

    //刪除書籍
    @RequestMapping("/deletebook")
    public String deleteBook(int bookID){
        bookService.deleteBookForID(bookID);
        return "redirect:/book/allBook";
    }

    @RequestMapping("/searchbooks")
     public String searchBooks(String searchName,Model model){
        List<Books> books = bookService.selectBookForName(searchName);
        model.addAttribute("books",books);
        return "admin_book";
    }
}

五、書籍展示

1、controller業務

RequestMapping：/book/allBook

    public String selectAllBook(Model model){
        List<Books> books = bookService.selectAllBooks();
        model.addAttribute("books",books);
        return "admin_book";
    }

2、admin_book.jsp檢視展示

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>

    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <title>Title</title>
</head>
<body>
    <div class="container">
        <div class="row clearfix">
            <div class="col-md-12">
                <h1 class="page-header">
                    <small>書籍展示</small>
                </h1>
            </div>
        </div>

        <div class="col-md-1">
            <button class="btn btn-default" type="submit" ><a href="/book/toaddbook">新增書籍</a></button>
        </div>

        <div class="col-md-4">
            <button class="btn btn-default" type="submit" ><a href="/book/allBook">查詢全部書籍</a></button>
        </div>

        <div class="col-md-4" style="float: right;position: relative;bottom: 8px">
            <form class="navbar-form navbar-left" role="search" action="/book/searchbooks" method="post">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="請輸入書籍名稱" name="searchName">
                    <button type="submit" class="btn btn-default">搜尋</button>
                </div>
            </form>
        </div>
        <div class="row clearfix">
            <div class="col-md-12">
                <table class="table table-hover table-bordered">
                    <tr>
                        <th>書籍ID</th>
                        <th>書籍名稱</th>
                        <th>書籍數量</th>
                        <th>書籍詳情</th>
                        <th>操作</th>
                    </tr>

                    <c:forEach var="book" items="${books}">
                        <tr>
                        <td>${book.bookID}</td>
                        <td>${book.bookName}</td>
                        <td>${book.bookCounts}</td>
                        <td>${book.detail}</td>
                         <td>
                             <a href="/book/toupdatebook?bookID=${book.bookID}">修改</a>
                             &nbsp;|&nbsp;
                             <a href="/book/deletebook?bookID=${book.bookID}">刪除</a>
                         </td>
                        </tr>
                    </c:forEach>
                </table>
            </div>
        </div>
    </div>
</body>
</html>

在这里插入图片描述

六、新增書籍

1、controller業務

總RequestMapping：/book

    //新增書籍
    @RequestMapping("/toaddbook")
    public String toAddBook(){
        return "toAddBook";
    }

    //新增書籍增加到數據庫
    @RequestMapping("/addbook")
    public String addBook(Books book){
        bookService.addBook(book);
        return "redirect:/book/allBook";
    }

2、toAddBook.jsp檢視展示

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <title>Title</title>
</head>
<body>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12">
            <h1 class="page-header">
                <small>增加書籍</small>
            </h1>
        </div>

        <div class="row clearfix">
            <div class="col-md-12">
                <form class="form-horizontal" action="/book/addbook" method="post">

                    <div class="form-group">
                        <label for="bookName" class="col-sm-2 control-label">書籍名稱</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="bookName" name="bookName" placeholder="書籍名稱">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="bookCounts" class="col-sm-2 control-label">書籍數量</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="bookCounts" name="bookCounts" placeholder="書籍數量">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="detail" class="col-sm-2 control-label">書籍詳情</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="detail" name="detail" 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>
            </div>
        </div>
    </div>

</body>
</html>

在这里插入图片描述

七、修改刪除書籍

1、controller業務

//修改頁面
    @RequestMapping("/toupdatebook")
    public String toUpdateBook(int bookID,Model model){
        Books book = bookService.selectBookForID(bookID);
        model.addAttribute("QBook",book);
        return "toUpdateBook";
    }

    //修改書籍到數據庫
    @RequestMapping("/updatebook")
    public String updateBook(Books book){
        bookService.updateBook(book);
        return "redirect:/book/allBook";
    }

    //刪除書籍
    @RequestMapping("/deletebook")
    public String deleteBook(int bookID){
        bookService.deleteBookForID(bookID);
        return "redirect:/book/allBook";
    }

2、toUpdateBook.jsp檢視展示

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <title>Title</title>
</head>
<body>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12">
            <h1 class="page-header">
                <small>修改書籍</small>
            </h1>
        </div>

        <div class="row clearfix">
            <div class="col-md-12">
                <form class="form-horizontal" action="/book/updatebook" method="post">
                    <div class="form-group">
                        <div class="col-sm-10">
                            <input type="hidden" class="form-control" id="bookID" name="bookID" value="${QBook.bookID}" placeholder="書籍ID">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="bookName" class="col-sm-2 control-label">書籍名稱</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="bookName" name="bookName" value="${QBook.bookName}" placeholder="書籍名稱">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="bookCounts" class="col-sm-2 control-label">書籍數量</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="bookCounts" name="bookCounts" value="${QBook.bookCounts}" placeholder="書籍數量">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="detail" class="col-sm-2 control-label">書籍詳情</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="detail" name="detail" value="${QBook.detail}" 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>
            </div>
        </div>
    </div>
</body>
</html>

在这里插入图片描述

八、模糊查詢

    <select id="selectBookForName" parameterType="String" resultType="books">
        select * from books
        <where>
            <if test="bookName != null and bookName !=''">
                AND bookName like "%"#{bookName}"%"
            </if>
        </where>
    </select>

    @RequestMapping("/searchbooks")
     public String searchBooks(String searchName,Model model){
        List<Books> books = bookService.selectBookForName(searchName);
        model.addAttribute("books",books);
        return "admin_book";
    }

在这里插入图片描述