Rails API 學習紀錄 (Part 1)


此文章是 Rails 傳遞 JSON API 理解過程紀錄

  • 首先建立一個 Rails 專案
$rails new todo_ep1 --api

成功啟動server $rails s 之後 不意外會是一個成功的基本歡迎首頁

  • 建立一個 Scaffold專案
rails g scaffold todo task:text

出現該有的 models 和 controller 後

執行 $rails db:migrate 建立資料庫

重啟專案後 到路徑 http://localhost:3000/todos 會發現頁面是一個空陣列

  • 進到 rails c 裡面 用 console 新增 seed 資料庫產生 json 資料

    $ Todo.create(task: 'we made this from the rails console')
    

    重整頁面後可以看到有一筆陣列 內容是從console 裡新增的沒錯!

  • 使用 seed 製作資料庫內容
    在 seed.rb 寫上

    10.times do 
      Todo.create(task: 'This is a seeded, default task')
    end
    

    重新整理網頁並確認頁面都新增了seed.rb用迴圈建立的 json 陣列資料

  • 使用 Cors gem
    在gemfile 裡面已經有註解掉的 gem 'rack-cors'
    反註解後 在終端機輸入 $bundle 安裝 重啟server
    依照文件上的操作 在 application.rb 複製貼上文件上的程式碼
    (此專案為rails6.0 這邊要依照文件上指示不同的版本操作)

  • 跨 HTTP 操作
    修改原專案 http://localhost:3000 改為 http://localhost:3001
    ctrl + c 中斷server 接著輸入

    $ rails s -b 0.0.0.0 -p 3001
    

    重啟 server 前往網址 http://localhost:3001/todos
    網頁如果一樣是那11個 hash 的 json 陣列就表示成功囉!

  • 跨域傳送json
    製作另個網頁欄位準備接收 json 資料
    1.開啟新的VSCode新增index.html

2.新增 javascript 將localhost:3001的json parse 到需要的 html 的console

成功之後 重整 index.html 頁面 進console會看到傳遞成功的陣列

3.傳遞資料給index.html到對應的 div 中

在第11行參數可以自行轉換一下,陣列內的資料會出現不同的排序,體會看看各種參數表達意義。

#RoR #Rails #ruby #JSON #API






Related Posts

網路溝通、HTTP 協定

網路溝通、HTTP 協定

# 第一次夜訪鹽巴,就失敗

# 第一次夜訪鹽巴,就失敗

[23] 強制轉型 - 明確的強制轉型、Strings <> Numbers、日期轉 Number、位元運算子

[23] 強制轉型 - 明確的強制轉型、Strings <> Numbers、日期轉 Number、位元運算子




Sponsored



Comments