SSM功法第三层

最新推荐文章于 2023-02-25 12:31:23 发布

start飞

最新推荐文章于 2023-02-25 12:31:23 发布

阅读量210

点赞数 2

分类专栏： SSM

本文链接：https://blog.csdn.net/weixin_44470438/article/details/105339721

版权

SSM 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文说明：以下整理是基于B站上狂神说的SSM整合视频总结而成，在狂神说公众号里有源码，我为了巩固自己这方面的知识，就手撸了一遍，并把每一步是如何执行的整合出来。
相比之前，做了如下的工作
1.首先优化了首页，使首页有一个进入图书管理系统的链接；
2.增加了页面上的增删改查的功能
废话不多说，开始整理：

1.首页的优化：

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/4/5 0005
  Time: 16:23
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>首页</title>
      <style type="text/css">
          a {
              text-decoration: none;
              color: black;
              font-size: 18px;
          }
          h3 {
              width: 300px;
              height: 100px;
              position:absolute;
              left:0;
              top: 0;
              bottom: 0;
              right: 0;
              margin: auto;
              text-align: center;
              line-height: 100px;
              background: deepskyblue;
              border-radius: 20px;
          }
      </style>
  </head>
  <body>
 <h3>
   <a href="${pageContext.request.contextPath}/book/allBook">进入书籍展示页面</a>
 </h3>
  </body>
</html>

效果图如下：
在这里插入图片描述
2.点击进去，便可以查询到所有数据库的图书存储，而具体实现针对控制器的如下方法：

 //查询全部书籍
    @RequestMapping("/allBook")
    public String list(Model model) {
        List<Books> list = bookService.selectAll();
        model.addAttribute("list",list);
        return "allbook";
    }

allbook.jsp的页面编写如下：

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>书籍列表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container">

    <div class="row clearfix">
        <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/toAddBook">新增</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>
                    <th>操作</th>
                </tr>
                </thead>

                <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>
                            <a href="${pageContext.request.contextPath}/book/toUpdateBook?id=${book.bookId}">更改</a> |
                            <a href="${pageContext.request.contextPath}/book/del/${book.bookId}">删除</a>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>
    </div>
</div>

在上述页面中有新增功能，修改功能，删除功能：

(1)新增功能

<div class="row">
        <div class="col-md-4 column">
            <a class="btn btn-primary" href="${pageContext.request.contextPath}/book/toAddBook">新增</a>
        </div>
    </div>

点击新增按钮，系统会执行controller的如下方法：

@RequestMapping("/toAddBook")
    public String add() {
        return "addBook";
    }

然后跳转到addBook.jsp页面:

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/4/4 0004
  Time: 17:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>新增书籍</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">

    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="page-header">
                <h1>
                    <small>新增书籍</small>
                </h1>
            </div>
        </div>
    </div>
    <form action="${pageContext.request.contextPath}/book/addBook" method="post">
        书籍名称：<input type="text" name="bookName"><br><br><br>
        书籍数量：<input type="text" name="bookCounts"><br><br><br>
        书籍详情：<input type="text" name="detail"><br><br><br>
        <input type="submit" value="添加">
    </form>

</div>
</body>
</html>

效果图如下：
在这里插入图片描述
传进来以后添加书籍名称、数量、详情，然后点击添加按钮，然后就会提交到：/book/addBook,即要执行controller的如下方法：

@RequestMapping("/addBook")
    public String addBook(Books books) {
        bookService.addBook(books);
        return "redirect:/book/allBook";
    }

然后页面会重定向到 /book/allBook页面，会把数据库中所有的数据重新展示出来

效果图：
在这里插入图片描述
至此，新增功能及展示页面就整理好了。可以看到上述页面中有更改和删除功能：
更改、删除按钮对应的脚本语言为：

<td>
  <a href="${pageContext.request.contextPath}/book/toUpdateBook?id=${book.bookId}">更改</a> |
  <a href="${pageContext.request.contextPath}/book/del/${book.bookId}">删除</a>
</td>

注意：如下获取参数用了两种风格：传统风格，和restful风格。（不得不说狂神是真的牛逼呀！）
点击更改按钮，会进入：/book/toUpdateBook 相对应的会执行controller的如下方法：

//修改
    @RequestMapping("/toUpdateBook")
    public String toUpdateBook(Model model, int id) {
        Books books = bookService.selectById(id);
        model.addAttribute("book",books );
        return "updateBook";
    }

书籍根据要修改的书籍的id，找到该书的全部信息，并且将该书的信息传递给updateBook.jsp页面：

updateBook.jsp：

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/4/4 0004
  Time: 17:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>修改信息</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">

    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="page-header">
                <h1>
                    <small>修改信息</small>
                </h1>
            </div>
        </div>
    </div>

    <form action="${pageContext.request.contextPath}/book/updateBook" method="post">
        <input type="hidden" name="bookId" value="${book.bookId}"/>
        书籍名称：<input type="text" name="bookName" value="${book.bookName}"/>
        书籍数量：<input type="text" name="bookCounts" value="${book.bookCounts}"/>
        书籍详情：<input type="text" name="detail" value="${book.detail}"/>
        <input type="submit" value="提交"/>
    </form>

</div>
</body>
</html>

然后点击提交按钮，会将信息提交到 /book/updateBook，controller会执行如下方法：

@RequestMapping("/updateBook")
    public String updateBook(Model model, Books book) {
        bookService.update(book);
       // Books books = bookService.selectById(book.getBookId());
        //model.addAttribute("books", books);
        return "redirect:/book/allBook";
    }

说明：在看公众号时，狂神有上面注释的两行代码，我想，要是返回结果时整个数据库的所有书籍，那么这两行其实不需要，而且也不能重定向到 /book/allBook" 因为该页面会使控制器查询所有书籍
如果说要单独显示修改的书籍，那就加上，并且应该以集合的形式传递给前端，而且需要重新定义方法，使只把该书的信息以集合的形式输出到前端。

就剩最后的删除功能了，加油！
当点击删除按钮的时候，系统会获取当前书籍的id，并跳转到 /book/del，然后执行controller的如下方法：

@RequestMapping("/del/{bookId}")
    public String deleteBook(@PathVariable("bookId") int id) {
        bookService.delete(id);
        return "redirect:/book/allBook";
    }

并最终跳转到查询所有书籍的页面 /book/allBook，至此，一个简单的增删改查的功能就在网页上实现了。下一层，将把拦截器加入，对网页进行进一步的优化

上面的controller的方法都是一个一个写出来，这里把完整的controller的代码附上：

package com.fei.controller;


import com.fei.pojo.Books;
import com.fei.servie.BookService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Qualifier;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.ArrayList;
import java.util.List;


@org.springframework.stereotype.Controller
@RequestMapping("/book")
public class Controller {
    @Autowired
    @Qualifier("BookServiceImpl")
    private BookService bookService;

    public void setBookService(BookService bookService) {
        this.bookService = bookService;
    }

    //查询全部书籍
    @RequestMapping("/allBook")
    public String list(Model model) {
        List<Books> list = bookService.selectAll();
        model.addAttribute("list",list);
        return "allbook";
    }

    @RequestMapping("/toAddBook")
    public String add() {
        return "addBook";
    }
    @RequestMapping("/addBook")
    public String addBook(Books books) {
        bookService.addBook(books);
        return "redirect:/book/allBook";
    }

    //修改
    @RequestMapping("/toUpdateBook")
    public String toUpdateBook(Model model, int id) {
        Books books = bookService.selectById(id);
        model.addAttribute("book",books );
        return "updateBook";
    }
    @RequestMapping("/updateBook")
    public String updateBook(Model model, Books book) {
        bookService.update(book);
//        List<Books> list = new ArrayList<Books>();
//        Books books = bookService.selectById(book.getBookId());
//        list.add(books);
//        model.addAttribute("books", list);
        return "redirect:/book/allBook";
    }
    

    @RequestMapping("/del/{bookId}")
    public String deleteBook(@PathVariable("bookId") int id) {
        bookService.delete(id);
        return "redirect:/book/allBook";
    }
}

start飞

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SSM功法第三层

本文说明：以下整理是基于B站上狂神说的SSM整合视频总结而成，在狂神说公众号里有源码，我为了巩固自己这方面的知识，就手撸了一遍，并把每一步是如何执行的整合出来。相比之前，做了如下的工作1.首先优化了首页，使首页有一个进入图书管理系统的链接；2.增加了页面上的增删改查的功能废话不多说，开始整理：1.首页的优化：<%-- Created by IntelliJ IDEA. ...
复制链接

扫一扫