AWDR 阅读笔记 – 2. Code – Task A

Agile Web Development with Rails 5.1 阅读笔记系列第 2 篇,尝试 Rails’ Scaffold。

Scaffold (脚手架)是一次性创建模型、视图、控制器和迁移表的强大命令。本书该部分(CH6 – Task A)介绍了 Scaffold 生成 Product 的步骤。

Generating the Scaffold

$ bin/rails generate scaffold Product 
> title:string description:text image_url:string price:decimal

这里一键生成了:

  1. 迁移表
  2. 模型
  3. 视图
  4. 控制器
  5. 路由
  6. 单元测试
  7. coffee/scss
  8. 等等

Migrate

修改

现在我们有了数据库迁移表,稍作修改,控制 price 字段精度为 8,保留 2 位小数。

class CreateProducts < ActiveRecord::Migration[5.2]
  def change
    create_table :products do |t|
      t.string :title
      t.text :description
      t.string :image_url
      t.decimal :price, precision: 8, scale: 2

      t.timestamps
    end
  end
end

导入

执行以下命令,创建数据表,Product 数据表名规范为复数。

$ bin/rails db:migrate

启动开发服务器,可以体验到具备增删改查的 Product。

$ bin/rails server

the Seed Data

修改

可以直接导入一些现成的 seed 数据,以下是部分 /db/seeds.rb

# . . .
Product.create!(title: 'Seven Mobile Apps in Seven Weeks',
  description:
    %{<p>
      <em>Native Apps, Multiple Platforms</em>
      Answer the question “Can we build this for ALL the devices?” with a
      resounding YES. This book will help you get there with a real-world
      introduction to seven platforms, whether you’re new to mobile or an
      experienced developer needing to expand your options. Plus, you’ll find
      out which cross-platform solution makes the most sense for your needs.
      </p>},
  image_url: '7apps.jpg',
  price: 26.00)
# . . .

导入

$ bin/rails db:seed

CLI

可以使用 dbconsole 打开数据库 cli client。

$ bin/rails dbconsole

the Style Sheet

调整 description 字段

ejs 里面的标签都是以函数调用方式生成,调整 app/views/products/_form.html.erb 中的 textares-description 字段宽高分别为 10 rows 和 60 cols。


编写 Product List 样式

然后为 Product list 添加样式。

.products {
  margin: 0;
  padding: 0.5em;
  a {
    padding: 0.354em 0.5em;
    border-radius: 0.354em;
  }
  table {
    border-collapse: collapse;
  }
  td {
    padding: 0.5em;
    margin: 0;
  }

  tr.list_line_odd {
    background-color: #effeef;
  }

  td.image {
    // Hide this on mobile devices
    display: none;

    // Assume anything bigger than 30em
    // is a non-mobile device and can
    // fit the image.
    @media (min-width: 30em) {
      display: block;
      img {
        height: 11.3em;
      }
    }
  }

  td.description {
    h1 {
      font-size: 1.4em;
    }
  }

  td.actions {
    ul {
      padding: 0;
      list-style: none;
      li {
        padding: 0.5em 0.5em;
      }
    }
  }

  tfoot {
    td {
      padding: 0.5em 0;
    }
  }
}

这里使用的表格进行展示,如果使用列表,则可以使用下面这种方式为奇偶不同列表指定样式。

li:nth-child(odd) {
  // style
}
li:nth-child(even) {
  // style
}

修改全局模板

在 layout/application 中修改全局模板,为不同路由指定不同样式类。

<main class="<%= controller.controller_name %>">
  <%= yield %>
</main>

修改 Product List 模板

对于 Products list,参考书上的写法,动态控制奇偶行背景,对于使用 HTML 表述的 description 字段,需要进行 parse。

<% if notice %>
  <aside id="notice"><%= notice %></aside>
<% end %>

<h1>Products</h1>

<table>
  <tfoot>
    <tr>
      <td colspan="3">
        <%= link_to 'New product', new_product_path %>
      </td>
    </tr>
  </tfoot>
  <tbody>
    <% @products.each do |product| %>
      <tr class="<%= cycle('list_line_odd', 'list_line_even') %>">

        <td class="image">
          <%= image_tag(product.image_url, class: 'list_image') %>
        </td>

        <td class="description">
          <h1><%= product.title %></h1>
          <p>
            <%= truncate(strip_tags(product.description),
                         length: 80) %>
          </p>
        </td>

        <td class="actions">
          <ul>
            <li><%= link_to 'Show', product %></li>
            <li><%= link_to 'Edit', edit_product_path(product) %></li>
            <li>
              <%= link_to 'Destroy',
                           product,
                          method: :delete,
                          data: { confirm: 'Are you sure?' } %>
            </li>
          </ul>
        </td>
      </tr>
    <% end %>
  </tbody>
</table>

Other Useful CMD

测试

依据编写的单元测试模块进行测试。

$ bin/rails test

回滚

回滚表迁移。

$ bin/rails db:rollback

参考:

  1. Agile Web Development with Rails 5.1 . Sam Ruby. David Bryant Copeland. with Dave Thomas. 2017 The Pragmatic Programmers, LLC.
  2. 完整源码见:https://media.pragprog.com/titles/rails51/code/rails51/depot_a/*

作者: V

Web Dev

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Google photo

您的留言將使用 Google 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s