[JavaScript知识库] SpringMVC11-CRUD

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> SpringMVC11-CRUD -> 正文阅读

[JavaScript知识库]SpringMVC11-CRUD

7.1查询功能

step1 . 编写一个Controller功能，实现查询图书列表

通过注解定义使其成为一个控制器，类请求路径为 /book，内置了一个 BookService 对象以执行业务，这个对象通过自动装配的方式注入！

@Controller
@RequestMapping("/book")
public class BooksController {
    /*
     service层持有Dao层
    *Controller层持有Service层
    * */
    // 自动装配 bean
    @Autowired
    @Qualifier("BookServiceImpl")
    private BookService bookService;
    /*查询全部书籍并且返回到一个书籍列表页面*/
    @RequestMapping("/allbook")
    public String list(Model model){
        List<Books> books = bookService.queryAllBook();
        model.addAttribute("list", books);
        return "booksList";
    }

}

此处需要记住：

1 service层持有dao层

2、controller层持有service层
持有的都是接口

Step 2 .在web/WEB-INF/jsp/创建booksList.jsp

先编写首页 index.jsp，从首页可以进入书籍列表的页面（简单设置了一下样式）

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE HTML>
<html>
<head>
  <title>首页</title>
  <style type="text/css">
    a {
      text-decoration: none;
      color: black;
      font-size: 18px;
    }
    h3 {
      width: 180px;
      height: 38px;
      margin: 100px auto;
      text-align: center;
      line-height: 38px;
      background: deepskyblue;
      border-radius: 4px;
    }
  </style>
</head>
<body>
<h3>
  <a href="${pageContext.request.contextPath}/book/booksList">点击进入列表页</a>
</h3>
</body>
</html>

在web/WEB-INF/jsp/创建booksList.jsp,然后是 booksList.jsp 页面，展示所有书籍并提供选项进行新增书籍、删除书籍、修改书籍操作（用到了 jstl 标签，需要导入 jstl 包和 standard 包！），这个页面是可以复用的

<%@ 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>书籍列表 —— baifu</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="${requestScope.get('booksList')}">
                    <tr>
                        <td>${book.getBookID()}</td>
                        <td>${book.getBookName()}</td>
                        <td>${book.getBookCounts()}</td>
                        <td>${book.getDetail()}</td>
                        <td>
                            <a href="${pageContext.request.contextPath}/book/updateBook?id=${book.getBookID()}">更改</a> |
                            <a href="${pageContext.request.contextPath}/book/deleteBook/${book.getBookID()}">删除</a>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>
    </div>
</div>

step3 在测试可以跳转，我们引入bootstrap优化效果

<%@ 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.staticfile.org/twitter-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>书籍列表 —— baifu</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="${requestScope.get('booksList')}">
                    <tr>
                        <td>${book.getBookID()}</td>
                        <td>${book.getBookName()}</td>
                        <td>${book.getBookCounts()}</td>
                        <td>${book.getDetail()}</td>
                        <td>
                            <a href="${pageContext.request.contextPath}/book/updateBook?id=${book.getBookID()}">更改</a> |
                            <a href="${pageContext.request.contextPath}/book/deleteBook/${book.getBookID()}">删除</a>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>
    </div>
</div>

7.2 添加书籍功能

新增书籍的业务流程：

用户点击新增书籍选项发起请求
控制器处理请求跳转到新增书籍页面
输入新增书籍信息，提交信息
控制器调用业务层保存信息

step 1 ，我们需要有一个新增图书的按钮,在booksList.jsp里面，增加一个新增按钮

        <%--操作按钮--%>
        <div class="row">
            <div class="col-md-4 column">
                <%--toAddPaper--%>
                <a class="btn btn-primary" href="${pageContext.request.contextPath}/book/toAddBookPage">新增</a>
            </div>
        </div>

step 2. 编写跳转新增图书页面的功能

public class BooksController {
 	.....
         /*跳转到增加书籍页面*/
    @RequestMapping("/toAddBookPage")
    public String toAddPaper(Model model) {
        return "addBook";
    }
    ....
}

step 3. 在/web-inf/jsp/下面新建一个addBook.jsp页面，可以添加图书

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>allBook</title>
    <%--bootstrap美化界面--%>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="page-header">
                <h1><small class="center">新增书籍</small></h1>
            </div>
        </div>
    </div>
    <%--书籍表单--%>
    <form class="form-horizontal" action="${pageContext.request.contextPath}/book/addBook" method="post">
        <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">书籍名称</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="inputEmail3" placeholder="书籍名称" name="bookName" required>
            </div>
        </div>

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

        <div class="form-group">
            <label for="bkdetail" class="col-sm-2 control-label">书籍详情</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="bkdetail" placeholder="书籍详情" name="detail" required>
            </div>
        </div>

        <div class="form-group">
            <input type="submit" value="添加" class="form-control btn btn-primary">
        </div>
    </form>

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

输入书籍信息并点击添加后，发起 addBook 请求；控制器处理请求，获取表单数据并调用业务层的新增方法将数据保存到持久层

public class BookController {
    ...
	
    @RequestMapping("/addBook")
    // 实体类做参数，控制器会用反射获取表单中对应实体类属性的数据
    public String addBook(Book book){
        System.out.println("addBook: "+book);
        bookService.addBook(book);
        // 添加完 返回列表（会自动补上项目路径）
        return "redirect:/book/booksList";
    }
}

注意点

1、 name必须和实体类Books属性字段一一匹配，不然后端读取不到

7.3 修改书籍

修改书籍的业务流程：

用户点击某书籍的修改选项，前端携带该书籍的 id 发起请求
控制器根据 id 查询要修改的书籍信息，跳转到修改书籍页面并显示修改前的书籍信息
输入修改后的书籍信息，提交信息
控制器调用业务层保存信息

step 1. 首先，在书籍列表，增加修改删除的连接, 我们要实现先能跳进到修改页面

<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/toUpdateBookPage?id=${book.bookID}">修改</a> &nbsp; | &nbsp;
		<a href="#">删除</a>
        </td>
    </tr>
    </c:forEach>
</tbody>

step2 . 进入/WEB-INF/jsp/，添加我们的jsp页面 updateBook.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.staticfile.org/twitter-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">
        <%-- 通过隐藏域把 id 传给后端，才能根据 id 修改！ --%>
            <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>

注意：修改是要根据 id 进行修改的，所以需要在 input 隐藏域中保存 id 的值，与其他修改信息一起提交给后端！

Step3.先在controller里面，添加一个跳转到修改页面的功能

/*跳转到修改书籍页面*/
@RequestMapping("/toUpdateBookPage")
public String toUpdatePaper(Model model, int id) {
    Books books = bookService.queryBookById(id);
    model.addAttribute("books",books);
    return "updateBook";
}

step4 . 在controller，编写处理修改删除书籍的信息

/*修改书籍*/
@RequestMapping("/updateBook")
public String updateBook(Model model, Books book) {
    System.err.println("updateBook=>"+book);
     // 修改书籍信息
    bookService.updateBook(book);
    // 修改完 返回列表
    return "redirect:/book/booksList";
}

在做这个的时候碰到两个错误

1、BookMapper.xml里面配置错误

    <!--/*修改一本书*/-->
    <update id="updateBook" parameterType="books">
        update ssmbuild.books
        set bookName =#{bookName},bookCounts=#{bookCounts},detail=#{detail}
        where bookID=#{bookID};
    </update>
刚开始   where bookID=#{bookId}; 导致一直报错,先查看接口文件的参数写的是什么，若写的是 
int deleteBookById(@Param("bookId") int id);就不用修改

2.添加事务处理器

    <!--step 3.声明式事务配置-->
    <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <!--注入数据源-->
        <property name="dataSource" ref="dataSource"/>
    </bean>
    <!--结合AOP实现事务的织入，配置事务通知-->
    <tx:advice id="txAdvice"  transaction-manager="transactionManager" >
        <tx:attributes>
            <tx:method name="add" propagation="REQUIRED"/>
            <tx:method name="delete" propagation="REQUIRED"/>
            <tx:method name="update" propagation="REQUIRED"/>
            <tx:method name="query" read-only="true"/>
            <tx:method name="*" propagation="REQUIRED"/>
        </tx:attributes>
    </tx:advice>
    <!--step 4 aop事务支持-->
    <aop:config>
        <aop:pointcut id="txPointCut" expression="execution(* com.kuang.dao.*.*(..))"/>
        <aop:advisor advice-ref="txAdvice" pointcut-ref="txPointCut"/>
    </aop:config>

我们修改页面，前台未传递BookID,导致无法更新
配置mybatis-conf.xml的日志，不能有空格，刚开始写的有空格，导致启动报错
```
<settings>
    <setting name="logImpl" value="STDOUT_LOGGING"/>
</settings>
```

7.4删除书籍

删除图书，我们使用restFule风格

用户点击某书籍的删除选项，前端携带该书籍的 id 发起请求
控制器通过 id 调用业务层执行删除操作

step1 controller里面

	/*删除数据*/
    /*复习一下restFul风格*/
    //@RequestMapping("/deleteBook")
	@RequestMapping("/deleteBook/{bookID}")
    public String deleteBook(@PathVariable("bookID") int id) {
        System.out.println("deleteBook: "+id);
        // 删除书籍
        bookService.deleteBookById(id);
        // 删除完 返回列表
        return "redirect:/book/booksList";
    }

step2 在前端调用里面

 <a href="${pageContext.request.contextPath}/book/deleteBook/${book.bookID}">删除</a>

当给SSM框架搭建好了以后，进行Web的开发就含简单了，只用关注controller类和jsp前端即可，以修改书籍为例，流程如下：

? 用户点修改按钮——>跳转修改页面——>页面呈现要修改的书的内容——>用户修改内容——>提交返回主菜单。

我们要做的事情：

再前端页面添加“修改”按钮，并将要修改的书的ID传给后端；
在controller类中，实现查找和跳转的方法：
1. 接收前端传来的ID（根据前端和方法上相同的url），
2. 根据前端的ID查询要修改的书
3. 并将该书写入到Model中，跳转到修改页面；
创建书籍的修改前端页面，并且显示要修改的信息（再model中），这个前端页面再指向一个修改的实现方法（通过url）
再controller中实现修改方法：
1. 更新book对象（再前端中直接就修改了对象的属性）
2. 重定向会主菜单.

JavaScript知识库最新文章

ES6的相关知识点

react 函数式组件 & react其他一些总结

Vue基础超详细

前端JS也可以连点成线（Vue中运用 AntVG6）

Vue事件处理的基本使用

Vue后台项目的记录（一）

前后端分离vue跨域，devServer配置proxy代理

TypeScript

初识vuex

vue项目安装包指令收集

加:2022-01-29 22:59:45 更:2022-01-29 23:01:33

360图书馆购物三丰科技阅读网日历万年历 2024年11日历

-2024/11/24 14:05:51-

图片自动播放器
↓图片自动播放器↓

TxT小说阅读器
↓语音阅读,小说下载,古典文学↓

一键清除垃圾
↓轻轻一点,清除系统垃圾↓

图片批量下载器
↓批量下载图片,美女图库↓

网站联系: qq:121756557 email:121756557@qq.com IT数码