Laravel入门教程——一个简单cms的实现(03)

作者: douyasi
网站:https://douyasi.com/category/startlaravel/
备注:本教程是在当前最新Laravel稳定版v4.2.X下实现的,其它相异版本如果有问题请自行排除。
本文为作者原创记录,转载请保留署名与来源。

页面显示与路由控制

建立静态首页

实际上,由于目前数据很少,复杂的首页页面对我们来说是种干扰,不如先写一个简单的首页。

为了方便快捷起见,我们把控制器,视图,模型文件都放在app对应目录下,位于顶级命名空间下,当然你也可以使用或建立 workbench 来管理的你的代码。

好,在 /app/views/ 下新建一个 index.blade.php,写下代码:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>
    <p>这是首页</p>
</body>
</html>

现在,我们需要实现访问网站域名首页就能展示“这是首页”内容。

下面,我们修改下路由,文件位于 /app/route.app :

Route::get('/',function()
{
    returnView::make('index');
});

随后,我们访问下网站首页,就能看到“这是首页”4个字。

展示登录页面

首页我们已经显示出来,下面,我们开始实现登录页面。
LaravelBlade 模版对于某些新接触的人来说,很不习惯,实际上我也不习惯,当然你也可以不使用它的一些语法,直接使用原生的HTML/PHP 标签。

我们先把登录页面给套出来,登录页面看起来像下图:

20141012211031.jpg

设计不好,不喜勿喷啊。

我们先把 jsimgcss 等资源按一定的规范放在网站根目录 /public/assets 文件夹下。 assets 文件夹下包括所有静态资源,目录结构大概如下:

/public/
    |__ css/ 
        |_ style.css
        |_ ...
    |__ img/
        |_ favicon.ico
        |_ ...
    |__ js/
        |_ script.js
        |_ ...
    |__ lib/
        |__ font-awesome/
            |__ fonts/
                |__ ...
            |__ ...

既然使用 Laravel,还是要必要学习下它的 blade 模版语法,以及其相关表单和HTML标签。

本人比较喜欢那种头中尾切分的那种 layout 布局,我们可以把 layout 模版按头中尾切分细一点。由于登录页面布局跟后台布局没有多大统一地方(估计就只有 HTML meta 声明部分有些一样),故我按以下来设置 layoutblade 代码。

文件位置:/app/view/layout/base.blade.php

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>@section('title') YASCMF - YASCMF @show{{-- 页面标题 --}}</title>
    <meta name="description" content="{{{ isset($description) ? $description : 'YASCMF' }}}" />
    <meta name="keywords" content="{{{ isset($keywords) ? $keywords : 'YASCMF' }}}" />
    <meta name="author" content="{{{ isset($author) ? $$author : 'http://raoyc.com' }}}" />
    <meta name="renderer" content="webkit">{{-- 360浏览器使用webkit内核渲染页面 --}}
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />{{-- IE(内核)浏览器优先使用高版本内核 --}}
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">{{-- 移动端页面缩放 --}}

    <link rel="shortcut icon" href="{{ asset('assets/img/favicon.ico') }}" type="image/x-icon">{{-- favicon --}}

    @section('head_css')
    @show{{-- head区域css样式表 --}}
    
    @section('head_js')
    @show{{-- head区域javscript脚本 --}}
    
    @section('beforeStyle')
    @show{{-- 在内联样式之前填充一些东西 --}}

    @section('head_style')
    @show{{-- head区域内联css样式表 --}}

    @section('afterStyle')
    @show{{-- 在内联样式之后填充一些东西 --}}
</head>
<body>
    @section('beforeBody')
    @show{{--在正文之后填充一些东西 --}}

    @section('body')
    @show{{-- 正文部分 --}}

    @section('afterBody')
    @show{{-- 在正文之后填充一些东西,比如统计代码之类的东东 --}}

</body>
</html>

我们先来学习下一些blade语法:

@section('title') 为区块,以便后续模版继承与修改。

{{{ isset($description) ? $description : 'YASCMF' }}} 输出 $description 之前先检查该变量是否存在,如果存在则输出,否则给默认值 YASCMF

三个连大括号({})表示对变量中的特殊字符串进行自动转义。

{{-- 这是注释内容 --}} 表示注释。

我们已经写好了一个基础的 layout,下面我们开始写下针对登录页面的 blade 模版页面。

文件位置:/app/view/authority/login.blade.php

@extends('layout.base')

@section('title') 登录 - YASCMF @stop

@section('head_style')
<style type="text/css">
body{font-family:Georgia,Tahoma,"Microsoft YaHei",SimSun;font-size:12px;background:url('{{ asset('assets/img/bg/bg.jpg') }}') no-repeat scroll center center;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
a{text-decoration:none;color:#999;}
a:hover{text-decoration:underline;}
img{vertical-align:middle;margin-top:-4px;}
#login_wrapper {width: 960px;margin: 10px auto;}
#login_box{width:420px;margin:15% auto;}
.lb_top{width:420px;height:90px;margin:0 auto;background-color:#094;}
#lb_title{text-align:center;font-weight:bold;font-size:20px;color:#fff;margin:10px;padding:30px;}
.lb_form{width:420px;background-color:#fff;padding-top:20px;padding-bottom:20px;text-align:center;}
#login_form input{display:block;width:200px;margin:20px;padding:5px;color:#000;border:1px solid #333;clear:both;}
input,textarea,select {font-size:12px;font-family:Georgia,"Times New Roman",Times,serif;}
input#sf_submit {display:block;width:120px;font-size:12px;font-weight: bold;text-transform: uppercase;color:#fff;background-color: #094;border:none;cursor:pointer;}
.lb_bottom{width:420px;height:50px;background-color:#083;text-align:center;padding-top:20px;font-size:14px;color:#f0f0f0;}
.lb_bottom a{color:#fff;}
</style>
@parent
@stop

@section('body')
    <div id="login_wrapper">
        <div id="login_box">
            <div class="lb_top">
                <div id="lb_title"><a href="{{ url('') }}"><img src="{{ asset('assets/img/yas_logo.png')}}" /></a> - 芽丝CMF</div>
            </div>
            <div class="lb_form" class="clearfix">
                {{ Form::open(array('route' => 'login','id' => 'login_form', 'method' => 'post')) }}
                
                    {{ Form::text('username',null,array('placeholder'=>'请输入用户名', 'class' => 'input_text', 'id' =>'username', 'maxlength'=>20, 'onFocus' => "this.value=(this.value=='UserName')? '' : this.value;")) }}
                    {{ Form::password('password', array('placeholder'=>'请输入用户密码', 'class' => 'input_text', 'id' =>'password', 'maxlength'=>20, 'onFocus' => "this.value=(this.value=='PassWord')? '' : this.value;")) }}
                    {{ Form::submit('登录',array('id' => 'sf_submit')) }}
                {{ Form::close() }}
            </div>
            <div class="lb_bottom">
                <p>Copyright &copy; 2011 - 2014 All by <a href="http://raoyc.com/" />raoyc</a></p>
            </div>
        </div>
    </div>
@stop

我们接着学习 blade 标签和一些生成 Form 表单方法:

上段代码里,我们看到了@extends('layout.base'),这个表示继承我们最上面的base.blade.php,继承以后,我们需要根据当前登录页面实际,修改自己特定的section,比如标题 @section('title') 、head内联样式 @section('head_style') 、正文body @section('body')

我们发现一些 Form::xxx 之类的代码,这些是 Laravel 内置的一些生成 Form 表单元素的方法,具体请查阅官方帮助手册,如果你觉得很麻烦,也可以使用原生的HTML代码。

模版页面我们都弄好了,现在通过修改路由与控制器,访问前台登录页面看看。

修改路由,文件位置:/app/routes.php ,这里我们使用到路由群组和路由筛选器(关于路由筛选器 filter,后文再谈),以便后期维护方便。

/*路由群组*/
Route::group(array('prefix' => 'auth'), function () {
    $Authority = 'AuthorityController@';
    Route::group(array('before' => 'guest'), function () use ($Authority) {
        # 登录
        Route::get('login', array('as' => 'login', 'uses' => $Authority.'getLogin'));
        Route::post('login', $Authority.'postLogin');
    });
});

上面路由代码,把对 auth/loginget 访问映射到 AuthorityControllergetLogin 方法,post 访问映射到AuthorityControllerpostLogin 方法。

下面我们开始书写AuthorityController,文件位置:/app/controllers/AuthorityController.php

<?php
class AuthorityController extends BaseController {

    public function getLogin()
    {
        return View::make('authority.login');
    }
    
    public function postLogin()
    {
    
    }

}

postLogin方法我们暂时留空,后面用它会来处理登录事务。

现在我们在浏览器上访问 http://{locdomain}/auth/login ,然后出现与我们设计图相差无几的界面:

20141013155201.jpg

处理登录逻辑

登录页面已经完整展示出来了,我们现在处理下登录业务逻辑,就是点击登录按钮之后的对POST过来的进行校验的那一步。

处理登录的位于AuthorityControllerpostLogin方法里,代码如下:

    public function postLogin()
    {
        $credentials = array('username'=>Input::get('username'), 'password'=>Input::get('password'));  //认证凭证
        if (Auth::attempt($credentials))
        {
            return Redirect::intended();
        }
        else {
            // 登录失败,跳回
            return Redirect::back()
                ->withInput()
                ->withErrors(array('attempt' => '“用户名”或“密码”错误,请重新登录!'));
        }
    }

这里我们使用到 Laravel 自带的 Auth 认证与安全类方法,默认情况下,Laravel 是对数据库 users 表进行相关身份认证的,而我们这里操作的是 admin 表用户,所以我们需要修改 model 里面 Admin.php,给其继承 Auth 相关 TraitsInterface,否则会报错。

文件/apps/models/Admin.php的代码:

<?php
use Illuminate\Auth\UserTrait;
use Illuminate\Auth\UserInterface;
use Illuminate\Auth\Reminders\RemindableTrait;
use Illuminate\Auth\Reminders\RemindableInterface;

class Admin extends Eloquent implements UserInterface, RemindableInterface{
    use UserTrait, RemindableTrait;
    protected $table = 'admin';
    //protected $hidden = array('password', 'remember_token');
}

修改 Laravel 认证相关配置,将原有默认Userusers修改为Adminadmin文件位于/apps/config/auth.php

'model' => 'Admin',
'table' => 'admin',

上面控制器 postLogin()方法在登录校验失败时,会传递一个错误信息到 login 视图里,我们需要简单修改下 login.blade.php

......
{{ Form::close() }}
<p class="error" style="color:#f00;">{{ $errors->first('attempt') }}</p>
            </div>
            <div class="lb_bottom">
                <p>Copyright &copy; 2011 - 2014 All by <a href="http://raoyc.com/" />raoyc</a></p>
            </div>
......

好的,现在我们尝试下登录看看。
在用户名和密码错误的情况下,会出现下图:

20141013173908.jpg

在用户名和密码正确的情况下,会跳回首页。

好了,这一节就讲到这里,下一节我们继续深入。

标签:laravel