Skip to content

Latest commit

 

History

History
310 lines (232 loc) · 11.4 KB

03.md

File metadata and controls

310 lines (232 loc) · 11.4 KB
Raw

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

作者: douyasi
网站：http://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个字。

展示登录页面

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

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

20141012211031.jpg

设计不好，不喜勿喷啊。

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

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

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

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

文件位置：/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/login 的 get 访问映射到 AuthorityController 的 getLogin 方法，post 访问映射到AuthorityController 的 postLogin 方法。

下面我们开始书写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过来的进行校验的那一步。

处理登录的位于AuthorityController 的 postLogin方法里，代码如下：

	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 相关 Traits 和 Interface，否则会报错。

文件/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 认证相关配置，将原有默认User和users修改为Admin和admin文件位于/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

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

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