十七、网站分类列表页面设计
来源:互联网 发布:golang 1.7 下载 编辑:程序博客网 时间:2024/05/16 05:18
上一节我们完成了高大上的主页,并展示了每个分类,那么按照常理,用户点击分类项怎么能展示出这一分类的博客列表呢?我们这一节来制作分类列表页
请尊重原创,转载请注明来源网站www.shareditor.com以及原始链接地址
创建一些文章
首先,为了能展示我们的效果,我们先在后台创建几篇文章,例如如下:
安装分页插件
列表性质的页面一般都需要做分页处理,这个工作要是让我们自己处理是十分繁琐的,所以我们利用symfony2的扩展knp-paginator-bundle。
修改app/AppKernel.php文件,增加如下注册语句:
new Knp\Bundle\PaginatorBundle\KnpPaginatorBundle(),
修改app/config/config.yml,增加如下配置:
knp_paginator: page_range: 5 # default page range used in pagination control default_options: page_name: page # page query parameter name sort_field_name: sort # sort field query parameter name sort_direction_name: direction # sort direction query parameter name distinct: true # ensure distinct results, useful when ORM queries are using GROUP BY statements template: pagination: KnpPaginatorBundle:Pagination:twitter_bootstrap_v3_pagination.html.twig # sliding pagination controls template sortable: KnpPaginatorBundle:Pagination:sortable_link.html.twig # sort link template
解释一下,KnpPaginator是一个分页插件,配置项中page_range是默认的每一页的条目数,其他几个配置项可以不用详细了解
pagination: KnpPaginatorBundle:Pagination:twitter_bootstrap_v3_pagination.html.twig这个是配置分页中底部页码部分的样式模板,有几种可以选择:
- KnpPaginatorBundle:Pagination:sliding.html.twig (by default)
- KnpPaginatorBundle:Pagination:twitter_bootstrap_v3_pagination.html.twig
- KnpPaginatorBundle:Pagination:twitter_bootstrap_pagination.html.twig
- KnpPaginatorBundle:Pagination:foundation_v5_pagination.html.twig
修改controller
修改src/AppBundle/Controller/BlogController.php,把其中的listAction函数内容改成:
public function listAction(Request $request, $subjectId) { $em = $this->get('doctrine.orm.entity_manager'); $dql = "SELECT a FROM AppBundle:BlogPost a WHERE a.subject=" . $subjectId . " ORDER BY a.createTime DESC"; $query = $em->createQuery($dql); $paginator = $this->get('knp_paginator'); $pagination = $paginator->paginate( $query, $request->query->get('page', 1)/*page number*/, 10/*limit per page*/ ); return $this->render('blog/list.html.twig', array('pagination' => $pagination)); }
解释一下,注意这次listAction参数里除了$request之外,多出了一个$subjectId,这是和后面要配置的路由相对应的,表示会在url里传过来一个subjectId的数值。
看$em这一行,在symfony2中对model的操作都需要先获取到EntityManager进行操作
第二行$dql赋值是一条sql语句,这里面根据$subjectId来从数据库里取BlogPost,并且按照createTime来排序,这里面需要注意的是:sql语句中写的变量名不是数据库表的字段名(小写),而是model类里定义的成员名
$pagination这一行则是调用分页插件的函数,默认取第一页,最后一个参数10表示每页展示多少条,这个会冲掉app/config/config.yml配置的5,这里面的$pagination是一个对象数组,每个成员都是一个BlogPost这个model的对象
修改模板
请尊重原创,转载请注明来源网站www.shareditor.com以及原始链接地址
修改app/Resources/views/blog/list.html.twig,把内容改成:
{% extends "base.html.twig" %}{% block body %}<div class="row"> <div class="col-sm-3 col-xs-1"></div> <div class="col-sm-6 col-xs-10"> <br /> {% for article in pagination %} <div style="background-color: whitesmoke; padding-left: 30px;padding-right: 30px;padding-top: 10px;"> <div class="row"> <div class="col-sm-2 col-xs-2"></div> <div class="col-sm-8 col-xs-12"> <div class="row"> <h3>{{ article.title }}</h3> </div> </div> <div class="col-sm-2"></div> </div> <br /> </div> <br /> {% endfor %} <div class="navigation"> {{ knp_pagination_render(pagination) }} </div> </div> <div class="col-sm-3 col-xs-1"></div></div>{% endblock body %}
解释一下,pagination是一个对象数组,for循环遍历每一个对象,通过{{ article.title }}获取它的title属性展示出来
下面的{{ knp_pagination_render(pagination) }}是分页插件特有的功能,就是底部页码的按钮部分
配置路由
修改app/config/routing.yml,把曾经添加过的:
blog_list: path: /bloglist/ defaults: { _controller: AppBundle:Blog:list }
改成:
blog_list: path: /bloglist/{subjectId} defaults: { _controller: AppBundle:Blog:list }
解释一下,这里的{subjectId}会自动传到controller中,并以参数形式传到listAction里,见上面listAction函数的实现
好,现在打开http://172.16.142.130/app_dev.php/bloglist/4,(这里的4是Subject的id,你可以查看你的数据库看你的subject的id都有哪些值)
从首页点进来
我们先打开首页http://172.16.142.130/app_dev.php,点击一个图标,就能直接进到博客列表页,这是怎么做到的呢?其实我们在上一节已经做好了相关准备,看下app/Resources/views/default/index.html.twig里的这几句:
<a href="{{ path('blog_list', {'subjectId':subject.id}) }}" class="thumbnail"> <img src="{{ subject.photo }}" alt="{{ subject.name }}"> <div class="caption"> <h3>{{ subject.name }}</h3> <p>{{ subject.introduce }}</p> </div> </a>
这里面的a标签已经把跳转链接写成了{{ path('blog_list', {'subjectId':subject.id}) }},它会自动从路由配置里找到名字为blog_list的路由,并把subject.id的值传递到subjectId变量中
下一节我们继续对博客列表也做一些美化,然后开发博客的展示页
- 十七、网站分类列表页面设计
- 网站页面设计原则
- 盒子模型之商品分类列表页面
- 网站访问显示 “Index of” 列表页面?
- 网站页面设计基本尺寸
- 网站页面设计基本尺寸
- 网站页面设计基本尺寸
- 使用CSS设计网站页面
- 网站导航设计的6大分类
- 网站列表页面的显示(列表标签)
- 十八、让网站分类列表页变得更漂亮
- 网页设计网站制作色调列表
- Google Analytics内容分组功能与网站页面分类
- chapter6 网站设计和页面布局
- chapter7 网站设计和页面布局(二)
- 网站抽奖活动页面设计及制作
- 网站的页面设计与交互
- ExtJs 入门教程十七[列表:GridPanel]
- 十四、实现漂亮的网站管理后台
- spring helloWord(java)
- 十五、做一个完美的管理后台侧边栏
- 一个牛奔的Android开源大全
- 十六、网站主页设计
- 十七、网站分类列表页面设计
- 远程调试Python代码输出报错
- 十八、让网站分类列表页变得更漂亮
- 良心!良心!十分良心的zkw线段树(更新中)
- 十九、文章内容展示页面设计
- Xcode7中缺少 .dylib库的处理方法
- android或java用DES加密解密文件
- 二十、管理后台的权限控制
- 为 Jenkins 配置 .NET 持续集成环境