---
# System prepended metadata

title: 4/20
tags: [Ruby]

---

###### tags: `Ruby`
<style>
img{
    border: 5px solid #aaaa;
    width: 100%;
}

</style>
[TOC]
# 4/20

# 製作留言區
![](https://i.imgur.com/5zbmU8v.png)
![](https://i.imgur.com/V7GDKDa.png)

## route
![](https://i.imgur.com/Gmg0ur4.png)
## controller
![](https://i.imgur.com/QdODMfu.png)
## view


## commentcontroller
![](https://i.imgur.com/anLDj9E.png)
![](https://i.imgur.com/ycT3lz4.png)
按下create會到這個頁面並顯示ok
### 幫留言加驗證
![](https://i.imgur.com/tcSg5BI.png)
### 建立關聯
![](https://i.imgur.com/IiCOBHw.png)
![](https://i.imgur.com/RoLLDbC.png)
### 篩選參數
![](https://i.imgur.com/0WBwkeV.png)
![](https://i.imgur.com/v8qZ66n.png)
因為和item、user有關連所以需要傳入這兩個的id但current_user這時是email
![](https://i.imgur.com/VWOb451.png)
改為id
![](https://i.imgur.com/RIDNOUm.png)
application.controlle裡因為session已經改成id那該如何拿到user的資料?用User.find(id)所以每次用current_user就是再撈資料庫
![](https://i.imgur.com/XUMsd0h.png)
用find找不到session時會發生錯誤所以用find_by找不到會給nil
![](https://i.imgur.com/VFTvcZw.png)
![](https://i.imgur.com/2pCI8RY.png)

![](https://i.imgur.com/ayqtmri.png)
### 測試
![](https://i.imgur.com/e7aQH5n.png)
![](https://i.imgur.com/ugP8eG8.png)

### 關聯用法
![](https://i.imgur.com/RDOFsCa.png)
owner has_many stores就會有4個方法
![](https://i.imgur.com/XrcPsxE.png)
就可以直接新增商店
![](https://i.imgur.com/8xyX3qJ.png)
### 給@comment參數
comment有item和user方法因為它屬於他們
![](https://i.imgur.com/PFoears.png)
![](https://i.imgur.com/fi6CZFy.png)
方法一
![](https://i.imgur.com/WtSpRkB.png)
方法二、三
![](https://i.imgur.com/SrbNzYI.png)
### 用render保留資料
### 顯示留言
![](https://i.imgur.com/pFFgmwM.png)
![](https://i.imgur.com/IKdAs6s.png)
使留言排序新的在最上面
![](https://i.imgur.com/fJ6cGkA.png)
#### 方法二
![](https://i.imgur.com/yL22xWS.png)
### 套bootstrap
![](https://i.imgur.com/iMlHCKl.png)
![](https://i.imgur.com/3E9eZrd.png)
![](https://i.imgur.com/UsRMjL7.png)
### N+1問題
![](https://i.imgur.com/88kSZlc.png)
解決方法
![](https://i.imgur.com/vxJ6zmo.png)
Eager loading
### save後不處裡會自動view裡的同名檔案(可以是js檔)
![](https://i.imgur.com/oB5inzr.png)
### 把留言用render的方式呈現
![](https://i.imgur.com/atetSo5.png)
![](https://i.imgur.com/70jgXVK.png)
去找comments裡的comment.html.erb,comment:comment代表給區域變數
把原來的內容丟到erb裡面
### js操控
![](https://i.imgur.com/9kKHzDd.png)
這樣寫似乎js看不懂所以
![](https://i.imgur.com/2ZFQ9ka.png)
但let並不能使用2次會錯誤代表不能送2次comment
![](https://i.imgur.com/hk5yQhF.png)
所以改var
![](https://i.imgur.com/5jgNsZy.png)
#### 送出完要消除內容
![](https://i.imgur.com/ka18aeR.png)
找到他的id
![](https://i.imgur.com/59hqtoL.png)
#### 新增愛心
##### 下載加引入fontawesome
![](https://i.imgur.com/QWBG6Hr.png)
![](https://i.imgur.com/khyjbyb.png)
![](https://i.imgur.com/mygoBhY.png)
![](https://i.imgur.com/sxABjWo.png)
![](https://i.imgur.com/MUMlHA6.png)
讓他可以按
![](https://i.imgur.com/dhXdAdy.png)
##### 按下後會轉址
![](https://i.imgur.com/AoTVvWr.png)
![](https://i.imgur.com/ZtRSsFl.png)
![](https://i.imgur.com/lz5rsjr.png)
script在application裡引入的
##### 使用stimulus
![](https://i.imgur.com/mxCFjIG.png)
自動新增
![](https://i.imgur.com/FW0UG1J.png)

![](https://i.imgur.com/ynZF9bX.png)
這樣寫會自動找到hello_controller
![](https://i.imgur.com/DPrTqpc.png)
data-action="hello#heart會到hello_controller找到heart action
![](https://i.imgur.com/dk0tphZ.png)
就可以避免按下愛心轉址
![](https://i.imgur.com/hJ2FBGr.png)
覺得hello不適合可以改名字,controller也要改喔
![](https://i.imgur.com/Z0ii3nC.png)
設定target
![](https://i.imgur.com/Txqca6w.png)
![](https://i.imgur.com/1vTb89v.png)

## 時間複雜度
O(N) 搜尋時間隨筆數增加
建立索引可以增快速度

## N+1 Query 解決
![](https://i.imgur.com/CgoqsNt.png)
一次把所有email、created_at一次撈出來

![](https://i.imgur.com/goAvTCo.png)
![](https://i.imgur.com/DUbYmXb.png)
views/comments下新增comment.html.erb把留言區放在這


![](https://i.imgur.com/tmxNMAI.png)


