跟社区学laravel博客实战2

最新推荐文章于 2024-11-29 16:37:44 发布

原创最新推荐文章于 2024-11-29 16:37:44 发布 · 234 阅读

0 ·

CC 4.0 BY-SA版权

laravel 专栏收录该内容

24 篇文章

订阅专栏

这篇博客详细记录了在Laravel项目中使用Bootstrap进行样式美化的过程，包括分支创建、前端框架安装、模板调整、静态文件缓存处理、头部和底部视图的分离，以及用户注册页面的创建。同时，介绍了如何通过命名路由为导航链接生成动态URL，确保页面跳转的正确性。

样式美化

现在，让我们来新建一个分支，接下来针对样式的调整修改都将在此分支上进行：

vagrant@homestead:~/Code/weibo$ git checkout master
Already on 'master'
vagrant@homestead:~/Code/weibo$ git checkout -b filling-layout-style
Switched to a new branch 'filling-layout-style'

Laravel 项目中使用 Bootstrap 前端框架，需要先执行以下命令：

vagrant@homestead:~/Code/weibo$ composer require laravel/ui:^1.0 --dev

composer require 是用来安装扩展包使用的命令，参数 --dev 是指定此扩展包只在开发环境中使用。
上面的命令安装完成后，使用以下命令来引入 Bootstrap ：

vagrant@homestead:~/Code/weibo$ php artisan ui bootstrap


vagrant@homestead:~/Code/weibo$ npm config set registry=https://registry.npm.taobao.org
vagrant@homestead:~/Code/weibo$ yarn config set registry 'https://registry.npm.taobao.org'

vagrant@homestead:~/Code/weibo$ npm install && npm run dev

vagrant@homestead:~/Code/weibo$ yarn install --no-bin-links
vagrant@homestead:~/Code/weibo$ yarn add cross-env

vagrant@homestead:~/Code/weibo$ vi resources/sass/app.scss

// Bootstrap
@import '~bootstrap/scss/bootstrap';


vagrant@homestead:~/Code/weibo$ npm run dev


vagrant@homestead:~/Code/weibo$ vi resources/views/layouts/default.blade.php

<!DOCTYPE html>
<html>
  <head>
    <title>@yield('title', 'Weibo App') - Laravel 入门教程</title>
    <link rel="stylesheet" href="/css/app.css">
  </head>
  <body>

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container">
        <a class="navbar-brand" href="/">Weibo App</a>
        <ul class="navbar-nav justify-content-end">
          <li class="nav-item"><a class="nav-link" href="/help">帮助</a></li>
          <li class="nav-item" ><a class="nav-link" href="#">登录</a></li>
        </ul>
      </div>
    </nav>

    <div class="container">
      @yield('content')
    </div>
  </body>
</html>


vagrant@homestead:~/Code/weibo$ vi resources/views/static_pages/home.blade.php

@extends('layouts.default')

@section('content')
  <div class="jumbotron">
    <h1>Hello Laravel</h1>
    <p class="lead">
      你现在所看到的是 <a href="https://learnku.com/courses/laravel-essential-training">Laravel 入门教程</a> 的示例项目主页。
    </p>
    <p>
      一切，将从这里开始。
    </p>
    <p>
      <a class="btn btn-lg btn-success" href="#" role="button">现在注册</a>
    </p>
  </div>
@stop


vagrant@homestead:~/Code/weibo$ vi resources/sass/app.scss



// Bootstrap
@import '~bootstrap/scss/bootstrap';

body {
    font-size: 14px;
    font-weight: normal;
}

nav.navbar.navbar-expand-lg {
    margin-bottom: 20px;
}


vagrant@homestead:~/Code/weibo$ git add -A
vagrant@homestead:~/Code/weibo$ git commit -m "初始化样式"

浏览器缓存文件

vagrant@homestead:~/Code/weibo$ vi webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css').version();

以上可看出，我们只是增加了 version() 函数的调用，其他未做修改。接下来还需要修改模板，使其动态加载样式代码：

vagrant@homestead:~/Code/weibo$ vi resources/views/layouts/default.blade.php


<!DOCTYPE html>
<html>
  <head>
    <title>@yield('title', 'Weibo App') - Laravel 入门教程</title>
    <link rel="stylesheet" href="{{ mix('css/app.css') }}">
  </head>
  <body>

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container">
        <a class="navbar-brand" href="/">Weibo App</a>
        <ul class="navbar-nav justify-content-end">
          <li class="nav-item"><a class="nav-link" href="/help">帮助</a></li>
          <li class="nav-item" ><a class="nav-link" href="#">登录</a></li>
        </ul>
      </div>
    </nav>

    <div class="container">
      @yield('content')
    </div>
  </body>
</html>

vagrant@homestead:~/Code/weibo$ npm run dev


vagrant@homestead:~/Code/weibo$ git add -A
vagrant@homestead:~/Code/weibo$ git commit -m "静态文件浏览器缓存问题"

随着后面顶部导航功能愈加完善，代码量也会越来越多，如果把所有代码都放在默认视图文件中，会让这个文件变得无法维护，这明显不符合 Laravel 项目开发的最佳实践。因此我们需要把顶部导航从 default 视图中分离出来，成为一个单独的头部视图。

vagrant@homestead:~/Code/weibo$ vi resources/views/layouts/_header.blade.php


<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container ">
    <a class="navbar-brand" href="/">Weibo App</a>
    <ul class="navbar-nav justify-content-end">
      <li class="nav-item"><a class="nav-link" href="/help">帮助</a></li>
      <li class="nav-item" ><a class="nav-link" href="#">登录</a></li>
    </ul>
  </div>
</nav>



vagrant@homestead:~/Code/weibo$ vi resources/views/layouts/_footer.blade.php


<footer class="footer">
  <img class="brand-icon" src="https://cdn.learnku.com/uploads/sites/KDiyAbV0hj1ytHpRTOlVpucbLebonxeX.png">
  <a href="https://learnku.com/laravel/courses" target=_blank>
    刻意练习，每日精进
  </a>

  <div class="float-right">
    <a href="/about" >关于</a>
  </div>
</footer>



vagrant@homestead:~/Code/weibo$ vi resources/sass/app.scss

/* footer */

footer {
  margin-top: 45px;
  padding-top: 5px;
  border-top: 1px solid #eaeaea;
  color: #777;
  font-size: 13px;
  font-weight: bold;

  a {
    color: #555;
  }

  a:hover {
    color: #222;
  }

  img.brand-icon {
    width: 17px;
    height: 17px;
  }
}

引入局部视图
在完成头部视图和底部视图的定义后，接下来便可以在 default 视图中引用这两个视图。

vagrant@homestead:~/Code/weibo$ vi resources/views/layouts/default.blade.php


<!DOCTYPE html>
<html>
  <head>
    <title>@yield('title', 'Weibo App') - Laravel 入门教程</title>
    <link rel="stylesheet" href="{{ mix('css/app.css') }}">
  </head>

  <body>
    @include('layouts._header')

    <div class="container">
      <div class="offset-md-1 col-md-10">
        @yield('content')
        @include('layouts._footer')
      </div>
    </div>
  </body>
</html>

vagrant@homestead:~/Code/weibo$ npm run dev

vagrant@homestead:~/Code/weibo$ vi resources/views/layouts/_header.blade.php


<li><a href="/help">帮助</a></li>

替换为

<li><a href="{{ route('help') }}">帮助</a></li>


{{　}} 是在 HTML 中内嵌 PHP 的 Blade 语法标识符，
表示包含在该区块内的代码都将使用 PHP 来编译运行。
route() 方法由 Laravel 提供，通过传递一个具体的路由名称来生成完整的 URL。




vagrant@homestead:~/Code/weibo$ vi resources/views/layouts/_footer.blade.php

<footer class="footer">
  <img class="brand-icon" src="https://cdn.learnku.com/uploads/sites/KDiyAbV0hj1ytHpRTOlVpucbLebonxeX.png">
  <a href="https://learnku.com/laravel/courses" target=_blank>
    刻意练习，每日精进
  </a>

  <div class="float-right">
    <a href="{{ route('about') }}" >关于</a>
  </div>
</footer>





vagrant@homestead:~/Code/weibo$ vi routes/web.php

在 Laravel 中，我们可以通过在路由后面链式调用 name 方法来为路由指定名称：

<?php

Route::get('/', 'StaticPagesController@home')->name('home');
Route::get('/help', 'StaticPagesController@help')->name('help');
Route::get('/about', 'StaticPagesController@about')->name('about');




vagrant@homestead:~/Code/weibo$ npm run dev

vagrant@homestead:~/Code/weibo$ git add -A
vagrant@homestead:~/Code/weibo$ git commit -m "命名路由"

本节让我们先来完成用户注册功能的第一步：为用户注册功能创建基本的静态页面。
注册路由

按照我们之前讲的构建流程，我们需要先为注册定义一个 signup 路由，当用户访问 weibo.test/signup 时将进入我们的注册页面。

vagrant@homestead:~/Code/weibo$ vi routes/web.php

<?php

Route::get('/', 'StaticPagesController@home')->name('home');
Route::get('/help', 'StaticPagesController@help')->name('help');
Route::get('/about', 'StaticPagesController@about')->name('about');

Route::get('signup', 'UsersController@create')->name('signup');
~

这次我们把 signup 的路由请求交给用户控制器 UsersController 来处理。

在路由中，我们会将用户注册页面的请求指定给用户控制器的 create 方法进行处理，接下来让我们完成该方法的定义。

$ vi app/Http/Controllers/UsersController.php


<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class UsersController extends Controller
{
    //
    public function create()
    {
        return view('users.create');
    }
}
~




注册页面视图

接下来让我们来添加一个简单的注册视图，
后面再为该视图加上表单，让用户可以提交自己的个人信息。


$ mkdir resources/views/users
$ vi resources/views/users/create.blade.php

@extends('layouts.default')
@section('title', '注册')

@section('content')
<h1>注册</h1>
@stop

最后让我们修改首页注册按钮的链接，提供给用户一个进入注册页面的入口。

vi resources/views/static_pages/home.blade.php


@extends('layouts.default')

@section('content')
  <div class="jumbotron">
    <h1>Hello Laravel</h1>
    <p class="lead">
      你现在所看到的是 <a href="https://learnku.com/courses/laravel-essential-training">Laravel 入门教程</a> 的示例项目主页。
    </p>
    <p>
      一切，将从这里开始。
    </p>
    <p>
      <a class="btn btn-lg btn-success" href="{{ route('signup') }}" role="button">现在注册</a>
    </p>
  </div>
@stop

保存后刷新首页看看吧。试试看点击现在注册按钮是否会跳转到 signup 页面呢？

vagrant@homestead:~/Code/weibo$ git add -A
vagrant@homestead:~/Code/weibo$ git commit -m "用户注册页面"

vagrant@homestead:~/Code/weibo$ git checkout master
Switched to branch 'master'
vagrant@homestead:~/Code/weibo$ git merge filling-layout-style