关于ssm框架的整合(二) 2021.05.10

最新推荐文章于 2023-05-21 20:55:35 发布

zzn的进阶笔记

最新推荐文章于 2023-05-21 20:55:35 发布

阅读量114

点赞数

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/weixin_49092494/article/details/116616313

版权

JavaWeb 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

对于上一章总结出来的是ssm框架的架子，就是配置文件这些，搭猪圈，这一节的整合是关于一些前端方向的，这一节的整合十分重要，主要是讲前后端的交互！

首先创建一个allBook.jsp文件，用的boostrap来设置样式，这个jsp文件主要是从数据库中获取到所有的书籍信息优美的展示到客户端中.

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 13721
  Date: 2021/5/7
  Time: 23:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>

    <style>
        a{
            text-decoration: none;
            color: black;
            font-size: 5px;
        }
    </style>

    <link href="<c:url value="/webjars/bootstrap/4.6.0/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 class="row">
            <div class="col-md-4 column">
            <%-- 新增书籍 toAddbook 点击跳转到toAddBook--%>
                <a href="${pageContext.request.contextPath}/book/toAddBook" class="btn btn-primary">新增书籍</a>
            </div>
        </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>
<%--书籍从数据库中查询出来，从这个list中遍历出来:foreach--%>
            <tbody>
            <c:forEach var="books" items="${list}">
                <tr>
                    <td>${books.bookID}</td>
                    <td>${books.bookName}</td>
                    <td>${books.bookCounts}</td>
                    <td>${books.detail}</td>
                    <td>
                    <%--这句代码就很有趣就是把当前页面获取到的提交给修改页面去  --%>
                        <a href="<c:url value="/book/toUpdate?id=${books.bookID}"/>">修改</a>
                        &nbsp; | &nbsp;
                        <a href="<c:url value="/book/deleteBook/${books.bookID}"/>">删除</a>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>
</div>
</div>
</body>
</html>

与以上代码做交互要有一个controller类，业务是以下代码的第一个@RequestMapping(“allBook”)的这一块儿

package cn.com.zzn.controller;

import cn.com.zzn.pojo.Books;
import cn.com.zzn.service.BookService;
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.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.List;

@Controller
@RequestMapping("/book")
public class BookController {
    //controller 调service层
    @Autowired
    @Qualifier("BookServiceImpl")//注入指定的包
    private BookService bookService;//把这一层注入进来

    //查询全部的书籍，并且返回到一个书籍展示页面
    @RequestMapping("allBook")
    public String list(Model model){
        List<Books> list = bookService.queryAllBook();
        model.addAttribute("list",list);
        return "/allBook";
    }
    //跳转到增加书籍页面
    @RequestMapping("/toAddBook")
    public String toAddPaper(){
        return "/addBook";
    }
    //添加书籍的请求
    @RequestMapping("/addBook")
    public String addBook(Books books){//前端传入的books
        System.out.println("addBook=>"+books);
        bookService.addBook(books);
        return "redirect:/book/allBook";//重定向到我们的@RequestMapping("/allBook")请求
    }
    //跳转到修改页面
    @RequestMapping("/toUpdate")
    public String toUpdatePaper(int id,Model model){
        Books books = bookService.queryBookById(id);
        model.addAttribute("QBook",books);
        return "/updateBook";
    }
    //修改书籍
    @RequestMapping("/updateBook")
    public String updateBook(Books books){
        System.out.println("updateBook=>"+books);
        bookService.updateBookById(books);
        return "redirect:/book/allBook";
    }
    //删除书籍
    @RequestMapping("/deleteBook/{bookId}")
    public String deleteBookById(@PathVariable("bookId") int id){
        System.out.println("删除成功");
        bookService.deleteBookById(id);
        return "redirect:/book/allBook";
    }
}

第二个页面是addBook.jsp页面，这个页面主要是执行添加数据到数据库以及更新页面上的数据同步
对于一个比较需要注意的一点： <%–label for里面的东西点击可以实现定位–%>这个挺细节的还是注意一下

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 13721
  Date: 2021/5/10
  Time: 17:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>

    <link href="<c:url value="/webjars/bootstrap/4.6.0/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表单的信息交给/book/addBook然后通过controller去将这些信息插入到数据库
        --%>
    <form action="<c:url value="/book/addBook"/>" method="">
        <div class="form-group">
            <label for="bkname">书籍名称</label>
        <%--label for里面的东西点击实现定位--%>
            <input type="text"  name="bookName" class="form-control" id="bkname" />
        </div>
        <div class="form-group">
            <label for="bk2">书籍数量</label>
            <input type="text" name="bookCounts"  class="form-control" id="bk2" />
        </div>
        <div class="form-group">
            <label for="bk3">书籍的描述</label>
            <input type="text"  name="detail" class="form-control" id="bk3" />
        </div>
        <div class="form-group">
            <input type="submit"  class="form-control" value="添加" />
        </div>
    </form>

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

跟客户端互相对应的服务端，注意点是要进行重定向.

//跳转到增加书籍页面
@RequestMapping("/toAddBook")
public String toAddPaper(){
    return "/addBook";
}
//添加书籍的请求
@RequestMapping("/addBook")
public String addBook(Books books){//前端传入的books
    System.out.println("addBook=>"+books);
    bookService.addBook(books);
    return "redirect:/book/allBook";//重定向到我们的@RequestMapping("/allBook")请求
}

第三部分浪费时间最多的一部分，这一部分自己耽搁的时间最多其实还是很好理解的.

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 13721
  Date: 2021/5/10
  Time: 18:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>修改书籍</title>

    <link href="<c:url value="/webjars/bootstrap/4.6.0/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表单的信息交给/book/addBook然后通过controller去将这些信息插入到数据库
    --%>
    <form action="${pageContext.request.contextPath}/book/updateBook" method="post">

<%--   出现的问题:我们提交了修改的sql请求，但是修改失败，初次考虑,是事务问题，配置完毕事务,依旧失败--%>
<%--   看一下sql语句,能否执行成功:sql执行失败修改未完成--%>
<%--    前端传递隐藏域--%>
    <input type="hidden" name="bookID" value="${QBook.bookID}">
        <div class="form-group">
            <label for="bkname">书籍名称</label>
            <%--label for里面的东西点击实现定位--%>
            <input type="text"  name="bookName" value="${QBook.bookName}" class="form-control" id="bkname"/>
        </div>
        <div class="form-group">
            <label for="bk2">书籍数量</label>
            <input type="text" name="bookCounts" value="${QBook.bookCounts}" class="form-control" id="bk2"/>
        </div>
        <div class="form-group">
            <label for="bk3">书籍的描述</label>
            <input type="text"  name="detail" value="${QBook.detail}" class="form-control" id="bk3"/>
        </div>
        <div class="form-group">
            <input type="submit"  class="form-control" value="修改" />
        </div>
    </form>

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

     //跳转到修改页面
    @RequestMapping("/toUpdate")
    public String toUpdatePaper(int id,Model model){
        Books books = bookService.queryBookById(id);
        model.addAttribute("QBook",books);
        return "/updateBook";
    }
    //修改书籍
    @RequestMapping("/updateBook")
    public String updateBook(Books books){
        System.out.println("updateBook=>"+books);
        bookService.updateBookById(books);
        return "redirect:/book/allBook";
    }

删除功能就很奇怪了，自己在接口的实现类文件中多打了一个空格它就一直显示找不到，这个问题找了接近两个小时裂开啊
前端a标签加一个这个代码

  <a href="<c:url value="/book/deleteBook/${books.bookID}"/>">删除</a>

后端写一个对应，这是最简单的功能实现.

 //删除书籍
    @RequestMapping("/deleteBook/{bookId}")
    public String deleteBookById(@PathVariable("bookId") int id){
        System.out.println("删除成功");
        bookService.deleteBookById(id);
        return "redirect:/book/allBook";
    }

zzn的进阶笔记

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于ssm框架的整合(二) 2021.05.10

对于上一章总结出来的是ssm框架的架子，就是配置文件这些，搭猪圈，这一节的整合是关于一些前端方向的，这一节的整合十分重要，主要是讲前后端的交互！首先创建一个allBook.jsp文件，用的boostrap来设置样式，这个jsp文件主要是从数据库中获取到所有的书籍信息优美的展示到客户端中.<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><%-- Created by IntelliJ IDEA. U
复制链接

扫一扫

专栏目录