23、Ruby Web开发：CGI、Mod Ruby与动态CSS样式表

最新推荐文章于 2025-12-10 21:42:07 发布

原创最新推荐文章于 2025-12-10 21:42:07 发布 · 21 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Ruby #Web开发 #CGI

Ruby实战：优雅编程之道专栏收录该内容

27 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

Ruby Web开发：CGI、Mod Ruby与动态CSS样式表

1. CGI脚本基础

CGI（Common Gateway Interface）是一种用于在Web服务器和应用程序之间传递信息的标准。我们可以通过修改查询字符串来改变CGI脚本的输出。
- 修改查询字符串
- 访问 http://localhost/cgi-bin/simple_cgi.rb?lang=Ruby ，定义列表中将出现五个条目，新增的键 lang 值为 Ruby 。这是因为 cgi.params 是 show_def_list 中 items 哈希的一部分，当使用 lang=Ruby 查询字符串时， cgi.params 为 { 'lang' => 'Ruby' } 。
- 访问 http://localhost/cgi-bin/simple_cgi.rb?lang=Ruby&server=some_other_server_name ，键 lang 的值仍为 Ruby ，但 server 的值不再是 localhost ，而是 some_other_server_name 。这是因为 cgi.params 作为 merge 的参数，会覆盖哈希中已有的冲突键值对。
- 脚本扩展
- 可以将 currency_converter2.rb 的部分内容融入 simple_cgi.rb ，例如显示时间并接受货币转换的参数。
- 还可以使用CGI执行系统调用并显示结果，如查看机器上运行的进程、磁盘使用情况等。
- 结果查看
- 访问 http://localhost/cgi-bin/simple_cgi.rb ，输出结果大致如图所示。软件值可能因系统不同而有所差异，时间也会明显不同。

2. Mod Ruby的应用

CGI虽然适用于许多应用场景，但有时我们希望文件主要是HTML，仅部分子部分需要由编程语言（如Ruby）执行。eRuby通过 mod_ruby 软件直接嵌入到Web服务器中，解决了这个问题。
- 速度优势
- CGI在处理动态请求时，每次请求都会启动一个新的Ruby解释器，处理完后关闭，这会消耗大量时间。而 mod_ruby 让Ruby解释器在后台一直运行，随时准备评估脚本并将结果返回给Web服务器，避免了为每个脚本启动和关闭独立Ruby进程的开销。虽然这会使Web服务器启动稍慢，但在处理几个请求后能节省大量机器开销。
- 配置与代码
- mod_ruby_demo.conf ：这是一个Apache配置文件，用于告诉Apache如何处理 mod_ruby 。需要将其放在 /etc/apache2/mods-available/ 目录下，并在 /etc/apache2/mod-enabled/ 目录下创建符号链接。如果使用Apache 1.X版本，需将文件内容添加到 /etc/apache/httpd.conf 中。

<IfModule mod_ruby.c>
  # for Apache::RubyRun
  RubyRequire apache/ruby-run
  # for Apache::ERubyRun
  RubyRequire apache/eruby-run

  # handle *.rcss as eruby files.
  <Files *.rcss>
    AddType text/css .rcss
    AddType application/x-httpd-ruby *.rb
    SetHandler ruby-object
    RubyHandler Apache::ERubyRun.instance
  </Files>

  # handle *.rhtml as eruby files.
  <Files *.rhtml>
    AddType text/html .rhtml
    AddType application/x-httpd-ruby *.rb
    SetHandler ruby-object
    RubyHandler Apache::ERubyRun.instance
  </Files>

  RubyRequire auto-reload
</IfModule>

- **mod_ruby_demo.rhtml**：这是一个HTML和Ruby代码的混合文件，使用`<%`和`%>`标签表示要解释为Ruby代码的部分。

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Mod Ruby</title>
<style>
code { 
 background-color: #ddf;
 color: #f00;
 padding: 0.3em;
}
</style>
</head>
<body>
<h1>Mod Ruby</h1>
<p>
The eRuby command below should print <q>Hello, world!</q>
</p>
<p>
% tags
 <q><% print "Hello, world!" %></q>
</p>
<p>
 Welcome to <em><%= ENV['SERVER_NAME'] %></em>. If you see a server name, 
 <%= 'e' + 'Ruby' %> is probably working. 
</p>
<p>
 The current time is <%= Time.now %>.
</p>
<p>
<% 
 def function_within_mod_ruby(input)
  "#{input} was passed through a function.\n"
end
print function_within_mod_ruby("Some sample input")
print '<br />'
print function_within_mod_ruby("Some other sample input")
%>
</p>
</body>
</html>

工作原理
- mod_ruby_demo.conf 中，声明 .rcss 和 .rhtml 文件为Ruby文件。
- mod_ruby_demo.rhtml 中， <q><% print "Hello, world!" %></q> 会将 Hello, world! 打印到HTML中。使用 <%= 标签可以直接打印表达式的值，如 <%= ENV['SERVER_NAME'] %> 。还可以在文件中定义方法并使用。
结果与扩展
- 访问 http://localhost/mod_ruby/mod_ruby_demo.rhtml ，输出结果如图所示。时间会因访问时间不同而不同，其他差异可能因浏览方式或文件位置而异。
- 可以在 <% 或 <%= 标签中放入任何Ruby表达式，使用 require 引入标准库文件或自己的文件，将实际逻辑定义在 .rb 库文件中， .rhtml 文件用于显示。

3. CSS样式表的动态生成

现代网站的样式表是重要组成部分，但不同浏览器对CSS的支持存在差异。我们可以通过 mod_ruby 动态生成样式表，为不同浏览器提供定制化的样式。
- stylesheet.rcss
- 代码示例

/*
This file outputs CSS data customized by user_agent via eruby.
There is a blog entry about some similar ideas at 
http://blog.airbladesoftware.com/2006/12/11/cssdryer-dry-up-your-css
*/
<%
# define functions
def alpha_width(user_agent)
  width = 
    if (user_agent =~ /Windows/)
      11.8 if (user_agent =~ /Opera/)
      11.8 if (user_agent =~ /MSIE 6/)
      14   if (user_agent =~ /MSIE/)
      11.8
    elsif (user_agent =~ /Palm/)
      5
    else
      11.8
    end
  return %Q[\twidth:#{width}em;]
end
def beta_width(user_agent)
  width = 
    if (user_agent =~ /Windows/)
      15.8 if (user_agent =~ /Opera/)
      15.8 if (user_agent =~ /MSIE 6/)
      18   if (user_agent =~ /MSIE/)
      15.8
    elsif (user_agent =~ /Palm/)
      7
    else
      15.8
    end
  return %Q[\twidth:#{width}em;]
end
def margin_left(user_agent)
  margin = 
    if (user_agent =~ /Mac/)
      3   if (user_agent =~ /Opera/)
      1   if (user_agent =~ /MSIE/)
      2.5 if (user_agent =~ /Safari/)
      2   if (user_agent =~ /Gecko/)
      2.7
    elsif (user_agent =~ /Windows/)
      1.5
    else
      2   if (user_agent =~ /Opera/)
      2   if (user_agent =~ /onqueror/)
      1.8 if (user_agent =~ /Galeon/)
      2.5
    end
  return %Q[margin-left:-#{margin}em;]
end
%>
li { <%= margin_left(ENV['HTTP_USER_AGENT']) %> }
#navAlpha {
  position:absolute;
  <%= alpha_width(ENV['HTTP_USER_AGENT']) %>
  top:2em;
  left:2em;
  border:0.5em double #333;
  background-color:#ada;
  padding:1em;
  z-index:2;
}    
#navBeta {
  position:absolute;
  <%= beta_width(ENV['HTTP_USER_AGENT']) %>
  top:2em;
  right:2em;
  border:0.5em double #333;
  background-color:#ada;
  padding:1em;
  z-index:1;
}

- **工作原理**
    - 定义了`alpha_width`、`beta_width`和`margin_left`三个函数，根据用户代理（`user_agent`）返回不同的CSS值。
    - 在CSS声明中使用这些函数的输出，如`li { <%= margin_left(ENV['HTTP_USER_AGENT']) %> }`。
- **结果查看**
    - 使用Mozilla Firefox在Ubuntu系统上访问该样式表，输出结果如下：

/*
This file outputs CSS data customized by user_agent via eruby.
There is a blog entry about some similar ideas at 
http://blog.airbladesoftware.com/2006/12/11/cssdryer-dry-up-your-css
*/
li { margin-left:-2.5em; }
#navAlpha {
  position:absolute;
        width:11.8em;
  top:2em;
  left:2em;
  border:0.5em double #333;
  background-color:#ada;
  padding:1em;
  z-index:2;
}    
#navBeta {
  position:absolute;
        width:15.8em;
  top:2em;
  right:2em;
  border:0.5em double #333;
  background-color:#ada;
  padding:1em;
  z-index:1;
}

    - 不同浏览器的输出可能不同，因为该样式表会根据用户代理提供定制化内容。
- **脚本扩展**
    - 可以参考`stylesheet2.rcss`进行扩展。

4. stylesheet2.rcss的优化

stylesheet2.rcss 是 stylesheet.rcss 的改进版本，将宽度值的计算封装到一个通用函数中。
- 代码示例

/*
This file outputs CSS data customized by user_agent using eruby.
*/
<%
# define functions
def width(type, user_agent)
  small = {
    'alpha' => 11.8,
    'beta'  => 15.8,
  }
  large = {
    'alpha' => 14,
    'beta'  => 18,
  }
  palm = {
    'alpha' => 5,
    'beta'  => 7,
  }
  width = 
    if (user_agent =~ /Windows/)
      small[type] if (user_agent =~ /Opera/)
      small[type] if (user_agent =~ /MSIE 6/)
      large[type] if (user_agent =~ /MSIE/)
      small[type]
    elsif (user_agent =~ /Palm/)
      palm[type]
    else
      small[type]
    end
  return %Q[\twidth:#{width}em;]
end
def margin_left(user_agent)
  margin = 
    if (user_agent =~ /Mac/)
      3   if (user_agent =~ /Opera/)
      1   if (user_agent =~ /MSIE/)
      2.5 if (user_agent =~ /Safari/)
      2   if (user_agent =~ /Gecko/)
      2.7
    elsif (user_agent =~ /Windows/)
      1.5
    else
      2   if (user_agent =~ /Opera/)
      2   if (user_agent =~ /onqueror/)
      1.8 if (user_agent =~ /Galeon/)
      2.5
    end
  return %Q[margin-left:-#{margin}em;]
end
%>
li { <%= margin_left(ENV['HTTP_USER_AGENT']) %> }
#navAlpha {
  position:absolute;
  <%= width('alpha', ENV['HTTP_USER_AGENT']) %>
  top:2em;
  left:2em;
  border:0.5em double #333;
  background-color:#ada;
  padding:1em;
  z-index:2;
}    
#navBeta {
  position:absolute;
  <%= width('beta', ENV['HTTP_USER_AGENT']) %>
  top:2em;
  right:2em;
  border:0.5em double #333;
  background-color:#ada;
  padding:1em;
  z-index:1;
}

工作原理
- 定义了 width 函数，接受类型和用户代理作为参数。根据用户代理和类型从不同的哈希中获取宽度值。
- 其他部分与 stylesheet.rcss 相同，只是将 alpha_width 和 beta_width 的调用替换为 width 函数的调用。
结果对比
- 输出结果与 stylesheet.rcss 基本相同，只是注释部分有所差异。

通过以上内容，我们了解了Ruby在Web开发中的多种应用，包括CGI脚本的使用、 mod_ruby 的配置与应用以及动态CSS样式表的生成。这些技术可以帮助我们开发出更灵活、高效的Web应用。

下面是一个简单的流程图，展示了 mod_ruby 处理请求的过程：

graph TD;
    A[用户请求] --> B[Web服务器];
    B --> C{是否为.rhtml或.rcss文件};
    C -- 是 --> D[mod_ruby处理];
    C -- 否 --> E[正常处理];
    D --> F[Ruby解释器评估脚本];
    F --> G[返回结果给Web服务器];
    G --> H[Web服务器返回响应给用户];
    E --> H;

同时，为了更清晰地对比 stylesheet.rcss 和 stylesheet2.rcss 的差异，我们可以列出以下表格：
| 对比项 | stylesheet.rcss | stylesheet2.rcss |
| ---- | ---- | ---- |
| 宽度函数 | 分别定义 alpha_width 和 beta_width | 统一为 width 函数 |
| 代码复用性 | 较低 | 较高 |
| 维护难度 | 较高 | 较低 |

通过这些技术和工具，我们可以更好地应对Web开发中的各种挑战，提高开发效率和用户体验。

Ruby Web开发：CGI、Mod Ruby与动态CSS样式表

5. 技术总结与应用场景分析

在前面的内容中，我们详细介绍了Ruby在Web开发中的几种重要技术，包括CGI脚本、Mod Ruby以及动态CSS样式表。下面我们对这些技术进行总结，并分析它们的应用场景。
- CGI脚本
- 特点：CGI是一种标准接口，允许Web服务器与外部程序进行通信。它的优点是简单易懂，适用于快速开发小型Web应用。但缺点是每次请求都会启动新的解释器，性能较低。
- 应用场景 ：适用于处理简单的表单提交、数据查询等任务，例如简单的留言板、数据展示页面等。
- Mod Ruby
- 特点：通过将Ruby解释器嵌入到Web服务器中，避免了每次请求都启动新解释器的开销，提高了性能。同时，它允许在HTML文件中嵌入Ruby代码，实现动态内容的生成。
- 应用场景 ：适用于需要动态生成HTML内容的网站，如电子商务网站的商品展示页面、新闻网站的文章列表页面等。
- 动态CSS样式表
- 特点：根据用户代理（浏览器类型）动态生成CSS样式，解决了不同浏览器对CSS支持不一致的问题，提高了网站的兼容性和用户体验。
- 应用场景 ：适用于对网站样式要求较高、需要在不同浏览器上呈现一致效果的网站，如大型企业网站、设计类网站等。

6. 技术扩展与未来展望

虽然我们已经介绍了这些技术的基本用法，但它们还有很多扩展和优化的空间。以下是一些可能的扩展方向：
- 与数据库集成 ：可以将CGI脚本或Mod Ruby应用与数据库进行集成，实现数据的存储和查询。例如，在留言板应用中，可以将用户留言存储到数据库中，并在页面上显示。
- 操作步骤
1. 安装数据库驱动，如 mysql2 或 sqlite3 。
2. 在Ruby代码中引入数据库驱动，并建立数据库连接。
3. 编写SQL语句进行数据的插入、查询等操作。
- 使用框架 ：可以使用Ruby的Web框架，如Rails或Sinatra，来简化开发过程。这些框架提供了丰富的功能和工具，如路由管理、数据库迁移、视图模板等。
- 操作步骤
1. 安装框架，如 gem install rails 。
2. 使用框架生成项目骨架，如 rails new my_project 。
3. 在项目中编写控制器、模型和视图代码。
- 响应式设计 ：结合动态CSS样式表和响应式设计技术，使网站能够在不同设备上自适应显示。例如，根据设备的屏幕尺寸调整布局和样式。
- 操作步骤
1. 使用媒体查询在CSS中定义不同屏幕尺寸下的样式。
2. 在动态CSS样式表中结合媒体查询和用户代理信息，实现更精准的样式定制。

未来，随着Web技术的不断发展，Ruby在Web开发中的应用也将不断创新和扩展。例如，与新兴的前端框架（如React、Vue.js）结合，实现前后端分离的开发模式；利用Ruby的元编程特性，开发更灵活、可扩展的Web应用。

7. 实践建议与注意事项

在实际应用中，我们需要注意以下几点：
- 性能优化 ：对于CGI脚本，由于其性能较低，可以考虑使用缓存技术或优化代码逻辑来提高性能。对于Mod Ruby，虽然性能有所提升，但仍需注意内存使用和资源管理。
- 安全问题 ：在处理用户输入时，要注意防止SQL注入、XSS攻击等安全问题。可以使用参数化查询、输入验证等技术来保障安全。
- 兼容性测试 ：在使用动态CSS样式表时，要进行充分的兼容性测试，确保在不同浏览器和设备上都能正常显示。

以下是一个简单的流程图，展示了一个完整的Ruby Web应用开发流程：

graph TD;
    A[需求分析] --> B[技术选型];
    B --> C[环境搭建];
    C --> D[代码开发];
    D --> E[测试];
    E --> F{是否通过测试};
    F -- 是 --> G[部署上线];
    F -- 否 --> D;
    G --> H[维护与优化];

同时，为了帮助大家更好地理解不同技术的特点和应用场景，我们列出以下表格：
| 技术 | 特点 | 应用场景 | 注意事项 |
| ---- | ---- | ---- | ---- |
| CGI脚本 | 简单易懂，性能较低 | 简单表单提交、数据查询 | 性能优化、安全问题 |
| Mod Ruby | 性能较高，可嵌入Ruby代码 | 动态HTML内容生成 | 内存管理、安全问题 |
| 动态CSS样式表 | 解决CSS兼容性问题 | 高样式要求网站 | 兼容性测试 |

通过以上的介绍和分析，相信大家对Ruby在Web开发中的应用有了更深入的了解。希望这些技术能够帮助大家开发出更优秀的Web应用。在实际开发中，要根据具体需求选择合适的技术，并不断学习和探索，以适应不断变化的Web技术环境。