整合ssm项目--功能实现

最新推荐文章于 2024-05-03 14:56:50 发布

个十十一

最新推荐文章于 2024-05-03 14:56:50 发布

阅读量942

点赞数

文章标签： java spring 后端

本文链接：https://blog.csdn.net/weixin_45797182/article/details/105346534

版权

在搭建好项目环境之后，使后端与前端数据产生交互实现相应功能。

1.展示数据库书籍信息

编写前端展示书籍样式页面

<head>
    <title>书籍展示</title>
    <!--添加bootstrao样式连接-->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
        h1{
            text-align: center;
        }
    </style>
</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>
<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>
                </tr>
            </c:forEach>

            </tbody>
        </table>
    </div>
</div>
</body>

编写Controller类，跳转到allbook页面展示
list就是传入前端页面的数据变量。

  @RequestMapping("/allbook")
    public String list(Model model){
        List<Books> books = bookService.queryAllBook();
        model.addAttribute("list",books);
        return "allbook";
    }

在前端的默认页面添加一个跳转到allbook页面的超链接

2.添加新增书籍功能

展示书籍页面添加一个新增书籍功能，通过点击新增书籍，跳转到新增书籍页面，里面可以设置书籍的bookName，bookCounts，detail属性，然后添加到书籍展示页面。

2.1添加跳转新增书籍功能

allbook页面添加超链接，跳转新增书籍页面。

 <a class="btn btn-primary" href="${pageContext.request.contextPath}/book/toAddBook">新增书籍</a>

编写添加书籍页面（提供一个form表单）

	<head>
    <title>新增书籍</title>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
        h1{
            text-align: center;
        }
    </style>
</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>

<form action="${pageContext.request.contextPath}/book/addBook" method="post">
    <div class="form-group">
        <label>书籍名称:</label>
        <input type="text" name="bookName" class="from-control" required>
    </div>
    <div class="form-group">
        <label>书籍数量:</label>
        <input type="text" name="bookCounts" class="from-control" required>
    </div>
    <div class="form-group">
        <label>书籍描述</label>
        <input type="text" name="detail" class="from-control" required>
    </div>
    <div class="forom-group">
        <input type="submit" class="form-control" value="添加">
    </div>
</form>

</body>

编写Controller类
分别编写跳转请求与from表单提交强求，最后重定向到展示全部书籍页面

 //跳转添加书籍页面
    @RequestMapping("/toAddBook")
    public String toAddPaper(){
        return "addBook";
    }
    //添加书籍请求
    @RequestMapping("/addBook")
    public String addBook(Books books){
        System.out.println("addBook=>" + books);
        bookService.addBook(books);
        return "redirect:/book/allbook";
    }

3.修改与删除书籍功能

3.1修改书籍功能

分别在每本书的后面添加一个可以跳转到修改页面的请求链接，在修改页面提供一个from表单修改书籍信息。
1）在每本书籍的后面添加修改请求。

<a href="${pageContext.request.contextPath}/book/toUpdateBook?id=${book.bookID}">修改</a>

在这里插入图片描述
添加在forEach里面，为每一本书添加此功能
2）编写修改书籍页面

<head>
    <title>修改书籍</title>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
        h1{
            text-align: center;
        }
    </style>
</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>

<form action="${pageContext.request.contextPath}/book/updateBook" method="post">
    <input type="hidden" name="bookID" value="${Qbook.bookID}">
    <div class="form-group">
        <label>书籍名称:</label>
        <input type="text" name="bookName" class="from-control" value="${Qbook.bookName}" required>
    </div>
    <div class="form-group">
        <label>书籍数量:</label>
        <input type="text" name="bookCounts" class="from-control" value="${Qbook.bookCounts}" required>
    </div>
    <div class="form-group">
        <label>书籍描述</label>
        <input type="text" name="detail" class="from-control" value="${Qbook.detail}" required>
    </div>
    <div class="forom-group">
        <input type="submit" class="form-control" value="修改">
    </div>
</form>

</body>

3）编写Controller类，为form表单编写updateBook请求，以及跳转修改页面请求。

//跳转修改页面
    @RequestMapping("/toUpdateBook")
    public String toUpdateBook(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.updateBook(books);
        return "redirect:/book/allbook";
    }

注意：我们在前端点击修改时，应该获取到此书的id传入到后端，这样后端才能准确通过sql语句对书进行修改。
在这里插入图片描述

3.2删除书籍功能

与修改书籍功能类似，在展示全部书籍页面的每一本书后添加一个删除功能，通过url路径从前端获取到一本书的id值传回后端，删除数据库的相关信息。
在这里插入图片描述
获取到书籍id后，sql语句可以直接通过id值删除一本书籍，所以直接在Controller类编写一个删除书籍请求，再重定向到allbook页面即可。

 //删除书籍请求
    @RequestMapping("/deleteBook/{bookID}")
    public String deleteBook(@PathVariable("bookID") int id){
        bookService.deleteBook(id);
        return "redirect:/book/allbook";
    }

4.查询书籍功能

首先需要在展示全部书籍allbook页面添加一个查询表单，输入书籍名相关的文字，然后点击查询，显示查询到的书籍。

allbook页面添加查询请求
编写查询请求
dao层采用的是模糊查询sql语句，可以返回多条相关书籍信息，当输入信息无法查询到，后端返回前端一条“未查到”的报错信息，并且页面不刷新，继续展示所有书籍信息。若查询到书籍信息，返回到allbook页面，继续遍历list，在allbook页面展示出查询到的书籍信息。

 @RequestMapping("/queryBook")
    public String queryBook(String bookName,Model model){
        List<Books> list = bookService.queryBookByName(bookName);
        if (list.size() == 0){
            list = bookService.queryAllBook();
            model.addAttribute("error","未查到");
        }
        model.addAttribute("list",list);
        return "allbook";
    }

最后需要一个返回allbook页面请求，即回到展示所有书籍页面。
allbook页面添加一个现实全部书籍功能，通过超链接的方式直接跳转回allbook页面。

总结

项目的功能实现是前端与后端交互的一个过程，前端获取一个请求，通过后端的业务逻辑代码获取到数据保存，然后返回给前端所需数据，最后前端将这些数据信息展示给客户，相反，前端也可以获取一些数据信息，提供给后端，如此产生紧密的关联。

个十十一

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
整合ssm项目--功能实现

在搭建好项目环境之后，使后端与前端数据产生交互实现相应功能。1.展示数据库书籍信息编写前端展示书籍样式页面<head> <title>书籍展示</title>  <link href="https://cdn.staticfile.org/twitter-boot...
复制链接

扫一扫