实现查询接口

porterfly

已于 2024-03-30 10:57:12 修改

阅读量229

点赞数 4

文章标签： html

于 2024-03-12 15:07:46 首次发布

本文链接：https://blog.csdn.net/porterfly/article/details/136652072

版权

实习效果如下：

1.前端部分

<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>
            <a class="btn btn-primary" href="${pageContext.request.contextPath}/book/allBook">显示全部书籍</a>
        </div>
        <div class="col-md-4 column"></div>

        <div class="col-md-4 column" c>
            <form action="${pageContext.request.contextPath}/book/queryBook" method="post" style="float: right"
                  class="form-inline">

                <span style="color: red;font-weight: bold " >${error} </span>
                <input type="text" name="queryBookName" 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="${requestScope.get('list')}">
                    <tr>
                        <td>${book.getBookId()}</td>
                        <td>${book.getBookName()}</td>
                        <td>${book.getBookCounts()}</td>
                        <td>${book.getDetail()}</td>
                        <td>
                            <a href="${pageContext.request.contextPath}/book/toUpdateBook?id=${book.getBookId()}">更改</a>
                            |
                            <a href="${pageContext.request.contextPath}/book/del/${book.getBookId()}">删除</a>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>
    </div>
</div>
</body>
</html>

注意：其中form标签实现搜索框

标签中的action即点击提交后会跳转的地址；class="form-inline"保证了搜索框跟summit在同一行；style="float: right"保证悬浮在右边。

<span style="color: red;font-weight: bold " >${error} </span>这引用了后端传过来的数据。

input标签中的name属性即是前端输入后返回给后端接收

2.controller

在点击提交后就会跳转到querybook这个页面

@Controller
@RequestMapping("/book")
public class BookController {

    @Autowired
    @Qualifier("BookServiceImpl")
    private BookService bookService;

    @RequestMapping("queryBook")
    public String queryBook(String queryBookName,Model model){
        Books books = bookService.queryBookByName(queryBookName);
        System.out.println(books);
        List<Books> list = new ArrayList<>();
        list.add(books);

        //找不到该书的话，就查询所有书籍并赋值给list
        if (books==null){
            list = bookService.queryAllBook();
            model.addAttribute("error","未查到");
        }
        model.addAttribute("list",list);
        return "allBook";
    }

1.这里的参数就是从前端接收的，我们根据这个书名就可以去调用业务层去查找。

2.查到的书籍我们可以封装在list集合单中。

3.1同时查不到书籍的情况，这种情况下我们用model.addAttribute(),把未查到返回给前端，"error"即可以在span标签中被引用。

3.2如果查到了我们就把这个list集合返回给前端，让其收到这个数据，后面跳到allbook主页遍历出来。

3.业务层

3.1service

@Service
public interface BookService {
    int addBook(Books books);
    int deleteBookById(int id);
    int updateBook(Books books);
    Books queryBookById(int id);
    List<Books> queryAllBook();
    Books queryBookByName(String bookName);
}

3.2serviceImpl

调用dao/mapper层接口，而且要给个set方法。

public class BookServiceImpl implements BookService {
    //业务层调用dao
    private BookMapper bookMapper;

    public void setBookMapper(BookMapper bookMapper) {
        this.bookMapper = bookMapper;
    }

    @Override
    public int addBook(Books books) {
        return bookMapper.addBook(books);
    }

    @Override
    public int deleteBookById(int id) {
        return bookMapper.deleteBookById(id);
    }

    @Override
    public int updateBook(Books books) {
        return bookMapper.updateBook(books);
    }

    @Override
    public Books queryBookById(int id) {
        return bookMapper.queryBookById(id);
    }

    @Override
    public List<Books> queryAllBook() {
        return bookMapper.queryAllBook();
    }

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

4.dao

4.1mapper

public interface BookMapper {
    int addBook(Books books);
    int deleteBookById(@Param("bookId") int id);
    int updateBook(Books books);
    Books queryBookById(@Param("bookId") int id);
    List<Books> queryAllBook();
    Books queryBookByName(@Param("bookName") String bookName);
}

mapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.itheima.dao.BookMapper">
    <insert id="addBook" parameterType="com.itheima.pojo.Books">
        insert into ssmbuild.books
        (bookName,bookCounts,detail)
        values (#{bookName},#{bookCounts},#{detail})
    </insert>
    <update id="updateBook" parameterType="com.itheima.pojo.Books">
        update ssmbuild.books
        set bookName = #{bookName},bookCounts = #{bookCounts},detail = #{detail}
        where bookID = #{bookId};
    </update>
    <delete id="deleteBookById" parameterType="int">
        delete
        from ssmbuild.books
                 where bookID = #{bookId};
    </delete>
    <select id="queryBookById" resultType="com.itheima.pojo.Books" parameterType="int">
        select  * from ssmbuild.books where bookID = #{bookId}
    </select>
    <select id="queryAllBook" resultType="com.itheima.pojo.Books">
        select * from ssmbuild.books
    </select>
    <select id="queryBookByName" resultType="com.itheima.pojo.Books">
        select * from ssmbuild.books
        <where>
            <if test="bookName != null">
                bookName like "%"#{bookName}"%"
            </if>
        </where>
    </select>
</mapper>

这里面的parameterType即参数接受的数据类型，resultType则是返回的数据类型

porterfly

关注

4
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
实现查询接口

注意：其中form标签实现搜索框标签中的action即点击提交后会跳转的地址；class="form-inline"保证了搜索框跟summit在同一行；style="float: right"保证悬浮在右边。font-weight: bold " >${error} 这引用了后端传过来的数据。placeholder="请输入查询书籍" class="form-control">
复制链接

扫一扫