Laravel 博客开发｜路由和静态页面

最新推荐文章于 2024-04-23 16:20:32 发布

SevDot

最新推荐文章于 2024-04-23 16:20:32 发布

阅读量690

点赞数

分类专栏： Laravel 博客开发实战文章标签： laravel php bulma blog

本文链接：https://blog.csdn.net/u010212601/article/details/125228734

版权

Laravel 博客开发实战专栏收录该内容

30 篇文章 5 订阅

订阅专栏

创建好应用，安装好 Bulma，接下来就是开发页面，现在开始在 Laravel 项目中添加路由和静态页面。

移除无用视图

Laravel 默认会生成一个 welcome.blade.php 视图文件，主要用于对默认页面进行渲染，这个文件对接下来的项目开发没有一点用处，因此可将其移除：

rm resources/views/welcome.blade.php

配置路由

在 Laravel 开发中，我们使用路由来定义 URL 和 URL 的请求方式，再将该 URL 分配到相对应的控制器动作中进行处理。接下来要构建三个静态页面分别是主页、联系页、关于页。因此需要为路由指定好三个不同的 URL：

_routes/web.php_。

<?php use App\Http\Controllers\PagesController;
use Illuminate\Support\Facades\Route;

Route::get('/', [PagesController::class, 'root'])->name('root');
Route::get('/about', [PagesController::class, 'about'])->name('about');
Route::get('/contact', [PagesController::class, 'contact'])->name('contact');

静态页面控制器

要让静态页面在网站上进行展示，需要先创建一个 PagesController 控制器，这个控制器将负责整个网站静态页面的处理。

运行下面命令来生成静态页面控制器：

php artisan make:controller PagesController

以上命令会在 app/Http/Controllers目录下创建一个 PagesController.php 文件，默认代码如下：

_app/Http/Controllers/PagesController.php_。

<?php namespace App\Http\Controllers;

use Illuminate\Http\Request;

class PagesController extends Controller
{
    //
}

现在的静态页面控制器中还没有指定好三个页面对应的动作，为控制器加上这三个动作来处理从路由发过来的请求：

_app/Http/Controllers/PagesController.php_。

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class PagesController extends Controller
{
    public function root()
    {
        return view('pages.root');
    }

    public function about()
    {
        return view('pages.about');
    }

    public function contact()
    {
        return view('pages.contact');
    }
}

要在控制器中指定渲染某个视图，则需要使用到 view 方法，view 方法接收两个参数，第一个参数是视图的路径名称，第二个参数是与视图绑定的数据，第二个参数为可选参数。

return view('pages/root');

上面代码，将会渲染在 resources/views 文件夹下的 pages/root.blade.php 文件。默认情况下，所有的视图文件都存放在 resources/views 文件夹下。

静态页面视图

在控制器中指定渲染的视图之后，接下来便是对视图进行构建了，需要在resources/views中创建一个 pages目录，在 pages 目录中新增下面三个视图。

resources/views/pages/root.blade.php。

<!DOCTYPE html><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>首页｜sd-blog 博客应用</title><link href="%7B%7B%20asset('css/app.css')%20%7D%7D" rel="stylesheet"><section class="hero is-link"><div class="hero-body has-text-centered">
        <h1 class="title">首页</h1>
        <p class="subtitle">首页</p>
        <a href="https://github.com/sevdot" class="button">
            <span class="icon">
                <i class="fa fa-github"></i>
            </span>
            <span>Github</span>
        </a>
    </div>
</section>

resources/views/pages/contact.blade.php。




    <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>联系｜sd-blog 博客应用</title><link href="%7B%7B%20asset('css/app.css')%20%7D%7D" rel="stylesheet"><section class="hero is-link"><div class="hero-body has-text-centered">
        <h1 class="title">联系</h1>
        <p class="subtitle">联系我</p>
        <a href="https://github.com/sevdot" class="button">
            <span class="icon">
                <i class="fa fa-github"></i>
            </span>
            <span>Github</span>
        </a>
    </div>
</section>

resources/views/pages/about.blade.php。




    <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>关于｜sd-blog 博客应用</title><link href="%7B%7B%20asset('css/app.css')%20%7D%7D" rel="stylesheet"><section class="hero is-link"><div class="hero-body has-text-centered">
        <h1 class="title">关于</h1>
        <p class="subtitle">关于我们</p>
        <a href="https://github.com/sevdot" class="button">
            <span class="icon">
                <i class="fa fa-github"></i>
            </span>
            <span>Github</span>
        </a>
    </div>
</section>