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行參數可以自行轉換一下，陣列內的資料會出現不同的排序，體會看看各種參數表達意義。