搭建第一个Laravel博客项目：从环境配置到页面展示

# 1. 环境准备

## 1.1 基本要求

在开始之前，确保你的开发环境满足以下要求：

- 操作系统：Windows，Linux，macOS
- PHP 版本：7.3+
- Composer：最新版本

## 1.2 安装PHP

首先，我们需要安装 PHP。以下是在 Ubuntu 系统上安装 PHP 的步骤：

1. 打开终端并输入以下命令以安装 PHP：

sudo apt update
sudo apt install php

2. 安装完成后，可以通过以下命令检查 PHP 版本：

php -v

确保 PHP 版本为 7.3 或更高。

## 1.3 安装Composer

Composer 是 PHP 的依赖管理工具，我们可以使用它来安装 Laravel 框架和其他 PHP 包。

以下是在 Ubuntu 系统上安装 Composer 的步骤：

1. 打开终端并依次输入以下命令：

cd ~
curl -sS https://getcomposer.org/installer -o composer-setup.php
sudo php composer-setup.php --install-dir=/usr/local/bin --filename=composer

2. 安装完成后，使用以下命令验证安装：

composer

如果安装成功，将显示 Composer 的帮助信息。

## 1.4 下载Laravel框架

现在，我们可以使用 Composer 来下载安装 Laravel 框架。在命令行中执行以下命令：

composer create-project --prefer-dist laravel/laravel blog

上述命令将会在当前目录下创建一个名为 "blog" 的 Laravel 项目。

在接下来的章节中，我们将会学习如何配置数据库、创建项目，并进行一些基本的设置。

# 2. 配置数据库

在搭建Laravel项目之前，需要进行数据库的相关配置，包括创建数据库、配置.env文件和设置数据库连接。

#### 2.1 创建数据库

首先，使用数据库管理工具（如phpMyAdmin、Navicat等）或者命令行工具创建一个新的数据库，假设我们将数据库命名为`blog_db`。

CREATE DATABASE blog_db;

#### 2.2 配置.env文件

在Laravel项目根目录中，复制一份`.env.example`文件并将其重命名为`.env`，然后编辑`.env`文件，设置数据库连接信息。

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=blog_db
DB_USERNAME=your_username
DB_PASSWORD=your_password

将`DB_DATABASE`、`DB_USERNAME`和`DB_PASSWORD`的值修改为你的数据库名、用户名和密码。

#### 2.3 设置数据库连接

接下来，打开`config/database.php`文件，确保数据库连接信息正确，通常情况下不需要修改该文件，因为`.env`文件中的配置会自动读取到该文件中。

'mysql' => [
    'driver' => 'mysql',
    'host' => env('DB_HOST', '127.0.0.1'),
    'port' => env('DB_PORT', '3306'),
    'database' => env('DB_DATABASE', 'blog_db'),
    'username' => env('DB_USERNAME', 'your_username'),
    'password' => env('DB_PASSWORD', 'your_password'),
    // ...
],

完成以上步骤后，数据库的相关配置就完成了，接下来可以开始创建Laravel项目并进行数据库迁移了。

# 3. 创建博客项目
在本章中，我们将使用Laravel框架创建一个简单的博客项目，并配置相应的虚拟主机。接下来，我们将一步步完成以下内容：

#### 3.1 使用Laravel命令创建项目
首先，确保已经安装了Laravel的安装器，若未安装，可以使用Composer全局安装：

composer global require laravel/installer

然后，使用以下命令在指定目录创建一个名为"blog"的Laravel项目：

laravel new blog

#### 3.2 配置虚拟主机
在本地开发环境中，我们可以通过配置虚拟主机来访问Laravel项目。以下是一个简单的Apache虚拟主机配置示例（假设项目位于 /var/www/html/blog/public 目录）：

<VirtualHost *:80>
    ServerName blog.test
    DocumentRoot /var/www/html/blog/public

    <Directory /var/www/html/blog/public>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>

请根据自己的实际情况进行调整，然后将域名指向本地的IP地址。

#### 3.3 运行项目
在浏览器中输入配置的域名（比如：http://blog.test），如果一切配置正确，你将会看到Laravel的欢迎页面。

现在，我们已经成功创建了一个基础的Laravel博客项目，并且配置了虚拟主机来访问该项目。接下来，我们将进一步完善项目的功能和外观。

# 4. 创建数据库模型和迁移

在使用Laravel框架开发博客项目之前，我们需要设计数据库，并创建相应的数据模型和迁移文件，以便建立数据库表结构。

#### 4.1 创建文章模型

首先，我们需要创建一个文章模型来代表我们的博客文章。打开终端或命令行工具，并进入项目根目录，执行以下命令：

php artisan make:model Article

这将在 `app` 目录下生成一个名为 `Article.php` 的模型文件。在该文件中，我们可以定义文章的属性和关联关系，以及与数据库交互的方法。

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Article extends Model
{
    protected $fillable = [
        'title', 'content', 'author_id'
    ];

    public function author()
    {
        return $this->belongsTo(User::class, 'author_id');
    }
}

在上述示例中，我们定义了 `Article` 模型的属性包括 `title`、`content` 和 `author_id`。同时，我们使用了 `belongsTo` 方法表示 `Article` 模型与 `User` 模型之间是一对多关系，即一篇文章只能由一个作者编写。

#### 4.2 创建迁移文件

接下来，我们需要创建一个迁移文件以便将数据库表结构与模型关联起来。执行以下命令：

php artisan make:migration create_articles_table --create=articles

这将在 `database/migrations` 目录下生成一个迁移文件 `YYYY_MM_DD_HHMMSS_create_articles_table.php`。在该文件中，我们可以使用 Laravel 提供的便捷方法来定义数据库表的字段和属性。

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateArticlesTable extends Migration
{
    public function up()
    {
        Schema::create('articles', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->text('content');
            $table->foreignId('author_id')->constrained('users')->onDelete('cascade');
            $table->timestamps();
        });
    }

    public function down()
    {
        Schema::dropIfExists('articles');
    }
}

在上述示例中，我们使用了 `id` 方法来创建自增主键的 `id` 字段，`string` 方法用于创建 `title` 字段（文章标题），`text` 方法用于创建 `content` 字段（文章内容）。`foreignId` 方法用于创建 `author_id` 字段，它是一个外键并且与 `users` 表关联，`constrained` 方法将外键约束到 `users` 表的 `id` 字段，并设置删除时级联删除。

#### 4.3 执行迁移

现在，我们可以执行迁移命令来创建实际的数据库表。运行以下命令：

php artisan migrate

这将根据我们定义的迁移文件，创建名为 `articles` 的表格。

至此，我们已经成功地创建了数据库模型和迁移文件，并通过迁移创建了相应的数据库表。在下一章节，我们将继续编写控制器和路由，实现博客文章的增删改查功能。

# 5. 编写控制器和路由

在这一部分，我们将学习如何在Laravel中编写控制器和定义路由，以实现基本的CRUD功能。

#### 5.1 创建文章控制器

首先，我们需要创建一个控制器来处理与文章相关的操作。使用以下命令来生成一个基本的文章控制器：

php artisan make:controller PostController

这将在 `app/Http/Controllers` 目录下创建一个名为 `PostController` 的控制器文件。

在 `PostController` 中，我们可以定义各种方法来处理创建、读取、更新和删除文章的逻辑。比如，我们可以添加 `index` 方法来显示所有文章，`show` 方法来显示单个文章，`store` 方法来存储新文章，`update` 方法来更新文章，以及 `destroy` 方法来删除文章。

#### 5.2 定义路由

在 Laravel 中，我们可以使用 `routes/web.php` 文件来定义网站的路由。我们可以通过路由将请求指定到相应的控制器方法上。

举个例子，我们可以添加以下路由来指向刚刚创建的文章控制器：

// 显示所有文章
Route::get('/posts', 'PostController@index');

// 显示单个文章
Route::get('/posts/{id}', 'PostController@show');

// 存储新文章
Route::post('/posts', 'PostController@store');

// 更新文章
Route::put('/posts/{id}', 'PostController@update');

// 删除文章
Route::delete('/posts/{id}', 'PostController@destroy');

#### 5.3 实现基本的CRUD功能

在控制器方法中，我们可以使用 Eloquent 模型来与数据库交互，实现基本的CRUD功能。通过 Eloquent 模型，我们可以轻松地执行数据库查询、插入、更新和删除操作。

// 显示所有文章
public function index()
{
    $posts = Post::all();
    return view('posts.index', ['posts' => $posts]);
}
// 显示单个文章
public function show($id)
{
    $post = Post::findOrFail($id);
    return view('posts.show', ['post' => $post]);
}
// 存储新文章
public function store(Request $request)
{
    $post = new Post;
    $post->title = $request->title;
    $post->content = $request->content;
    $post->save();
    return redirect('/posts');
}
// 更新文章
public function update(Request $request, $id)
{
    $post = Post::findOrFail($id);
    $post->title = $request->title;
    $post->content = $request->content;
    $post->save();
    return redirect('/posts');
}
// 删除文章
public function destroy($id)
{
    $post = Post::findOrFail($id);
    $post->delete();
    return redirect('/posts');
}

通过以上步骤，我们成功地在 Laravel 中创建了一个基本的文章控制器，并定义了相应的路由，实现了基本的CRUD功能。

# 6. 六．页面展示

六．１　创建页面视图

在Laravel项目中，视图用于展示数据和呈现页面。通过创建视图来显示博客文章的内容。

首先，我们需要创建一个用于展示文章列表的视图。在resources/views目录下，创建一个名为articles.blade.php的文件，代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>文章列表</title>
</head>
<body>
    <h1>文章列表</h1>
    <table>
        <tr>
            <th>标题</th>
            <th>作者</th>
            <th>创建时间</th>
            <th>操作</th>
        </tr>
        @foreach ($articles as $article)
            <tr>
                <td>{{ $article->title }}</td>
                <td>{{ $article->author }}</td>
                <td>{{ $article->created_at }}</td>
                <td>
                    <a href="/articles/{{ $article->id }}">查看</a>
                    <a href="/articles/{{ $article->id }}/edit">编辑</a>
                    <form action="/articles/{{ $article->id }}" method="POST">
                        @csrf
                        @method('DELETE')
                        <button type="submit">删除</button>
                    </form>
                </td>
            </tr>
        @endforeach
    </table>
    <a href="/articles/create">创建新文章</a>
</body>
</html>

在这个视图中，我们使用了Laravel的模板语法。`{{ $article->title }}`的格式可以用来输出文章的标题。`{{ $article->author }}`和`{{ $article->created_at }}`分别用于输出作者和创建时间的字段。

在视图的最后，我们添加了一个用于创建新文章的链接。

接下来，我们还需要创建用于展示单篇文章的视图。同样在resources/views目录下，创建一个名为article.blade.php的文件，代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>{{ $article->title }}</title>
</head>
<body>
    <h1>{{ $article->title }}</h1>
    <p>作者：{{ $article->author }}</p>
    <p>创建时间：{{ $article->created_at }}</p>
    <p>内容：{{ $article->content }}</p>
    <a href="/articles/{{ $article->id }}/edit">编辑</a>
    <form action="/articles/{{ $article->id }}" method="POST">
        @csrf
        @method('DELETE')
        <button type="submit">删除</button>
    </form>
    <a href="/articles">返回列表</a>
</body>
</html>

这个视图会根据传入的文章对象动态展示文章的标题、作者、创建时间和内容。并且提供了编辑和删除文章的功能。

六．２　前端展示数据

为了在视图中展示数据，我们需要在控制器中将数据传递给视图。打开ArticlesController.php文件，添加以下代码：

（示例代码请自行编写，根据自己项目的实际情况进行调整）

在index方法中，我们通过调用Article模型的all方法来获取所有文章数据，并将其传递给articles视图。

在show方法中，我们通过调用Article模型的find方法来获取指定id的文章数据，并将其传递给article视图。

六．３　添加样式和交互效果

现在，我们已经有了用于展示数据的视图，接下来我们可以为这些视图添加样式和一些交互效果。你可以使用CSS来美化页面，使用JavaScript来实现一些动态效果。

在视图中设置CSS样式的方法跟普通HTML页面一样，你可以使用内联样式或者外部样式表。例如，可以为`<h1>`标签添加样式：`<h1 style="color: blue;">文章列表</h1>`。

如果你想使用外部样式表，可以在视图的`<head>`标签中添加`<link>`标签引入样式表（务必确保样式表文件存在并设置正确的路径）。

对于JavaScript，你可以使用`<script>`标签添加代码或者引入外部的JavaScript文件，来实现一些交互效果或者动态加载数据。

总结：

在本章节，我们创建了用于展示文章列表和单篇文章的视图，并通过控制器将数据传递给视图。此外，我们还介绍了如何在视图中添加样式和一些交互效果。在下一章节，我们将继续完善页面的功能，实现文章的创建、编辑和删除操作。