SharEDITor

教你成为全栈工程师(Full Stack Developer) 十六-网站主页设计

全栈技术 教你成为全栈工程师(Full Stack Developer) 发表于 2016-04-29 15:51:41 阅读1103次


前面几个章节我们做了充分的准备工作,从本节开始,我们开始从幕后走出来,研究给用户看到的部分,也就是网站页面。这里除了技术上的能力外,还需要你的设计天赋和审美能力喽!

请尊重原创,转载请注明来源网站www.shareditor.com以及原始链接地址

找到默认主页入口

 

我们知道页面入口都是配置在路由中的,我们来看下app/config/routing.yml发现没有“/”的路由,但是我们发现了这么几句:

app:
    resource: "@AppBundle/Controller/"
    type:     annotation

 

annotation的意思是“注解”,也就是说这一部分路由配置放在了注释里面,而资源在@AppBundle/Controller/,那么我看下src/AppBundle/Controller/目录

[root@centos7vm mywebsite]# ls src/AppBundle/Controller/
BlogController.php  DefaultController.php

 

这里面的BlogController.php是我们自己写的,没有什么annotation的东东。那我们直接看下src/AppBundle/Controller/DefaultController.php,这个文件是在创建工程时自动生成的

 

<?php

namespace AppBundle\Controller;

use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Symfony\Component\HttpFoundation\Request;

class DefaultController extends Controller
{
    /**
     * @Route("/", name="homepage")
     */
    public function indexAction(Request $request)
    {
        // replace this example code with whatever you need
        return $this->render('default/index.html.twig', array(
            'base_dir' => realpath($this->container->getParameter('kernel.root_dir').'/..'),
        ));
    }
}

这里面的

    /**
     * @Route("/", name="homepage")
     */

意思是说声明了一个路由配置,路由的名字叫做homepage,路由的路径是"/",当被访问时要执行DefaultController::indexAction方法,至此我们又学会了一种路由配置方法annotation,但个人不推荐这种配置,因为配置分散,不方便统一管理

 

我们把这段代码改的单纯一点:

    public function indexAction(Request $request)
    {
        return $this->render('default/index.html.twig');
    }

 

主页模板

 

清掉app/Resources/views/default/index.html.twig,并改成如下:

{% extends "base.html.twig" %}

{% block body %}

<div class="row jumbotron">
    <div class="col-md-1 col-xs-1"></div>
    <div class="col-md-10 col-xs-10"><h1>Welcome Big Data ITors!</h1></div>
    <div class="col-md-1 col-xs-1"></div>
</div>

{% endblock body %}

 

浏览下主页

 

我们熟悉的内容又回来啦

 

在主页中展示科目列表

 

下面我们把Subject的分类展示在主页中,首先我们在管理后台创建这样几个Subject:

请尊重原创,转载请注明来源网站www.shareditor.com以及原始链接地址

其中的Photo是你上传的封面图片的地址,举个例子,在

 

上传一个image后,在图片列表中点击

 

找到

这个地址,并把这个地址填写到Subject的Photo中就行了

 

 

修改src/AppBundle/Controller/DefaultController.php,改成:

    public function indexAction(Request $request)
    {
        $this->subjectRepository = $this->getDoctrine()->getRepository('AppBundle:Subject');
        $subjects = $this->subjectRepository->findAll();

        return $this->render('default/index.html.twig', array(
            'subjects' => $subjects
        ));
    }

 

修改app/Resources/views/default/index.html.twig,如下:

{% extends "base.html.twig" %}

{% block body %}

<div class="row jumbotron">
    <div class="col-md-1 col-xs-1"></div>
    <div class="col-md-10 col-xs-10"><h1>Welcome Big Data ITors!</h1></div>
    <div class="col-md-1 col-xs-1"></div>
</div>
<div class="row">
    <div class="col-sm-1 col-xs-1"></div>

    {% for subject in subjects %}
    <div class="col-sm-2 col-xs-12">
        <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>
    </div>
    {% endfor %}

    <div class="col-sm-1 col-xs-1"></div>
</div>

<br />
<br />


{% endblock body %}

 

见证奇异的时刻到了,打开http://172.16.142.130/app_dev.php/,你会不禁哇塞一下,高大上的内容出来啦:

 

 

是不是很漂亮的说

 

下一节我们继续改进我们的主页内容,让他更专业一些