spring-data-jpa + SpringBoot +

作者: 光剑书架上的书 | 来源:发表于2017-08-22 22:14 被阅读331次

    spring-data-jpa + SpringBoot + bootstrapTable 后端分页 模糊查询

    数据库层ImageRepository 代码

    package com.easy.kotlin.chapter11_kotlin_springboot.dao
    
    import com.easy.kotlin.chapter11_kotlin_springboot.entity.Image
    import org.springframework.data.domain.Page
    import org.springframework.data.domain.Pageable
    import org.springframework.data.jpa.repository.Query
    import org.springframework.data.repository.PagingAndSortingRepository
    import org.springframework.data.repository.query.Param
    
    /**
     * Created by jack on 2017/7/17.
     *
     *
    
    
    @Query注解里面的value和nativeQuery=true,意思是使用原生的sql查询语句.
    sql模糊查询like语法,我们在写sql的时候是这样写的
    
    like '%?%'
    
    但是在@Query的value字符串中, 这样写
    
    like %?1%
    
     */
    
    interface ImageRepository : PagingAndSortingRepository<Image, Long> {
        @Query("SELECT a from #{#entityName} a where a.category like %?1%")
        fun findByCategory(category: String): MutableList<Image>
    
        @Query("select count(*) from #{#entityName} a where a.url = ?1")
        fun countByUrl(url: String): Int
    
        @Query("SELECT a from #{#entityName} a where a.category like %:searchText%")
        fun search(@Param("searchText") searchText: String, pageable: Pageable): Page<Image>
    }
    
    

    Controller 层

    JSON 接口代码

    
        @RequestMapping(value = "wotuSearchJson", method = arrayOf(RequestMethod.GET))
        @ResponseBody
        fun wotuSearchJson(@RequestParam(value = "page", defaultValue = "0") page: Int,
                           @RequestParam(value = "size", defaultValue = "10") size: Int,
                           @RequestParam(value = "searchText", defaultValue = "") searchText: String): Page<Image>? {
            return getPageResult(page, size, searchText)
        }
    
        private fun getPageResult(page: Int, size: Int, searchText: String): Page<Image>? {
            val sort = Sort(Sort.Direction.DESC, "id")
            val pageable = PageRequest(page, size, sort)
            if(searchText==""){
                return imageRepository?.findAll(pageable)
            }else{
                return imageRepository?.search(searchText, pageable)
            }
        }
    

    RequestMapping ModelAndView代码

        @RequestMapping(value = "meituView", method = arrayOf(RequestMethod.GET))
        fun meituView(): ModelAndView {
            return ModelAndView("meituView")
        }
    

    视图 meituView.ftl 代码

    <#include 'head.ftl'>
    <#include 'nav.ftl'>
    <table id="meituTable"></table>
    <#include 'foot.ftl'>
    
    

    其中,

    head.ftl

    <!doctype html>
    <html>
    <head>
        <meta http-equiv=content-type content=text/html;charset=utf-8>
        <meta http-equiv=X-UA-Compatible content=IE=Edge>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>我图</title>
        <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
        <link rel="stylesheet" href="bower_components/bootstrap-table/src/bootstrap-table.css">
        <link href="app.css" rel="stylesheet">
    </head>
    <body>
    
    

    需要注意的是,bootstrap-table与bootstrap 3是兼容的。但是bootstrap 4还不行。

    nav.ftl

    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">我图</a>
            </div>
            <div>
                <ul class="nav navbar-nav">
                    <li class="active"><a href="meituView">美图列表</a></li>
                    <li class=""><a href="doCraw" target="_blank">执行抓取</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            Kotlin极简教程 <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="http://www.jianshu.com/nb/12976878" target="_blank">Kotlin</a></li>
                            <li><a href="#">SpringBoot</a></li>
                            <li><a href="#">Java</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Scala</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Groovy</a></li>
                        </ul>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">关于</a>
                    </li>
                </ul>
                <#--<form class="navbar-form navbar-left" role="search">-->
                    <#--<div class="form-group" id="search">-->
                        <#--<input type="text" class="form-control" placeholder="Search">-->
                    <#--</div>-->
                    <#--<button type="submit" class="btn btn-default">搜索</button>-->
                <#--</form>-->
            </div>
        </div>
    </nav>
    
    
    
    

    foot.ftl

    <script src="DataTables/media/js/jquery.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>
    <script src="bower_components/bootstrap-table/src/bootstrap-table.js"></script>
    <script src="bower_components/bootstrap-table/src/locale/bootstrap-table-zh-CN.js"></script>
    <script src="sloth.js"></script>
    <script src="app.js"></script>
    </body>
    </html>
    
    

    前端 app.js 代码

    $(function () {
    
        var searchText = $('.search').find('input').val()
    
        var columns = [];
        columns.push({
            title: 'ID',
            field: '',
            align: 'center',
            valign: 'middle',
            formatter: function (value, row, index) {
                return row.id
            }
        });
    
        columns.push({
            title: '分类',
            field: 'category',
            align: 'center',
            valign: 'middle',
            formatter: function (value, row, index) {
                return value
            }
        }, {
            title: '美图',
            field: 'url',
            align: 'center',
            valign: 'middle',
            formatter: function (value, row, index) {
                return "<a target='_blank' class='full-width' href='" + value + "'>![](" + value + ")</a>"
            }
        })
    
        $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['zh-CN']);
    
        $('#meituTable').bootstrapTable({
            url: 'wotuSearchJson',
            sidePagination: "server",
            queryParamsType: 'page,size',
            contentType: "application/x-www-form-urlencoded",
            method: 'get',
            striped: false,     //是否显示行间隔色
            cache: false,      //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
            pagination: true,  //是否显示分页(*)
            paginationLoop: true,
            paginationHAlign: 'right', //right, left
            paginationVAlign: 'bottom', //bottom, top, both
            paginationDetailHAlign: 'left', //right, left
            paginationPreText: ' 上一页',
            paginationNextText: '下一页',
            search: true,
            searchText : searchText,
            searchTimeOut: 500,
            searchAlign: 'right',
            searchOnEnterKey: false,
            trimOnSearch: true,
            sortable: true,    //是否启用排序
            sortOrder: "desc",   //排序方式
            sortName: "id",
            pageNumber: 1,     //初始化加载第一页,默认第一页
            pageSize: 10,      //每页的记录行数(*)
            pageList: [5, 10, 20, 50, 100], // 可选的每页数据
            totalField: 'totalPages',
            dataField: 'content', //后端 json 对应的表格数据 key
            columns: columns,
            queryParams: function (params) {
                return {
                    size: params.pageSize,
                    page: params.pageNumber,
                    sortName: params.sortName,
                    sortOrder: params.sortOrder,
                    searchText: params.searchText
                }
            },
            classes: 'table table-responsive full-width',
        })
    
    
        $(document).on('keydown', function (event) {
            // 键盘翻页事件
            var e = event || window.event || arguments.callee.caller.arguments[0];
            if (e && e.keyCode == 38 || e && e.keyCode == 37) {//上,左
                // 上一页
                $('.page-pre').click()
            }
            if (e && e.keyCode == 40 || e && e.keyCode == 39) {//下,右
                // 下一页
                $('.page-next').click()
            }
    
        })
    
    })
    
    
    

    其中,

    $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['zh-CN']);
    

    是 中文支持。

    var searchText = $('.search').find('input').val() 这里的$('.search').find('input') 
    

    输入框是bootstrapTable框架的搜索输入框。

    完整工程源代码:

    https://github.com/EasyKotlin/chatper15_net_io_img_crawler

    相关文章

      网友评论

        本文标题:spring-data-jpa + SpringBoot +

        本文链接:https://www.haomeiwen.com/subject/yylrdxtx.html