Laravel入门教程－搭建一个简单的网站

星期五, 2015-11-27 17:18 — shiping1

明确目标

前面我们已经部署好了需要的开发环境，现在该考虑用Laravel进行开发了。我们的目标是建立一个和Laravel入门一样的网站，功能大致如下：

功能说明

文章展示
- 首页（index）
- 文章页（post）
管理功能
- 发表文章
  - Markdown支持
- 编辑文章
- 删除文章
- 登录模块

网站的功能非常简单，但是它已经可以帮我们完成一些简单的工作了，比如你所见到的这个文档。

建立数据库

前面我们已经明确目标网站的基本功能，现在我们先来建立它的数据库。

设计数据库

从功能上看，我们的数据库只需要两张表即可，admin表用来存放管理员帐户信息，docs表则是文章数据。当然你可以自己决定这两张表的名字。

我们建立的是一个功能十分简单的文档网站，因此数据库也可以很简单。admin表我们只需要id、email和password三个字段。docs表我们建立id、title、content、create_date和last_change五个字段。

下面我们可以着手建立这两张表，最简单的方法是直接在mysql中建立，你可以用可视化的phpmyadmin工具，也可以直接使用mysql命令行。但是这里讲的是用laravel框架来创建它。

框架设置

首先我们需要设置一下laravel框架，打开application/config/application.php文件，我们要先把文件中的key参数设置为任意的32位字符串：

'key'=>'YourSecretKeyGoesHere!',

这个字符串会被用于加密我们的密码。然后在application/config/database.php中设置数据库信息，其中database是我们事先建立的，你可以随意命名：

'mysql'=>array(
'driver' =>'mysql',
'host' =>'localhost',
'database'=>'database',
'username'=>'root',
'password'=>'123456',
'charset' =>'utf8',
'prefix' =>'',
),

创建数据库

来自 http://www.dedecms.com/knowledge/program/php/2012/1128/17063.html

然后我们将使用Artisan和Migrations工具来建立数据库，你可以简单的把它理解为一个数据库工具，在使用它之前我们需要初始化它。先把你的php目录加入到系统的环境变量中，然后打开cmd工具cd到web的根目录运行命令：

php artisan migrate:install

这是我们进入database数据库发现里面多了一张名为laravel_migrations的表，它记录了migrate需要的数据。然后我们运行下面的两条命令：

php artisan migrate:make create_admin_table
php artisan migrate:make create_docs_table

运行成功之后我们可以在application/migrations目录看到名为日期_creat_admin_table.php和日期_creat_docs_table.php两个文件。

先打开creat_admin_table.php文件，在up和down方法中添加代码：

publicfunctionup()
{
Schema::create('admin',function($table)
{
$table->increments('id');
$table->string('email',64);
$table->string('password',64);
});
DB::table('admin')->insert(array(
'email'=>'your email',
'password'=>Hash::make('your password'),
));
}
publicfunctiondown()
{
Schema::drop('admin');
}

再编辑creat_docs_table.php文件：

publicfunctionup()
{
Schema::create('docs',function($table)
{
$table->increments('id');
$table->string('title',64);
$table->text('content');
$table->string('create_date',12);
$table->string('last_change',12);
});
DB::table('docs')->insert(array(
'title'=>'test',
'content'=>'just a test!',

来自 http://www.dedecms.com/knowledge/program/php/2012/1128/17063_2.html

'create_date'=>time(),
'last_change'=>''
));
}
publicfunctiondown()
{
Schema::drop('docs');
}

保存完毕之后我们继续运行命令：

来自 http://www.dedecms.com/knowledge/program/php/2012/1128/17063_3.html

php artisan migrate
// 如果你看到下面两条提示，那么说明数据库已经创建完毕。
Migrate:application/2012_08_14_043216_create_admin_table
Migrate:application/2012_08_14_043242_create_docs_table

非常好，网站的数据库已经建好了，我们还插入了两条数据方便我们测试。

建立静态页面

我们并不急着用到前面已经建好的数据库，而是先试着把页面用静态的方式展现出来。

静态首页

首先我们要完成的是网站首页的静态页面，打开application/views/home/目录，删除自带的index.blade.php，建立一个名为index.php的视图：

<!DOCTYPE HTML>
<htmllang="zh-CN">
<head>
<metacharset="UTF-8">
<title>首页</title>
</head>
<body>
<p>这是首页。</p>
</body>
</html>

你可以看出这是一个很简单的静态页面，只能显示‘这是首页。’一句话，不过没关系，后面再慢慢丰富它。

首页的视图已经建好了，通常在MVC模式下我们需要一个controller来调用它，但这里我们不准备这么做。laravel为我们提供了一个比controller更为直观和简单的routes，因为我们要建立的网站非常简单，只有少数的几个页面，完全没必要用到完整的MVC。

打开application/routes.php文件，为首页注册一个路由规则：

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

这条规则的意思是当我们通过GET方式访问'/'目录(网站首页)时，直接返回application/home/index.php视图。

建议你把web树目录设置为laravel框架的public文件夹，这样你只需要访问http://127.0.0.1/即可访问框架，如果你的虚拟机没有足够的权限，apache服务器可以尝试下面的rewrite规则：

来自 http://www.dedecms.com/knowledge/program/php/2012/1128/17063_4.html

RewriteEngineon
RewriteCond%{HTTP_HOST}^127.0.0.1$
RewriteCond%{REQUEST_URI}!^/public/
RewriteCond%{REQUEST_FILENAME}!-f
RewriteCond%{REQUEST_FILENAME}!-d
RewriteRule^(.*)$/public/$1
RewriteCond%{HTTP_HOST}^127.0.0.1$
RewriteRule^(/)?$public/index.php[L]

如果你不想使用以上方法，可以直接访问默认目录http://127.0.0.1/public/。

如果当你访问网站首页的时候看到‘这是首页。’，那么说明我们已经建立一个简单的静态首页，现在我们来完善它：

// application/views/home/index.php
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<link href="/css/style.css"type="text/css"rel="stylesheet"/>
<title>首页</title>
</head>
<body>
<div id="header_wrapper">
<div id="header">
<div id="title">
<h1><a href="/">首页</a><h1>
</div>
</div>
</div>
<div id="main_wrapper" >
<div id="main">

来自 http://www.dedecms.com/knowledge/program/php/2012/1128/17063_5.html

<div id="article">
<p>这是首页</p>
</div>
</div>
</div>
<div id="footer_wrapper">
<div id="footer">
<span>
<a href="/">文档目录</a>
</span>
本页最后修订于：1970年1月1日 | 反馈：test@test.com
</div>
</div>
<div class="clear"></div>
</body>
</html>

我们为index视图增加了三个部分：header_wrapper、main_wrapper、footer_wrapper，这样使网页结构更加清晰。同时我们还在head标签里载入了一个css文件：style.css，它会用来格式化首页。

然后我们在public/css/目录里新建一个为style.css的样式表，样式表内容可以查看：http://laravel.minimee.org/css/style.css。

现在再访问首页你会发现它已经和Laravel入门的样子差不多了，这正是我们的目的。说实话我不太擅长CSS，如果你很熟悉前端，你完全可以按照自己的意愿来写。

来自 http://www.dedecms.com/knowledge/program/php/2012/1128/17063_6.html

文章页面

上面我们已经建好了首页的静态页面，现在我们来完成文章页面，有了上面已经做好的工作，我们可以更快的完成文章页面。

直接复制application/views/home/index.php,然后改名为doc.php：

// application/views/home/doc.php
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<link href="/css/style.css"type="text/css"rel="stylesheet"/>
<title>文章</title>
</head>
<body>
<div id="header_wrapper">
<div id="header">
<div id="title">
<h1><a href="/">文章</a><h1>
</div>
</div>
</div>
<div id="main_wrapper" >
<div id="main">
<div id="article">
<p>这是文章页面</p>
</div>
</div>
</div>
<div id="footer_wrapper">
<div id="footer">
<span>
<a href="/">文档目录</a>
</span>
本页最后修订于：1970年1月1日 | 反馈：test@test.com
</div>
</div>
<div class="clear"></div>
</body>
</html>

然后在application/routes.php中为文章页面注册一个路由规则：

Route::get('doc',function()
{
returnView::make('home.doc');
});

来自 http://www.dedecms.com/knowledge/program/php/2012/1128/17063_7.html

登录页面

登录页面和首页有一些差别，因为我们需要一个表单来进行登录操作，不过大体模板还是差不多，我们直接在article标签内加上一个简单的表单即可：

来自 http://www.dedecms.com/knowledge/program/php/2012/1128/17063_8.html

// application/views/home/login.php
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<link href="/css/style.css"type="text/css"rel="stylesheet"/>
<title>登录</title>
</head>
<body>
<div id="header_wrapper">
<div id="header">
<div id="title">
<h1><a href="/">登录</a><h1>
</div>
</div>
</div>
<div id="main_wrapper" >
<div id="main">
<div id="article">
<form action="/login" method="post">
<input type="text" name="email" />
<input type="password" name="password" />
<input type="submit" value="登录" />
</form>
</div>
</div>
</div>
<div id="footer_wrapper">
<div id="footer">
<span>
<a href="/">文档目录</a>
</span>
本页最后修订于：1970年1月1日 | 反馈：test@test.com
</div>
</div>
<div class="clear"></div>
</body>
</html>

同样需要在application/routes.php中为登录页面注册一个路由规则：

Route::get('login',function()
{
returnView::make('home.login');
});

添加文章页面

// application/views/home/add.php
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<link href="/css/style.css"type="text/css"rel="stylesheet"/>
<title>添加文章</title>
</head>
<body>
<div id="header_wrapper">
<div id="header">

来自 http://www.dedecms.com/knowledge/program/php/2012/1128/17063_9.html

<div id="title">
<h1><a href="/">添加文章</a><h1>
</div>
</div>
</div>
<div id="main_wrapper" >
<div id="main">
<div id="article">

来自 http://www.dedecms.com/knowledge/program/php/2012/1128/17063_10.html

<form action="add" method="post">
<input type="text" name="title" />
<textarea name="content"></textarea>
<button>提交</button>
</form>
</div>
</div>
</div>
<div id="footer_wrapper">
<div id="footer">
<span>
<a href="/">文档目录</a>
</span>
本页最后修订于：1970年1月1日 | 反馈：test@test.com
</div>
</div>
<div class="clear"></div>
</body>
</html>

在路由中添加请求规则：

Route::get('add',function()
{
returnView::make('home.add');
});

修改文章页面

// application/views/home/edit.php
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<link href="/css/style.css"type="text/css"rel="stylesheet"/>
<title>修改文章</title>
</head>
<body>
<div id="header_wrapper">
<div id="header">
<div id="title">
<h1><a href="/">修改文章</a><h1>
</div>
</div>
</div>
<div id="main_wrapper" >
<div id="main">
<div id="article">
<form action="add" method="post">

来自 http://www.dedecms.com/knowledge/program/php/2012/1128/17063_11.html

<input type="text" name="title" />
<textarea name="content"></textarea>
<button>提交</button>
</form>
</div>
</div>
</div>
<div id="footer_wrapper">
<div id="footer">
<span>
<a href="/">文档目录</a>
</span>
本页最后修订于：1970年1月1日 | 反馈：test@test.com
</div>
</div>

来自 http://www.dedecms.com/knowledge/program/php/2012/1128/17063_12.html

<div class="clear"></div>
</body>
</html>

在路由中添加请求规则：

Route::get('edit',function()
{
returnView::make('home.edit');
});

到这里我们就已经把所有需要的静态页面都建立了起来，我们可以通过访问对应的url来测试页面。不过你可能已经发现了问题，尽管都是静态页面，但是我们也重复得太多了，虽然它可以工作，但是却不够优雅。

使用blade模板重构页面

我们用HTML建立了所需页面的静态版本，可能你也发现了问题，我们重复了很多代码。其实几个页面中大部分内容都是相同的，但是我们却重复了写了多次。

不过没有关系，Laravel框架为我们提供了Blade模板，它可以让我们把页面的公共部分提取出来。现在让我们重构一下前面的页面。

首先在Views目录中建立一个主模板：

// application/views/main.blade.php
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<link href="/css/style.css"type="text/css"rel="stylesheet"/>
<title>{{$title}}</title>
</head>
<body>
<div id="header_wrapper">
<div id="header">
<div id="title">
<h1><a href="/">{{ $title }}</a><h1>

来自 http://www.dedecms.com/knowledge/program/php/2012/1128/17063_13.html

</div>
</div>
</div>
<div id="main_wrapper" >
<div id="main">
<div id="article">
@yield('content')
</div>
</div>
</div>
<div id="footer_wrapper">
<div id="footer">
<span>
<a href="/">文档目录</a>
</span>
本页最后修订于：1970年1月1日 | 反馈：test@test.com
</div>
</div>
<div class="clear"></div>
</body>
</html>

Laravel框架的Blade模板都是以‘.blade.php’结尾，所有‘.blade.php’视图都会被Blade类解析。我们把页面的共同部分都写入了main模板中，你会看到几个新的语法：

{{$title}} // Blade模板类会把它解析成为 <?php echo $title; ?>
@yield('content')

然后我们来建立主页模板：

// application/views/index.blade.php
@layout('main')
@section('content')
<p>Thisisindex.</p>
@endsection

现在我们的index视图变得非常简单了，Laravel会自动加载main模板然后替换content中的内容。依葫芦画瓢建立其他页面模板：

// application/views/doc.blade.php
@layout('main')
@section('content')

来自 http://www.dedecms.com/knowledge/program/php/2012/1128/17063_14.html

<p>Thisisdoc page.</p>
@endsection
// application/views/login.blade.php
@layout('main')
@section('content')
<form action="/login"method="post">
<input type="text"name="email"/>
<input type="password"name="password"/>
<input type="submit"value="登录"/>
</form>
@endsection
//application/views/add.blade.php
@layout('main')
@section('content')
<form action="add"method="post">
<input type="text"name="title"/>
<textarea name="content"></textarea>
<button>提交</button>
</form>
@endsection
//application/views/edit.blade.php
@layout('main')
@section('content')
<form action="add"method="post">
<input type="text"name="title"/>
<textarea name="content"></textarea>

来自 http://www.dedecms.com/knowledge/program/php/2012/1128/17063_15.html

<button>提交</button>
</form>
@endsection

http://www.dedecms.com/knowledge/program/php/2012/1128/17063_16.html

普通分类:

laravel

You are here

明确目标

建立数据库

设计数据库

框架设置

创建数据库

建立静态页面

静态首页

文章页面

登录页面

添加文章页面

修改文章页面

使用blade模板重构页面

友情链接

搜索表单

用户登录

You are here

Laravel入门教程－搭建一个简单的网站

明确目标

建立数据库

设计数据库

框架设置

创建数据库

建立静态页面

静态首页

文章页面

登录页面

添加文章页面

修改文章页面

使用blade模板重构页面

友情链接