视图和模板

在Web开发中，视图（View）和模板（Template）是用户界面的核心部分。它们负责将数据呈现给用户，并允许用户与应用程序进行交互。在本教程中，我们将深入探讨Ruby中的视图和模板，包括它们的理论基础、代码示例和实践练习。

1. 视图和模板的基本概念

1.1 视图（View）

视图是用户界面的可视部分，通常由HTML、CSS和JavaScript组成。在MVC（模型-视图-控制器）架构中，视图负责展示数据，并接收用户的输入。

1.2 模板（Template）

模板是一种用于生成动态内容的机制。它允许开发者在静态的HTML中嵌入动态数据，从而生成最终的HTML页面。模板引擎通常支持变量、条件语句、循环等编程结构。

2. 常见的模板引擎

在Ruby中，有许多流行的模板引擎，如ERB、Haml和Slim。我们将重点介绍ERB，因为它是最常用的模板引擎之一。

2.1 ERB（Embedded Ruby）

ERB是Ruby内置的模板引擎，允许你在HTML中嵌入Ruby代码。ERB使用<% %>和<%= %>标签来嵌入Ruby代码。

• <% %>：用于执行Ruby代码，但不输出结果。
• <%= %>：用于执行Ruby代码，并将结果输出到HTML中。

3. 使用ERB创建视图

3.1 基本示例

假设我们有一个简单的Ruby脚本，用于生成一个包含动态内容的HTML页面。

# app.rb
require 'erb'

# 数据
name = "Alice"
age = 30

# 模板
template = ERB.new <<-EOF
<!DOCTYPE html>
<html>
<head>
  <title>Welcome</title>
</head>
<body>
  <h1>Hello, <%= name %>!</h1>
  <p>You are <%= age %> years old.</p>
</body>
</html>
EOF

# 渲染模板
result = template.result(binding)

# 输出结果
puts result

在这个示例中，我们使用ERB模板生成一个包含动态内容的HTML页面。<%= name %>和<%= age %>将分别替换为变量name和age的值。

3.2 使用条件语句和循环

ERB还支持条件语句和循环，这使得模板更加灵活。

# app.rb
require 'erb'

# 数据
items = ["Apple", "Banana", "Cherry"]

# 模板
template = ERB.new <<-EOF
<!DOCTYPE html>
<html>
<head>
  <title>Shopping List</title>
</head>
<body>
  <h1>Shopping List</h1>
  <ul>
    <% items.each do |item| %>
      <li><%= item %></li>
    <% end %>
  </ul>
</body>
</html>
EOF

# 渲染模板
result = template.result(binding)

# 输出结果
puts result

在这个示例中，我们使用<% items.each do |item| %>来遍历items数组，并生成一个包含所有项目的无序列表。

4. 实践练习

4.1 练习1：生成动态用户列表

编写一个Ruby脚本，使用ERB模板生成一个包含用户列表的HTML页面。用户数据存储在一个数组中，每个用户包含name和email两个属性。

# users.rb
require 'erb'

# 数据
users = [
  { name: "Alice", email: "[email protected]" },
  { name: "Bob", email: "[email protected]" },
  { name: "Charlie", email: "[email protected]" }
]

# 模板
template = ERB.new <<-EOF
<!DOCTYPE html>
<html>
<head>
  <title>User List</title>
</head>
<body>
  <h1>User List</h1>
  <ul>
    <% users.each do |user| %>
      <li><%= user[:name] %> - <%= user[:email] %></li>
    <% end %>
  </ul>
</body>
</html>
EOF

# 渲染模板
result = template.result(binding)

# 输出结果
puts result

4.2 练习2：生成动态产品页面

编写一个Ruby脚本，使用ERB模板生成一个包含产品信息的HTML页面。产品数据存储在一个哈希表中，包含name、price和description三个属性。

# product.rb
require 'erb'

# 数据
product = {
  name: "Smartphone",
  price: 599.99,
  description: "A high-end smartphone with advanced features."
}

# 模板
template = ERB.new <<-EOF
<!DOCTYPE html>
<html>
<head>
  <title>Product Details</title>
</head>
<body>
  <h1><%= product[:name] %></h1>
  <p>Price: $<%= product[:price] %></p>
  <p>Description: <%= product[:description] %></p>
</body>
</html>
EOF

# 渲染模板
result = template.result(binding)

# 输出结果
puts result

5. 总结

在本教程中，我们学习了视图和模板的基本概念，并使用ERB模板引擎创建了动态的HTML页面。通过实践练习，我们掌握了如何在模板中嵌入Ruby代码，并生成包含动态内容的HTML页面。

视图和模板是Web开发中不可或缺的部分，掌握它们将帮助你构建更加灵活和动态的用户界面。继续探索其他模板引擎（如Haml和Slim），并尝试在实际项目中应用这些知识。

6. 进一步学习

• Haml：一种简洁的模板语言，使用缩进来定义HTML结构。
• Slim：另一种简洁的模板语言，类似于Haml，但语法略有不同。
• Rails中的视图和模板：学习如何在Ruby on Rails框架中使用视图和模板。

通过不断实践和学习，你将能够更加熟练地使用视图和模板，构建出功能强大且用户友好的Web应用程序。