springboot\maven 页面图片展示商品实现分页

来源：互联网发布：js删除数组中某个元素编辑：程序博客网时间：2024/06/05 19:50

分页pom文件依赖

<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>

<version>4.0.0</version

</dependency>

配置在sqlmapconfig中

<plugins>
        <plugin interceptor="com.github.pagehelper.PageHelper">
            
            <property name="dialect" value="mysql"/>
        </plugin>
    </plugins>

controller中代码实现，包含查询全部模糊查询方法

public ModelAndView ShowAll(ModelAndView modelAndView ,String pageNo,String pageSize,String color){
        int num=1;
        int size=4;
        if(pageNo!=null&&!"".equals(pageNo)){
            num=Integer.parseInt(pageNo);
        }
        if(pageSize!=null&&!"".equals(pageSize)){
            size=Integer.parseInt(pageSize);
        }
        PageHelper.startPage(num,size);
        PageInfo<Commodity> all =null;
        if(color == null || color.equals("")){
            List<Commodity> select = service.selectAll();
            all = new PageInfo<Commodity>(select);
        }else {
            List<Commodity> byColor = service.selectByColor(color);
            all = new PageInfo<Commodity>(byColor);
        }
        modelAndView.addObject("all",all);
        modelAndView.setViewName("show");
        return modelAndView;
    }

ftl页面

页头

<div class="page-header">
<h1>show  <small>commodity</small></h1>
</div>

导航条

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav   ">
                <li class="active"><a href="/col/showAll">My Collect<span class="sr-only">(current)</span></a></li>
                <li><a href="/mycom/shopShow">My Shopping</a></li>
            </ul>
            <div style="margin-left: 400px">
            <form class="navbar-form navbar-left" role="search" action="/com/show">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="请输入品牌、色号" name="color">
                </div>
                <button type="submit" class="btn btn-info">Select</button>
            </form>
            </div>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="/com/show">主页</a></li>
            </ul>
        </div>
    </div>
</nav>

遍历数据库展示图片

    <div class="row">
        <#list all.list as c>
        <div class="col-md-3">
            <div class="thumbnail">
                <a href="/com/showOne?id=${c.id}"><img src="../image/${c.picture}.jpg"
                        style="width: 450px;height: 250px" ></a>
                <div class="caption">
                    <h3>${c.color}</h3>
                    <p>￥ ${c.price}</p>
                    <p><a href="/mycom/buy?ids=${c.id}" class="btn btn-primary" role="button">buy</a></p>
                </div>
            </div>
        </div>
        </#list>
    </div>

分页

<div class="col-md-6 col-md-offset-4">
共<span>${all.total}条记录当前显示</span><span>现在显示第${all.pageNum}页</span>

<a href="/com/show?pageNo=${all.firstPage}&pageSize=${all.pageSize}" >首页</a>

<#if all.isFirstPage == true >

<a href="/com/show?pageNo=${all.firstPage}&pageSize=${all.pageSize}" >上一页</a>

<#else >
<a href="/com/show?pageNo=${all.prePage}&pageSize=${all.pageSize}">上一页</a>
</#if>

<#if all.isLastPage == true>

<a href="/com/show?pageNo=${all.lastPage}&pageSize=${all.pageSize}">下一页</a>

<#else >
<a href="/com/show?pageNo=${all.nextPage}&pageSize=${all.pageSize}">下一页</a>
</#if>

<a href="/com/show?pageNo=${all.lastPage}&pageSize=${all.pageSize}">尾页</a>
</div>
</body>

阅读全文

0 0