来自 MySQL 的 Ruby Sinatra 表

Question

我目前正在从事一个项目，我必须从 MySQL 数据库中提取数据并使用 Ruby Sinatra 在表中显示数据。

我能够连接到数据库并提取数据并将其放入数组中。

数据库中的表示例

City Country Dallas USA Tokyo Japan

数组是什么样子的示例

["美国达拉斯", "日本东京"]

现在，我将如何将数组显示为与数据库中的表完全一样。或者，有没有办法可以将数据库中的表格完全复制到网页上？

感谢您的帮助！

Answer 1

your_app/routes.rb：

require 'sinatra'
require 'slim'

get '/' do

  raw_data = [
    "Dallas, USA", 
    "Tokyo,Japan", 
    "Munich,    Germany",
  ]

  @results = {}

  raw_data.each do |item|
    city, country = item.split(/, \s* /x)
    @results[city] = country
  end

  p results # {"Dallas"=>"USA", "Tokyo"=>"Japan", "Munich"=>"Germany"}

  slim :index 

end

your_app/views/layout.slim：

doctype html 
html
  head 
    meta charset="utf-8"
    title Test
    css:
      th {text-align:left}
      table {width: 15em}
  body 
    h1 This is the Layout.  Find me in your_app/views/layout.slim
    == yield 

注意css，它左对齐列标题-否则列标题将居中。

your_app/views/index.slim：

table 
  thead
    tr
      th City
      th Country

  tbody
  - @results.each do |city, country|
    tr
      td = city
      td = country

结果：

编辑：

要使用jquery程序tablesorter，请下载tablesorter，然后解压缩/解压缩，然后将新创建的目录tablesorter-master移动到目录your_app/public/中。

您可以使用这些文件：

your_app/views/layout.slim：

doctype html 
html
  head 
    meta charset="utf-8"
    title Test
    link rel="stylesheet" type='text/css' href="tablesorter-master/themes/green/style.css"
  body 
    h1 This is the Layout.  Find me in your_app/views/layout.slim
    == yield 

    script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" !<= the link
    script src="tablesorter-master/jquery.tablesorter.js"
    script src="hookup_tablesorter.js"

your_app/public/hookup_tablesorter.js：

$(document).ready(function() 
  { 
    $("#myTable").tablesorter(); 
  } 
); 

your_app/views/index.slim：

table id="myTable" class="tablesorter"
  thead
    tr
      th City
      th Country

  - @results.each do |city, country|
    tr
      td = city
      td = country

请注意上面的更改。 Slim 会自动添加一个 tbody 标签，因此在 Slim 模板中显式添加一个 tbody 标签会创建两个 tbody 标签，这会搞砸 tablesorter。

然后你会看到这个：

单击列标题将对行进行排序。您需要 Internet 连接才能链接到 jquery 文件。或者，你可以下载jquery，放到your_app/public/目录下，然后链接：

doctype html 
html
  head 
    meta charset="utf-8"
    title Test
    link rel="stylesheet" type='text/css' href="tablesorter-master/themes/green/style.css"
  body 
    h1 This is the Layout.  Find me in your_app/views/layout.slim
    == yield 

    script src="jquery.min.js"
    script src="tablesorter-master/jquery.tablesorter.js"
    script src="js_ready.js"

如果你不喜欢那种表格样式，tablesorter 还有一个蓝色主题：

人们还创建了其他styles。