IDEA_BAIMG5f506967e7bce76234b880b7.jpg

  • 历时一个半月的框架学习,总算入了个小门,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";
    }

在这里插入图片描述

最后修改:2021 年 11 月 15 日 05 : 21 PM
如果觉得我的文章对你有用,请随意赞赏