如何使用Laravel、Sail和TailwindCSS构建响应式AboutMe页面

介绍

Laravel Sail 是 Laravel 从 8 版本开始默认包含的 Docker 开发环境。它允许您快速启动并运行 PHP 开发环境，该环境专为运行 Laravel 应用程序而定制，并内置了对 NPM / Node 的支持。

在本指南中，您将使用 Laravel Sail 引导一个新的 Laravel 应用程序，并使用 Tailwind CSS 创建一个样式化的“关于我”登录页面，这是一个实用程序优先的 CSS 框架，旨在快速构建自定义用户界面。最后，您将拥有一个基础，可用于进一步开发 Laravel 应用程序，使用 Tailwind CSS 作为前端，Sail 作为开发环境。

如果您更喜欢从现有代码库开始，而不是从头开始创建项目，您可以在 GitHub 上的 do-community/laravel-tailwind-starter 访问完成的演示应用程序代码。

先决条件

尽管本指南中共享的代码应该可以在多个环境和系统中无缝运行，但此处解释的说明是在运行 Docker 和 Docker Compose 的 Ubuntu 20.04 本地系统中测试的。无论您的基本操作系统是什么，您都需要设置以下内容才能开始使用：

Docker 安装在您的本地计算机上。如果您运行的是 Ubuntu 20.04，您可以按照 How To Install and Use Docker on Ubuntu 20.04 的 Steps 1 和 2 进行设置。 Windows 和 MacOS 用户需要安装 Docker Desktop 代替。
Docker Compose 安装在本地机器上。 Docker Compose 默认包含在 Windows 和 MacOS 系统的 Docker Desktop 中，但 Linux 用户需要按照如何在 Ubuntu 20.04 上安装和使用 Docker Compose 的 Step 1 安装 Compose 可执行文件X239X]。
PHP 的代码编辑器（可选）。代码编辑器有助于使代码更易于阅读和格式化，并且可以通过在执行代码之前指出问题来提高您的工作效率。您可以按照我们关于如何为 PHP 项目设置 Visual Studio 代码的指南在本地开发环境中设置 VSCode，一个免费的代码编辑器。

第 1 步——使用 Laravel Builder 脚本创建一个新的 Laravel 应用程序

首先，您将下载并执行官方 Laravel 构建器脚本，该脚本将拉入必要的 Docker 容器镜像来构建您的开发环境，然后在您的当前文件夹中引导一个新应用程序。这种安装方法不需要您在系统上安装 PHP，只需要您下载并执行构建器脚本，该脚本将设置您可以运行实际 Laravel 安装程序的 Docker 环境。

最后，脚本会询问您的 sudo 密码，以确保应用程序文件夹对您的系统用户具有正确的权限。在运行下一个命令之前，您可以从浏览器访问脚本 URL 以验证其内容。在此示例中，我们使用名称 myapp，但您可以随意将其替换为其他名称：

curl -s https://laravel.build/myapp | bash

OutputUnable to find image 'laravelsail/php80-composer:latest' locally
latest: Pulling from laravelsail/php80-composer
852e50cd189d: Pull complete 
0266fc315b01: Pull complete 
…
Application ready! Build something amazing.
Sail scaffolding installed successfully.
 
Please provide your password so we can make some final adjustments to your application's permissions.
 
[sudo] password for sammy: 
 
Thank you! We hope you build something incredible. Dive in with: cd myapp && ./vendor/bin/sail up

安装完成后，访问新的应用程序目录并启动 Sail 环境：

cd myapp
./vendor/bin/sail up

这将使环境以前台模式启动，因此您可以跟进所有正在运行的容器的日志。您会看到一些不同的服务正在启动，它们使用不同的端口相互通信：

Output...
mailhog_1 | [HTTP] Binding to address: 0.0.0.0:8025
...
laravel.test_1 | Starting Laravel development server: http://0.0.0.0:80
...
meilisearch_1 | Server listening on: "http://0.0.0.0:7700"
...
mysql_1 | 2021-06-23T01:15:24.327234Z 0 [System] [MY-010931] [Server] /usr/sbin/mysqld: ready for connections. Version: '8.0.25' socket: '/var/run/mysqld/mysqld.sock' port: 3306 MySQL Community Server - GPL.
...
selenium_1 | 01:14:57.417 INFO [SeleniumServer.boot] - Selenium Server is up and running on port 4444
...
redis_1 | 1:M 23 Jun 2021 01:14:54.243 * Running mode=standalone, port=6379.
…

这些是 Sail 环境中默认配置的服务。有关它们的详细信息，请参阅官方 Sail 文档。

接下来，从浏览器访问应用程序：

http://localhost

如果所有步骤都成功，您将看到如下页面：

应用程序现在已引导。

您现在可以通过键入 CTRL+C 来停止在终端上运行的 Sail 环境。

第 2 步 — 使用 Laravel Sail

Laravel Sail 提供了几个快捷方式来管理你的开发环境。大多数命令和参数都基于默认的 Docker Compose API。

控制环境

要在后台模式下启动环境，您可以运行：

./vendor/bin/sail up -d

要停止以前在后台模式下启动的 Sail 环境，请运行：

./vendor/bin/sail stop

这不会删除连接的网络或卷。

要恢复以前使用 sail stop 命令停止的环境，您可以使用：

./vendor/bin/sail start

要停止环境并 删除所有相关资源 ，例如卷和网络，您可以使用 sail down 命令。请注意，此命令将删除之前创建且仅在容器内可用的所有数据，例如存储在数据库中的记录。

./vendor/bin/sail down

OutputStopping laravel-tailwind-starter_laravel.test_1 ... done
Stopping laravel-tailwind-starter_redis_1        ... done
Stopping laravel-tailwind-starter_selenium_1     ... done
Stopping laravel-tailwind-starter_mysql_1        ... done
Stopping laravel-tailwind-starter_mailhog_1      ... done
Stopping laravel-tailwind-starter_meilisearch_1  ... done
Removing laravel-tailwind-starter_laravel.test_1 ... done
Removing laravel-tailwind-starter_redis_1        ... done
Removing laravel-tailwind-starter_selenium_1     ... done
Removing laravel-tailwind-starter_mysql_1        ... done
Removing laravel-tailwind-starter_mailhog_1      ... done
Removing laravel-tailwind-starter_meilisearch_1  ... done
Removing network laravel-tailwind-starter_sail

检查状态和日志

如果您的环境已关闭，请使用以下命令将其恢复：

./vendor/bin/sail up -d

当您的环境启动并运行时，您可以使用以下命令检查所有活动容器的状态：

./vendor/bin/sail ps

Output           Name                         Command                  State                              Ports                        
---------------------------------------------------------------------------------------------------------------------------------
myapp_laravel.test_1   start-container                  Up             0.0.0.0:80->80/tcp,:::80->80/tcp, 8000/tcp          
myapp_mailhog_1        MailHog                          Up             0.0.0.0:1025->1025/tcp,:::1025->1025/tcp,           
                                                                             0.0.0.0:8025->8025/tcp,:::8025->8025/tcp            
myapp_meilisearch_1    tini -- /bin/sh -c ./meili ...   Up (healthy)   0.0.0.0:7700->7700/tcp,:::7700->7700/tcp            
myapp_mysql_1          docker-entrypoint.sh mysqld      Up (healthy)   0.0.0.0:3306->3306/tcp,:::3306->3306/tcp, 33060/tcp 
myapp_redis_1          docker-entrypoint.sh redis ...   Up (healthy)   0.0.0.0:6379->6379/tcp,:::6379->6379/tcp            
myapp_selenium_1       /opt/bin/entry_point.sh          Up             4444/tcp

sail ps 命令的输出将告诉您与该特定环境相关的哪些容器当前处于活动状态，正在重定向哪些端口，更重要的是，每个容器处于何种状态。在前面的示例输出中，所有服务都已启动。

要在后台模式下运行环境时检查容器日志，可以使用：

./vendor/bin/sail logs

这将向您显示所有服务的最新日志。

Attaching to laravel-tailwind-starter_laravel.test_1, laravel-tailwind-starter_mailhog_1, laravel-tailwind-starter_mysql_1, laravel-tailwind-starter_redis_1, laravel-tailwind-starter_selenium_1, laravel-tailwind-starter_meilisearch_1
...
mysql_1         | 2021-06-24T15:08:06.435530Z 0 [System] [MY-010931] [Server] /usr/sbin/mysqld: ready for connections. Version: '8.0.25'  socket: '/var/run/mysqld/mysqld.sock'  port: 3306  MySQL Community Server - GPL.
...
meilisearch_1   | [2021-06-24T15:16:38Z INFO  actix_web::middleware::logger] 127.0.0.1:60874 "GET /health HTTP/1.1" 200 22 "-" "Wget" 0.000056
...
laravel.test_1  | [Thu Jun 24 15:08:07 2021] PHP 8.0.7 Development Server (http://0.0.0.0:80) started
...
 
selenium_1      | 15:08:06.864 INFO [SeleniumServer.boot] - Selenium Server is up and running on port 4444
...
redis_1         | 1:M 24 Jun 2021 15:08:05.280 * Ready to accept connections
...
mailhog_1       | 2021/06/24 15:08:05 Serving under http://0.0.0.0:8025/

您还可以通过为命令调用提供附加参数来查看每个服务的日志：

./vendor/bin/sail logs redis

OutputAttaching to laravel-tailwind-starter_redis_1
redis_1         | 1:C 24 Jun 2021 15:08:05.278 # oO0OoO0OoO0Oo Redis is starting oO0OoO0OoO0Oo
redis_1         | 1:C 24 Jun 2021 15:08:05.278 # Redis version=6.2.4, bits=64, commit=00000000, modified=0, pid=1, just started
...
redis_1         | 1:M 24 Jun 2021 15:08:05.280 * RDB memory usage when created 0.77 Mb
redis_1         | 1:M 24 Jun 2021 15:08:05.280 * DB loaded from disk: 0.000 seconds
redis_1         | 1:M 24 Jun 2021 15:08:05.280 * Ready to accept connections

运行工匠和作曲家

在开发 Laravel 应用程序时，您经常需要运行 artisan 命令来构建、测试和管理您的应用程序。您还需要运行 composer 命令来管理您的 PHP 依赖项。除了默认的 Docker Compose API 之外，Sail 还提供了有用的快捷方式来在应用程序容器中执行这些命令（示例输出中的 myapp_laravel.test_1）。使用常规 Docker Compose 设置，运行 Artisan 将如下所示：

仅使用 Docker 撰写

docker-compose exec app php artisan

使用 Sail，等效调用缩短为：

用风帆运行工匠

./vendor/bin/sail artisan

您可以以类似的方式运行 Composer：

用风帆运行作曲家

./vendor/bin/sail composer

有关所有可用功能和命令的更多信息，请访问官方 Laravel Sail 文档。

您现在已经熟悉如何管理您的 Sail 开发环境以及如何在应用程序容器上运行命令。在下一步中，您将设置 Tailwind CSS 来设计和设置登录页面的样式。

第 3 步 — 使用 Laravel 设置 Tailwind CSS

接下来，您将安装和设置 Tailwind CSS 以构建登录页面。

确保您的 Sail 环境已启动并正在运行，然后使用 npm 命令安装 Laravel 的前端依赖项，该命令用于下载和管理 JavaScript 包：

./vendor/bin/sail npm install

Output...
added 1327 packages, and audited 1328 packages in 20s
 
99 packages are looking for funding
  run `npm fund` for details
...

然后，安装 Tailwind 及其依赖项：

./vendor/bin/sail npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Output...
added 9 packages, removed 22 packages, changed 7 packages, and audited 1315 packages in 5s
 
99 packages are looking for funding
  run `npm fund` for details
...

接下来，您需要为 Tailwind 创建一个配置文件。为此，您将使用 npx，它代表 Node 包执行器 ，并允许您执行 Node 包。以下 npx 命令将为您的应用程序生成新的默认 Tailwind 配置：

./vendor/bin/sail npx tailwindcss init

这将在项目的根目录中创建一个名为 tailwind.config.js 的新配置文件，其内容如下：

tailwind.config.js

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

虽然在项目中设置 Tailwind 有不同的方法，但在本指南中，我们将使用 Laravel Mix 和 webpack 配置 Tailwind。这两个库都用于编译和输出前端资源。

使用代码编辑器打开文件 webpack.mix.js。它看起来像这样：

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

Laravel Mix 使用 PostCSS 编译 CSS 资源。删除 // 字符并包含以下突出显示的行，这会将 Tailwind CSS 添加到要处理的 CSS 资源列表中：

删除 // 字符并包含以下突出显示的行，这需要 Tailwind 作为 PostCSS 插件：

webpack.mix.js

  mix.js("resources/js/app.js", "public/js")
    .postCss("resources/css/app.css", "public/css", [
     require("tailwindcss"),
    ]);

进行此更改后保存文件。

接下来，在应用程序的主 CSS 文件中包含 Tailwind。在代码编辑器中打开 resources/css/app.css 并将以下 3 行添加到此文件中：

资源/css/app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

完成后保存。

接下来，您需要使用 NPM 构建前端资产：

./vendor/bin/sail npm run dev

您将收到类似于以下内容的输出，其中突出显示的 Compiled Successfully 部分表示您已将所有组件集成到您的 Sail 环境中：

Output                        
   Laravel Mix v6.0.24   
                         
 
✔ Compiled Successfully in 5515ms
┌───────────────────────────────────────────────────────────────────┬──────────┐
│                                                           File │ Size     │
├───────────────────────────────────────────────────────────────────┼──────────┤
│                                                       /js/app.js │ 597 KiB  │
│                                                       css/app.css │ 3.81 MiB │
└───────────────────────────────────────────────────────────────────┴──────────┘
webpack compiled successfully

现在已配置 Tailwind，并且您已经为您的站点构建了前端资产……在下一步中，您将为您的应用程序创建一个新的登录页面。

第 4 步 - 创建登录页面

有了 Tailwind 的配置，您现在可以开始构建应用程序的前端视图。在 Laravel 中，模板通常存储在 resources/views 目录中。您之前从浏览器打开应用程序时看到的页面 (http://localhost) 是在该目录中名为 welcome.blade.php 的单个模板中定义的。

在您的代码编辑器中，在 resources/views 目录中打开一个名为 index.blade.php 的新文件。

下面的示例模板定义了一个“关于我”的 HTML 页面，其中包含一些无样式的元素。它使用示例头像图像但您可以将其替换为您自己的图像。

在公共应用文件夹中新建img目录：

mkdir public/img

将您喜欢的图像保存到这个新目录中，名称为 profile_image.png。

在以下示例中，请注意使用突出显示的 模板:Asset… 辅助行来定义 CSS 和图像文件的路径。此函数输出位于 public 目录中的应用程序资源的正确公共路径。

将此内容复制到您自己的index.blade.php：

资源/视图/index.blade.php

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Sammy the Shark - About Page</title>
    <meta name="description" content="My Application Description">
    <meta name="author" content="Sammy">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div>
    <img src="{{ asset('img/profile_image.png') }}" width="200" alt="avatar"/>
    <h1>Sammy the Shark</h1>
    <p>Content Creator</p>
    <p>Hello, I'm Sammy. I am a friendly shark interested in Linux, coding, and community.
        You can find out more about me in the following links:</p>
    <div>
        <div><a href="https://twitter.com/digitalocean">Twitter</a></div>
        <div><a href="https://www.linkedin.com/company/digitalocean">LinkedIn</a></div>
        <div><a href="https://instagram.com/thedigitalocean">Instagram</a></div>
    </div>
</div>
</body>
</html>

完成编辑内容后保存文件。

现在编辑 routes/web.php 文件以修改主路由，使其使用新创建的模板。使用代码编辑器打开该文件，并将 welcome 替换为 index 以更改主应用程序端点使用的视图。这是完成后更新的路由声明的样子：

路线/web.php

Route::get('/', function () {
    return view('index');
});

保存文件。您现在可以在浏览器中重新加载应用程序页面以查看新的索引页面。你会看到这样的页面：

默认情况下，Tailwind 会从元素中删除所有样式，这使您可以自由地通过组合和混合 Tailwind CSS 实用程序类来构建视图。在下一节中，您将学习如何组合其中一些实用程序类以创建响应式“关于我”页面。

第 5 步 — 使用 Tailwind CSS 设计您的着陆页

构建响应式页面是前端开发的一项重要要求，因为用户可能会从许多不同的设备访问您的网站或应用程序，每个设备都有不同的屏幕尺寸。

Tailwind 提供了选择器，它们能够根据屏幕尺寸应用样式。这样，您可以通过将最小宽度设置为默认值来创建响应式容器，并为更大的屏幕附加额外的响应式尺寸。例如，使用 class="w-3/4 lg:w-1/2" 设置的元素将设置默认宽度为父元素宽度的四分之三，这对于较小的屏幕有效，但对于较大的屏幕（lg: 选择器），它将使用父元素的一半宽度。

请注意，您可以将响应式选择器与任何实用程序类结合使用，而不仅仅是与元素大小相关的那些。例如，您可以在某个断点处隐藏元素、更改其颜色，甚至可以将其变成具有可变列数的 grid。

您可以在官方 Tailwind 文档中找到所有可用的响应式选择器及其等效的断点。

以下模板使用背景渐变和示例头像图像在页面中心设置响应式内容区域。对于按钮，它使用网格流系统将容器从中等屏幕开始分成三列，但是当从较小屏幕访问页面时，按钮会占据整个容器大小。

在代码编辑器中打开您在上一步中创建的 resources/views/index.blade.php 文件，并将内容替换为以下模板：

资源/视图/index.blade.php

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Sammy the Shark - About Page</title>
    <meta name="description" content="My Application Description">
    <meta name="author" content="Sammy">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body class="bg-gradient-to-r from-blue-400 via-purple-600 to-blue-700">
 
<div class="w-3/4 lg:w-1/2 mx-auto rounded-md bg-gray-200 shadow-lg m-20 p-10 text-center">
    <img src="{{ asset('img/profile_image.png') }}" class="w-32 lg:w-1/6 bg-blue-600 mx-auto rounded-lg mb-4" alt="avatar"/>
    <h1 class="text-3xl">Sammy the Shark</h1>
    <p class="text-gray-500 pb-4">Content Creator</p>
    <p class="text-gray-700 mb-6">Hello, I'm Sammy. I am a friendly shark interested in Linux, coding, and community.
        You can find out more about me in the following links:</p>
 
    <div class="grid grid-cols-1 md:grid-cols-3 grid-flow-row gap-6">
        <div class="px-4 py-2 bg-blue-600 text-gray-100 rounded-md mr-4 hover:bg-blue-700"><a href="https://twitter.com/digitalocean">Twitter</a></div>
        <div class="px-4 py-2 bg-blue-600 text-gray-100 rounded-md mr-4 hover:bg-blue-700"><a href="https://www.linkedin.com/company/digitalocean">LinkedIn</a></div>
        <div class="px-4 py-2 bg-blue-600 text-gray-100 rounded-md mr-4 hover:bg-blue-700"><a href="https://instagram.com/thedigitalocean">Instagram</a></div>
    </div>
 
</div>
</body>
</html>

该模板将生成以下页面：

这就是页面如何适应不同的屏幕尺寸：

在更新后的模板中，每个 HTML 元素都应用了许多 Tailwind 类和选择器。 Tailwind 对其实用程序类使用特定的命名法来创建响应式布局。示例模板中使用以下各项来创建最终结果：

bg-gradient-to-r：使用指定的颜色从左到 right 创建一个 gradient。
w-1/3：将元素的宽度设置为父元素宽度的三分之一（1/3）。有很多不同的方法在 Tailwind 中设置元素的宽度。
mx-auto：使元素居中。
rounded-md：创建圆角，大小为“中等” (md)。
shadow-lg：创建阴影效果，大小为“大”（lg）。
mr-* 和其他 m 变体：用于设置元素的 margins。
pb-* 和其他 p 变体：用于设置元素的 padding。
hover:bg-blue-700：改变鼠标hover上选中元素的背景色。

查看 Tailwind 的官方文档以获取所有可用实用程序类的完整参考。

结论

在本教程中，您使用 Laravel Sail 和 Tailwind CSS 引导了一个新的 Laravel 应用程序。您还使用 Tailwind 强大的实用程序类创建了响应式“关于我”登录页面。

如果您想构建更复杂的登录页面并在此过程中了解更多有关 Tailwind 的信息，您可以按照我们的指南如何使用 Tailwind CSS 构建样式化的登录页面，以获取有关如何创建的详细说明具有此框架的完整网站页面。

如果您想在基于项目的指南中了解有关 Laravel 的更多信息，可以参考我们的如何使用 Laravel 在 PHP 中构建链接登录页面系列。如需更多 PHP 内容，请查看我们的 PHP 标签。