SharEDITor

教你成为全栈工程师(Full Stack Developer) 十七-网站分类列表页面设计

全栈技术 教你成为全栈工程师(Full Stack Developer) 发表于 2016-04-29 16:47:46 阅读798次


上一节我们完成了高大上的主页,并展示了每个分类,那么按照常理,用户点击分类项怎么能展示出这一分类的博客列表呢?我们这一节来制作分类列表页

请尊重原创,转载请注明来源网站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变量中

 

下一节我们继续对博客列表也做一些美化,然后开发博客的展示页