若依下拉框展示——动态获取数据库中的数据

时间：2024-02-25 17:51:35

后端：

1.Controller层

    /**
     * 这里通过ModelMap把查询出来的List<model>传到前端
     * 就是若依点击新增的跳转页面的同时，把数据带入进去
     */
    @GetMapping("/add")
    public String add(ModelMap mmap)
    {
        mmap.put("book",borrowerInfoService.selectBooksName());  //这里key是需要待会和前端对应的，稍后会备注，value就是我查询到的一个结果
        return prefix + "/add";
    }

2.Service

    /**
     *Service接口
     */
    public List<Books> selectBooksName();

3.ServiceImpl

    /**
     * 查询方法，这里可以到时候做数据验证，避免重复数据
     *
     */
    @Override
    public List<Books> selectBooksName()
    {
        return booksMapper.selectBooksName();
    }

4.Mapper

   /**
     * Mapper接口
     */
    public List<Books> selectBooksName();

5.Mapper.xml

    <select id="selectBooksName"  resultMap="BooksResult">
       select
       bookUuid, book_name, author, number , out_number 
       from
       books
    </select>  
<!--这里返回值一定要返回成功，最好是用实体类返回接收，也可以用Map-->

后端：主要是遇到的问题就是返回值的时候缺失数据，这个稍微细心一点自己就可以排查，debug打起来

 

前端：

因为选择用的select2页面需要引入js和css，主要是select2-css，select2-js，当然若依的include里面已经有了这个

<head>
    <th:block th:include="include :: header('新增【借阅人信息登记】')"/>
    <th:block th:include="include :: datetimepicker-css"/>
    <th:block th:include="include :: select2-css" />
</head>

<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<th:block th:include="include :: select2-js" />

页面：

th:each="post:${book}" book就是对应刚刚Controller层的名字，前端通过book这个名字获取到后端的参数，用post来接收
th:value="${post.bookName}"这里的post.出来的就是你后台传出来的值，如果是用对象传出来的，那就是你对象的字段名，因为是th：value意思就是这个的值，所以你前面post就点你需要的字段
th:text="${post.bookName}"同理，但是这里是th：text，就是你页面所展示的数据，和上面可以不是同一个字段，我可以展示姓名，传值ID
 <div class="form-group">
            <label class="col-sm-3 control-label">书名：</label>
            <div class="col-sm-8">
                <select id="bookName" name="bookName" class="form-control select2-multiple">
                    <option value=""></option>
                    <option th:each="post:${book}" th:value="${post.bookName}"  th:text="${post.bookName}" ></option>
                </select>
            </div>
        </div>

这个我不是很清楚，看见他们都这么写，我就这么写，我大概理解就是下拉框中的一个提示

$(function () {
        $('#bookName').select2({
            placeholder: "请选择书籍",
            allowClear: true
        });
    })

 

最终展示结果：

 

 

 

相关文章