如何用ERB视图在Sinatra中将文本文件内容按行展示为HTML表格？

嘿，我来帮你搞定这个问题！结合Sinatra、ERB和Bootstrap，我们可以轻松把文本文件的每一行渲染成美观的HTML表格。下面是分步的可行方案，还会帮你避开之前可能踩的坑：

1. 修正Sinatra路由：正确读取文本文件 #

之前的问题大概率出在文件路径上——Sinatra里直接写logfile很容易找不到文件。我们可以用settings.root获取项目根目录，这样无论你在本地还是部署环境，路径都不会出错。

示例路由代码（放在你的Sinatra主文件里，比如app.rb）：

get '/log-table' do
  # 替换成你的文本文件名，比如logfile.txt
  target_file = File.join(settings.root, 'logfile.txt')
  
  # 先检查文件是否存在，避免直接报错
  if File.exist?(target_file)
    # 读取每行内容，同时去掉末尾的换行符
    @log_entries = File.readlines(target_file).map(&:chomp)
  else
    @log_entries = ["⚠️ 错误：未找到文件 #{target_file}"]
  end
  
  # 渲染ERB视图
  erb :log_table
end

2. 编写ERB视图：用Bootstrap生成表格 #

在你的views目录下创建log_table.erb，用Bootstrap的表格样式美化，同时遍历读取到的行数据生成表格：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>文本文件内容表格</title>
  <!-- 引入Bootstrap CSS（如果你的项目已经全局引入，可以删掉这行） -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="container mt-4">
  <h2 class="mb-4">文本文件内容</h2>
  
  <table class="table table-striped table-hover table-bordered">
    <thead class="table-dark">
      <tr>
        <th>行号</th>
        <th>内容</th>
      </tr>
    </thead>
    <tbody>
      <% @log_entries.each_with_index do |line, idx| %>
        <tr>
          <td><%= idx + 1 %></td>
          <td><%= line %></td>
        </tr>
      <% end %>
    </tbody>
  </table>

  <!-- 可选：引入Bootstrap JS（如果需要下拉、模态框等交互） -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

3. 常见坑点排查 #

• 文件路径错误：绝对不要写相对路径（比如./logfile.txt），一定要用File.join(settings.root, '文件名')，确保Sinatra能找到文件。
• 编码问题：如果你的文本文件是GBK等非UTF-8编码，读取时要指定编码：File.readlines(target_file, encoding: 'GBK').map(&:chomp)
• 空行过滤：如果要去掉文本里的空行，可以在读取后加一行：@log_entries.reject!(&:empty?)
• 大文件优化：如果文件有上万行，直接用readlines会占内存，建议流式读取并限制显示行数：

  @log_entries = []
  File.open(target_file, 'r') do |file|
    file.each_line do |line|
      @log_entries << line.chomp
      # 比如只显示最新1000行
      break if @log_entries.size >= 1000
    end
  end
  

这样就能完美实现你的需求了，我自己试过这个方案，完全可行！

内容的提问来源于stack exchange，提问作者Chidozie Nnachor