08 Mac系统实现搭建Sinatra系统

以你之姓@ 2022-04-15 03:27 170阅读 0赞

### 目录 ###

*  一、安装Sinatra
 *   *  1.1 安装Ruby
     *   *  1.1.1 RVM安装
         *  1.1.2 用 RVM 安装 Ruby
         *  1.1.3 设置 Ruby 版本
     *  1.2 安装Sinatra
     *   *  1.2.1 使用Rubygems的方式进行安装，如下所示：
         *  1.2.2 重新安装Sinatra
 *  二、编写代码
 *   *  2.1 创建main.rb文件
     *  2.2 运行代码
     *  2.3 使用内嵌模版slim
     *   *  2.3.1 安装slim模版
         *  2.3.2 重新修改新的main.rb内容
         *  2.3.3 分割视图到不同的文件里
         *  2.3.4 增加动态内容
         *  2.3.5 表单
         *  2.3.6 DataMapper和SQLite使用
         *  2.3.7 表单内容写入数据库
         *  2.3.8 删除Task
         *  2.3.9 Task完成情况
     *  2.4 增加样式和Tasks列表
     *   *  2.4.1 增加一些样式
         *  2.4.2 更改Task的界面样式
         *  2.4.3 Tasks的列表们
         *  2.4.4 增加lists
         *  2.4.5 增加task到list中
         *  2.4.6 更多样式
     *  2.4 使用Sass和部署发布
     *   *  2.4.1 logo
         *  2.4.2 得到Sassy
         *  2.4.5 Heroku
         *  2.4.6 Bundler
         *  2.4.7 部署发布

# 一、安装Sinatra #

## 1.1 安装Ruby ##

### 1.1.1 RVM安装 ###

（1）首先下载安装xcode，https://itunes.apple.com/us/app/xcode/id497799835?ls=1&mt=12  
![在这里插入图片描述][20181121120653923.png]

![在这里插入图片描述][20181121120615213.png]  
（2）安装RVM  
采用的是curl方式（在mac上没有wget，可以用自带命令curl实现wget的默认功能，wget是下载专用的利器，支持递归，支持断点，更多curl的使用方法如下链接，https://blog.csdn.net/fudesign2008/article/details/7608619）， 将会在本地目录下形成文件，即`～/.rvm`，相应的命令如下所示：

curl -L https://get.rvm.io | bash -s stable

![在这里插入图片描述][20181121112021244.png]  
命令执行后的结果如下所示；  
![在这里插入图片描述][20181121112038463.png]

（3）载入 RVM 环境

source ~/.rvm/scripts/rvm

![在这里插入图片描述][20181121112209509.png]  
（4）检查一下是否安装正确  
输入如下所示的命令，可以得到安装的rvm版本是1.29.4，说明安装成功；

rvm -v

![在这里插入图片描述][2018112111224156.png]

### 1.1.2 用 RVM 安装 Ruby ###

（1）列出已知的ruby版本

rvm list known

![在这里插入图片描述][20181121112438719.png]

![在这里插入图片描述][20181121112454355.png]  
可以看出来最新的ruby是2.6.0版本，我们选择安装这一版本；

（2）选择现有的rvm版本来进行安装  
这里我们选择最新的版本进行安装，如下

rvm install 2.6.0

![在这里插入图片描述][2018112111260998.png]

![在这里插入图片描述][2018112111264381.png]

![在这里插入图片描述][20181121112656581.png]

![在这里插入图片描述][20181121120351720.png]  
遇到一个错误，最后没有安装成功；  
![在这里插入图片描述][20181121120725278.png]  
换一个新的版本2.0.0，尝试重新安装，结果安装成功，相应的过程如下所示  
![在这里插入图片描述][20181121124637297.png]  
虽然有警告，但是显示安装成功，只是没有安装使用文档；  
![在这里插入图片描述][20181121125144156.png]  
查询是否ruby已经安装成功，使用命令`ruby -v`，和命令`gem -v`，查询的结果如下所示，显示ruby的版本是2.0.0，gem版本是2.7.8。  
![在这里插入图片描述][20181121125333801.png]

> 查询已经安装的ruby，`rvm list`  
> 卸载一个已安装版本，`rvm remove 2.6.0`

### 1.1.3 设置 Ruby 版本 ###

RVM 装好以后，需要执行下面的命令将指定版本的 Ruby 2.0.0设置为系统默认版本，使用的命令如下所示

rvm 2.0.0 --default

![在这里插入图片描述][20181121125955134.png]

> 要是想更换源，使用如下命令：  
> 删除默认源，`gem source -r https://rubygems.org/`  
> 增加淘宝镜像，`gem source -a https://ruby.taobao.org`  
> 验证是否替换成功，`gem sources -l`

## 1.2 安装Sinatra ##

### 1.2.1 使用Rubygems的方式进行安装，如下所示： ###

![在这里插入图片描述][20181121131055850.png]  
但是遇到了版本过低无法安装的情况，要求ruby版本不能低于2.2.2，如下图所示；  
![在这里插入图片描述][20181121131153684.png]  
采用继续重新安装ruby2.3.7的版本，如下所示；  
![在这里插入图片描述][20181121131348232.png]  
安装过程中会自动删除旧版本ruby2.0.0，显示安装成功，同样查询ruby和gem版本，分别是2.3.7和2.7.8，如下所示；  
![在这里插入图片描述][2018112113163325.png]

重新进行系统默认ruby版本制定，命令如下所示：

rvm 2.3.7 --default

### 1.2.2 重新安装Sinatra ###

![在这里插入图片描述][20181121132904882.png]  
显示安装成功，界面如下所示；  
![在这里插入图片描述][2018112113291878.png]

# 二、编写代码 #

## 2.1 创建main.rb文件 ##

打开编辑器，输入如下所示的命令格式，然后保存到一个新建的文件夹sinatratest里面；

require 'sinatra' 
    get '/' do 
      "Just Do It" 
    end

## 2.2 运行代码 ##

打开终端进入siatratest文件，输入命令执行main文件，结果如下所示；

ruby main.rb

![在这里插入图片描述][2018112113384959.png]  
打开一个浏览器，输入`http://localhost:4567`，即可以打开网站，如下图所示；  
![在这里插入图片描述][20181121134115203.png]  
输入Ctrl\+C，可结束HTTPServer的服务，如下所示；  
![在这里插入图片描述][20181121134339333.png]

## 2.3 使用内嵌模版slim ##

### 2.3.1 安装slim模版 ###

使用命令进行安装，结果如下图所示；

gem install slim

![在这里插入图片描述][20181121135030520.png]

### 2.3.2 重新修改新的main.rb内容 ###

新的代码如下所示，加了slim的模块（还有的模版有ERB, Haml 和 Markaby），  
内嵌的模版都是从`__END__`之后开始的，其中每一个模版都是以`@@`开始；@@layout的视图是自动加载的，@@index视图是依靠slim模块加载完成的

require 'sinatra'
    require 'slim'
    
    get '/' do
    	slim :index
    end
    
    __END__
    
    @@layout
    doctype html
    html
    	head
    		meta charset="utf-8" 
        	title Just Do It 
        	link rel="stylesheet" media="screen, projection" href="/styles.css" 
        	/[if lt IE 9] 
          	script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" 
        body
        	h1 Just do It
        	== yield
    
    @@index
    h2 myTask
    ul.tasks
    	li Get Milk

重新执行完代码后，打开浏览器，输入之前的网址后，界面如下所示，发生了变化；

> 记住每一次改变ruby文件内容后，都要使用命令 `ruby main.rb` 重新启动一下HTTPServer服务。

![在这里插入图片描述][20181121140905894.png]

### 2.3.3 分割视图到不同的文件里 ###

（1）首先在sintratest文件夹里新建两个文件，分别命名为public（用来放图片和样式文件）和views（用来放各种样式文件），如下图所示。  
![在这里插入图片描述][20181121142723643.png]  
（2）删除main.rb内容`__END__`之后的样式内容，修改后main的内容如下所示；

require 'sinatra'
    require 'slim'
    
    get '/' do
    	slim :index
    end

（3）新建layout.slim和index.slim两个文件，其中内容分别如下所示；

> layout.slim

doctype html
    html
    	head
    		meta charset="utf-8" 
        	title Just Do It 
        	link rel="stylesheet" media="screen, projection" href="/styles.css" 
        	/[if lt IE 9] 
          	script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" 
        body
        	h1 Just do It
        	== yield

> index.slim

h2 myTask
    ul.tasks
    	li Get Milk

(4)重新执行代码，打开浏览器，发现和之前的页面是没有变化的说明操作成功。如下图所示；  
![在这里插入图片描述][20181121142737574.png]

### 2.3.4 增加动态内容 ###

（1）在之前main.rb文件内容最后面，增加新的代码，如下所示；

> 第一行，`/:task`的意思是从url中提取参数的值；  
> 第二行，新建了实例变量`@task`，通过params哈希实现的赋值，这个实例变量是可以在视图中使用的；  
> 第三行，依旧使用slim模块打开新的视图task.slim；

get '/:task' do
      @task = params[:task]
      slim :task
    end

（2）新建task.slim文件  
打开文本编辑器输入如下所示的内容，然后放入sinatratest文件夹的views子文件夹里；

h2 My Tasks
    = @task

（3）执行文件  
重新运行服务，打开浏览器，输入`http://localhost:4567/get-milk`，得到如下的结果，可以看到我们在task.slim视图中得到了get-mik的参数值；  
![在这里插入图片描述][20181121145057418.png]  
（4）增加新的效果  
修改之前main.rb文件中的`@task`后面的内容，如下所示；

get '/:task' do
      @task = params[:task].split('-').join(' ').capitalize
      slim :task
    end

重新执行代码，得到新的界面结果，发现`-`没有了，G也是变成大写了；  
![在这里插入图片描述][20181121145535231.png]

### 2.3.5 表单 ###

打开index.slim文件，将里面的内容替换为

form action="/" method="POST"
        input type="text" name="task"
        input.button type="submit" value="New Task >>"

同时更改main.rb文件，再后面加上如下代码：

post '/' do
      @task =  params[:task]
      slim :task
    end

重新运行代码，打开浏览器，输入网址`http://localhost:4567`，得到如下的结果；

> 过程分析：第一步，首先输入网址http://localhost:4567后打开index.slim的视图，如下图所示；  
> 第二步，接着在文本框里面输入123，如下图所示；  
> 第三步，因为表单是采用POST方法提交的，所以会打开task.slim视图，如下图所示；

![在这里插入图片描述][20181121154049829.png]

![在这里插入图片描述][20181121154246884.png]  
![在这里插入图片描述][20181121154401530.png]

### 2.3.6 DataMapper和SQLite使用 ###

（1）安装DataMapper和SQLite，使用命令

gem install data_mapper dm-sqlite-adapter sqlite3

![在这里插入图片描述][20181121155026171.png]  
安装成功，界面如下：  
![在这里插入图片描述][20181121155058533.png]

（2）新建DataMapper说明  
此语句是告知DataMapper，我们将使用SQLite数据库，输入如下所示的代码，并将其放到main.rb的前面；

DataMapper.setup(:default, ENV['DATABASE_URL'] || "sqlite3://#{
          Dir.pwd}/development.db")

（3）创建Task类  
打开main.rb文件，首先在文件首部处加入引用

require 'data_mapper'

然后，再文件的最后加入如下代码：

class Task
      include DataMapper::Resource
      property :id,           Serial
      property :name,         String, :required => true
      property :completed_at, DateTime
    end
    DataMapper.finalize

（4）增加Tasks到数据库  
通过`irb`创建新的Task，  
第一步，打开终端，进入sinatratest所在的根目录，然后输入如下的命令：

irb

![在这里插入图片描述][20181121162216455.png]

第二步，接着输入需要的引用的模块，命令`require './main'`，如下所示  
![在这里插入图片描述][20181121162433601.png]

![在这里插入图片描述][20181121162448773.png]  
第三步， 创建Tasks table，输入如下的命令；

Task.auto_migrate!

![在这里插入图片描述][20181121162938137.png]  
第四步，增加tasks，命令如下所示；

Task.create(name: "get the milk")
    Task.create(name: "order books")
    Task.create(name: "pick up dry cleaning")
    Task.create(name: "phone plumber")

![在这里插入图片描述][20181121163000509.png]  
发现APP根目录处增加了一个新的文件`development.db`，至此Tasks已经保存到数据库中去了，如下图所示；  
![在这里插入图片描述][20181121163506618.png]

（4）加载显示Tasks  
第一步，修改main.rb文件内容，加上如下代码；

> `Task.all`将会读取数据库中所有的tasks，然后将其传给实例变量`@tasks`

get '/' do
      @tasks = Task.all
      slim :index
    end

最后整个main.rb文件如下所示；

require 'sinatra'
    require 'slim'
    require 'data_mapper'
    
    DataMapper.setup(:default, ENV['DATABASE_URL'] || "sqlite3://#{
          Dir.pwd}/development.db")
    
    class Task
      include DataMapper::Resource
      property :id,           Serial
      property :name,         String, :required => true
      property :completed_at, DateTime
    end
    DataMapper.finalize
    
    get '/' do
      @tasks = Task.all
      slim :index
    end

第二步，修改index.slim的内容，在最后一行处加入如下代码；

form action="/" method="POST"
      input type="text" name="task[name]"
      input.button type="submit" value="New Task >>"
    
    h2 My Tasks
    
    ul.tasks
      - @tasks.each do |task|
        li.task= task.name

第三步，重新执行代码，打开浏览器，输入网址`http://localhost:4567/`，打开的界面如下所示，我们可以看到已经读取了数据库中的Tasks；  
![在这里插入图片描述][20181121165253166.png]

### 2.3.7 表单内容写入数据库 ###

第一步，在之前的main.rb文件的最后加入处理表单的代码，如下所示：

> 首先是读取表单中的参数值，然后通过params哈希赋值给`Task.create`，最后在重定向，使得可以在页面刷新新增的Task结果；

post '/' do
      Task.create  params[:task]
      redirect to('/')
    end

第二步，重新加载，刷新浏览器，在表单文本框中输入内容`my new task`，提交后显示新的Tasks列表，如下如所示；  
![在这里插入图片描述][20181121170240967.png]

### 2.3.8 删除Task ###

（1）修改`task.slim`的文件，替换为如下所示的内容；

li.task id=task.id
      = task.name
      form.delete action="/task/#{task.id}" method="POST"
        input type="hidden" name="_method" value="DELETE"
        input type="submit" value="×"  title="Delete Task"

（2）修改`index.slim`文件，其他不变，将最后的代码块替换为如下的格式

ul.tasks
      - @tasks.each do |task|
        == slim :task, locals: { task: task }

（3）修改`main.rb`文件，在最后加入删除操作，如下代码所示；

delete '/task/:id' do
      Task.get(params[:id]).destroy
      redirect to('/')
    end

（4）重新启动服务，打开浏览器，输入网址`http://localhost:4567/`得到的结果如下所示；  
![在这里插入图片描述][20181121173635362.png]  
点击按钮，即可以删除相应的task，这里我们点击删除`my new task`，得到如下结果；  
![在这里插入图片描述][2018112117375799.png]

### 2.3.9 Task完成情况 ###

（1）更改task.slim内容

> 通过设置task的`completed_at`属性完成，如果`completed_at`的值是`nil`的，则说明task没有完成，否则记录时间，算作`completed_at`的值，即为task完成时间；

li.task
    	= task.name
    	form.update action="/task/#{task.id}" method="POST"
        	input type="hidden" name="_method" value="PUT"
        	-if task.completed_at.nil?
    			input type="submit" value="  " title="Complete Task"
        	-else
            	input type="submit" value="✓" title="Uncomplete Task"
        form.delete action="/task/#{task.id}" method="POST"
        	input type="hidden" name="_method" value="DELETE"
        	input type="submit" value="×" title="Delete Task"

（2）修改main.rb文件内容，替换之前的删除模块，代码如下所示；

put '/task/:id' do
      task = Task.get params[:id]
      task.completed_at = task.completed_at.nil? ? Time.now : nil
      task.save
      redirect to('/')
    end

（3）重新开启服务，打开浏览器，输入网址`http://localhost:4567`，执行结果如下图所示；  
![在这里插入图片描述][20181121224222646.png]  
可以根据task有没有完成，要是完成了可在task中选择打对号，如下图所示；  
![在这里插入图片描述][20181121224237512.png]

## 2.4 增加样式和Tasks列表 ##

### 2.4.1 增加一些样式 ###

（1）修改`layout.slim`文件中的内容，在首行增加如下所示的代码：

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

（2）新建`styles.css`文件，写入如下代码，并将`styles.css`文件放入public文件夹里面；

.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;
      }

（3）重新加载服务，打开浏览器，输入网址`http://localhost:4567/`，打开的界面如下所示；  
![在这里插入图片描述][20181121231514845.png]

### 2.4.2 更改Task的界面样式 ###

（1）修改`task.slim`的内容，如下图所示；

li.task id=task.id class=(task.completed_at.nil? ? "" : "completed")
      = task.name
      form.update action="/task/#{task.id}" method="POST"
        input type="hidden" name="_method" value="PUT"
        -if task.completed_at.nil?
          input type="submit" value="  " title="Complete Task"
        -else
          input type="submit" value="✓" title="Uncomplete Task"
      form.delete action="/task/#{task.id}" method="POST"
        input type="hidden" name="_method" value="DELETE"
        input type="submit" value="×" title="Delete Task"

（2）重新加载服务，打开浏览器，输入网址`http://localhost:4567/`，打开的界面如下所示；  
![在这里插入图片描述][20181121232212870.png]

### 2.4.3 Tasks的列表们 ###

（1）修改`main.rb`的内容，如下所示；

> Lists将包含很多的tasks，DataMapper通过associations表示lists和tasks之间的关系，这是通过task中的`belongs_to`和lists中的`has n`进行声明的

class Task
      include DataMapper::Resource
      property :id,           Serial
      property :name,         String, :required => true
      property :completed_at, DateTime
      belongs_to :list
    end
    
    class List
      include DataMapper::Resource
      property :id,           Serial
      property :name,         String, :required => true
      has n, :tasks, :constraint => :destroy  
    end
    
    DataMapper.finalize

（2）更新当前数据库，命令如下所示；

irb
    require './main'
    DataMapper.auto_migrate!

![在这里插入图片描述][20181122115714735.png]

通过以上命令，可以将数据库中存在的tasks全部删除；

### 2.4.4 增加lists ###

（1）修改`main.rb`文件中的内容，在最后加上如下所示的代码：

post '/new/list' do
      List.create params['list']
      redirect to('/')
    end
    
    delete '/list/:id' do
      List.get(params[:id]).destroy
      redirect to('/')
    end

（2）重新写`index.slim`文件，内容如下所示

> 实例变量`@lists`代表了数据库中所有的lists

form.new action="/new/list" method="POST"
      input type="text" name="list[name]"
      input type="submit" value="+ List"
    ul.lists
      - @lists.each do |list|
        == slim :list, locals: { list: list }

（3）修改`main.rb`文件中的内容，将之前的代码（如下所示）：

get '/' do
      @tasks = Task.all
      slim :index
    end

更换为如下的代码：

get '/' do
      @lists = List.all(:order => [:name])
      slim :index
    end

（4）创建`list.slim`文件，用来展示每一个list的tasks，内容如下所示：

li.list
      h2= list.name
      form.new action="/#{list.id}" method="POST"
        input type="text" name="task[name]"
      ul.tasks
        - list.tasks.each do |task|
          == slim :task, locals: { task: task }
      form.destroy action="/list/#{list.id}" method="POST"
        input type="hidden" name="_method" value="DELETE"
        input type="submit" value="×"

（5）重新加载服务，打开浏览器，输入网址`http://localhost:4567/`，得到如下界面；  
![在这里插入图片描述][20181122124337109.png]

在文本框中依次输入`list1`和`list2`，添加完毕后效果如下图所示；  
![在这里插入图片描述][20181122124624599.png]

### 2.4.5 增加task到list中 ###

(1)修改`main.rb`文件内容，依此来处理增加操作，将如下代码：

post '/' do
      Task.create params['task']
      redirect to('/')
    end

替换为如下的代码：

post '/:id' do
      List.get(params[:id]).tasks.create params['task']
      redirect to('/')
    end

（2）重新加载服务，打开浏览器，输入网址`http://localhost:4567/`，得到如下界面；

### 2.4.6 更多样式 ###

（1）在`style.css`文件中增加下面的代码：

.lists{
        
      padding:0;
      list-style:none;
      overflow:hidden;
      }
      
    .list{
        
      float: left;
      width:23%;
      margin:0 1%;
      border-top:solid 5px #ccc;
      }

（2）同时需要移除`style.css`第8行中的`width:400px;`  
（3）重新加载服务，打开浏览器，输入网址`http://localhost:4567/`，得到如下界面；

## 2.4 使用Sass和部署发布 ##

### 2.4.1 logo ###

（1）打开`style.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(/public/logo.png) 50% 0 no-repeat;
      }

（2）将logo图片放入public文件夹里  
（3）修改`layout.slim`文件，如下所示

link rel="stylesheet" media="screen, projection" href="/styles.css"
    
    doctype html
    html
      head
        meta charset="utf-8"
        title Just Do It!
        link rel="shortcut icon" href="/favicon.ico"
        link rel="stylesheet" media="screen, projection" href="/styles.css"
        /[if lt IE 9]
          script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"
      body
        h1.logo Just Do It!
        == yield

（4）重新加载服务，打开浏览器，输入网址`http://localhost:4567/`，得到如下界面；

### 2.4.2 得到Sassy ###

Sass (Syntactically Awesome Stylesheets)，是CSS的模版语言，就是可以在服务器上编译生成CSS文件，目前有两个版本，一个是原生的SASS，另一个是SCSS(Sassy CSS)，下面我们以SCSS应用为主。  
（1）安装sass

gem install sass

![在这里插入图片描述][20181122140341187.png]  
安装成功，如下图所示；  
![在这里插入图片描述][20181122140357683.png]

（2）在`main.rb`文件中增加sass处理模块，代码如下所示吧：

get '/styles.css' do 
      scss :styles
    end

（3）在public文件夹下面，创建`styles.scss`，并将`styles.css`内容复制过去，然后删除`styles.css`  
（4）

### 2.4.5 Heroku ###

Heroku是部署Sinatra apps的服务，它是完全免费的。Heroku平台的灵活性极高且支持多种编程语言。若想把程序部署到Heroku上,开发者要使用Git把程序推送到Heroku的Git服务器上。在服务器上,git push命令会自动触发安装、配置和部署程序。在使用之前需要准备的资料有Heroku账号、Mac上安装Git。  
（1）安装Heroku，使用命令如下：

gem install heroku

![在这里插入图片描述][20181122143646713.png]

> 安装不成功，出现错误的原因是，heroku must be installed from cli.heroku.com. This gem is no longer available.

![在这里插入图片描述][20181122143718600.png]  
（2）新的安装方法  
第一步，打开终端输入如下命令

brew install heroku/brew/heroku

![在这里插入图片描述][20181122150020684.png]

安装依然没有成功，出现了如下的错误：  
![在这里插入图片描述][2018112215003362.png]

（3）进一步新的方法  
第一步，使用nmp的方式进行安装，需要先安装node，安装命令如下：

brew install node

![在这里插入图片描述][2018112215032775.png]

node安装成功，并且npm的版本是6.4.1，如下图所示  
![在这里插入图片描述][20181122150435743.png]

第二步，安装heroku，命令如下所示：

npm install -g heroku

![在这里插入图片描述][2018112215052981.png]

![在这里插入图片描述][20181122151308750.png]  
第三步，通过命令`heroku version`，检测安装成功没有，如下图所示，发现安装的heroku版本是7.18.9；  
![在这里插入图片描述][20181122151414964.png]

（4）登陆heroku，使用如下命令

heroku login

![在这里插入图片描述][20181122152730292.png]

![在这里插入图片描述][20181122152749975.png]

![在这里插入图片描述][20181122152803980.png]

显示登陆成功，如下图所示；  
![在这里插入图片描述][20181122152821613.png]  
（5）使用SSH建立连接，命令如下所示：

heroku keys:add

![在这里插入图片描述][20181122153011289.png]

显示第一次的连接建立成功，如下图所示；  
![在这里插入图片描述][2018112215302545.png]

（6）创建app名称在Heroku上，输入命令如下：

heroku create sinatratest

![在这里插入图片描述][20181122155418651.png]

成功创建应用名称`sintratest2`，如下图所示；  
![在这里插入图片描述][20181122162826348.png]

> 参考网址：  
> https://devcenter.heroku.com/articles/heroku-cli\#download-and-install  
> https://laravel-china.org/articles/2602/how-to-quickly-use-heroku-to-deploy-your-laravel-application

### 2.4.6 Bundler ###

Bundler是用来管理应用中各种依赖包的，包含了所有的gems以及gem本身的依赖包。通过Bundler可以自动下载安装对应版本的gems。  
（1）安装Bundler，使用命令如下：

gem install bundler

![在这里插入图片描述][2018112215432711.png]  
（2）创建Gemfile文件，内容如下所示：

source :rubygems
    gem "sinatra"
    gem "datamapper"
    gem "slim"
    gem "sass"
    gem "dm-postgres-adapter", :group => :production
    gem "dm-sqlite-adapter", :group => :development

（3）创建Rackup文件，命名为`config.ru`，内容如下所示：

> 其中数据库连接操作放到`config.ru`中了，则`main.rb`文件需要删除`DataMapper.setup(:default, ENV['DATABASE_URL'] || "sqlite3://#{Dir.pwd}/development.db")`这条语句。

require 'bundler'
    Bundler.require
    require './main'
    
    DataMapper.setup(:default, ENV['DATABASE_URL'] || "sqlite3://#{Dir.pwd}/development.db")
    
    run Sinatra::Application

（4）本地测试，使用如下语句：

bundle install --without production

![在这里插入图片描述][20181122154401146.png]

![在这里插入图片描述][20181122155308354.png]

会在根目录生成`.bundle`隐藏文件，并同时生成`Gemfile.lock`，里面包含了应用中所有用到的gem列表，如下图所示；  
![在这里插入图片描述][20181122160807498.png]

(5)设置Heroku不要使用`development`组，语句如下所示：

heroku config:add BUNDLE_WITHOUT="development:test" --app sinatratest2

![在这里插入图片描述][20181122165023722.png]

(6)部署前最后一道核查，确定项目在本地是否运行良好的，终端进入项目根目录，输入如下命令所示；

rackup

![在这里插入图片描述][20181122171646674.png]

打开浏览器，输入网址`http://localhost:9292/`，界面如下所示，应用没有问题，可以部署发布；  
![在这里插入图片描述][20181122171828908.png]

### 2.4.7 部署发布 ###

（1）创建`.gitignore`，放于根目录下，内容如下所示，这将阻止将`development.db`和`.bundle`文件上传到远程的仓库；

development.db
    .bundle

(2)初始化Git，输入如下所示的命令：

git init
    git add .
    git commit -m 'initial deployment'

![在这里插入图片描述][20181122174230366.png]

![在这里插入图片描述][20181122174312139.png]

（3）部署发布应用，命令如下所示，但是没有部署成功；

git push heroku master

![在这里插入图片描述][20181122174632648.png]

重新创建应用名，然后再部署，居然成功了，分别如下图所示；  
![在这里插入图片描述][2018112217472222.png]

![在这里插入图片描述][20181122174900296.png]  
（4）最后一步，更改数据库

heroku console
    Ruby console for stark-falls-12775.heroku.com
    >> DataMapper.auto_migrate!

![在这里插入图片描述][20181122175903483.png]

（5）打开网站  
打开终端，进入本地应用所在的路径，输入如下所示的命令：

heroku open

或者打开浏览器，手工输入网址`https://stark-falls-12775.herokuapp.com`，也可以打开已经部署完毕的应用；

> 【备注】详细参考了以下的安装方法，  
> 中文，https://www.cnblogs.com/daguo/p/4097263.html；  
> 英文，https://www.sitepoint.com/rails-development-101-rvm/;

[20181121120653923.png]: /images/20220415/fa41fc10c8024468831d70ceff94f09f.png
[20181121120615213.png]: /images/20220415/dd5125af52ef4fd89be58fd049cc575f.png
[20181121112021244.png]: /images/20220415/8f3054dfdb2e444abd9109fdab384e92.png
[20181121112038463.png]: /images/20220415/7fd34a7244b84c74962f5798561a44ef.png
[20181121112209509.png]: /images/20220415/9dac89a668484cb09abf437650bb314f.png
[2018112111224156.png]: /images/20220415/d0c15bbe2e1f4cab8c8b86ac1804a6d8.png
[20181121112438719.png]: /images/20220415/7451d6b53c47498699277c137c9a6fda.png
[20181121112454355.png]: /images/20220415/378bfc5b7b914f6cb9692bc31662bab7.png
[2018112111260998.png]: /images/20220415/4010e88a1d724fa187f78fc85402b48d.png
[2018112111264381.png]: /images/20220415/10e6c8f01d6244fd94357ff068db7914.png
[20181121112656581.png]: /images/20220415/f6db2e916ef140feb88d4c4865225395.png
[20181121120351720.png]: /images/20220415/fafa8aa8c0dc4bb0b6d161d569efb274.png
[20181121120725278.png]: /images/20220415/bba2655870f149959ae52d7cdd4d6aa5.png
[20181121124637297.png]: /images/20220415/06cdf2b63c404a70a349d95221af716f.png
[20181121125144156.png]: /images/20220415/b27524f48be64473a91e06086cd1c52b.png
[20181121125333801.png]: /images/20220415/30c42269abf747b29b23705aeb395d2c.png
[20181121125955134.png]: /images/20220415/e76ec6820df9454292ab5f41207aac37.png
[20181121131055850.png]: /images/20220415/9630ee70ac5e4fde99cbe0fad175eefd.png
[20181121131153684.png]: /images/20220415/e6445d755ef143cc850d9b24d72e8d2f.png
[20181121131348232.png]: /images/20220415/f0aaf5e7328f44939a3934ced3a8a669.png
[2018112113163325.png]: /images/20220415/1c92913b236348d5a736edfdb0767d87.png
[20181121132904882.png]: /images/20220415/b63b15d1ca02469b8952c4512ef71d2e.png
[2018112113291878.png]: /images/20220415/89d77dd54c5c4e3e9fa8d7a7f2aefe9f.png
[2018112113384959.png]: /images/20220415/2a03574a364c45eb9aa7671944d719ef.png
[20181121134115203.png]: /images/20220415/9c182c213f914626a68c239ea0666900.png
[20181121134339333.png]: /images/20220415/99782dd6017c4e0c89f0a6ec87794335.png
[20181121135030520.png]: /images/20220415/ae753be72f174d6785c2ffc8d818f7ee.png
[20181121140905894.png]: /images/20220415/5faca67a7ac64425b6ba38214dd0dcd5.png
[20181121142723643.png]: /images/20220415/06e033fa5c8548bc950208688fb302b1.png
[20181121142737574.png]: /images/20220415/f3dbdb278a854efeb7104cf44ab2e269.png
[20181121145057418.png]: /images/20220415/528e708eef6e4a258444f1f14bf804c1.png
[20181121145535231.png]: /images/20220415/bb6a27a90a8e440e99bd6103502f3597.png
[20181121154049829.png]: /images/20220415/012511a9856f47e7a934d3fd5226f549.png
[20181121154246884.png]: /images/20220415/0ade126470984b80ab10e554b0927d4f.png
[20181121154401530.png]: /images/20220415/aac24b307002428e843d0019bd1168c6.png
[20181121155026171.png]: /images/20220415/83bd6cba5a654582a75659d2507fe469.png
[20181121155058533.png]: /images/20220415/b68e9dd903324a2d8316c1c43f3391f0.png
[20181121162216455.png]: /images/20220415/574f98573d004c5cb70de3557ac10f69.png
[20181121162433601.png]: /images/20220415/d47436d90489451bafa6d7ffbae7ec2d.png
[20181121162448773.png]: /images/20220415/64b3892e9d28462fb00d7322587f7f3b.png
[20181121162938137.png]: /images/20220415/bf67afb6f583422f8395d15dbdbbdc51.png
[20181121163000509.png]: /images/20220415/3afbdac01d684f9da44dbaa7351442e9.png
[20181121163506618.png]: /images/20220415/e3c3868a5a30436787ba883bce054cc6.png
[20181121165253166.png]: /images/20220415/fadc032e273a436fba361aca03b07abe.png
[20181121170240967.png]: /images/20220415/a002aa5158934fdcb5567d3825ce1585.png
[20181121173635362.png]: /images/20220415/8914ac138f0a410b85cc2cbb829b07cf.png
[2018112117375799.png]: /images/20220415/0225301126ab4c24a59b22fdd5c294c8.png
[20181121224222646.png]: /images/20220415/e081139daf1e483da8645f6d6c58e907.png
[20181121224237512.png]: /images/20220415/1babbdc97dfe4ae094117ca7628eeb42.png
[20181121231514845.png]: /images/20220415/7b6b73c8d0ec485a93b478e92f5f4bb5.png
[20181121232212870.png]: /images/20220415/b6d115f672334fff983d1a8df7bb84fe.png
[20181122115714735.png]: /images/20220415/c302ec861a5447798c3f6b0bc1ae66d4.png
[20181122124337109.png]: /images/20220415/3d55f29a9ce547609a1674d8ab398d79.png
[20181122124624599.png]: /images/20220415/dc334d33a91f4d5c88e0174509b5c9cf.png
[20181122140341187.png]: /images/20220415/271dac517ee141569443b266b8e88458.png
[20181122140357683.png]: /images/20220415/b8e710a4b3724ab2a7b5d970accce774.png
[20181122143646713.png]: /images/20220415/a88337de8fad4878a05e246d8fa25cd7.png
[20181122143718600.png]: /images/20220415/d7a49e73cc3b4756876ab997e0ca64d8.png
[20181122150020684.png]: /images/20220415/28e119012a3e40519d2be2cf38a42595.png
[2018112215003362.png]: /images/20220415/169784067e694605975dc7fa2c7747b9.png
[2018112215032775.png]: /images/20220415/cbd1eb1471284f0bad77c1c562557fbb.png
[20181122150435743.png]: /images/20220415/1e46a086d5bc4cc49e67e38e714b7e03.png
[2018112215052981.png]: /images/20220415/3faec7497c8848d7881fa641e64b0a76.png
[20181122151308750.png]: /images/20220415/7676110502d848f2a47656cf2a519980.png
[20181122151414964.png]: /images/20220415/921cb7403aec4aa8a9cef29e8286a056.png
[20181122152730292.png]: /images/20220415/638d2ae93d8d4a8f921cec4fdb4cafe0.png
[20181122152749975.png]: /images/20220415/fd13d61b5f474be786f2b36601fe4a05.png
[20181122152803980.png]: /images/20220415/18be9f686a7b44e0ac20da5dd6f6a302.png
[20181122152821613.png]: /images/20220415/ad46194ffa614f7cb291648fb92b1335.png
[20181122153011289.png]: /images/20220415/b8ae52d2b4d3485889f5e3d8b44b4537.png
[2018112215302545.png]: /images/20220415/5e92e13d02704673a1c5a342f033dfae.png
[20181122155418651.png]: /images/20220415/e7f6a6fd237e40fb9aeda3df135995a4.png
[20181122162826348.png]: /images/20220415/e142f658b8644da09d5992723ca78f50.png
[2018112215432711.png]: /images/20220415/3e2c3c40f5a64f1c863d8590de5be9c3.png
[20181122154401146.png]: /images/20220415/d81c94ddc28d4dcba36b671c2125690f.png
[20181122155308354.png]: /images/20220415/d6c87417527445acb3080076b6886b33.png
[20181122160807498.png]: /images/20220415/215ac77ada544c8088766ed3e50865c7.png
[20181122165023722.png]: /images/20220415/2bd965d17df84a14976857e98a19b972.png
[20181122171646674.png]: /images/20220415/e7957279605f463dae54e2262ee96b7f.png
[20181122171828908.png]: /images/20220415/8b2c42beeee142359d36689475b42372.png
[20181122174230366.png]: /images/20220415/06a74cbc98164ecfb4b83c518192af46.png
[20181122174312139.png]: /images/20220415/9202931410e64a29a2af154c5aa0d17c.png
[20181122174632648.png]: /images/20220415/42a320f61fe54f1a82ffa928a0a9b264.png
[2018112217472222.png]: /images/20220415/2f62ca5e4c06412b818ab030820337e3.png
[20181122174900296.png]: /images/20220415/9878dcd51cf7423391b1b9fcb12eed84.png
[20181122175903483.png]: /images/20220415/845e963f7e9143acad191f2da4114fcc.png