当前位置:首页>WordPress资讯>如何在Laravel中创建博客

如何在Laravel中创建博客

如何在Laravel中创建博客

Laravel 是一种 PHP 网络应用程序,语法简洁明了。它有一个庞大的软件包库,可以处理编程中的许多繁琐工作,让你专注于发挥创造力。

Laravel 的一个创造性用途就是创建个人博客。本教程介绍如何使用 Laravel 创建并发布博客。

如需预览项目,请查看完整的项目代码。

先决条件

要学习本教程,请确保您具备以下条件:

  • 网络服务器。本教程使用 XAMPP。
  • GitHub、 账户,用于发布应用程序代码。
  • 已安装 Laravel。
  • 一个活动的 MyKinsta 账户,用于托管应用程序。如果还没有,请注册免费试用。

确保 Apache 模块服务正在 XAMPP 控制面板中运行。如果没有,请单击 “Actions” 栏中每个服务的 “Start” 按钮。您的 XAMPP 控制面板应该如下所示:

如何在Laravel中创建博客

XAMPP 控制面板

默认情况下,MySQL/ 在端口 3306 上运行。如果要更改端口,请记录下来。

如果您使用的是 XAMPP 以外的网络服务器,请确保您运行的是 Apache 或其他服务器软件,并已在本地计算机上安装了 MariaDB 服务器。

快速入门 phpMyAdmin

  1. 运行 MySQL 和 Apache 后,打开浏览器。
  2. 打开 phpMyAdmin 并粘贴到 http://localhost/phpmyadmin/ 。应该会显示如下内容:

如何在Laravel中创建博客

在浏览器中打开 phpMyAdmin。

phpMyAdmin 是用于 MySQL 和 MariaDB 的数据库管理工具。

Info 你可以使用任何数据库管理系统,但本教程使用的是 MariaDB,它与 Laravel 的连接与 MySQL 类似。两个数据库的 Laravel 配置是一样的。

创建新的 Laravel 项目

现在可以开始使用 Laravel 创建博客了。在本教程中,我们使用的是一台运行在 Windows 系统上的电脑。

  1. 打开电脑终端或界面(CLI)。
  2. 使用 laravel new blog 命令创建一个名为 blog 的 Laravel 项目。
  3. 使用 cd blog 命令打开项目的 blog 目录。
  4. 然后,在代码中打开该目录。
  5. 在终端或 CMD 中运行 php artisan serve 命令,检查是否成功创建了项目。
  6. 点击本地地址输出,将其发送到浏览器。浏览器应该会显示默认的 Laravel 欢迎页面,如下图所示:

如何在Laravel中创建博客

Laravel 欢迎页面

配置数据库

返回浏览器中的 phpMyAdmin,创建一个名为 blog 的数据库,从而创建并配置数据库。

  1. 要创建数据库,请在 “Databases” 选项卡的 “Create database“字段中输入 “blog”。
  2. 然后点击Create

如何在Laravel中创建博客
在 phpMyAdmin 面板中创建数据库

  1. 接下来,更新博客项目根目录下 .env 文件中的数据库连接。将 DB_DATABASEDB_PASSWORD 值更改为你创建的值。

连接详情应如下所示:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=blog
DB_USERNAME=your-db-username
DB_PASSWORD=your-db-password

其他数据库连接细节与 .env 文件中的相同。如果在配置过程中更改了任何连接值,如将 DB_PORT 从 3306 改为 3307,请确保在 .env 文件中更新。

制作posts表

接下来,创建数据库模型并迁移更改。

  1. 在终端运行 php artisan make:model Post -mc ,创建一个名为 Post 的模型、一个名为 posts 的表、一个迁移文件和一个控制器。

如何在Laravel中创建博客

通过命令行创建模型、迁移文件和控制器。

  1. 检查database/migrations,打开刚刚创建的迁移文件。文件格式如下 YYYY_MM_DD_ID_create_posts_table.php
  2. 在迁移文件的 up() 方法中,创建一个包含 titledescription, 和 image 属性的模式。
public function up() {
Schema::create('posts', function (Blueprint $table) {
$table->id();
$table->string('title')->nullable();
$table->text('description')->nullable();
$table->string('image')->nullable();
$table->timestamps();
});
}
  1. 现在,进入终端,使用 php artisan migrate 迁移更改,如下图所示:

如何在Laravel中创建博客

Laravel 数据库迁移

  1. 在浏览器中进入 phpMyAdmin,您将看到 posts 表:

如何在Laravel中创建博客
在 phpMyAdmin 中显示已迁移的文章表

如何创建控制器

添加视图和控制器可以实现数据库集的业务逻辑。视图是显示模型数据对象的用户界面。控制器管理模型和视图之间的数据执行流。

  1. 创建 Blade 文件前,请在终端运行 npm install ,然后运行 npm run dev 。第一条命令安装所需的 npm 软件包。第二条命令启动 开发服务器。
  2. 前往 app/Http/Controllers 目录,打开 PostController.php 文件,创建一个 index 控制器方法。该控制器方法向浏览器渲染一个简单的文本。为此,请在 PostController 类中添加以下代码:
public function index() {
$post = "Laravel Tutorial Series One!";
return view('posts.index', ['post'=>$post]);
}

该方法将 $post 作为上下文变量传递给索引 Blade 模板的 views 部分。 $post 包含要显示的文本,这里显示 “Laravel Tutorial Series One!”。稍后你将用文章循环来替换它。

  1. resources/views 目录中新建两个目录:layouts posts
  2. layouts 目录下创建 app.blade.php 文件。其他 Blade 文件将从该文件继承。
  3. 将此代码复制到 app.blade.php 中:
Blog
@yield('content')
Mini-Blog © 2023

通过使用此 HTML 代码,您可以导入 Bootstrap 5.2.3 版本和 Vite,以捆绑 和 CSS 资产。生成的页面有一个带导航栏的页眉和一个带脚本的页脚。在正文中,借助 @yield('content') ,动态内容会从其他 Blade 文件渲染而来。

posts 目录中包含用于执行创建和读取操作的 Blade 文件。

  1. posts 目录下创建一个名为 index.blade.php 的 Blade 文件,并添加以下代码:
@extends('layouts.app')
@section('content')
Blog list
The Blog 1 - {{ $post }}
@endsection

该代码由布局页面上的 app.blade.php 文件扩展而来。在浏览器中呈现时,它会显示每篇博客文章的内容,以及从 layouts 文件夹中的 app.blade.php 文件继承的导航栏和页脚。在 section 标记之间,您可以传递控制器中的内容,以便在执行应用程序时在浏览器中呈现。

  1. routes 目录中设置路由。设置路由后,App/Providers 目录中的 RouteServiceProvider 就能自动加载路由。 RouteServiceProvider 是负责加载应用程序路由文件的类。
  2. routes/web.php 文件中,使用 AppHttpControllersPostController 导入 PostController
  3. 然后,在 routes/web.php 文件中添加 Route::resource('posts', PostController::class); 来设置路由。
  4. 在 Vite 开发服务器仍在运行的情况下,使用 php artisan serve 在终端执行应用程序。
  5. 使用浏览器打开 http://127.0.0.1:8000/posts ,查看新的博文列表。

页面应如下所示:

如何在Laravel中创建博客

在浏览器中显示博客应用程序

在下一节中,我们将定义用于显示所有文章、创建文章和存储文章的控制器方法。然后,在相应部分添加路由并创建刀片文件。

创建博客文章页面

通过输入标题、添加描述和上传图片来制作博文。然后,按顺序显示博文。

  1. app/Models 目录中打开 Post.php 文件。
  2. post 类的 use HasFactory; 代码块下方,添加 protected $fillable = ['title', 'description', 'image'];

这段代码将保护您的模型属性不被大量赋值。

  1. app/Http/Controllers/PostController.php 文件中,使用 use AppModelsPost; 导入 Post 模型。
  2. Replace the index and create controller methods created earlier in the PostController class with the code below:用下面的代码替换之前在 PostController 类中创建的 index 和 create 控制器方法:
// Show all posts
public function index() {
$posts = Post::orderBy('created_at', 'desc')->get();
return view('posts.index', ['posts' => $posts]);
}
// Create post
public function create() {
return view('posts.create');
}

在您刚刚创建的 index 方法中,PHP 应用程序会获取所有文章,按时间顺序排列,然后将它们存储到 posts 变量中。在返回视图中,文章作为上下文变量传入 views/posts 目录中的 index.blade.php 文件。如果用户尝试创建新帖, create 方法会返回 create.blade.php 文件,并将其放置在 views/posts 目录中。

  1. 使用下面的代码创建一个 store 控制器方法(在数据库中存储博客文章)。将此代码添加到 PostController 类的 index 和 create 控制器方法下面。
// Store post
public function store(Request $request) {
// validations
$request->validate([
'title' => 'required',
'description' => 'required',
'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
]);
$post = new Post;
$file_name = time() . '.' . request()->image->getClientOriginalExtension();
request()->image->move(public_path('images'), $file_name);
$post->title = $request->title;
$post->description = $request->description;
$post->image = $file_name;
$post->save();
return redirect()->route('posts.index')->with('success', 'Post created successfully.');
}

store 方法会处理客户端关于其主体中数据的请求,因此它需要将 request 作为参数。下一步是验证创建 post 时使用的字段,并从 Post 模型中创建一个文章实例。然后将输入的字段数据分配给创建的实例并保存。页面将重定向到 index 视图,并显示 “Post created successfully” 的 Flash 文本。

为文章添加路由

web.php 文件中注册路由:

  1. 在项目根目录下的 routes 目录中,打开 web.php 文件。
  2. 用以下代码替换现有代码,注册控制器方法的路由:
names([
'index' => 'posts.index',
'create' => 'posts.create',
'store' => 'posts.store',
'show' => 'posts.show',
]);

该控制器使用这些路由来创建、存储和显示数据对象。

制作Blade文件

要创建视图,请回到 PostController 类:

  1. resources/views/posts 目录下创建一个名为 create.blade.php 的 Blade 文件,并添加以下代码:
@extends('layouts.app')
@section('content')
Add Post
@csrf
@if ($errors->any())
@foreach ($errors->all() as $error)
{{ $error }}
@endforeach
@endif
Title
Description
Add Image
Save
@endsection

在这段代码中,create.blade.php 使用 @extends('layouts.app') 继承了 layouts 目录中 app.blade.php 的内容。这些内容包括页眉、导航栏和页脚。在 h1 标签中添加 Add Post 文本后,使用包含 {{route('posts.store')}} 操作的 post 方法创建了一个表单。

enctype="multipart/form-data" 代码允许上传图片,而 csrf 可保护表单免受跨站攻击。然后,错误信息会显示无效的字段条目,并使用 field attributes 为表单创建标签和输入。

  1. 现在,用下面的代码替换 index.blade.php 文件中的代码,以显示所有博客文章:
@extends('layouts.app')
@section('content')
Add Post
Mini post list
@if ($message = Session::get('success'))
{{ $message }}
@endif
@if (count($posts) > 0)
@foreach ($posts as $post)
{{$post->title}}
{{$post->description}}
@endforeach
@else
No Posts found
@endif
@endsection

这段代码添加了一个 Add Post 按钮。点击后,它将创建一个文章,并将任何数据传递到页面的正文中。 if 条件检查数据库中是否有数据。如果有数据,则通过。如果没有,则显示 “No Posts found”。

页面结构

现在,您可以使用 php artisan serve 运行应用程序,创建并显示博客文章。打开 http://127.0.0.1:8000 ,页面应如下所示:

如何在Laravel中创建博客

博客应用程序出现在浏览器中

如果您添加了一个文章,就会显示如下内容:

如何在Laravel中创建博客

博客应用程序在浏览器中显示文章

将您的Laravel博客部署到Kinsta

使用 Kinsta 的应用程序托管服务部署和测试您的 Laravel 应用程序:

  1. 创建 .htaccess 文件。
  2. 将代码推送到版本库。
  3. 创建数据库。
  4. 在 MyKinsta 上建立一个项目。
  5. 构建并部署您的博客。

创建 .htaccess 文件

在项目根文件夹中创建名为 .htaccess 的文件,并添加以下代码:

RewriteEngine On
RewriteRule ^(.*)$ public/$1 [L]

这段代码会将应用程序请求重定向到部署中的 public/index.php

将代码推送到代码库

为您的项目创建一个存储库并发布代码。您可以使用 GitHub、GitLab 或 Bitbucket 来托管您的代码并将其部署到 MyKinsta。

在MyKinsta控制面板中设置数据库

在 MyKinsta 上创建数据库:

  1. 单击 Add Service 按钮并选择 Database
  2. 输入数据库的详细信息,如下所示。请注意,要使部署成功,必须将 Database username 保留为默认值。

如何在Laravel中创建博客

在 MyKinsta 中创建数据库

详细信息包括 Database nameDisplay nameDatabase type, VersionDatabase usernameData center location, 和 Size。本演示使用 MariaDB 作为数据库,Size Db3(1CPU/4GB 内存/10GB 磁盘空间,65 美元/月)。您可以根据具体需要选择数据库类型和大小。

  1. 单击 Continue.
  2. 确认每月费用和付款方式,然后单击 Create database

在 MyKinsta 上设置项目

将应用程序部署到 MyKinsta:

  1. 单击 Dashboard 面板。
  2. 单击 Add Service 并选择 Application,如下图所示:

如何在Laravel中创建博客

添加应用程序服务时的 MyKinsta 面板

MyKinsta 会将您重定向到 “Add Application” 页面。

  1. 在 “Select branch” 部分,选择 GitHub 仓库,然后选择 “Add deployment on commit” 复选框。
  2. 在 “Basic details” 中,输入应用程序名称并选择应用程序的数据中心位置。
  3. 由于 Laravel 在部署过程中需要一个应用程序密钥,因此在 Environment variables 卡中,添加一个 APP_KEY 作为密钥 1。你可以使用本地 .env 文件中定义的 APP_KEY 或使用在线 Laravel 密钥生成器获取一个。
  4. 点击 “Continue“。
  5. 选择应用程序的构建资源(CPU 和 RAM)。本演示使用标准构建机(1CPU / 4 GB RAM)- 0.02USD / 分钟
  6. 不要选中 “Set up container image automatically” 单选按钮。
  7. 单击 Continue
  8. 在 “Set up your processes” 页面,您可以通过选择这些框来更改应用程序的 pod 大小和实例。本演示使用默认值。
    单击继续。
  9. 最后,单击 Confirm payment method 按钮,开始部署应用程序。单击此按钮还可进入 Deployment details 页面查看部署进度。

构建和部署应用程序

数据库和应用程序托管后,将数据库连接到应用程序,然后构建并部署。

要连接数据库,请使用托管数据库的外部连接。在托管数据库的 “Info” 选项卡上,可以看到 External connections,如下图所示:

如何在Laravel中创建博客

托管数据库的外部连接

  1. 在已部署应用程序的 “Settings” 页面上,导航至 “Environment variable” 卡。
  2. 单击 Add environment variable,将托管数据库的外部连接添加到相应的值中。使用与 .env 文件中相同的变量。

如何在Laravel中创建博客

托管数据库的环境变量

如果你考虑对手动编辑的 env 变量进行标记,以区别于其他变量,那么这张截图就很方便了。

APP_URL 是托管应用程序的 URL,DB_CONNECTIONmysql

  1. 前往应用程序的 “Settings” 页面。
  2. Buildpack 卡中,添加 PHP 和 作为构建包。由于这是一个 PHP 应用程序,您必须最后添加 PHP 构建包。
  3. 单击 Deploy now ,重建应用程序。

接下来,添加一个迁移数据库的进程。

  1. 前往托管应用程序页面上的 “Processes” 选项卡。
  2. 在 Runtime processes 卡上选择 Create process 。
  3. 输入 Migration 作为名称,Background worker 作为类型, php artisan migrate --force 作为启动命令。pod 大小和实例可以保留默认值。
  4. 选择 “Continue” 创建进程。此操作将触发新的构建并重新部署应用程序。
  5. 在应用程序的 “Domains” 选项卡上,单击应用程序链接。你可以看到它现在已经启动并运行。
  6. 请注意,部署到 MyKinsta 的博客应用程序不会显示任何文章。输入标题、添加描述并选择图片,创建一个新文章。

小结

Laravel 可以轻松快速地开发一个简单的博客。其快速的页面加载、强大的控制器架构和出色的安全性,让提高应用程序的性能变得轻而易举。同时,MyKinsta 可让您快速有效地发布和交付网络应用程序。MyKinsta 的灵活定价模式基于使用量,消除了隐性成本。

原文地址:https://www.wbolt.com/laravel-blog.html

WordPress资讯

如何获取及使用Adobe Photoshop基于人工智能的 “生成扩展” 功能

2024-1-22 1:11:38

WordPress资讯

全面了解MongoDB分片指南

2024-1-22 1:11:40

个人中心
今日签到
有新私信 私信列表
搜索