Electronic Joint Business

Solution for E-Business

datamapper

初识 Sinatra (三)

文章评分:
在本教程的第二部分,我们利用 DataMapper 将任务保存到后台数据库,同时我们还用 Sinatra 创建了 web 前端以便显示、添加、删除和结束任务。现在这个 Just do it 应用功能齐备,但是样子还有点丑陋。

在本章中,我们继续对这个应用做些美化修饰,并增加一些功能,让你能够创建多个任务列表。

添加样式
现在我们用样式表来对应用进行美化修饰。在你的 “layout.slim” 中添加下面这行代码:

<link rel="stylesheet" media="screen, projection" href="/styles.css">

现在创建一个名为” styles.css”的文件,并保存在”public”文件夹中,将下面 CSS 内容添加到该文件中:

.completed{
  text-decoration: line-through;
  }
.tasks{
  padding:0;
  list-style:none;
  width:400px;
  }
.task{
  position:relative;
  padding:2px 0 2px 28px;
  border-bottom: dotted 1px #ccc;
}
form.update{
  position:absolute;
  bottom:2px;
  left:0;
  }
form.update input{
  background:white;
  color:white;
  padding:0 2px;
  border:solid 1px gray;
  cursor:pointer;
}
.tasks li.completed form.update input{
  color:#47FD6B;
  }
form.delete{
  display:inline;
  }
form.delete input{
  background:none;
  cursor:pointer;
  border:none;
  }

刷新页面,现在页面是不是看起来好多了,也更像一个真正的任务列表了。你也许注意到,该样式表中有个 ‘completed’ 类。 到目前为止,我们显示已完成的任务的方法是为它添加完成的时间,这样看起来不怎么样。我们来修改一下 task 视图,添加 ‘completed’ 类。这样利用样式表,已完成的任务看起来就是完全不同的风格。打开 “task.slim” 做如下修改:

>>> 阅读全文

 

, , , , , ,

初识 Sinatra (二)

文章评价:
在本文的第一部分,我们演示如何配置 Sinatra 并显示了几个页面。现在是真正有趣的部分,在本节中,我们将演示如何用数据库来保存任务。

这里我们会使用 SQLite 作为本地数据库,正如它的名字说表述的,这是一个轻量级的文件数据库,无需任何配置。如果你没有安装过这个数据库,可以参考本页的一些简单介绍。

为了和数据库交互,我们会使用 DataMapper。这个 ORM 的工作方式和 Active Record 类似,但在方法和语法上略有不同。

为了配合 SQLite 使用 DataMapper,下面的 Gem包需要被安装:

gem install data_mapper dm-sqlite-adapter sqlite3

我们需在 main.rb 文件的头部添加 DataMapper的请求:

>>> 阅读全文

 

, , , , ,