springboot+thymeleaf模糊查询功能和分页实现以及input前端回显（前台到后台）

先放图

实体类

 

import lombok.Data;

@Data
public class Word {
    private Integer wordId;
    private String wordName;
    private String audio;
    private String explanation;
    private String example;
    private Integer grade;
    private Integer study;
    private Integer remember;
    private Integer collection;
}

 

在mapper.xml中写一条sql 模糊查询sql

 <select id="findByNameLikeC" resultType="Word">
    select  * from studywords.word where  collection=1 AND wordName  like concat('%',#{wordName}, '%')
</select>

mapper层

 List<Word> findByNameLikeC(String wordName) ;

service层

//模糊查询单词
  
    List<Word> findByNameLikeC(String wordName) ;

serviceimpl

  @Override
    public List<Word> findByNameLikeC(String wordName) {
        return wordMapper.findByNameLikeC(wordName);
    }

controller层

分页用springboot自带的直接导入

@RequestParam(defaultValue = "1",value = "pageNum") Integer pageNum

   @Autowired
    WordServiceImpl wordService;

//去单词收藏
    @RequestMapping("/wordCollection")
    public String wordCollection( @RequestParam(required = false) @PathVariable("wordName") String wordName,Model model,@RequestParam(defaultValue = "1",value = "pageNum") Integer pageNum){
        if(wordName!=null && wordName !="") {
         //前端回显
            model.addAttribute("wordName",wordName);
  //分页
            PageHelper.startPage(pageNum, 5);
//调模糊查询sql
            List<Word> search=  wordService.findByNameLikeC(wordName);
            PageInfo<Word> pageInfo = new PageInfo<Word>(search);
//向前端传值
            model.addAttribute("pageInfo", pageInfo);
            if(search.size()!=0){
                model.addAttribute("word", search);
            }else
                model.addAttribute("msg","您查询的单词不存在！");

        } else {
//空检索时显示全部

            PageHelper.startPage(pageNum, 5);
            List<Word> word = wordService.queryAllWordCollection();

            PageInfo<Word> pageInfo = new PageInfo<Word>(word);
            model.addAttribute("pageInfo", pageInfo);

            model.addAttribute("word", word);
        }
        return "user/word/collection-word";
    }

html页面位置

前端部分代码

 i

    <div class="content">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header">
                        <strong class="card-title">收藏栏</strong>
                        <div class="search bar1">
                         //后端接口
                               <form th:action="@{/wordCollection}">
            //name="wordName" 后端 @RequestParam 得到前端输入框的值
           //th:value="${wordName}" 搜索完成后input 回显
                                <input type="text" name="wordName"    th:value="${wordName}" placeholder="请输入您要查询的单词..."/>
                                <button  type="submit"  ></button>
                                </form>
                        </div>
                    </div>
                    <div class="card-body"  id="child_view">
                        <table class="table table-layout:fixed" >
                            <thead>
                            <tr>
                                <th scope="col">序号</th>
                                <th scope="col">单词</th>
                                <th scope="col">读音</th>
                                <th scope="col">解释</th>
                                <th scope="col">等级</th>
                                <th scope="col">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <style type="text/css">.table {table-layout:fixed}</style>

                            <tr th:each="word:${word}">
                                <td th:text="${word.getWordId()}">序号</td>
                                <td th:text="${word.getWordName()}">单词</td>
                                <td th:text="${word.getAudio()}">发音</td>
                                <td  th:text="${word.getExplanation()}">解释</td>
                                <td><b> <div th:switch="${word.getGrade()}">
                                    <b th:case="1">N3</b>
                                    <b th:case="2">N2</b>
                                    <b th:case="3">N4</b>
                                    <b th:case="4">N5</b>
                                </div></b></td>
                                <td>
                                    <a class="btn btn-sm btn-danger" th:href="@{/deleteWordCollection/}+${word.getWordId()}">取消收藏</a>
                                </td>
                            </tr>

                            </tbody>
                        </table>
                        <div >
                            <p th:text="${msg}" style="color: red;font-size: 20px;text-align: center "></p>
                        </div>
                        <!--分页开始-->
                        <div class="col-sm-12 col-md-12">
                            <div class="dataTables_paginate paging_simple_numbers" id="bootstrap-data-table_paginate">
                                <p style="float:right;color: #000000;font-size: 18px;">当前 第 <span th:text="${pageInfo.pageNum}"></span> 页,总 <span  th:text="${pageInfo.total}==0 ? 1 : ${pageInfo.total}"></span> 页,共 <span th:text="${pageInfo.total}"></span> 条记录</p>

                                </br>
                                </br>
                                <div style="float:right;">
                                    <button> <a th:href="@{/wordCollection}">首页</a></button>
                                    <button> <a th:href="@{/wordCollection(pageNum=${pageInfo.hasPreviousPage}?${pageInfo.prePage}:1)}">上一页</a></button>
                                    <button> <a th:href="@{/wordCollection(pageNum=${pageInfo.hasNextPage}?${pageInfo.nextPage}:${pageInfo.pages})}">下一页</a></button>
                                    <button> <a th:href="@{/wordCollection(pageNum=${pageInfo.pages})}">尾页</a></button>
                                </div>
                            </div>
                        </div>
                        <!--分页结束-->

                    </div>
                </div>
            </div>
        </div>

    </div><!-- .content -->

有问题请各位大佬指正 用来记录学习路程的点滴！