如何将引导程序添加到RubyonRails应用程序

来自菜鸟教程
跳转至：导航、​搜索

介绍

如果您正在开发 Ruby on Rails 应用程序，您可能有兴趣在项目中添加样式以促进用户参与。 一种方法是添加 Bootstrap，这是一个 HTML、CSS 和 JavaScript 框架，旨在简化使 Web 项目响应式和移动就绪的过程。 通过在 Rails 项目中实现 Bootstrap，您可以将其布局约定和组件集成到您的应用程序中，以使用户与您的站点的交互更具吸引力。

在本教程中，您将把 Bootstrap 添加到使用 webpack 捆绑器来提供其 JavaScript 和 CSS 资产的现有 Rails 项目中。 目标是创建一个视觉上吸引人的网站，用户可以与之互动以分享有关鲨鱼的信息：

先决条件

要遵循本教程，您将需要：

  • 运行 Ubuntu 18.04 的本地机器或开发服务器。 您的开发机器应该有一个具有管理权限的非 root 用户和一个配置了 ufw 的防火墙。 有关如何设置的说明，请参阅我们的 Initial Server Setup with Ubuntu 18.04 教程。
  • Node.js 和 npm 安装在本地机器或开发服务器上。 本教程使用 Node.js 版本 10.16.3 和 npm 版本 6.9.0。 有关在 Ubuntu 18.04 上安装 Node.js 和 npm 的指导，请按照 如何在 Ubuntu 18.04 上安装 Node.js 的 “使用 PPA 安装” 部分中的说明进行操作。
  • Ruby、rbenv 和 Rails 安装在本地计算机或开发服务器上，遵循 如何在 Ubuntu 18.04 上使用 rbenv 安装 Ruby on Rails 中的 Steps 1-4 . 本教程使用 Ruby 2.5.1、rbenv 1.1.2 和 Rails 5.2.3。
  • 按照 How To Build a Ruby on Rails Application 的 Step 1 安装 SQLite。 本教程使用 SQLite 3 3.22.0。

第 1 步 — 克隆项目并安装依赖项

我们的第一步是从 DigitalOcean 社区 GitHub 帐户 克隆 rails-stimulus 存储库。 此存储库包含 How To Add Stimulus to a Ruby on Rails Application 中描述的设置中的代码，其中描述了如何将 Stimulus.js 添加到现有 Rails 5 项目。

将存储库克隆到名为 rails-bootstrap 的目录中： 

git clone https://github.com/do-community/rails-stimulus.git rails-bootstrap

导航到 rails-bootstrap 目录： 

cd rails-bootstrap

为了使用项目代码，您首先需要安装项目的依赖项，这些依赖项列在其 Gemfile 中。 使用以下命令安装所需的 gem： 

bundle install

接下来，您将安装 Yarn 依赖项。 因为这个 Rails 5 项目已经修改为使用 webpack 提供资产，所以它的 JavaScript 依赖项现在由 Yarn 管理。 这意味着有必要安装并验证项目的 package.json 文件中列出的依赖项。

运行以下命令来安装这些依赖项： 

yarn install --check-files

--check-files 标志检查以确保已安装在 node_modules 目录中的任何文件未被删除。

接下来，运行数据库迁移： 

rails db:migrate

迁移完成后，您可以测试应用程序以确保它按预期工作。 如果您在本地工作，请使用以下命令启动服务器： 

rails s

如果您在开发服务器上工作，您可以使用以下命令启动应用程序： 

rails s --binding=your_server_ip

导航到 localhost:3000 或 http://your_server_ip:3000。 您将看到以下登录页面：

要创建新鲨鱼，请单击页面底部的 New Shark 链接，这将带您到 sharks/new 路线。 由于项目的 身份验证设置 ，系统将提示您输入用户名 (sammy) 和密码 (shark)。 new 视图如下所示：

为了验证应用程序是否正常工作，我们可以向其添加一些演示信息。 在 Name 字段中输入“Great White”，在 Facts 字段中输入“Scary”：

点击Create Shark按钮创建鲨鱼：

您现在已经为您的项目安装了必要的依赖项并测试了它的功能。 接下来，您可以对 Rails 应用程序进行一些更改，以便用户在导航到鲨鱼信息应用程序本身之前遇到一个主登录页面。

第 2 步 — 添加主登录页面和控制器

当前应用程序将根视图设置为主鲨鱼信息页面，即 sharks 控制器的 index 视图。 虽然这可以让用户访问主应用程序，但如果我们决定在未来开发应用程序并添加其他功能和特性，则可能不太理想。 我们可以重新组织应用程序，将根视图设置为 home 控制器，其中将包括 index 视图。 从那里，我们可以链接到应用程序的其他部分。

要创建 home 控制器，您可以将 rails generate 命令与 controller 生成器一起使用。 在这种情况下，我们将指定我们想要主登录页面的 index 视图： 

rails generate controller home index

创建控制器后，您需要修改项目的 config/routes.rb 文件（指定应用程序的路由声明的文件）中的根视图，因为根视图当前设置为鲨鱼 index看法。

打开文件： 

nano config/routes.rb

找到以下行：

~/rails-bootstrap/config/routes.rb 

. . . 
root 'sharks#index'
. . .

将其更改为以下内容：

~/rails-bootstrap/config/routes.rb 

. . . 
root 'home#index'
. . .

这会将 home 控制器的 index 视图设置为应用程序的根，从而可以从那里分支到应用程序的其他部分。

完成编辑后保存并关闭文件。

完成这些更改后，您就可以继续将 Bootstrap 添加到应用程序中了。

第 3 步 — 安装 Bootstrap 并添加自定义样式

在此步骤中，您将向项目添加 Bootstrap 以及正常运行所需的工具库。 这将涉及将库和插件导入应用程序的 webpack 入口点和环境文件。 它还将涉及在应用程序的 app/javascript 目录中创建自定义样式表，该目录是项目的 JavaScript 资产所在的目录。

首先，使用 yarn 安装 Bootstrap 及其所需的依赖项： 

yarn add bootstrap jquery popper.js

Bootstrap 的许多组件都需要 JQuery 和 Popper.js，以及 Bootstrap 自己的自定义插件，因此此命令将确保您拥有所需的库。

接下来，使用 nano 或您喜欢的编辑器打开您的主 webpack 配置文件 config/webpack/environment.js： 

nano config/webpack/environment.js

在该文件中，添加 webpack 库以及一个 ProvidePlugin，它告诉 Bootstrap 如何解释 JQuery 和 Popper 变量。

将以下代码添加到文件中：

~/rails-bootstrap/config/webpack/environment.js 

const { environment } = require('@rails/webpacker')
const webpack = require("webpack") 

environment.plugins.append("Provide", new webpack.ProvidePlugin({ 
  $: 'jquery',
  jQuery: 'jquery',
  Popper: ['popper.js', 'default']
}))  

module.exports = environment

ProvidePlugin 帮助我们避免使用 JQuery 或 Popper 模块时通常使用的多个 import 或 require 语句。 有了这个插件，webpack 将自动加载正确的模块并将命名变量指向每个模块加载的导出。

完成编辑后保存并关闭文件。

接下来，打开你的主 webpack 入口点文件，app/javascript/packs/application.js： 

nano app/javascript/packs/application.js

在文件中，添加以下 import 语句以导入 Bootstrap 和您接下来将创建的自定义 scss 样式文件： 

. . . 
[label ~/rails-bootstrap/app/javascript/packs/application.js]
import { Application } from "stimulus"
import { definitionsFromContext } from "stimulus/webpack-helpers"

import "bootstrap"
import "../stylesheets/application"
. . .

完成编辑后保存并关闭文件。

接下来，为您的应用程序样式表创建一个 stylesheets 目录： 

mkdir app/javascript/stylesheets

打开自定义样式文件： 

nano app/javascript/stylesheets/application.scss

这是一个 scss 文件，它使用 Sass 而不是 CSS。 Sass 或 Syntactically Awesome Style Sheets 是一种 CSS 扩展语言，它允许开发人员将编程逻辑和约定（如共享变量）集成到样式规则中。

在文件中，添加以下语句以导入项目的自定义 Bootstrap scss 样式和 Google 字体：

~/rails-bootstrap/app/javascript/stylesheets/application.scss 

@import "~bootstrap/scss/bootstrap";
@import url('https://fonts.googleapis.com/css?family=Merriweather:400,700');

接下来，为应用程序添加以下自定义变量定义和样式：

~/rails-bootstrap/app/javascript/stylesheets/application.scss 

. . .
$white: white;
$black: black;

.navbar {
        margin-bottom: 0;
        background: $black;
}
body {
        background: $black;
        color: $white;
        font-family: 'Merriweather', sans-serif;
}
h1,
h2 {
        font-weight: bold;
}
p {
        font-size: 16px;
        color: $white;
}
a:visited {
        color: $black;
}
.jumbotron {
        background: #0048CD;
        color: $white;
        text-align: center;
        p {
                color: $white;
                font-size: 26px;
        }
}
.link {
        color: $white;
}
.btn-primary {
        color: $white;
        border-color: $white;
        margin-bottom: 5px;
}
.btn-sm {
        background-color: $white;
        display: inline-block;
}
img,
video,
audio {
        margin-top: 20px;
        max-width: 80%;
}
caption {

        float: left;
        clear: both;

}

完成编辑后保存并关闭文件。

您已将 Bootstrap 以及一些自定义样式添加到您的项目中。 现在您可以继续将 Bootstrap 布局约定和组件集成到您的应用程序文件中。

第 4 步 — 修改应用程序布局

我们将 Bootstrap 约定和组件集成到项目中的第一步是将它们添加到主应用程序布局文件中。 此文件设置将包含在应用程序的每个渲染视图模板中的元素。 在这个文件中，我们将确保定义我们的 webpack 入口点，同时添加对共享导航标题 partial 的引用和一些逻辑，这些逻辑将允许我们为与鲨鱼关联的视图呈现布局应用。

首先，打开 app/views/layouts/application.html.erb，您的应用程序的主布局文件： 

nano app/views/layouts/application.html.erb

目前，该文件如下所示：

~/rails-bootstrap/app/views/layouts/application.html.erb 

<!DOCTYPE html>
<html>
  <head>
    <title>Sharkapp</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

该代码呈现诸如 跨站点请求伪造保护参数和令牌 用于动态表单，csp-nonce 用于允许内联脚本标签的每个会话随机数，以及应用程序的样式表和 javascript 资产。 请注意，我们的代码没有 javascript_link_tag，而是包含 javascript_pack_tag，它告诉 Rails 在 app/javascript/packs/application.js 加载我们的主 webpack 入口点。

在页面的 <body> 中，yield 语句告诉 Rails 从视图中插入内容。 在这种情况下，因为我们的应用程序根以前映射到 index 鲨鱼视图，这将插入该视图的内容。 然而，现在，因为我们已经改变了根视图，这将插入来自 home 控制器的 index 视图的内容。

这引发了几个问题：我们是否希望应用程序的主视图与用户查看鲨鱼应用程序时看到的相同？ 如果我们希望这些观点有所不同，我们如何实现呢？

第一步将决定应该在所有应用程序视图中复制什么。 我们可以保留 <header> 下包含的所有内容，因为我们希望出现在所有应用程序页面上的主要是标签和元数据。 然而，在本节中，我们还可以添加一些东西来自定义我们所有的应用程序视图。

首先，添加 Bootstrap 推荐用于响应行为的 viewport 元标记：

~/rails-bootstrap/app/views/layouts/application.html.erb 

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sharkapp</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
. . .

接下来，将现有的 title 代码替换为将以更动态的方式呈现应用程序标题的代码：

~/rails-bootstrap/app/views/layouts/application.html.erb 

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= content_for?(:title) ? yield(:title) : "About Sharks" %></title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
. . .

添加 <meta> 标记以包含站点描述：

~/rails-bootstrap/app/views/layouts/application.html.erb 

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= content_for?(:title) ? yield(:title) : "About Sharks" %></title>
    <meta name="description" content="<%= content_for?(:description) ? yield(:description) : "About Sharks" %>">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
. . .

使用此代码，您可以将导航部分添加到布局中。 理想情况下，我们应用程序的每个页面都应该在页面顶部包含一个 navbar 组件，以便用户可以轻松地从站点的一个部分导航到另一个部分。

在 <body> 标签下，添加 <header> 标签和以下渲染语句：

~/rails-bootstrap/app/views/layouts/application.html.erb 

  <body>
    <header>
      <%= render 'layouts/navigation' %>
    </header>

    <%= yield %>
. . .

这个 <header> 标签允许您组织页面内容，将导航栏与主页内容分开。

最后，您可以添加一个 <main> 元素标记和一些逻辑来控制应用程序将呈现哪个视图，从而控制哪个布局。 此代码使用 content_for 方法 来引用我们将在下一步中与鲨鱼布局相关联的内容标识符。

将现有的 yield 语句替换为以下内容：

~/rails-bootstrap/app/views/layouts/application.html.erb 

. . . 
  <body>
    <header>
      <%= render 'layouts/navigation' %>
    </header>
    <main role="main">
    <%= content_for?(:content) ? yield(:content) : yield %>
    </main>
  </body>
</html>

现在，如果设置了 :content 块，应用程序将生成关联的布局。 否则，多亏了三元运算符，它将对与 home 控制器关联的视图进行隐式屈服。

完成这些更改后，保存并关闭文件。

使用应用程序范围的布局集，您可以继续为您的鲨鱼视图创建共享导航栏部分和鲨鱼布局。

第 5 步 - 创建共享的部分和特定布局

除了您在上一步中对应用程序布局所做的更改之外，您还需要创建共享导航栏部分、您在 app/views/layouts/application.html.erb 中引用的鲨鱼布局以及应用程序登录页面的视图。 您还可以将 Bootstrap 样式添加到应用程序的当前 link_to 元素中，以利用内置的 Bootstrap 样式。

首先，为共享导航栏部分打开一个文件： 

nano app/views/layouts/_navigation.html.erb

将以下代码添加到文件中以创建导航栏：

~/rails-bootstrap/app/views/layouts/_navigation.html.erb 

<nav class="navbar navbar-dark navbar-static-top navbar-expand-md">
    <div class="container">
        <button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
        </button> <%= link_to "Everything Sharks", root_path, class: 'navbar-brand' %>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav mr-auto">
            <li class='nav-item'><%= link_to 'Home', home_index_path, class: 'nav-link' %></li>
            <li class='nav-item'><%= link_to 'Sharks', sharks_path, class: 'nav-link' %></li>  
                
                </li>
            </ul>
        </div>
    </div>
</nav>

此导航栏使用 link_to 方法为应用程序根创建一个链接，该方法映射到应用程序根路径。 导航栏还包括两个附加链接：一个指向 Home 路径，映射到 home 控制器的 index 视图，另一个指向鲨鱼应用程序路径，映射到shark index 视图。

完成编辑后保存并关闭文件。

接下来，在 layouts 目录中为鲨鱼布局打开一个文件： 

nano app/views/layouts/sharks.html.erb

在添加布局功能之前，我们需要确保布局的内容设置为我们在主应用程序布局中引用的 :content 块。 将以下行添加到文件中以创建块：

~/rails-bootstrap/app/views/layouts/sharks.html.erb 

<% content_for :content do %>
<% end %>

每当控制器请求鲨鱼视图时，我们将在此块中编写的代码将呈现在 app/views/layouts/application.html.erb 文件中的 :content 块中。

接下来，在块本身内，添加以下代码以创建一个 jumbotron 组件和两个 容器：

~/rails-bootstrap/app/views/layouts/sharks.html.erb 

<% content_for :content do %>
    <div class="jumbotron text-center">
        <h1>Shark Info</h1>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-lg-6">
                <p>
                    <%= yield %>
                </p>
            </div>
            <div class="col-lg-6">
                <p>

                    <div class="caption">You can always count on some sharks to be friendly and welcoming!</div>
                    <img src="https://assets.digitalocean.com/articles/docker_node_image/sammy.png" alt="Sammy the Shark">
                </p>

            </div>
        </div>
    </div>
    <% end %>

第一个容器包含一个 yield 语句，它将插入来自 shark 控制器视图的内容，而第二个容器包含一个提醒，即某些鲨鱼总是友好和热情的。

最后，在文件底部，添加以下 render 语句来呈现应用程序布局：

~/rails-bootstrap/app/views/layouts/sharks.html.erb 

. . . 
            </div>
        </div>
    </div>
    <% end %>
        <%= render template: "layouts/application" %>

此鲨鱼布局将为主应用程序布局中命名的 :content 块提供内容； 然后它将渲染应用程序布局本身，以确保我们渲染的应用程序页面在应用程序范围内拥有我们想要的一切。

完成编辑后保存并关闭文件。

我们现在已经有了部分和布局，但是我们还没有创建用户在导航到应用程序主页时将看到的视图，即 home 控制器的 index 视图。

现在打开该文件： 

nano app/views/home/index.html.erb

这个视图的结构将匹配我们为鲨鱼视图定义的布局，有一个主 jumbotron 组件和两个容器。 将文件中的样板代码替换为以下内容：

~/rails-bootstrap/app/views/home/index.html.erb 

<div class="jumbotron">
    <div class="container">
        <h1>Want to Learn About Sharks?</h1>
        <p>Are you ready to learn about sharks?</p>
        <br>
        <p>
            <%= button_to 'Get Shark Info', sharks_path, :method => :get,  :class => "btn btn-primary btn-lg"%>
        </p>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-lg-6">
            <h3>Not all sharks are alike</h3>
            <p>Though some are dangerous, sharks generally do not attack humans. Out of the 500 species known to researchers, only 30 have been known to attack humans.
            </p>
        </div>
        <div class="col-lg-6">
            <h3>Sharks are ancient</h3>
            <p>There is evidence to suggest that sharks lived up to 400 million years ago.
            </p>
        </div>
    </div>
</div>

现在，当登陆应用程序的主页时，用户可以通过单击 Get Shark Info 按钮清晰地导航到应用程序的鲨鱼部分。 此按钮指向 shark_path — 映射到与 sharks 控制器关联的路由的助手。

完成编辑后保存并关闭文件。

我们的最后一项任务是将应用程序中的一些 link_to 方法转换为我们可以使用 Bootstrap 设置样式的按钮。 我们还将添加一种从鲨鱼 index 视图导航回主页的方法。

打开鲨鱼index视图开始： 

nano app/views/sharks/index.html.erb

在文件底部，找到指向 new 鲨鱼视图的 link_to 方法：

~/rails-bootstrap/app/views/sharks/index.html.erb 

. . .
<%= link_to 'New Shark', new_shark_path %>

修改代码，将这个链接变成一个使用 Bootstrap 的 "btn btn-primary btn-sm" 类的按钮：

~/rails-bootstrap/app/views/sharks/index.html.erb 

. . .
<%= link_to 'New Shark', new_shark_path, :class => "btn btn-primary btn-sm" %>

接下来，添加一个指向应用程序主页的链接：

~/rails-bootstrap/app/views/sharks/index.html.erb 

. . .
<%= link_to 'New Shark', new_shark_path, :class => "btn btn-primary btn-sm" %> <%= link_to 'Home', home_index_path, :class => "btn btn-primary btn-sm" %>

完成编辑后保存并关闭文件。

接下来，打开 new 视图： 

nano app/views/sharks/new.html.erb

将按钮样式添加到文件底部的 link_to 方法中：

~/rails-bootstrap/app/views/sharks/new.html.erb 

. . . 
<%= link_to 'Back', sharks_path, :class => "btn btn-primary btn-sm" %>

保存并关闭文件。

打开 edit 视图： 

nano app/views/sharks/edit.html.erb

目前，link_to 方法的排列方式如下：

~/rails-bootstrap/app/views/sharks/edit.html.erb 

. . . 
<%= link_to 'Show', @shark %> |
<%= link_to 'Back', sharks_path %>

更改它们在页面上的排列并添加按钮样式，使代码如下所示：

~/rails-bootstrap/app/views/sharks/edit.html.erb 

. . . 
<%= link_to 'Show', @shark, :class => "btn btn-primary btn-sm" %> <%= link_to 'Back', sharks_path, :class => "btn btn-primary btn-sm" %>

保存并关闭文件。

最后，打开show视图： 

nano app/views/sharks/show.html.erb

找到以下 link_to 方法：

~/rails-bootstrap/app/views/sharks/show.html.erb 

. . . 
<%= link_to 'Edit', edit_shark_path(@shark) %> |
<%= link_to 'Back', sharks_path %>
. . .

将它们更改为如下所示：

~/rails-bootstrap/app/views/sharks/show.html.erb 

. . . 
<%= link_to 'Edit', edit_shark_path(@shark), :class => "btn btn-primary btn-sm" %> <%= link_to 'Back', sharks_path, :class => "btn btn-primary btn-sm" %>
. . .

保存并关闭文件。

您现在已准备好测试应用程序。

使用适当的命令启动服务器：

  • rails s 如果您在本地工作
  • rails s --binding=your_server_ip 如果您使用的是开发服务器

导航到 localhost:3000 或 http://your_server_ip:3000，具体取决于您是在本地工作还是在服务器上工作。 您将看到以下登录页面：

点击获取鲨鱼信息。 您将看到以下页面：

您现在可以使用 如何向 Ruby on Rails 应用程序 中描述的方法编辑您的鲨鱼，或添加事实和帖子。 您还可以在对话中添加新的鲨鱼。

当您导航到其他鲨鱼视图时，您将看到始终包含鲨鱼布局：

您现在已将 Bootstrap 集成到您的 Rails 应用程序中。 从这里开始，您可以通过向应用程序添加新样式和组件来继续前进，以使其对用户更具吸引力。

结论

您现在已将 Bootstrap 集成到您的 Rails 应用程序中，这将允许您创建响应式和视觉上吸引人的样式，以增强您的用户对项目的体验。

要了解有关 Bootstrap 功能及其提供的更多信息，请参阅 Bootstrap 文档。 您还可以查看 Sass 的 文档，了解如何使用它来增强和扩展 CSS 样式和逻辑。

如果您有兴趣了解 Bootstrap 如何与其他框架集成，请参阅 如何使用 Angular、Bootstrap 和 APIXU API 构建天气应用程序。 您还可以通过阅读 如何使用 React 前端设置 Ruby on Rails 项目 来了解它如何与 Rails 和 React 集成。

取自“https://cainiaojiaocheng.com/index.php?title=如何将引导程序添加到RubyonRails应用程序&oldid=28897”
Powered by MediaWiki