Laravel构建个人博客

序言

使用 Laravel 创建一个博客的教程。Laravel的版本为5.7,初学者不用担心版本版本问题而放弃本教程,本教程从最简单的开始,基本博客功能在任何版本都是一样的使用方法。

安装

Laravel 对系统有一些要求。请确保你的服务器或者开发环境满足下面的要求:

  • PHP >= 7.1.3
  • OpenSSL PHP 扩展
  • PDO PHP 扩展
  • Mbstring PHP 扩展
  • Tokenizer PHP 扩展
  • XML PHP 扩展
  • Ctype PHP 扩展
  • JSON PHP 扩展

安装 Laravel

Laravel 使用 Composer来管理项目依赖。因此,在使用 Laravel 之前,请确保你的机器已经安装了 Composer

Composer 安装就不多写了,官网下载:戳这里
安装方法百度一大堆,如果还是不清楚的小白欢迎加企鹅群:312621686

Laravel 安装器创建项目

首先,通过使用 Composer 安装 Laravel 安装器:

1
composer global require "laravel/installer"

安装完成后,laravel new 命令会在你指定的目录创建一个全新的 Laravel项目。例如,laravel new myblog 将会创建一个名为 myblog 的目录,并已安装好所有的 Laravel依赖项:

1
laravel new myblog

composer 安装项目可能需要翻墙,如果没有梯子可以使用国内镜像:composer中国镜像

配置数据库

创建 myblog 的数据库,在项目 .env 文件中修改一下数据库配置,连接数据库:

1
2
3
4
5
6
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=homestead
DB_USERNAME=homestead
DB_PASSWORD=secret

数据迁移:

1
php artisan migrate

Auth

Laravel 提供了一个简单的命令来快速生成身份验证所需的路由和视图:

1
php artisan make:auth

该命令会生成布局、注册和登录视图以及所有的认证登录注册的路由。同时它还会生成 HomeController 来处理应用的登录请求。

php artisan make:auth 命令会在 resources/views/auth 目录创建所有认证需要的视图。
同时, make:auth 命令还创建了 resources/views/layouts 目录,该目录包含了应用的基本布局视图。所有这些视图都是用 Bootstrap CSS 框架,你也可以根据需要对其自定义。

总结

本节需要掌握Laravel的基本安装,数据库配置以及使用Laravel为我们准备好的用户认证功能。

源码地址:戳这里

登录

上一节我们已经实现了使用了Laravel自带的用户认证功能,这节我们将修改登录界面和自定义定了字段。

自定义登录界面

php artisan make:auth 命令会在 resources/views/auth 目录创建所有认证需要的视图。同时, make:auth 命令还创建了 resources/views/layouts 目录,该目录包含了应用的基本布局视图。

新建视图

resources/views/auth 文件夹下新建 myLogin.blade.php 登录视图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Myblog</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
<!-- Fonts and icons -->
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- CSS Files -->
<link href="./assets/css/material-kit.css" rel="stylesheet" />
<link href="./assets/css/style.css" rel="stylesheet" />
</head>

<body class="login-page sidebar-collapse">
<div class="page-header header-filter" style="background-image: url('./assets/img/bg4.jpg'); background-size: cover; background-position: top center;">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6 ml-auto mr-auto">
<div class="card card-login">
<form class="form" method="" action="" style="min-height: 365px;">
<div class="card-header card-header-primary text-center">
<h2 class="card-title">Login</h2>
</div>
<div class="card-body">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-user"></i>
</span>
</div>
<input type="text" class="form-control login-text" placeholder="账号...">
<span class="bmd-error">We'll never share your email with anyone else.</span>
</div>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-lock"></i>
</span>
</div>
<input type="password" class="form-control login-text" placeholder="密码...">
</div>
<div class="input-group form-check" style="padding-top: 0">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}> Remember Me
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
</div>
<div class="footer text-center" style="margin-bottom: 20px;">
<button class="btn btn-primary btn-raised">
登录
<div class="ripple-container"></div>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<nav class="float-left">
<ul>
<li>
<a href="http://www.iwanli.me">
iwanli
</a>
</li>
</ul>
</nav>
<div class="copyright float-right">
2018, make a better web.
</div>
</div>
</footer>
</div>
<!-- Core JS Files -->
<script src="./assets/js/core/jquery.min.js" type="text/javascript"></script>
<script src="./assets/js/core/popper.min.js" type="text/javascript"></script>
<script src="./assets/js/core/bootstrap-material-design.min.js" type="text/javascript"></script>
<script src="./assets/js/material-kit.js" type="text/javascript"></script>
</body>

</html>

更换登录页面

接下来在App\Http\Controllers\Controller 中重写登录视图方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use Illuminate\Foundation\Auth\AuthenticatesUsers;

class LoginController extends Controller
{
use AuthenticatesUsers;

protected $redirectTo = '/home';

public function __construct()
{
$this->middleware('guest')->except('logout');
}

/**
* 重写登录视图方法
*/
public function showLoginForm()
{
return view('auth.myLogin');
}
}

资源文件

在浏览器中查看页面是我们发现样式全乱了,接下来我们将模板中的css、js以及图片文件放到项目 public 目录下,然后在 myLogin.blade.php 中修改资源文件路径:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">

<head>
......
<link href="{{ asset('assets/css/material-kit.css') }}" rel="stylesheet" />
<link href="{{ asset('assets/css/style.css') }}" rel="stylesheet" />
</head>

<body class="login-page sidebar-collapse">
......
<!-- Core JS Files -->
<script src="{{asset('assets/js/core/jquery.min.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/js/core/popper.min.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/js/core/bootstrap-material-design.min.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/js/material-kit.js')}}" type="text/javascript"></script>
</body>

</html>

完善

最后一步,我们将 resources/views/auth/login.blade.php 中的登录代码更换到 resources/views/auth/myLogin.blade.php 中:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
......
<body class="login-page sidebar-collapse">
......
<form class="form" method="post" action="{{ route('login') }}" style="min-height: 365px;">
@csrf
<div class="card-header card-header-primary text-center">
<h2 class="card-title">Login</h2>
</div>
<div class="card-body">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-user"></i>
</span>
</div>
<input type="text" class="form-control login-text" name="email" value="{{ old('email') }}" placeholder="账号...">
@if ($errors->has('email'))
<span class="bmd-error">{{ $errors->first('email') }}</span>
@endif
</div>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-lock"></i>
</span>
</div>
<input type="password" class="form-control login-text" name="password" placeholder="密码...">
@if ($errors->has('password'))
<span class="bmd-error">{{ $errors->first('password') }}</span>
@endif
</div>
<div class="input-group form-check" style="padding-top: 0">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}> Remember Me
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
</div>
<div class="footer text-center" style="margin-bottom: 20px;">
<button class="btn btn-primary btn-raised">
登录
<div class="ripple-container"></div>
</button>
</div>
</form>
......
</body>
......

总结

  1. resources/views/auth 文件夹下新建 myLogin.blade.php 登录视图
  2. App\Http\Controllers\Controller 中重写登录视图方法
  3. 引入样式文件,修改登录视图中资源文件路径
  4. 修改登录视图字段,路由