iT邦幫忙

2023 iThome 鐵人賽

DAY 12
0
自我挑戰組

Rails 手工打造自己的部落格 系列 第 12

Rails 手工打造自己的部落格 12 - CRUD 03

  • 分享至 

  • xImage
  •  

昨天做好了一個靜態網頁是我們的一大步成功,
今天我們就可以來好好地做一個,生成文章的系統!
先在index的地方建立一個新增文章的按鈕,

<h1> HAO 的小圈圈 </h1>
<%= link_to '新增文章', new_article_path %>

"<%%>" 是 ERB 的標記,是用來嵌入 Ruby 代碼片段,但不會將結果輸出到模板中,
如果要顯示的話,就要在前面加一個"=",
像是"<%= %>" 這樣就會把中間的內容渲染出來了。
再來看裡面的內容

  1. 前面的 link_to 就是這條代碼的屬性,它會自動轉換成HTML裡的 a link ,
  2. link_to 後面如果打""就代表是會顯示出來的文字
  3. 在後面呢,就是這個連結要去的路徑,這裡就是要去 article 的 new
    那我要怎麼知道我有哪些路徑可以用呢?
    有兩種方法:
  4. 從終端機看就要打指令 rails routes,這樣他會把所有的路徑全部叫出來,而且非常難閱讀,
    所以我們可以給他參數,指定他要給我們看的路徑
    那我後面加-c 只需要給他幾個字就會去找有符合的路徑名稱,算是有誠意的搜尋功能
 rails routes -c arti
      Prefix Verb   URI Pattern                  Controller#Action
        root GET    /                            articles#index
    articles GET    /articles(.:format)          articles#index
             POST   /articles(.:format)          articles#create
 new_article GET    /articles/new(.:format)      articles#new
edit_article GET    /articles/:id/edit(.:format) articles#edit
     article GET    /articles/:id(.:format)      articles#show
             PATCH  /articles/:id(.:format)      articles#update
             PUT    /articles/:id(.:format)      articles#update
             DELETE /articles/:id(.:format)      articles#destroy
  1. 直接在網址上面打不存在的路徑
    他就會有類似專用的搜尋介面,只要在裡面打上我要找的是什麼的路徑,他就會幫你搜出來。
    https://ithelp.ithome.com.tw/upload/images/20230927/20162679qk57oFvY2i.jpg

但我們做好路徑之後,點進去是空的,因為我們連頁面都還沒有生出來

製作new的頁面

像做index一樣,直接在views/articles的目錄新增一個 new.html.erb的檔案
這時候我們要做的就是建立表單!!
建立表單在HTML是使用 input 的屬性,但我們要用的是更酷的東西!

Form Helpers

直接翻譯就是,表單小幫手!搭拉~
那要用這個酷東西的話就要跟著他規定的語法來寫,不會用的話我們可以隨時翻Rails的文件來偷看一下
這時後我們就可以使用 form_with 來做,這裡需要的參數很簡單,
只需要讓他知道,你想把這個表單送進哪個 model 裡面就可,
也可以直接寫create的路徑給他,但那樣太囉嗦了,不符合工程師需要的高效率。
那我們的新增頁面就會長這樣

<h1>新增文章</h1>

<%= form_with model: @article do |f| %> 

  <%= f.lable '標題', :title %>
  <%= f.text_field :title %>

  <%= f.label '內容', :content %>
  <%= f.text_area :content %>

  <%= f.submit '新增' %>
<% end %>

OK 我們頁面都做好了,
我們再從首頁點一次"新增文章"的連結看看

這下最基本的東西都有了!
可以刻一點CSS給大家看,比較好閱讀

https://ithelp.ithome.com.tw/upload/images/20230928/20162679u0lSEvNjW7.jpg
這時我們可以試著在裡面打字,然後點擊 create
你會發現怎麼樣都無法建立
但不用慌張,
這一切都在我的預料之中!我們下回分曉!!


上一篇
Rails 手工打造自己的部落格 11 -CRUD 02
下一篇
Rails 手工打造自己的部落格 13 - CRUD 04
系列文
Rails 手工打造自己的部落格 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言