5 : 作作看网页①

上章:资料库里保存资料

Header5

0 : 这个章的目的

 理解 Ruby on Rails 上可以作怎么样子的网页,然后作作看网页。
在上章,我們用 Ruby on Rails 新增资料之后,做资料的编辑跟删除。

到这里,有沒有了解了一点关于网站上做的事情了吗?
在上章我們用Facebook的例子解释资料库。如果是网络聊天的网站的话,

messages
id user send_to content
82903 山田太郎 田中一郎 可不可以拿第一堂课的资料吗?
82904 張張 Tom 明天有考试
80905 A Green 差不多可以还给我上次给的100万元吧

作这样子的资料库保存资料,之后从这个资料库显示资料。

这样子应给简单的理解怎么样做资料库了吧。
在这个章里不用「rails c」,想用用看浏览器上的网站做资料的显示・新增・编辑・删除。
※ 网页的显示会用html,所以看看html的內容吧。


 使用Windows的话,确认有沒有追加这个设定



1 : 设定网页

第二章解释过,Ruby on Rails 是随着保存资料的方法设定各个网页。

设定的网页可以分类成资料的显示・新增・编辑・删除这个4种网页,但正确分类的话有7个(操作的资料的方法是只有4种)。
※ 现在就记得这个七种就OK

  • 显示全部的资料   index
  • 例子:推特的主页
    →显示的资料用Post.all设定
  • 显示一个资料    show
  • 例子:一个推特
    →显示的资料用Post.find(id号码)設定
  • 打入新的资料    new
  • 新增资料      create
  • 例子:作推特的画面
    →资料用Post.create设定
  • 打入编辑的资料   edit
  • 编辑资料      update
  • 例子:编辑帐号的画面
    →资料用Post.find(id号码).update设定
  • 删除资料      destroy
  • 例子:删除推特的画面
    →资料用Post.find(id号码).destroy设定

这样看來,可以看出用设定在上章学习的操作资料的方法显示內容。
这些7个设定要在设定资料操作的文件上设定。

 在这个章,用「posts」资料库作作看这个7个网站吧

各个设定中必须要有3个设定
  • 七个网页中,使用哪一个网页的设定
  • 资料操作的设定
  • 网页显示的设定(html)
做了这个3个设定之后,可以看网页。
刚开始,作作看「显示一个资料(show)」的网页吧!


 ① : 显示一个资料(show)


按照上面3个设定,在这里作作看显示一个资料(show)」的网页吧。
显示一个资料(show)的网页,例如说是显示一個推特的网页的话,用id区别网页。

所以说,显示一个资料(show)的网页要用rails c

1 Post.find(选择的id)

操作资料。 Chrome localhost posts 1 2 像上面的图像一样,用id作各个资料的网页。

那么开始作吧!


 ⑴ : 七個网页的设定


 那么刚开始设定「七个网页的设定」吧!

要编辑设定文件,所以用 Sublime Text 打开看看在第三章作的网站「myapp」吧!
※ 用Sublime Text打开文件的方法请参考这里
 用Windows的 Sublime Text 打开文件文件夹的方法请参考这里


打开之后,参考下面的图像打开routes.rb吧。 Sublime text open route rb 这个routes.rb的文件在设定,七个网页中使用哪一个网页的设定文件。

 routes.rb
1 2 3 4 5 6 7 8 9 10 ... 56 57 Rails.application.routes.draw do # The priority is based upon order of creation: first created -> highest priority. # See how all your routes lay out with "rake routes". # You can have the root of your site routed with "root" # root 'welcome#index' # Example of regular route: # get 'products/:id' => 'catalog#view' # 省略 end

在这个设定文件上设定用资料库作那些七个网页。

看起來是很长,但是从「#」开始的行不会适用,所以文件上沒有內容在设定。
文件的內容从「do」到「end」的行里面设定。
那么追加下一行,設定内容吧!

 routes.rb(追加第2行)
※ 用半母字母数字打入。一起点击「Command」跟「s」可以保存內容。
 使用Windows的话,点击「ctrl」跟「s」可以保存內容。


1 2 3 4 5 6 7 8 9 10 11 ... 57 58 Rails.application.routes.draw do resources :posts , :only => [:show, :index, :new, :create, :edit, :update, :destroy] # The priority is based upon order of creation: first created -> highest priority. # See how all your routes lay out with "rake routes". # You can have the root of your site routed with "root" # root 'welcome#index' # Example of regular route: # get 'products/:id' => 'catalog#view' # 省略 end

上面的內容在设定,用「posts」资料库作

显示全部的资料(index)・显示一个资料(show
打入新的资料(new)・新增资料(create
打入编辑的资料(edit)・编辑资料(update
删除资料(destroy


这个七个网页。
如果不想删除资料的话,

 routes.rb(第二行)
2 resources :posts , :only => [:show, :index, :new, :create, :edit, :update]

像上面这样子「:only =>」后面指定「destroy」以外六个网页。
※ 「:」是在Ruby on Rails 作网页的时候的规则。请记住。

所以网页的设定是在routes.rb上追加
resources :资料库的名字, :only => [:想加的网页...]
这些內容。

 如果用「messages」的资料库作
  • 显示全部的资料(index)
  • 新增资料(create)
  • 删除资料(destroy)
这个3种资料操作的话,「routes.rb」上要设定什么样的资料呢?



 routes.rb(第2行)
1 resources :messages, :only => [:index, :create, :destroy]


 ⑵ : 资料操作的设定

到这里设定了用七个网页的设定文件,接着设定怎么樣操作资料吧
在这边做做看显示一个资料(show)
事先用terminal,做资料操作跟显示网页的设定文件。
用terminal移动到「myapp」吧!


 使用Windows移动的方法请参考这里


terminal
1 2 3 cd Desktop cd rails_project cd myapp

移动之后,打入下面的命令。
用这个命令作「posts」资料库的显示网页的文件跟操作资料的文件。

terminal
 使用Windows的话,用「命令提示符」吧。
1 rails g controller posts

有出现像下面一样的显示吗?这样子设定文件作好了。 Terminal rails g controller posts 那么,看看文件吧!首先用Sublime Text打开myapp吧!
※ 使用Sublime Text打开文件的方法请参考这里
 使用Windows的Sublime Text打开文件文件夾的方法请参考这里

画面出现的话,打开看看app吧。
打开后可以看到,里面有controllersviews这个两个文件夾。
那么打开看这个两个文件夾吧。 Sublime text controller folder and view folder controllers里面有posts_controller.rb的文件,views里面有posts的文件夾。

这些是刚才打入rails g controller posts作的文件跟文件夾。在各个文件跟文件夾上设定操作资料的方法跟显示网页的方法。 Sublime text post controller and post view 那么先從操作资料的设定开始解释。
首先打开刚才看的posts_controller.rb的文件。

 posts_controller.rb
1 2 class PostsController < ApplicationController end

显示这样子的內容嗎?
那么打入下面的內容吧。

 posts_controller.rb(用半母字母数字打入)
※ 用半母字母数字打入。一起点击「Command」跟「s」可以保存內容。
 使用Windows的话,点击「ctrl」跟「s」可以保存內容。


1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 class PostsController < ApplicationController def show end def index end def new end def create end def edit end def update end def destroy end end

打入rails g controller 资料库的名字作了设定文件之后,先在资料库的名字_controller.rb设定,上面一样操作资料的方法。
这个def 网页的名字end之间,指定「routes.rb」上设定好的各个网页的操作资料的方法
(例如说「Post.all」或者是「Post.create」或者是「Post.find(id号码)」)

 所以如果是routes.rb上沒有设定destroy的话,

21 22 def destroy end

不用这个两行。
这些部分就想设定什么就设定自己喜欢的。
那么,解释设定操作资料的方法吧。
这一次是显示一個资料(show)的网页,所以

1 2 def show end

在上面的內容中,设定內容。
那么开始设定吧。

 posts_controller.rb(第3〜5行)
※ 用半母字母数字打入。一起点击「Command」跟「s」可以保存內容。
 使用Windows的话,点击「ctrl」跟「s」可以保存內容。


3 4 5 def show @post = Post.find(params[:id]) end

这个是网页上设定「显示一个资料(show)」的操作资料的方法。

有看見「Post.find(选择的id号码)」吧。对。在这里选择資料。
后面的params[:id]的部分在表现从网页拿来id的意思。这样子选择网页的资料(比如说推特的话,一个一个的推特)。
那么「@post」是什么呢?

「@post」是,显示网页的html文件上,显示资料的时候使用的标记
在html文件里放这个标记的话,可以在网页上显示资料。
※ 这个标记的名字是,从「@」开始的单词的话什么都可以。命名自己可以理解的名字吧。

 設定「tweets」资料库的「显示一个资料(show)」的操作资料的內容吧!


 tweets_controller.rb
3 4 5 def show @tweet = Tweet.find(:params[:id]) end


 ⑶ : 网页的设定

到这里设定了「七個网页的设定」跟「操作资料的设定」的方法

那么,在网页上显示保存的资料吧! 网页的设定,要从「views」文件夾里作html文件上做。
那么参考下面的图像,从Sublime Text打开的myapp > app打开views文件夾吧!
※ 使用Sublime Text打开文件的方法请参考这里
 使用Windows的Sublime Text打开文件文件夾的方法请参考这里
Sublime text select views 这个「views」文件夾里面的「posts」文件夾里,作作看为了显示网页的设定文件・html文件。

事先posts」文件夾里保存,显示网页的设定文件「show.html.erb」吧!
※ 保存文件的方法,请参考这里
※ Ruby on Rails上文件的名字不用「show.html」用「show.html.erb」。请注意。

完了之后,参考下面的图像打开看看show.html.erb吧。 Sublime text posts show html erb 在这个设定文件上,设定显示网页的设定。
那么,跟刚才的方法一样,在posts」文件夾里保存

  • 「index.html.erb」(显示全部的资料的网页)
  • 「new.html.erb」(打入新的资料的网页)
  • 「create.html.erb」(新增资料的网页)
  • 「edit.html.erb」(打入编辑的资料的网页)
  • 「update.html.erb」(编辑资料的网页)
  • 「destroy.html.erb」(删除资料的网页)

这些六个文件吧。 ※ 保存文件的方法,请参考这里 Sublime text views posts all 使用这些文件,设定网页的內容。
 那么做做看网页的设定吧!

首先显示看文字吧。

 show.html.erb
※ 用半母字母数字打入。一起点击「Command」跟「s」可以保存內容。
 使用Windows的话,点击「ctrl」跟「s」可以保存內容。


1 <h1>投稿</h1>

这样子保存好资料的话,用浏览器看看內容吧!

用 Ruby on Rails 作的网站,要先启动服务器之后再显示网页。
※ 详细的內容请参考这里

那么启动服务器,看看网页吧!
首先,用terminal移动到「myapp」吧。


 使用Windows的话,请参考这里


terminal
1 2 3 cd Desktop cd rails_project cd myapp


移动到「myapp」之后,打入rails s启动服务器。

terminal
 使用Windows的话,用「命令提示符」。
1 rails s

显示下面图像一样的画面吗? Terminal rails s 这样,启动服务器了。
服务器启动了,现在可以从浏览器看网站了。

那么用浏览器,打开看「0.0.0.0:3000/posts/1」吧!


 使用Windows的话,打开localhost:3000/posts/1吧。


有显示像下面图像一样的画面了吗? Chrome localhost posts 1 1 「显示一個资料(show)」的网页是,用浏览器打开0.0.0.0:3000/资料库的名字/id号码。在「id号码」的地方,可以选择资料。
这个网页在选择posts资料库里,id是1的资料。
那么接着用浏览器打开看「0.0.0.0:3000/posts/2016」吧。
 使用Windows的话,用浏览器打开看localhost:3000/posts/2016吧。

有沒有出现,下面一样的Error的画面吗? Chrome localhost posts 2016 这个是应为,沒有id是2016的posts资料
如果还有別的保存过的资料的话,打开看看那个网页吧!

 從浏览器打开「从tweets资料库里,选择id是9028的资料」的「显示一个资料(show)」的网页要怎么打入好呢?


 浏览器
1 0.0.0.0:3000/tweets/9028


到这里,作好了在显示各个资料的网页。

接着,显示看保存的资料吧!
像下面,编辑「show.html.erb」的內容吧!

 show.html.erb(编辑第2、3行)
※ 用半母字母数字打入。一起点击「Command」跟「s」可以保存內容。
 使用Windows的话,点击「ctrl」跟「s」可以保存內容。


1 2 3 <h1>投稿</h1> <p><%= @post.name %></p> <p><%= @post.content %></p>

內容编辑之后,在terminal上移动到myapp之后,用rails s打开服务器打开「0.0.0.0:3000/posts/1」吧。

 使用Windows移动到「myapp」的方法,请参考这里
 Windows的网站,可以从localhost:3000/posts/1打开。


有沒有跟下面图像一样,显示保存的资料吗? Chrome localhost posts 1 2 还有別的保存的资料的话,那个资料也用跟这里一样的方法打开看确认內容吧!
※ 使用Sequel Pro的方法请参考这里
※ 使用SqliteBrowser的方法请参考这里

那么,说明设定 html文件的方法吧。

 show.html.erb
1 2 3 <h1>投稿</h1> <p><%= @post.name %></p> <p><%= @post.content %></p>

內容应该可以推测吧。

有沒有看到刚才的解释操作资料的地方设定的「@post吗?这个@post是在选择网页的资料。

所以,如果在操作资料的部分・「posts_controller.rb」沒有设定「@post」的话,不会显示这样子的资料。

2 <%= @post.name %>

在这个部分,从「@post」拿出「name」。
同样的

3 <%= @post.content %>

在拿出「content」。
简单的追加说明。

用 Ruby on Rails作的html文件,要必须從资料库选择资料

这样子的部分用,
<%= 内容 %>
或者是
<% 内容 %>
设定內容。

在这个「<%=」或者「<%」「%>」之间,取得资料库的资料。
「<%=」跟「%>」之间的內容会显示在网页上,但是「<%」跟「%>」之间的內容不会显示。


內容也只能打入资料库里的资料或者简单的算数 等等...。这些在等一下解释吧。
像这一次一样的「显示一個资料(show)」的资料的操作是,
@設定的标记.框字的名字
设定。

 那么,「从@tweet选择place」的显示要怎么设定好呢?


1 <%= @tweet.place %>

 現在的网页上,从选择的资料「@post」只能拿出「name」跟「content」而已。在这里追加显示「place」的设定吧。


1 <p><%= @post.place %></p>


 ⑷ : 总结

用Ruby on Rails显示网页的时候,要设定三个设定
  • 七种网页中,使用哪一个资料的设定
  • 操作资料的设定
  • 网页內容的设定
※ 七个网页的设定是设定 index/ show/ new/ create/ edit/ update/ destroy这些七个网页


设定完了之后,在terminal打入rails s启动服务器,之后用浏览器打入0.0.0.0:3000/...可以显示网页。

设定的內容,可以从这里看

编辑「config」文件夾里的「routes.rb」文件,设定要用哪一个网页。

 routes.rb(第3行)
1 2 3 4 5 6 7 8 9 ... 57 58 Rails.application.routes.draw do resources :posts , :only => [:show, :index, :new, :create, :edit, :update, :destroy] # The priority is based upon order of creation: first created -> highest priority. # See how all your routes lay out with "rake routes". # You can have the root of your site routed with "root" # root 'welcome#index' # 省略 end

在「:only =>」后面的「[]」里设定喜欢的网页

在「app > controllers」文件夾里的「资料库的名字_controller.rb」文件,设定各个网页上怎么样操作资料。

这一次,说明了显示一个资料(show)的网页。

 posts_controller.rb
1 2 3 def show @post = Post.find(:params[:id]) end

显示一个资料(show)的网页上,用find(:params[:id])各个id上选择资料。
@喜欢的名前,设定显示在网页上的html文件的标记

在「app > views」文件夾里的「资料库的名字」的文件夾,作显示网页的html文件。
随着要用的网页,作
  • index.html.erb
  • show.html.erb
  • new.html.erb
  • create.html.erb
  • edit.html.erb
  • update.html.erb
  • destroy.html.erb

这一次显示一个资料(show)的网页中设定show.html.erb

 show.html.erb
1 2 3 <h1>投稿</h1> <p><%= @post.name %></p> <p><%= @post.content %></p>

从资料库选择的资料要设定在「<%=」跟「%>」之间。
选择的资料,在html上打入@设定的标记.框子的名字显示。

设定完了之后,在terminal上打入「rails s」之后,用浏览器打开网页。
「显示一个资料(show)」的网页,从0.0.0.0:3000/资料库的名字/要显示的id打开。

 使用Windows的话,从localhost:3000/资料库的名字/要显示的id号码打开。
到这里显示了一个一个的资料。
接着作显示全部的资料的,像推特的主页一样子的网页吧。

设定的內容可以从这里看


 ② : 显示全部的资料(index)


那么作作看显示全部的资料的像推特的网页吧。 显示全部的资料,用上章的內容解释的话,可以说在设定

1 Post.all

的內容,作 Chrome posts all 2 上面画面一样的,会显示全部的投稿资料的网页。

设定有「用哪一个网页的设定」「操作资料的设定」「网页的內容的设定」的三个。在这里设定一个一个吧。


  ⑴ : 设定网页


 刚开始从「七个网页的设定」开始做吧!

打开看看config文件里的,设定七个网页的routes.rb文件吧。

 routes.rb(第3行)
1 2 3 4 5 6 7 8 9 ... 57 58 Rails.application.routes.draw do resources :posts , :only => [:show, :index, :new, :create, :edit, :update, :destroy] # The priority is based upon order of creation: first created -> highest priority. # See how all your routes lay out with "rake routes". # You can have the root of your site routed with "root" # root 'welcome#index' # 省略 end

內容已经遍及过了吧。

跟上面一样追加「index」了吗?
这样子设定,要使用显示全部的资料(index)的网页。
 咱們设定「操作资料」的內容吧。

「posts」资料库的资料,要设定在posts_controller.rb文件里。

首先,用Sublime Text打开app > controllers文件夾里的posts_controller.rb文件吧。

※ 使用Sublime Text打开文件的方法请参考这里
 使用Windows的Sublime Text打开文件文件夾的方法请参考这里


打开之后,在「def index」跟「end」之间设定下面的內容。

 posts_controller.rb(追加第8行)
※ 用半母字母数字打入。一起点击「Command」跟「s」可以保存內容。
 使用Windows的话,点击「ctrl」跟「s」可以保存內容。


7 8 9 def index @posts = Post.all end

用「Post.all」,选择posts资料库裡的全部的资料。
※ 使用「rails c」确认打入的內容吧。

在这里的标记「@posts」使用复数。
这是应为要用显示全部的资料的标记,所以在这里使用复数的名字。等下自己看的时候可以理解的话,名字用什么也沒关系。

在「index」操作资料的方法是,用「资料库的名字.all」选择全部的资料之后,设定标记。

 设定从tweets资料库选择全部的资料的资料的操作吧。


1 @tweets = Tweet.all

 那么设定网页的內容吧。

刚开始,用Sublime Text打开myapp文件夾之后,打开app > views > posts文件夾吧。

※ 使用Sublime Text打开文件的方法请参考这里
 使用Windows的Sublime Text打开文件文件夾的方法请参考这里


里面有沒有index.html.erb文件吗?如果有的话,打开看吧!
在这个文件上,设定显示「选择全部的资料(index)」的网页。

 那么刚开始,复习学习的內容吧。 Chrome posts all 1 像上面的图像的画面,设定「index.html.erb」文件吧。
※ 線用<hr>设定。


 index.html.erb
※ 用半母字母数字打入。一起点击「Command」跟「s」可以保存內容。
 使用Windows的话,点击「ctrl」跟「s」可以保存內容。


1 2 <h1>投稿一览</h1> <hr>

做完了之后,用terminal移动到myapp,之后打入rails s吧。

在terminal上打入「rails s」启动服务器之后,用浏览器打开「0.0.0.0:3000/posts」吧。
 使用Window的话,打开看localhost:3000/posts吧。

显示下面图像一样子的网页吗? Chrome posts all 1
在这里,作作看下面图像一樣子的像SNS的网页吧! Chrome posts all 2
那么,编辑index.html.erb文件吧。打入下面的內容。

 index.html.erb(编辑第3〜7行)
※ 用半母字母数字打入。一起点击「Command」跟「s」可以保存內容。
 使用Windows的话,点击「ctrl」跟「s」可以保存內容。


1 2 3 4 5 6 7 8 <h1>投稿一览</h1> <hr> <% @posts.each do |p| %> <p><%= p.id %></p> <p><%= p.name %></p> <p><%= p.content %></p> <hr> <% end %>

一起点击「Command」跟「c」停止,用「rails s」打開的服务器之后,再打入「rails s」吧。
这样编辑好的內容会适用在网页上。


 使用Windows的话,
 一起点击「ctrl」跟「c」停止,用「rails s」打开服务器之后,再打入「rails s」吧。


 如果设定的內容沒有显示在网页上的时候,一起点击「Command」跟「c」停止用「rails s」打开的服务器之后,再打入「rails s」吧。

设定好了之后,用浏览器打开「0.0.0.0:3000/posts」。
 使用Windows的话,打开「localhost:3000/posts」。 Chrome posts all 2 有沒有显示上面一样子的像SNS主页的网页吗?
那么,解释刚才的设定在做什么。

 index.html.erb
1 2 3 4 5 6 7 8 <h1>投稿一览</h1> <hr> <% @posts.each do |p| %> <p><%= p.id %></p> <p><%= p.name %></p> <p><%= p.content %></p> <hr> <% end %>

可不可以推测,在这里

1 2 3 4 <p><%= p.id %></p> <p><%= p.name %></p> <p><%= p.content %></p> <hr>

反复显示这里的內容吗?
在里面的

1 <%= p.name %>

显示名字,id显示号码,content显示投稿的內容。
那么第3行到第7行是在做什么呢?

 index.html.erb
1 2 3 4 5 6 7 8 <h1>投稿一览</h1> <hr> <% @posts.each do |p| %> <p><%= p.id %></p> <p><%= p.name %></p> <p><%= p.content %></p> <hr> <% end %>

在这个第三行,
吧「Post.all」选择的资料「@posts」(下面的「posts_controller.rb」)分成一个一个的资料(p)之后,反复显示分成一个一个的內容。

 posts_controller.rb
1 2 3 def index @posts = Post.all end

<% @posts.each.do |p| %><% end %>的地方会反复显示。

然后在各个反复中的「p」里代入各个资料。然后用这个资料「p」显示资料。
※ 这个「p」的名字是用什么都可以,在这里用「post」的第一字「p」。名字用什么都可以。
说明设定的方法吧。
像「Post.all」一样里面包括复数资料的时候,必须吧这个资料分成一个一个的资料。

 这样子的复数的资料要用,
<% @设定的标记.each do |喜欢的名字| %>
分成一個一個的资料。
※ 是「<%」不是「<%=」,要注意。

 到
<% end %>
的地方分成的资料会反复显示
※ 这里也是「<%」不是「<%=」,要注意。

 里面的资料是,跟显示一个资料(show)一样用
<%= 设定的名字.框子的名字 %>
显示內容。

※ 在上章解释的「where」也可以用这个方法显示。用搜索的时候也会出现复数的资料。
 那么,在「显示全部的资料(index)」的网页里追加「作资料的时间」的內容要怎么设定呢?
※ 里面放作资料的框子是「created_at」


1 <p><%= p.created_at %></p>

 做下面一样子的资料操作的时候,设定看显示「@messages」的,寄件者「name」收件者「send_to」内容「content」的网页。

 messages_controller.rb
1 2 3 def index @messages = Message.all end


 index.html.erb(答案的例子)
1 2 3 4 5 6 7 8 <h1>message一览</h1> <hr> <% @messages.each do |m| %> <p寄件者:><%= m.name %></p> <p收件者:><%= m.send_to %></p> <p內容:><%= m.content %></p> <hr> <% end %>

 虽然已经打开过了,但是解释用浏览器打开网页的方法。

在浏览器打开0.0.0.0:3000/资料库的名字的话,可以打开显示全部的资料(index)的网页。
这一次是显示「posts」资料库里全部的內容的网页,所以打入

 浏览器
1 0.0.0.0:3000/posts

打开网页。

 打开显示全部的「tweets」资料的网页要怎么打开呢?


 浏览器
1 0.0.0.0:3000/tweets


 ⑵ : 移动网页


到这里「显示全部的资料(index)」的网页的设定完成了。

但是在浏览器上一次一次打入移动网页的方法,会不会觉得有一点麻烦呢?普通的网页是点击一次就可以移动网页。

最后想做做看,从全部的资料的网页(index)到一个资料的网页(show)/ 從一個资料的网页(show)到全部的资料的网页的移动

网页的移动,要在「html.erb」文件上做。首先在「show.html.erb」上,追加点击后移动到「显示全部的资料(index)」的网页的设定(连接)

移动网页的文字要
<a href="移动到的网页">文字</a>
这样子设定。设定后,网页上会出现点击后会移动到指定的网页的文字

那么试试看吧。按照下面的內容,编辑「show.html.erb」

 show.html.erb(追加第4行)
※ 用半母字母数字打入。一起点击「Command」跟「s」可以保存內容。
 使用Windows的话,点击「ctrl」跟「s」可以保存內容。


1 2 3 4 <h1>投稿</h1> <p><%= @post.name %></p> <p><%= @post.content %></p> <p><a href="http://www.books.com.tw/">博客來</a></p>

显示之后,用浏览器打开「0.0.0.0:3000/posts/1」吧。
※ 为了适用內容,一起点击「Command」跟「c」停止用「rails s」打开的服务器之后,再打入「rails s」吧。


 使用Windows的话,
  一起点击「ctrl」跟「c」停止用「rails s」打开的服务器之后,再打入「rails s」。之后打开「localhost:3000/posts/1」。


显示像下面的图像一样的图像吗? Chrome localhost posts 1 3 点击「博客來」的部分之后,移动到博客來的网页了吗?

 设定看移动到Facebook(http://facebook.com)的文字吧。


1 <a href="http://facebook.com">Click</a>

跟上面一样子,设定從「显示一个资料(show)」的网页到「显示全部的资料(index)」移动的连接吧。

 show.html.erb(编辑第4行)
※ 用半母字母数字打入。一起点击「Command」跟「s」可以保存內容。
 使用Windows的话,点击「ctrl」跟「s」可以保存內容。


1 2 3 4 <h1>投稿</h1> <p><%= @post.name %></p> <p><%= @post.content %></p> <p><a href="/posts">主页</a></p>

编辑之后,在浏览器上打开「0.0.0.0:3000/posts/1」。
※ 为了适用內容,一起点击「Command」跟「c」停止用「rails s」打开的服务器之后,再打入「rails s」吧。


 使用Windows的话,
  一起点击「ctrl」跟「c」停止用「rails s」打开服务器之后,再打入「rails s」。之后打开「localhost:3000/posts/1」。


点击「主页」之后,
移动到「显示全部的资料(index)」的网页「0.0.0.0:3000/posts」嗎?

 应为「/posts」的「/」表示url「0.0.0.0:3000」(Windows的话,「localhost:3000」),所以点击之后会移动网页。

 设定看,移动到photos资料库的「index」网页的「按这里」的连接。


1 <a href="/photos">按这里</a>

那么,「index」网页上设定移动到「show」网页的內容吧。
按照下面的內容,编辑「index.html.erb」的內容。

 index.html.erb(编辑第4行)
※ 用半母字母数字打入。一起点击「Command」跟「s」可以保存內容。
 使用Windows的话,点击「ctrl」跟「s」可以保存內容。


1 2 3 4 5 6 7 8 <h1>投稿一览</h1> <hr> <% @posts.each do |p| %> <p><a href="/posts/<%= p.id %>"><%= p.id %></a></p> <p><%= p.name %></p> <p><%= p.content %></p> <hr> <% end %>

显示之后,在浏览器上打开「0.0.0.0:3000/posts」吧。
※ 为了适用內容,一起点击「Command」跟「c」停止,用「rails s」打开的服务器之后,再打入「rails s」吧。


 使用Windows的话,
  一起点击「ctrl」跟「c」停止用「rails s」打开服务器之后,再打入「rails s」。之后打开「localhost:3000/posts」。


Chrome posts all 3 显示像上面一样的画面吗?
点击「id」的部分之后,看看可不可以移动网页!

 那么解释內容吧!

在连接上设定,省略「0.0.0.0:3000/posts/id号码」的「/posts/id号码,这样可以移动到「显示一个资料(show)」的网页。

在这里为了指定「/posts/id号码」,在「id号码」的部分设定显示选择的id「<%= p.id %>」。
这样,用「id」设定各个网页的移动。
 设定看,移动到books资料库「id是10」的「show」网页的「按这里」的连接


1 <a href="/posts/10">按这里</a>


 ⑶ : 总结

先解释「显示全部的资料(index)」上设定的三个设定。

设定的內容请参考这里

「config」文件夾里的「routes.rb」文件里设定「index

 routes.rb(第3行)
1 2 3 4 5 6 7 8 9 ... 57 58 Rails.application.routes.draw do resources :posts , :only => [:show, :index, :new, :create, :edit, :update, :destroy] # The priority is based upon order of creation: first created -> highest priority. # See how all your routes lay out with "rake routes". # You can have the root of your site routed with "root" # root 'welcome#index' # 省略 end


设定「app > controllers」文件夾里的「资料库的名字_controller.rb」文件的「index

 posts_controller.rb
1 2 3 def index @posts = Post.all end

设定选择全部的资料的「.all」跟html上显示的标记

设定「app > views > 资料库的名字」文件夾里的「index.html.erb」。

 index.html.erb
1 2 3 4 5 6 7 8 <h1>message一览</h1> <hr> <% @message.each do |m| %> <p>寄信者 : <%= m.name %></p> <p>收信者 : <%= m.send_to %></p> <p><%= m.content %></p> <hr> <% end %>

在网页上,显示「controller」文件上设定的资料

<% @设定的标记.each do |名字| %>,把复数的资料分成一个一个的资料,
<% end %>之间,设定各个资料的显示方法。

<%= 资料库的名字.框子的名字 >显示各个资料。

设定完了之后用terminal打入「rails s」,可以在浏览器打开网页。
显示全部的资料(index)的网页,从0.0.0.0:3000/资料库的名字打开。
 使用Windows的话,从localhost:3000/资料库的名字打开。
 网页的移动(连接)

网页的移动,
<a href="想移动的网页">文字</a>
做。

想移动到「index」网页的话,

1 <a href="/posts">按这里</a>

想移动到「show」网页的话,

1 <a href="/posts/<%= p.id %>">按這裡</a>

这样子设定。

设定的內容请参考这里
 到这里我們作了显示全部的资料的网页。
还剩的「在网页上,新增・编辑・删除资料」的方法,在下章解释!

到这里设定的內容参考这里