SpringMVC(19) —— SSM整合:新增搜索功能

最新推荐文章于 2024-01-19 13:17:21 发布

原来是小别扇

最新推荐文章于 2024-01-19 13:17:21 发布

阅读量1.6k

点赞数 2

分类专栏： springmvc 文章标签： java spring mybatis springmvc ssm

本文链接：https://blog.csdn.net/Jzandth/article/details/108731769

版权

springmvc 专栏收录该内容

26 篇文章 2 订阅

订阅专栏

1.需求分析

在这里插入图片描述

前面我们首先书籍信息的增删改查的功能的时候，由于我们前期在整合SSM的时候要将把底层的dao和service实现好了，所以在具体实现功能的时候只是在创建视图和编写controller
但是新增的搜索功能是一点都没有编写过的，所以我们需要从头开始为它编写代码，即要从dao层接口设计开始，从底层向上写(注意：一定要从下往上写，只有这样我们每写一步才有可以调用的方法，每一步都可以进行测试)

2.代码实现

dao接口

    //按照书名查询书籍名称
    List<Books> queryBookByName(@Param("bookName") String bookName);

dao接口实现

    <select id="queryBookByName" resultType="Books">
        select * from ssmbuild.books
        where bookName like '%${bookName}%'
    </select>

在这里插入图片描述

service接口

    //按照书名查询书籍名称
    List<Books> queryBookByName(String bookName);

service接口实现

    @Override
    public List<Books> queryBookByName(String bookName) {
        return bookMapper.queryBookByName(bookName);
    }

controller层

    @RequestMapping("/queryBookByName")
    public String queryBookByName(String bookName, Model model){
        System.out.println("queryBookByName==>"+bookName);
        if (bookName!=null && !bookName.equals("")){
            List<Books> list = service.queryBookByName(bookName);
            model.addAttribute("list",list);
            return "allBook";
        }
        model.addAttribute("error","未查询到响应的数据，请您检查输入的数据名称是否正确~");
        System.err.println("error");
        return "allBook";
    }

在这里插入图片描述

前端页面改造

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%--bootstrap--%>
    <%--直接在线引入css文件--%>
    <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"><%--将屏幕分为12份--%>
                <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/addBook">新增书籍</a>
                <a class="btn btn-primary" href="${pageContext.request.contextPath}/book/allBook">显示全部书籍信息</a>
            </div>
            <div class="col-md-8 column">
                <form action="${pageContext.request.contextPath}/book/queryBookByName" class="form-inline" style="float: right">
                    <input type="text" name="bookName" placeholder="请输入要查询的书籍名称" class="form-control">
                    <input type="submit" value="查询" class="btn btn-primary">
                </form>
            </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 style="line-height: 40px">${book.bookID}</td>
                            <td style="line-height: 40px">${book.bookName}</td>
                            <td style="line-height: 40px">${book.bookCounts}</td>
                            <td style="line-height: 40px">${book.detail}</td>
                            <td style="line-height: 40px">
                                <a href="${pageContext.request.contextPath}/book/updateBook?id=${book.bookID}" class="btn btn-info">修改</a>   |
                                <a href="${pageContext.request.contextPath}/book/deleteBook?id=${book.bookID}" class="btn btn-danger">删除</a>
                            </td>
                        </tr>
                        </c:forEach>
                    </tbody>
                </table>
                <span style="color: red;font-weight: bold;margin: 100px auto;text-align: center" >${error}</span>
            </div>

        </div>
    </div>

</body>
</html>

在这里插入图片描述

完成！

3.小结

项目开发中，意识到学习Java只会后台操作是很有局限性的，所以我们应该在学习了扎实的后端基础的情况下掌握基础的前端知识，包括HTML、CSS和JavaScript
上面说的掌握前端知识不一定是要达到精通的效果，我们只要能写常用的页面、样式和js即可，并且现在网上有很多现成的样式可以借鉴，还有一些大前端框架有可视化系统支持，我们只要能够正常的使用它们就可以满足日常开发需求了
在我们搭建起整个SSM框架之后，系统中新增一个功能其实很快就能实现；首先进行需求分析，分析我们后端应该怎么实现这个功能，对应到前端又是一个什么样的样式展现给用户；其次就是从底层向上进行开发，即先从dao层开始，由于整个项目引入了SSM框架，所以我们实现一个功能相较于原来使用传统的MVC 3层架构实现要快得多；最后就是进行视图和controller的开发，这两个部分一定要协同开发，因为视图是和controller进行交互的，后端的接口要在controller中提供给前端，供前端调用，所以协同开发视图是和controller才能更好的实现功能；对于视图部分，我们可以参考网上的CSS来美化自己的网站

原来是小别扇

关注

2
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
SpringMVC(19) —— SSM整合:新增搜索功能

1.需求分析前面我们首先书籍信息的增删改查的功能的时候，由于我们前期在整合SSM的时候要将把底层的dao和service实现好了，所以在具体实现功能的时候只是在创建视图和编写controller但是新增的搜索功能是一点都没有编写过的，所以我们需要从头开始为它编写代码，即要从dao层接口设计开始，从底层向上写(注意：一定要从下往上写，只有这样我们每写一步才有可以调用的方法，每一步都可以进行测试)2.代码实现dao接口 //按照书名查询书籍名称 List<Books>
复制链接

扫一扫

专栏目录