## 第5节 搭建博客的前台、后台
### 5.1 修改默认路由
*D:\wamp\www\newblog.com\app\Http\routes.php*
~~~
Route::get('/', function () {
return view('welcome');
});
Route::auth();
Route::get('/home', 'HomeController@index');
~~~
修改为:
~~~
Route::auth();
Route::get('/', 'HomeController@index');
~~~
#### 查看HomeController的index()
~~~
public function index()
{
return view('home');
}
~~~
`return view('home');` 很好理解,就是返回 `home` 的视图。
更多关于视图:<http://d.laravel-china.org/docs/5.2/views>
> 我们这里就不深入讲解视图的内容了,因为该部分其实很简单,我们直接使用他们。
打开 `home.blade.php` 视图文件:
*D:\wamp\www\newblog.com\resources\views\home.blade.php*
~~~
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-default">
<div class="panel-heading">Dashboard</div>
<div class="panel-body">
You are logged in!
</div>
</div>
</div>
</div>
</div>
@endsection
~~~
现在访问首页,会自动跳转到登录页:`http://newblog.com/login`,这是中间件起的作用。
我们去掉强制登录的话,可以注释中间件的引入。
*D:\wamp\www\newblog.com\app\Http\Controllers\HomeController.php*
~~~
public function __construct()
{
// $this->middleware('auth');
}
~~~
#### 同步github
~~~
git add -A
git commit -m 'route'
git push
git checkout master
git merge route
git push
git branch -d route
~~~
### 5.2 向视图文件输出数据
*D:\wamp\www\newblog.com\app\Http\Controllers\HomeController.php*
~~~
public function index()
{
return view('home')->withArticles(\App\Models\Article::all());
}
~~~
*D:\wamp\www\newblog.com\resources\views\home.blade.php*
在视图文件中,使用 `{{ dd($articles) }}` 打印传递过来的 `$articles`
~~~
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-default">
<div class="panel-heading">Dashboard</div>
<div class="panel-body">
{{ dd($articles) }}
</div>
</div>
</div>
</div>
</div>
@endsection
~~~
查看效果:
![](https://box.kancloud.cn/fef967180ab79f883516c6a32ef3bb7e_749x541.png)
#### 保险起见,我们创建一个分支 `mvc`
### 5.3 修改视图文件
*D:\wamp\www\newblog.com\resources\views\home.blade.php*
~~~
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row">
<div class="col-md-12" style="text-align:center; padding-bottom: 10px;">
<h1><a href="{{ url('/') }}">我的第一个Laravel博客</a></h1>
<p>本来可以靠才华,却任性的要靠实力! by 波哥</p>
</div>
</div>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-default">
<div class="panel-heading">文章列表</div>
<div class="panel-body">
<table class="table">
<tr>
<th>文章编号</th>
<th>文章标题</th>
<th>作者</th>
<th>创建时间</th>
</tr>
@foreach($articles as $article)
<tr>
<td>{{ $article->id }}</td>
<td>{{ $article->title }}</td>
<td>{{ $article->user_id }}</td>
<td>{{ date('Y-m-d H:i:s', $article->created_time) }}</td>
</tr>
@endforeach
</table>
</div>
</div>
</div>
</div>
</div>
@endsection
~~~
![](https://box.kancloud.cn/099d8d0c174465a752f3a89699aceae0_943x728.png)
博客的前台列表页显示,就大功告成啦!当然也可以添加上一个分页,后面,我们再来做完善的事情。
### 5.4 开始搭建博客后台
#### 控制器
Artisan命令:
~~~
php artisan make:controller Admin/HomeController
~~~
生成后台的控制器文件:`D:\wamp\www\newblog.com\app\Http\Controllers\Admin\HomeController.php`
#### 添加路由
后台的页面是需要置于`登录以后才可以访问`,所以防止在 `auth` 中间件下:
*D:\wamp\www\newblog.com\app\Http\routes.php*
~~~
Route::group(['middleware' => 'auth', 'namespace' => 'Admin', 'prefix' => 'admin'], function() {
Route::get('/', 'HomeController@index');
});
~~~
**新建方法:**
*D:\wamp\www\newblog.com\app\Http\Controllers\Admin\HomeController.php*
~~~
<?php
namespace App\Http\Controllers\Admin;
use Illuminate\Http\Request;
use App\Http\Requests;
use App\Http\Controllers\Controller;
class HomeController extends Controller
{
public function index()
{
return view('admin/home');
}
}
~~~
**新建视图**
*D:\wamp\www\newblog.com\app\Http\Controllers\Admin\HomeController.php*
~~~
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row">
<div class="col-md-12" style="text-align:center; padding-bottom: 10px;">
<h1><a href="{{ url('admin') }}">后台</a></h1>
<p>本来可以靠才华,却任性的要靠实力! by 波哥</p>
</div>
</div>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<ul>
<li>
<a href="{{ url('admin/article') }}" class="btn btn-lg btn-success col-xs-2">管理文章</a>
</li>
</ul>
</div>
</div>
</div>
@endsection
~~~
当前效果:
![](https://box.kancloud.cn/60e7da8318c9ab15f799c8fca129ad67_943x541.png)
**登录后跳转到后台首页**
*D:\wamp\www\newblog.com\app\Http\Controllers\Auth\AuthController.php*
~~~
protected $redirectTo = '/';
~~~
修改Wie
~~~
protected $redirectTo = 'admin';
~~~