Electronic Joint Business

Solution for E-Business

sinatra

初识 Sinatra (四)

文章评价:

这是本系列文章的最后一部分。本教程的目标是带领从未用过 Sinatra 的用户从头开始创建一个应用,并将之最后发布。

到前三部分结束时,我们已经完成了 To Do List 应用的大部分功能。在本系列的最后一部分,我们将先看看如何用 Sass 来编写 CSS ,之后将本应用发布到 Heroku 云服务上。

Logo
每个上点档次的应用都应有一个 logo,所以我创建了一个简单的“tick” logo,你可以在 Github 上找到。我们用它来作为本应用的头条的背景图片。打开 Styles.css 并添加下列 CSS:

h1.logo{
  font-family: helvetica,arial,sans-serif;
  font-size: 24px;
  color: white;
  padding: 64px 0 0;
  margin: 0 auto;
  text-transform: uppercase;
  text-align: center;
  font-weight: normal;
  letter-spacing: 0.3em;
  background: transparent url(/logo.png) 50% 0 no-repeat;
  }

(注意 – 也许你还发现,你需要为 layout.slim 的 h1 元素添加一个 ‘logo’ 类,这段 CSS 才会起作用。)

>>> 阅读全文

 

, , , , , , , ,

初识 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的请求:

>>> 阅读全文

 

, , , , ,

初识 Sinatra (一)

文章评价:

Sinatra 是一个基于 Ruby 语言,以最小精力为代价快速创建 web 应用为目的的 DSL。如果您对日渐庞大的 Rails,感到厌倦,不如通过本教程来学习一下轻盈的 Sinatra。本系列教程有四个部分,它将带着你一步一步用 Sinatra 和 DataMap 创建一个功能齐备的线上代办事项的应用,我们称它为“Just Do It”。希望读者能通过本文了解到利用 Sinatra 创建应用是多么的简单而快速。

首先我们先进行开发 Sinatra 应用的准备工作。

安装 Sinatra
要让 Sinatra 能工作,你首先必须安装 Ruby。这里我建议您使用 RVM 来安装。( 你可以参考 Glenn Goodrich 的教程)。一旦你安装好了 Ruby 和 Rubygems,你就可以安装 Sinatra 了。用 Rubygems 来安装 Sinatra 不过是小菜一碟,你只需要打开命令行并输入:

gem install sinatra

如此简单,你就可以做好一切准备工作了。

>>> 阅读全文

 

, , , ,