6 : 作作看網頁!②

前の章:作作看網頁!①

Header6 在這個章是「作作看網頁①!」繼續的內容。
還沒看上章內容的話、從這裡參考

 ③ : 打入新的资料(new)


到这边解释了 的设定方法。
现在可是只能显示资料,不能追加资料。

所以在这里做做看作资料的方法。
基本上,用「rails c」上做的

1 Post.create(:name => "名字", :content => "内容", :place => "地方")

设定网页里的资料的追加。
作资料的方法有「new」跟「create」的两个。

  • 先用「new」显示打入资料的画面
  • 再來用「create」保存资料后,显示保存好了的画面

的顺序作资料。

在浏览器解释的话,在打入新的资料(new)的网页上打入资料之后,点击登录按钮之后, Chrome posts new 2 移动到「新增资料(create)」的网页。 Chrome posts create 1 然后用 Sequel Pro确认资料库,可以看到资料会保存在资料库里。
 使用Windows的话,用SqliteBrowser打开。 Sequel pro myapp posts 3
首先,先作作看打入新的资料(new)的网页吧。

 ⑴ : 设定网页


 首先从学过的內容开始复习吧。要设定网页的时候,必须要设定三个设定。那个设定是什么呢?

这个设定是,
  • 七个网页中设定要使用哪一个网页的设定
  • →编辑「config > routes.rb」的內容

  • 资料的操作的方法的设定
  • →编辑「app > controllers > 资料库的名字_controller.rb」的內容

  • 显示的网页的內容的设定
  • →编辑「app > views > 网页的名字.html.erb」的內容
的三个內容。
「打入新的资料(new)」的网页上,
作空格的资料之后,作打入资料的输入框。

在这里做
  • 作空格的资料(posts_controller.rb
  • 设定资料的输入框,发信按钮(new.html.erb
这个两个设定。
 那么从「七个网页的设定」开始做!

打开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

內容已经编辑过了吧。

跟上面的第三行一样有沒有追加「new」吗?
有追加的话,已经设定好使用「打入新的资料(new)」的网页了。
 那么设定看「操作资料」的內容吧。

刚开始,用Sublime Text打开app > controllers文件夾里的posts_controller.rb文件吧。
※ 使用Sublime Text打开文件的方法请参考这里
 使用Windows的Sublime Text打开文件文件夾的方法请参考这里


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

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


11 12 13 def new @post = Post.new end

这样子「打入新的资料(new)」的网页的操作资料的设定完成了。

「new」的资料操作像下面一样,
@设定的标记 = 资料库的名字(第一字是大学的单数).new
设定。

Post.new在做里面是空格的资料

用这里空格的资料打入资料之后,在「新增资料(create)」的网页上保存资料

在「打入新的资料(new)」的网页上,作打入空格的资料的输入框跟发信按钮。

 作作看「foods」资料库的「打入新的资料(new)」的网页上,操作资料的內容吧。


 foods_controller.rb
1 2 3 def new @food = Food.new end

 那么,设定网页的资料吧。

在这里设定像下面图像一样子的画面。 Chrome posts new 1 首先,用Sublime Text打开的「myapp」上,打开app > views > posts吧。
里面有沒有new.html.erb文件吗?如果有的話打开看!

在这里,设定显示「打入新的资料(new)」的网页的內容。

那么,开始做网页的设定吧!

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


1 2 3 4 5 6 7 8 9 10 11 12 13 <h1>作投稿</h1> <hr> <%= form_for @post do |f| %> <p>名字</p> <%= f.text_field :name %> <p>内容</p> <%= f.text_area :content %> <p>地方</p> <%= f.text_field :place %> <hr> <%= f.submit "登錄" %> <% end %> <a href="/posts">返回主頁</a>

那么,显示网页吧!
※ 一起点击「Command」跟「c」停止用「rails s」打开的服务器之后,再打入「rails s」吧。


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


启动服务器之后,用浏览器打开「0.0.0.0:3000/posts/new」吧。
 使用Window的话,打开看localhost:3000/posts/new吧。 Chrome posts new 1 显示上面一样的有输入框跟发信按钮的网页吗?
像上面的0.0.0.0:3000/资料库的名字/new是,打入新的资料(new)的网页。

这一次是「posts」资料库的打入新的资料(new)的网页,所以在浏览器上打入

 浏览器
1 0.0.0.0:3000/posts/new

打入这样子的url,打开网页。

 那么,用浏览器打开「tweets」资料库「打入新的资料(new)」的网页的时候,要怎么样打开网站呢?


 浏览器
1 0.0.0.0:3000/tweets/new

那么,说明在网页上设定的內容吧。

 new.html.erb
1 2 3 4 5 6 7 8 9 10 11 12 13 <h1>作投稿</h1> <hr> <%= form_for @post do |f| %> <p>名字</p> <%= f.text_field :name %> <p>内容</p> <%= f.text_area :content %> <p>地方</p> <%= f.text_field :place %> <hr> <%= f.submit "登录" %> <% end %> <a href="/posts">回返主页</a>

在显示输入框的地方是

 new.html.erb(第4〜11行)
4 5 6 7 8 9 10 11 <p>名字</p> <%= f.text_field :name %> <p>内容</p> <%= f.text_area :content %> <p>地方</p> <%= f.text_field :place %> <hr> <%= f.submit "登录" %>

的地方。可以推测在这里设定三个输入框跟一个发信按鈕吧

对。在这里设定输入框,按鈕的显示。例如说在里面的

5 <%= f.text_field :name %>

在作资料库里保存「name」资料的输入框
跟这个比的话,作「content」的输入框的

7 <%= f.text_area :content %>

內容不同。

这个是应为这里的內容是按照资料的种类(请参考这里)设定的。

「posts」资料库解释的话,在「name」上设定放短的文章・在「content」上设定放長的文章・在「place」上设定放短的文章的內容。
※ 內容请参考这里

 输入框也按着这个资料的种类设定。

放短的文章的输入框的设定是
<%= f.text_field :框子的名字 %>
放長的文章的输入框的设定是
<%= f.text_area :框子的名字 %>
放在数字的输入框的设定是
<%= f.number_field :框子的名字 %>
设定。

 打入数字的「price」的输入框要怎么设定好呢?


1 <%= f.number_field :price %>

到这里,说明了显示三个输入框的设定。
接着解释显示「登录」的发信按鈕。
这个按鈕在

1 <%= f.submit "登录" %>

显示。
点击这个按鈕之后,移动到「新增资料(create)」的网页之后,保存打入的资料在资料库里。
※ 还沒设定新增资料(create)的网页的资料操作,所以资料还不会保存在资料库里。(点击看之后,在Sequel Pro/SqliteBrowser看看內容吧)
到这里,说明了显示输入框跟发信按鈕的说明。
那么还沒说明的第3行第12行是在做什么呢?

 new.html.erb
1 2 3 4 5 6 7 8 9 10 11 12 13 <h1>作投稿</h1> <hr> <%= form_for @post do |f| %> <p>名字</p> <%= f.text_field :name %> <p>内容</p> <%= f.text_area :content %> <p>地方</p> <%= f.text_field :place %> <hr> <%= f.submit "登录" %> <% end %> <a href="/posts">返回主页</a>

 posts_controller.rb
1 2 3 def new @post = Post.new end

在第3行,用「f」的标记选择「posts_controller.rb」的「Post.new」作的空格的资料「@post」。

※ 在这里使用的是「f」不是「@post」,请注意。
※ 在这里使用「f」的名字,但是这个只是从「form」的第一字拿的而已,所以可以用別的自己喜欢的名字。
那么,说明设定的方法吧。
在「打入新的资料(new)」的网页上,必须在网页上显示「posts_controller.rb」里用「Post.new」作的空格的资料。

使用这个空格的资料的时候,先设定
<%= form_for @设定的标记 do |喜欢的名字| %>
的內容。这样子可以选择「@post」的资料。
※ 是「<%=」不是「<%」,请注意。

选择的资料要设定在
<% end %>
之间。在这里作输入框跟发信按鈕。
在里面设定的输入框,如果是短的文章的话,
<%= 名字.text_field :框子的名字 %>
设定。
※ 如果是长的文章的话使用f.text_area,如果是数字的话使用f.number_field设定。

然后,设定从「打入新的资料(new)」的网页,移动到「新增资料(create)」网页的发信按鈕
<%= f.submit "显示的文字" %>
的內容。
 在网页上打入,像下面一样设定操作资料的「@stock」的名字「name(短的文章)」用户「user(短的文章)」价钱「price(数字)」的设定吧。

 stocks_controller.rb
1 2 3 def new @stock = Stock.new end


 new.html.erb
1 2 3 4 5 6 7 8 <%= form_for @stock do |f| %> <p>名字</p> <%= f.text_field :name %> <p>用户</p> <%= f.text_field :user %> <p>价钱</p> <%= f.number_field :price %> <% end %>


 ⑵ : 总结

解释「打入新的资料(new)」的网页的三个设定。

「config」文件夾里的「routes.rb」文件里设定「new」的內容

 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」文件「new

 posts_controller.rb
1 2 3 def new @post = Post.new end

设定作空的资料的资料操作「.new」跟用html网页的显示

设定「app > views > 资料库」文件夾里「new.html.erb」的內容。

 new.html.erb(第3行〜第12行)
1 2 3 4 5 6 7 8 9 10 11 12 13 <h1>作投稿</h1> <hr> <%= form_for @post do |f| %> <p>名字</p> <%= f.text_field :name %> <p>内容</p> <%= f.text_area :content %> <p>地方</p> <%= f.text_field :place %> <hr> <%= f.submit "登录" %> <% end %> <a href="/posts">返回主页</a>

在网页上,用「controller」文件里作的空格的资料,设定打入內容的输入框。

 form_for

用「<%= form_for @设定的标记 do |喜欢的名字| %>で指定空格的资料,
<% end %>之间作「新增资料(create)」的输入框跟发信按鈕。

 输入框・发信按鈕

<%= 名字.输入框 :框子的名字 %>作资料的输入框之后,
<%= 名前.submit "显示的文字" %>,作「新增资料(create)」的按鈕。
※ 短的文章的话用「名字.text_field」设定,长的文章的话用「名字.text_area」设定,数字的话用「名前.number_field」设定

设定完了后,在terminal上打入「rails s」之后用浏览器上打开网页。
「新增资料(create)」的网页,从0.0.0.0:3000/资料库的名字/new打开。

 使用Windows的话,从localhost:3000/资料库的名字/new打开。
到这里,作了打入资料的网页。

接著做「新增资料(create)」的网页吧。

设定的內容请参考这里


 ④ : 新增资料(create)


到这里「打入新的资料(new)」的网页的设定好了。

现在资料的打入之后,可以从「打入新的资料(new)」的网页移动到「新增资料(create)」的网页了。
但是资料还不能保存在资料库里


在这里做做看资料的保存吧!
这一次的內容,可以说是在网页上设定第四章做的

1 Post.create(:name => "名字", :content => "内容", :place => "地方")

的操作资料的地方(posts_controller.rb)。

从「打入新的资料(new)」的网页拿资料之后,用上面操作资料的方法保存資料。
※ 这个时候,网页是从打入新的资料(new)的网页移动到「新增资料(create)」的网页,所以不用在浏览器上打入url。

在这里做,
  • 用「打入新的资料(new)」的网页的资料,保存資料(posts_controller.rb
  • 保存之后显示资料保存好的网页(create.html.erb
这个两个设定。

那么,做做看「七个网页的设定」「操作资料的设定」跟「显示的网页的设定」三个设定吧!

 ⑴ : 设定网页


 首先从「七个网页中使用哪一个网页」的设定开始做。

打开看,设定七个网页中自己喜欢的网页的设定文件routes.rb」文件(在config文件夾里)吧。

 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

內容已经有设定过了对吧。

跟上面一样已经追加了「create」吧。这样子设定好「新增资料(create)」的网页了。
 那么,设定看「操作资料」的內容吧。

在设定「posts」资料库的操作资料的方法的文件「posts_controller.rb」上,追加设定。

用Sublime Text,打开app > controllers文件夾里的posts_controller.rb文件吧。
※ 使用Sublime Text打开文件的方法请参考这里
 使用Windows的Sublime Text打开文件文件夾的方法请参考这里


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

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


15 16 17 def create @post = Post.create(params.require(:post).permit(:name, :content, :place)) end

內容有一点复杂。

可以推测@post是用html文件设定显示网页的标记、Post.create是作资料,所以

1 params.require(:post).permit(:name, :content, :place)

的地方有一点难理解。
「params」里会放打入新的资料(new)的网页送來的资料。例如说是「name是'山田太郎'、content是'你好'、place是'新宿'」等等的资料,都放在「params」里面。

所以这个「params」里有

1 (:name => "打入的內容", :content => "打入的內容", :place => "打入的內容")

这些,在「打入新的资料(new)」打入的字来哦。
在后面的,

1 .require(:post).permit(:name, :content, :place)

在设定不要保存posts资料库的name、content、place以外的资料

这个是为了网站的安全的设定。例如说防止资料库里的別的资料的删除或者更改等等。记得这个设定是为了安全,不要忘记设定。

在这里的设定是,
  • 在「require」的后面打入「:资料库的名字(单数)」
  • 「permit」的后面打入「:框子的名字」

这样子做。

所以「新增资料(create)」的网页,
@设定的标记 = 资料库的名字(第一字大写・单数).create(params.require(:单数的资料库的名字).permit(:框子的名字 ...))
是这样子设定。

 设定「tweets」资料库的「name」「content」「place」的「新增资料(create)」的网页的资料的操作是怎么样做呢?


 tweets_controller.rb
1 Tweet.create(params.permit(:tweet).permit(:name, :content, :place))

操作资料的设定到这里。接着做做看网页的设定吧! Chrome posts create 1 在这里,作作看上面图像一样子的网页。

首先,用Sublime Text打开的「myapp」上,打开app > views > posts吧。
这里面有沒有create.html.erb文件吗?有的話打开看!

在这个文件上,追加「新增资料(create)」的网页的设定。

那么,编辑create.html.erb的內容吧!

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


1 2 3 4 5 6 7 8 9 <h1>投稿好了</h1> <p>名前</p> <%= @post.name %> <p>内容</p> <%= @post.content %> <p>場所</p> <%= @post.place %> <hr> <a href="/posts">返回主页</a>

接著,在网页上显示看吧!
※ 一起点击「Command」跟「c」停止,用「rails s」打开的服务器之后,再打入「rails s」吧。


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


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

这样会显示打入资料的输入框,打入看自己喜欢的资料之后,点击「登录」的按鈕吧。
像下面的图像一样,有沒有移动到投稿好了的画面吗? Chrome posts create 1 移动好了之后,用Sequel Pro确认內容吧!

 使用Windows的话,用SqliteBrowser确认內容吧!

 资料有沒有保存好了吗?
网页的內容应该容易理解。
在「show.html.erb」里面设定的,

1 <%= @post.name %>

一样,在显示內容。

这一次的「@post」是,

1 @post = Post.create(params.require(:post).permit(:name, :content, :place))

不是「find(id号码)」一样选择资料,记得用「create」也可以显示资料吧。


 ⑵ : 总结

「新增资料(create)」的网页上要设定三个內容。

设定的內容请参考这里

在「config」文件夾里的「routes.rb」文件里,追加「create」的设定

 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」文件夾里的「create」上,追加设定

 posts_controller.rb
1 2 3 def create @post = Post.create(params.require(:post).permit(:name, :content, :place)) end

新增资料的「create」里,设定指定资料库的內容(require)跟指定框子的內容(permit)

编辑「app > views > 资料库的名字」文件夾里的设定文件「create.html.erb」的內容。

 create.html.erb
1 2 3 4 5 6 7 8 9 <h1>投稿好了</h1> <p>名字</p> <%= @post.name %> <p>内容</p> <%= @post.content %> <p>地方</p> <%= @post.place %> <hr> <a href="/posts">返回主页</a>

沒设定网页的显示也可以保存资料,但是利用的人比较会不方便,所以不要忘记设定网页的显示吧!

新增资料(create)」的网页是,从「打入新的资料(new)」的网页移动到的,不用在浏览器打入url可以打开的网页。
※ 网页的url,应该是0.0.0.0:3000/posts
到这里,作了新增资料的网页。
接着,设定「编辑资料」的网页吧!

设定的內容,请参考这里


 ⑤ : 打入编辑的资料(edit)


到这里设定了
这个四个网页。

现在,还沒设定好的网页只有「资料的编辑」跟「资料的删除」这个两个而已了。
首先做做看资料的编辑吧!
「资料的编辑」是,在网页上设定,用「rails c」打入的资料的编辑。

1 Post.find(1).update(:content => "你好")

资料的编辑跟资料的新增一样有
打入编辑的资料(edit)编辑资料(update),这个两个。
  • 先用「edit」显示打入资料的网页
  • 再來用「update」保存打入的资料
的順序。

首先在打入编辑的资料(edit)的网页上打入资料,点击更新按鈕之后, Chrome posts 1 edit 1 移动到编辑资料(update)的网页。 Chrome posts 1 update 1 用浏览器打开0.0.0.0:3000/posts/id的号码,可以看到资料有更新。 Chrome posts 1 edited 首先,作作看这个打入编辑的资料(edit)的网页吧!


 ⑴ : 设定网页


 先从复习开始。设定网页要设定怎么样的设定呢?

  • 七个网页的设定
  • 操作资料的设定
  • 网页內容的设定

这个三个。
打入编辑的资料(edit)的网页上,指定要编辑的资料作输入框。

在这里设定,
  • 选择要编辑的资料
  • 显示输入框跟发信按鈕
这个两个设定。
 刚开始从「七个网页的设定」开始做吧!

那么先打开,设定七个网页的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

內容已经有编辑过了吧。

跟上面一样,有沒有追加「edit」的网页吗?
有追加的话,使用打入编辑的资料(edit)的网页的设定是OK。
 接着做「操作资料」的设定吧。

操作「posts」资料库的「posts_controller.rb」文件上,追加设定吧。

用Sublime Text打开,app > controllers文件夾里的「posts_controller.rb」文件吧。
※ 使用Sublime Text打开文件的方法请参考这里
 使用Windows的Sublime Text打开文件文件夾的方法请参考这里


打开之后,「def edit」跟「end」之间设定下面的内容吧。

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


19 20 21 def edit @post = Post.find(params[:id]) end

 在这个追加的一行,在做什么呢?

在这个一行,选择要编辑的资料。
※ 详细请参考这里

 这个跟选择一個资料(show)的设定

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

做一样的设定。

要编辑的资料在这里选择。
在「打入选择的资料(edit)」的网页上,不要忘记设定这个资料的选择!

 那么「tweets」资料库的「打入编辑的资料(edit)」的网页要怎么样设定好呢?


 tweets_controller.rb
1 2 3 def edit @tweet = Tweet.find(params[:id]) end

 那么,做做看网页的內容吧。

在这里显示像下面图像一样子的画面。 Chrome posts 1 edit 1 首先,用Sublime Text打开myapp > app > views > posts吧。
里面有edit.html.erb文件吗?有的话打开看看!

在这个文件上追加,显示「打入编辑的资料(edit)」的网页的设定。

 那么,设定网页的设定吧!

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


1 2 3 4 5 6 7 8 9 10 11 <h1>编辑投稿</h1> <hr> <%= form_for @post do |f| %> <p>内容</p> <%= f.text_area :content %> <p>地方</p> <%= f.text_field :place %> <hr> <%= f.submit "更新" %> <% end %> <a href="/posts/<%= @post.id %>">返回主页</a>

这一次的设定,有沒有好像有看过吧?
这个设定应该跟「new.html.erb」很像。

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


1 2 3 4 5 6 7 8 9 10 11 12 13 <h1>作投稿</h1> <hr> <%= form_for @post do |f| %> <p>名字</p> <%= f.text_field :name %> <p>内容</p> <%= f.text_area :content %> <p>地方</p> <%= f.text_field :place %> <hr> <%= f.submit "登录" %> <% end %> <a href="/posts">返回主页</a>

 复习学习的內容吧。这个「new.html.erb」文件中,设定「name」的输入框跟按鈕的地方在哪里呢?

 「name」的输入框
1 <%= f.text_field :name %>

 按鈕
1 <%= f.submit "登录" %>

new.html.erb文件上,

3 <%= form_for @post do |f| %>

12 <% end %>

之间显示输入框跟按鈕

 这个跟「edit.html.erb文件做的设定一样。

3 <%= form_for @post do |f| %>

10 <% end %>

之间

4 5 6 7 8 9 <p>内容</p> <%= f.text_area :content %> <p>地方</p> <%= f.text_field :place %> <hr> <%= f.submit "更新" %>

在显示网页。
在这里,做打入「content」跟「place」的设定
加上

 edit.html.erb(第3行)
3 <%= form_for @post do |f| %>

里面的「@post」是,在「posts_controller.rb」设定的

 posts_controller.rb(第20行)
20 @post = Post.find(params[:id])

选择「posts」资料库的资料的标记。在这里是选择编辑的资料
 用下面的资料操作的「@user」,作打入姓氏「family_name(短的文章)」名字「first_name(長的文章)」年齡「age(數字)」的网页吧。

 users_controller.rb
1 2 3 def edit @user = User.find(params[:id]) end


 edit.html.erb
1 2 3 4 5 6 7 8 9 10 11 12 13 <h1>编辑投稿</h1> <hr> <%= form_for @user do |f| %> <p>姓氏</p> <%= f.text_field :family_name %> <p>名字</p> <%= f.text_field :first_name %> <p>年龄</p> <%= f.number_field :age %> <hr> <%= f.submit "更新资料" %> <% end %> <a href="/posts/<%= @post.id %>">返回投稿的资料</a>

那么在网页上显示看吧!
※ 一起点击「Command」跟「c」停止,用rails s打开的服务器之后,再打入「rails s」吧。


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


起動服务器之后,用浏览器打开「0.0.0.0:3000/posts/1/edit」吧。
 使用Window的话,打开看localhost:3000/posts/1/edit吧。 Chrome posts 1 edit 1 有沒有显示像上面图像一样有输入框的网页了吗?
打开打入编辑的资料(edit)的网页的话,用浏览器从0.0.0.0:3000/资料库的名字/id号码/edit打开。

这一次是打入「posts」资料库的「id是1」的资料的网页,所以从

 浏览器
1 0.0.0.0:3000/posts/1/edit

打开网页。

 在浏览器上,打开「videos」资料库的「打入编辑的资料」的网页要怎么打入呢?


 浏览器
1 0.0.0.0:3000/videos/1/edit


 ⑵ : 总结


打入编辑的资料(edit)的网页要做三個设定。

设定的內容请参考这里

「config」文件夾里的「routes.rb」文件里,追加「edit

 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」文件的「edit」。

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

设定选择编辑的资料的「.find(params[:id])」跟,用html显示标记「@post」

在「app > views > 资料库的名字」的文件夾里的「edit.html.erb」里,设定內容。

 edit.html.erb
1 2 3 4 5 6 7 8 9 10 11 <h1>编辑投稿</h1> <hr> <%= form_for @post do |f| %> <p>内容</p> <%= f.text_area :content %> <p>地方</p> <%= f.text_field :place %> <hr> <%= f.submit "更新" %> <% end %> <a href="/posts/<%= @post.id %>">返回投稿资料</a>

在网页上,显示更新的资料的输入框跟发信按钮

 form_for

<%= form_for @设定的标记 do |喜欢的名字| %>指定要编辑的资料,
<% end %>之间作资料的输入框跟「更新(update)」的发信按钮。

 输入框・发信按钮

打入<%= 名字.输入框 :框子的名字 %>作资料的输入框,
打入<%= 名字.submit "显示的文字" %>作「更新(update)」的按钮。
※ 短的文章的话名字.text_field,長的文章的话名字.text_area,数字的话名字.number_field设定內容。

设定完了之后,在terminal上打入「rails s」之后、用浏览器打开网页。
「打入编辑的资料」的网页,从0.0.0.0:3000/资料库的名字/id号码/edit打開。

 使用Windows的话,打入localhost:3000/资料库的名字/id号码/edit打开。
到这里,作了打入编辑的资料(edit)的网页了。

接着,作作看「编辑资料(update)」的网页吧。

设定的內容请参考这里


 ⑥ : 编辑资料(update)


到这里设定了打入编辑的资料(edit)的网页了。

这个跟「新增资料(create)」的网页一样,还需要设定编辑资料的资料操作。
那么,在这里做做看资料的编辑吧!
这一次设定的资料操作的方法是,在第4章做的

1 Post.find(1).update(:content => "晚安")

这个內容。设定操作资料的地方(posts_controller.rb)里,设定这个內容。 从「打入编辑的资料(edit)」的网页拿來资料之后,用上面的操作资料的方法编辑资料的內容。
※ 这个网页是从「打入编辑的资料(edit)」的网页移動的,所以不用在浏览器上打入URL。

在这里设定
  • 用「打入编辑的资料(edit)」的网页上打入的资料,编辑资料
  • 显示编辑完成的网页

那么,做做
  • 「七个网页的设定」
  • 「资料操作的设定」
  • 「网页內容的设定」
这个三个设定吧!


 ⑴ : 设定网页


 首先,设定七个网页中使用哪一个网页的设定吧

那么打开,设定七个网页的文件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

內容已经有编辑过了吧。

应该跟上面的內容一样子已经追加了「update」吧。这样子设定好「编辑资料(update)」的网页了。
 那么设定看「操作资料」的网页吧。

在设定「posts」资料库的资料操作的「posts_controller.rb」文件上追加设定。

用Sublime Text打开app > controllers > posts_controller.rb」文件吧。
※ 使用Sublime Text打开文件的方法请参考这里
 使用Windows的Sublime Text打开文件文件夾的方法请参考这里


打开之后,在「def update」跟「end」之间设定下面的设定吧。

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


23 24 25 26 def update @post = Post.find(params[:id]) @post.update(params.require(:post).permit(:content, :place)) end

这一次设定的两行也是,应该在哪里看过的设定吧。
第一行的@post = Post.find(params[:id])
「显示一个资料(show)」的网页,「打入编辑的资料(edit)」的网页上使用过。

 那么,第二行是在做什么呢?

在第二行,按着打入的资料「params」,更新(update)选择的资料「@post」。
※ 详细请参考这里
「新增资料」的时候也设定过,同样的內容吧。

 posts_controller.rb
1 2 3 def create @post = Post.create(params.require(:post).permit(:name, :content, :place)) end

在这个「params」的部分里面有,从「打入编辑的资料(edit)」网页送來的资料。

在这个「params」里面放name是'名字',content是'内容',place是'地方'等等的资料。
然后,为了不要改变指定的资料以外的资料,设定「require」跟「permit」。

在这里设定的內容是,
  • 「posts」资料库的「name」的框子
  • 「posts」资料库的「content」的框子
  • 「posts」资料库的「place」的框子
以外的框子不要更改


 资料的编辑(update)」也一样。

1 @post.update(params.require(:post).permit(:content, :place))

在这里使用「编辑资料」的「update」,所以设定的「@post

 post_controller.rb(第24行)
24 @post = Post.find(params[:id])

里,只能编辑
  • 「posts」资料库的「content」的框子
  • 「posts」资料库的「place」的框子
的內容的操作资料的方法。

 用从「打入编辑的资料(edit)」的网页拿來的「books」资料库的「name」「price」「page」的框子,「编辑资料(update)」的网页的资料操作是怎么样设定呢?


1 2 3 4 def update @book = Book.find(params[:id]) @book.update(params.require(:book).permit(:name, :price, :page)) end

 最後做做看网页的设定吧!

打入编辑的资料点击「登录」按钮之后,会显示下面图像一样子的网页。 Chrome posts 1 update 1 首先,用Sublime Text打开的「myapp」上,打开app > views > posts吧。
里面有update.html.erb文件吗?如果有的话,打开看看!

在这个文件里设定,在「打入编辑的资料(edit)」的网页上点击按钮之后,显示的网页的內容。

那么,编辑这个update.html.erb文件吧!

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


1 2 3 4 5 6 7 8 9 10 <h1>投稿编辑好了。</h1> <hr> <p>名字</p> <%= @post.name %> <p>内容</p> <%= @post.content %> <p>地方</p> <%= @post.place %> <hr> <a href="/posts">返回主页</a>

 这里是在设定什么呢?

在这里显示编辑后的资料。
详细的內容请参考,「显示一个资料(show)」的网页,「新增资料(create)」的网页吧。
那么显示看网页吧!
※ 一起点击「Command」跟「c」停止,用rails s打开的服务器之后,再打入「rails s」吧。


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


做完之后,打开「0.0.0.0:3000/posts/1/edit」吧!
 使用Windows的话,打开「localhost:3000/posts/1/edit」吧。

打开后打入自己喜欢的内容之后,点击更新的按钮吧! Chrome posts 1 update 1 显示上面一样子的网页了吗?

出來了的话,用Sequel Pro / SqliteBrowser,或者打开「0.0.0.0:3000/posts/1」看看內容有沒有更新!


 ⑵ : 总结

在这里做了「编辑资料(update)」的网页的设定。

设定的內容,请参考这里

在「config > routes.rb」文件上,设定「update

 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」文件里的「update」设定內容。

 posts_controller.rb
1 2 3 4 def update @post = Post.find(params[:id]) @post.update(params.require(:post).permit(:content, :place)) end

选择要编辑的资料之后,在设定编辑的资料的「update」里指定资料库(require)跟框子(permit)

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

 update.html.erb
1 2 3 4 5 6 7 8 9 10 <h1>投稿编辑好了。</h1> <hr> <p>名字</p> <%= @post.name %> <p>内容</p> <%= @post.content %> <p>地方</p> <%= @post.place %> <hr> <a href="/posts">返回主页</a>

沒设定网页的內容也可以编辑资料,可是利用的人会有一点不方便,所以不要忘记设定网页的內容吧!

「编辑资料(update)」的网页是在「打入编辑的资料(edit)」点击按钮之后会移动到的网页,所以不用打入URL。
※ 网页的URL,应该是「0.0.0.0:3000/posts/id号码」。
到这里,资料的编辑也做好了。
剩下的也只是资料的删除而已了!

设定的內容请参考这里


 ⑦ : 删除资料(destroy)


这个是,这个章最后一个网页的说明。
最后解释「资料的删除(destroy)」吧。
在这里设定的內容可以说是,在「rails c」做的

1 Post.find(3).destroy

的操作资料的內容。
首先,像下面的图像一样「显示一个资料(show)」的网页上追加移动到「删除投稿」的网页的连接, Chrome posts 1 add destroy 点击连接之后,会移动到「删除了」的网页。 Chrome posts 1 destroy 在「显示全部的资料(index)」的网页上可以看到,像下面的图像一样资料已经删除了。 Chrome posts all after destroy 所以在这里设定
  • 追加移动到删除资料的网页的设定
  • 操作资料的设定
  • 显示网页的设定
这个三个內容。

那么,开始做「删除资料(destroy)」的设定吧!


 ⑴ : 设定网页


差不多记住了,怎么样设定网页了吧?
  • 七个网页的设定
  • 操作资料的设定
  • 显示网页的设定
这个三个。
 首先,從「七个网页中使用哪些网页」的设定开始作。

那么打开,七个网页的设定文件「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

內容已经有编辑过了吧。

跟上面一样,有沒有「destroy」的內容吗?
有的话,已经设定好使用「资料的删除(destroy)」的网页了。
 接着做「操作资料」的设定吧。

在设定「posts」资料库的资料操作的「posts_controller.rb」文件上,追加设定。

用Sublime Text打开,app > controllers > posts_controller.rb把。
※ 使用Sublime Text打开文件的方法请参考这里
 使用Windows的Sublime Text打开文件文件夾的方法请参考这里


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

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


28 29 30 31 def destroy @post = Post.find(params[:id]) @post.destroy end

可以理解这个內容吗?
首先在

29 @post = Post.find(params[:id])

这里选择删除的资料(请参考这里showedit)之后,删除资料。

这里面的內容也可以用

1 2 3 def destroy Post.find(params[:id]).destroy end

设定。

但是这样子不能在网页上显示删除的资料,所以要设定「@post」的标记。

 删除「tweets」资料库里的资料的资料操作要怎么设定呢?


 tweets_controller.rb
1 2 3 4 def destroy @tweet = Tweet.find(params[:id]) @tweet.destroy end

 那么,设定网页的內容吧!

首先设定点击「删除投稿」之后,移动到「删除资料(destroy)」的网页的连接。 Chrome posts 1 add destroy「显示一个资料」的网页的「show.html.erb」追加这个设定。
首先用Sublime Text打开的「myapp」上,打开app > views > posts吧。
从这里打开show.html.erb吧!

 show.html.erb
1 2 3 4 5 <h1>投稿</h1> <p><%= @post.name %></p> <p><%= @post.content %></p> <p><%= @post.place %> <p><a href="/posts">返回主页</a></p>

內容应该是这样子。

那么,在这里追加移动到「删除资料(destroy)」的网页的设定吧!

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


1 2 3 4 5 6 <h1>投稿</h1> <p><%= @post.name %></p> <p><%= @post.content %></p> <p><%= @post.place %> <p><a href="/posts">返回主页</a></p> <p><a href="/posts/<%= @post.id %>" data-method="delete">删除投稿</a></p>

在这里追加的行跟,在显示全部的资料(index)的网页上追加的移动网页的设定(连接)很像。

 index.html.erb
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 %>

不同的是,里面的「data-method="delete"」的內容。

移动到删除的网页的设定要「data-method="delete"」追加,
<a href="资料库的名字/选择的id" data-method="delete">内容</a>
设定內容。

这一次的「选择的id」是,用资料操作设定的,

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

用「@post」的「@post.id」显示「id」

 show.html.erb
6 <a href="/posts/<%= @post.id %>" data-method="delete">刪除投稿</a>

这样子作连接。

这样,移动到「删除资料(destroy)」的网页的设定好了!

 移动到删除「songs」资料库的「id是100」的资料的「删除」的连接要怎么设定好呢?


1 <a href="/songs/100" data-method="delete">删除</a>

接着设定,删除完成之后移动到的网页吧!

点击「删除投稿」之后,显示下面一样的网页。 Chrome posts 1 destroy 首先用Sublime Text打开的「myapp」里,打开app > views > posts吧。
这里面的destroy.html.erb是,删除资料之后会显示的「删除资料(destroy)」的网页。

那么,看看里面的內容吧!

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


1 2 3 4 5 6 7 <h1>删除內容了</h1> <hr> <p>名字:<%= @post.name %></p> <p>内容:<%= @post.content %></p> <p>地方:<%= @post.place %></p> <hr> <a href="/posts">返回主页</a>

学到这里的话,里面的內容应该大概可以理解了吧。

说明內容的话,
显示在资料操作选择的资料「@post」。
详细的內容,请参考show」「create」「update吧。

利用的人会有一点不方便,所以不要忘记设定这里的內容哦!
那么,在網頁上删除资料吧!
※ 一起点击「Command」跟「c」停止,用rails s打开的服务器之后,再打入「rails s」吧。


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


移动到,例如说像0.0.0.0:3000/posts/1的,「显示一个资料(show)」的网页吧。

有沒有追加删除的连接了吗? Chrome posts 1 add destroy 有设定好的话,点击删除投稿的按钮吧!有沒有显示下面一样子的网页了吗? Chrome posts 1 destroy 做完了的话,「显示全部的资料(http://0.0.0.0:3000/posts)」的网页或者,用Sequel Pro / SqliteBrowser看看資料有沒有删除! Chrome posts all after destroy


 ⑵ : 总结

「删除(destroy)」的网页的设定有三个。

设定的內容请参考这里

「config > routes.rb」文件里,设定「destroy

 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」文件里,设定「destroy

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

选择要删除的资料,设定编辑之后,编辑的后面加「.destroy」

「app > views > 资料库的名字」的文件夾里的「destroy.html.erb」上,设定內容。

 destroy.html.erb
1 2 3 4 5 6 7 <h1>删除投稿了</h1> <hr> <p>名字:<%= @post.name %></p> <p>内容:<%= @post.content %></p> <p>地方:<%= @post.place %></p> <hr> <a href="/posts">返回主页</a>

內容设定什么都可以,但是沒设定內容有一点不方便,所以至少设定返回主页的连接吧。


删除资料(destroy)的网页上,不能从浏览器url的打入移动到网页。
所以到「删除资料(destroy)」的网页的移动

1 <a href="/posts/<%= @post.id %>" data-method="delete">删除投稿</a>

这样,
<a href="资料库的名字/选择的id" data-method="delete">内容</a>
设定连接。
到这里辛苦你了。最後做总结。

设定的內容请参考这里


2 : 这个章的总结

用Ruby on Rails作的网页,按着资料操作的方法有七种。

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

显示各个网页要设定三个內容。
  • 七个网页中使用哪些网页的设定
  • 在「config > routes.rb」里设定
  • 操作资料的设定
  • 「app > controllers」里的「资料库的名字_controller.rb」文件上设定
  • 网页的设定
  • 「 app > views > 资料库的名字」里作html文件设定內容。

说明各个设定。

设定的內容请参考这里

「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


设定操作资料,显示网页的內容,必须作设定的文件跟文件夾。
做这个,要在terminal上打入

 terminal
1 rails g controller 资料库的名字

的內容。 Terminal rails g controller posts 如果出现这样子的內容的話OK。

在这个命令,作出來的
  • 「app > controllers > 资料库的名字_controller.rb」是操作资料的文件

  • 「app > views」是显示网页的文件
在各个文件文件夾里,设定內容。
在这里说明追加设定之前要设定的內容。
  • 资料操作
  • 「app > controllers > 资料库的名字_controller.rb」里,追加下面一样的內容。

     posts_controller.rb
    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

  • 网页
  • 「app > views > 资料库的名字」里,保存下面的文件。
    ※ 保存文件的方法,请参考这里

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

在这个「资料库的名字_controller.rb」里追加各个操作资料的方法,各个html文件上追加內容。
各个说明请参考下面!


  用Ruby on Rails作网页的说明到这里了。这样子应该可以作简单的网页吧?

可是现在的內容又不好看又不方便。在下章,咱們吧这个网站设定的又漂亮又方便吧!

在这个章设定的內容请参考这里