SharEDITor

教你成为全栈工程师(Full Stack Developer) 八-10行代码建起你的网站

全栈技术 教你成为全栈工程师(Full Stack Developer) 发表于 2016-04-20 16:59:31 阅读2602次


从这节开始,我们来完成一个完善的博客网站,我们每一节都会实现一点小功能,逐步完成。基于symfony2搭建网站都是采用MVC设计模式,本文用最少的代码带你感受一下symfony2里的MVC是怎么使用的。

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

小插曲1——开发模式与发布模式

我们做c开发或java开发都会提到debug和release,symfony2也是一样有debug和release,区别在于这么几点:

1. debug模式在执行出错时提示到页面上,release没有,这对调试程序非常有帮助

2. debug模式不用cache缓存,release用,开发时用debug可以避免改了代码不生效的奇怪问题

3. debug模式附加了问题分析工具小插件,在页面上可以看到,可以借助它做优化

4. debug模式访问的url一般是http://127.0.0.1/app_dev.php/***,release模式直接就是http://127.0.0.1/***

 

小插曲2——日志目录和cache目录

日志目录一般在/data/httpdir/mywebsite/app/logs/目录下,cache目录一般在/data/httpdir/mywebsite/app/cache下

一般当我们代码升级用debug模式调试ok了之后,需要清理一下cache才能用release模式访问,清理方式有两种:

1.

[root@centos7vm mywebsite]# cd /data/httpdir/mywebsite
[root@centos7vm mywebsite]# php app/console cache:clear

2. 

[root@centos7vm mywebsite]# rm -rf /data/httpdir/mywebsite/app/cache/*

因为这两个目录是会在网站运行过程中写入内容的,所以需要把这两个目录的权限改成:

[root@centos7vm mywebsite]# chmod -R 777 /data/httpdir/mywebsite/app/cache/
[root@centos7vm mywebsite]# chmod -R 777 /data/httpdir/mywebsite/app/logs/

 

小插曲3——外网访问debug模式

debug模式默认只支持本地访问,不支持外部访问的,原因就是安全的考虑啦,那么对于我们在虚拟机里开发又想在宿主机访问(相当于外部访问)怎么才能开启debug模式呢?

修改/data/httpdir/mywebsite/web/app_dev.php文件,注释掉如下几行代码就好啦:

if (isset($_SERVER['HTTP_CLIENT_IP'])
    || isset($_SERVER['HTTP_X_FORWARDED_FOR'])
    || !(in_array(@$_SERVER['REMOTE_ADDR'], array('127.0.0.1', 'fe80::1', '::1')) || php_sapi_name() === 'cli-server')
) {
    header('HTTP/1.0 403 Forbidden');
    exit('You are not allowed to access this file. Check '.basename(__FILE__).' for more information.');
}

下面在宿主机访问虚拟机的ip试一下,比如我的虚拟机ip是172.16.142.130,那么访问效果如下:

 

小插曲4——什么是Bundle

bundle英文释义是捆,也就是把一些内容捆绑在一起的意思,在symfony2中它就相当于一个组件,各种自带的组件也都是以bundle形式组织的,我们自己开发的内容也可以组织成bundle,便于复用。bundle里一般包含MVC的所有内容以及Resource和config

 

做一个静态页面

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

进入到/data/httpdir/mywebsite/app/Resources/views/目录并创建一个blog目录,并在blog里创建list.html.twig文件内容如下:

 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>MyWebSite</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件(一般不用引入) -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row bg-primary">
    <div class="col-sm-1 col-xs-1"></div>
    <div class="col-sm-11 col-xs-11"><h1><a href="" style="text-decoration: none;color: white;">MyWebSite</a></h1></div>
</div>
<div class="row jumbotron">
    <div class="col-md-1 col-xs-1"></div>
    <div class="col-md-10 col-xs-10"><h1>Welcome to MyWebSite!</h1></div>
    <div class="col-md-1 col-xs-1"></div>
</div>
</body>
</html>

修改/data/httpdir/mywebsite/app/config/routing.yml文件,添加如下行:

blog_list:
    path:     /bloglist/
    defaults: { _controller: AppBundle:Blog:list }

 

创建/data/httpdir/mywebsite/src/AppBundle/Controller/BlogController.php文件内容如下:

<?php

namespace AppBundle\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Symfony\Component\HttpFoundation\Request;

class BlogController extends Controller
{
    public function listAction(Request $request)
    {
        return $this->render('blog/list.html.twig');
    }
}

下面访问http://172.16.142.130/app_dev.php/bloglist/看下效果

 

 

欣赏一下你的高大上的网站吧

 

讲解一下symfony2里的MVC

 

注:本节内容只包括了MVC里的V和C,下一节会涉及到M的部分

先从app/config/routing.yml说起,这里面定义了网站不同的url路径所对应的controller,比如

blog_list:
    path:     /bloglist/
    defaults: { _controller: AppBundle:Blog:list }

blog_list:表示这个配置组名字叫做blog_list(名字其实无所谓,只要不和其他组起成相同名字就行)

path:网站后面的url路径,比如/bloglist/指的就是http://127.0.0.1/bloglist

defaults:访问bloglist路径时响应你的controller是谁,这里设置的是执行AppBundler下的BlogController的listAction方法

 

接下来就看这个AppBundler下的BlogController(这就是MVC里的C)的listAction方法干了什么,打开src/AppBundle/Controller/BlogController.php文件,方法如下:

    public function listAction(Request $request)
    {
        return $this->render('blog/list.html.twig');
    }

render的含义是显示/渲染/输出,也就是说这个action要用blog/list.html.twig这个模板的内容来返回给你数据展示出来

 

下面继续看blog/list.html.twig(这就是MVC里的V),这是一个静态html文件,具体标签含义可以尽情百度一下,涉及到的一些前端知识后面章节也会详细讲,大体内容就是:展示一个菜单栏和一个大宣传文本

 

留个悬念:为什么这个静态网页一定要以twig作为扩展名呢?预知原因如何,且听下回分解。