###### 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)