创建目录清单


bin/rails generate controller Store index create app/controllers/store_controller.rb

    route  get 'store/index'
   invoke  tailwindcss
   create  app/views/store
   create  app/views/store/index.html.erb
   invoke  test_unit
   create  test/controllers/store_controller_test.rb
   invoke  helper
   create  app/helpers/store_helper.rb
   invoke  test_unit

虽然一切都已经设置好了，可以通过 http://local-host: 3000/store/index 访问此操作，不过可以做得更好。让我们把事情简化一下，把它作为网站的根URL。我们通过编辑 config/routes.rb 来实现:

Rails.application.routes.draw do
➤ root 'store#index', as: 'store_index'

resources :products
# Define your application routes per the DSL in 
# https://guides.rubyonrails.org/routing.html
# Defines the root path route ("/")
# root "articles#index"

end

我们已经用一个定义根路径的调用替换了 get‘ store/index’行，在这个过程中我们添加了一个 as: ‘ store _ index’选项。后者告诉 Rails 创建 store _ index _ path 和 store _ index _ url 访问器方法，使现有代码和测试能够继续正常工作。

我们需要从数据库中获取产品列表，并将其提供给视图中显示表格的代码。这意味着我们必须改变Store_controller.rb 中的 index ()方法

class StoreController < ApplicationController def index

@products = Product.order(:title) end

end

如果我们显示的产品在字母顺序。我们通过在 Product 模型中添加一个 order (: title)调用来做到这一点。

添加页面布局

典型网站中的页面通常具有相似的布局; 设计师将创建一个标准模板，用于放置内容。我们的工作是修改这个页面，为每个商店页面添加装饰。

到目前为止，我们创建的 html.erb 文件中没有任何关于样式表的引用。

你甚至找不到 HTML < head > 这样的引用通常存在的部分。相反，Rails 保留了一个独立的文件，用于为整个应用程序创建一个标准的页面环境。这个名为 application.html. erb 的文件是一个 Rails 布局，位于 layouts 目录中: 我们可以通过编辑这个文件来改变整个站点的外观和感觉。

<!DOCTYPE html>

<html>
  <head>
    <title>Pragprog Books Online Store</title>
    <meta name="viewport" content="width=device-width,initial-scale=1"> 
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag "inter-font", "data-turbo-track": "reload" %> 
    <%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %> 
  </head>
  <body>
    <header class="bg-green-700">
        <%= image_tag 'logo.svg', alt: 'The Pragmatic Bookshelf' %>
        <h1><%= @page_title %></h1>
    </header>
    <section class="flex">
        <nav class="bg-green-900 p-6">
            <ul class="text-gray-300 leading-8">
                <li><a href="/">Home</a></li>
                <li><a href="/questions">Questions</a></li> 
                <li><a href="/news">News</a></li>
                <li><a href="/contact">Contact</a></li>
            </ul> 
       </nav>
       <main class="container mx-auto mt-4 px-5 flex"> 
           <%= yield %>
       </main>
   </section>
 </body>
</html>

除了通常的 HTML gubbins，这个布局还有许多 Rails 特定的项目。 Rails stylesheet_link_tag() 辅助方法为tailwind 和我们应用程序的样式表生成标记，并指定启用Turbo,2 的选项，它在后台透明地工作以加速应用程序中的页面更改。

最后，csrf _ meta _ tags ()和 csp _ meta _ tag ()方法建立了防止跨站请求伪造攻击所需的所有幕后数据。

在主体中，我们将页面标题设置为@page _ title 实例变量中的值。默认情况下，这是空白的，这意味着不会呈现 H1，但是任何设置变量@page _ title 的控制器都可以重写这个。然而，真正的魔术发生在我们调用 yield 的时候。这导致 Rails 替换页面特定的内容——这个请求调用的视图生成的内容。这是 index.html. erb 生成的目录页面。

重返Ruby之路 Day19 --- Rails7学习（6）

创建目录清单

添加页面布局