# 0426 Model關聯性、按讚、axios套件
###### tags: `Ruby / Rails`

## Tailwind
- [官網 安裝頁](https://tailwindcss.com/docs/installation)
- 複習：`$ npm install -D tailwindcss@latest postcss@latest autoprefixer@latest`
- -D 代表安裝到開發環境
- 可把安裝指令改成 `$ yarn` 開頭
npm 和 yarn不要一起裝

app/javascript/styles 隨便找一個檔案放

@tailwind base;
@tailwind components;
@tailwind utilities;

已解決：[參考04/29筆記連結](https://hackmd.io/3gaLOJXeQueex5QrbZ37Jg#tailwind-%E7%BA%8C)

---
## 多對多關聯
- [為你自己學 - Model 關連性](https://railsbook.tw/chapters/18-model-relationship.html)
- 新增「我的最愛」餐廳：第三方表格

$ rails g model FavoriteRestaurant user:belongs_to restaurant:belongs_to

- 因為多對多無法靠底線 id 存放對方資訊，需要另外建一個表格存放雙方底線 id 來做關聯
- 例子一（存貨及舖貨系統）
- 每個商店有很多商品
- 每個商品可以在很多間商店販賣
- 要知道這個商品在哪些商店販賣 or 這個商店有賣哪些商品
- store 跟 product 並不是 ==直接== 互相做has many
- 而是 ==間接== 透過另一個表格紀錄兩邊之間的關係
- 例子二（評價系統）
- 每個餐廳都可以被很多客人喜歡
- 每個客人都可以喜歡很多餐廳
- 要知道這個客人被哪些餐廳下好評 or 這家餐廳

model/user

has_many :restaurants  # owner

has_many :favorite_restaurants
has_many :pocket_list, through: :favorite_restaurants
                       source: :restaurant # 因為我們其實是要去找 restaurant
                       # 但是我們用 pocket_list 當他的名字，所以要把它連結回 restaurant
                       # 因為上面有一樣的 has_many :restaurants 所以要把它們分開

`models/restaurant.rb`

class Restaurant < ApplicationRecord
  acts_as_paranoid

  validates :title, presence: true
  belongs_to :user
  has_many :comments
  
  has_many :favorite_restaurants
  has_many :likers, through: :favorite_restaurants
                     source: :user # 因為我們其實是要去找 user
                   # 但是我們用 likers 當他的名字，所以要把它連結回 user         
  has_many :users, through: :favorite_restaurants  # owner
    # 其實直接寫也可以，因為上面沒有 has_many :users，就不會衝突
end

$ yarn add

## 代替 fetch 的套件
- [axios](https://github.com/axios/axios)
- 專門來做非同步傳輸的動作
- Performing a `POST` request

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

yarn init -y
import 跟 require 的不同?

/show
新增 data-id ='@restaurant.id'

---

要先在html新增 data-id ='@restaurant.id'
這樣才能在js抓到 dataset

/restaurant.js
let btn = document.querySelectoy(#like-btn)

likeBtn.addeventlistener('click', function(evt){
let id = evt.target.dataset['id']

ax.post(`/restaurant/${id}/pocket_list`)



})
利用這個方式取得id

---