1分鐘製作codepan的自動刷新 - Browser-Sync 功能 涉及到畫面製作與調整的專案, 在開發階段常常需要常常檢視代碼畫面的連動 不想要頻繁的手動刷瀏覽器, 也不想遷就codepan的介面, 請愛用Browser-Sync npm網址: https://www.npmjs.com/package/browser-sync 詳細說明: https://browsersync.io/ 兩個步驟搞定 step 1 - 安裝 npm install -g browser-sync 跟nodemon一樣, 建議使用全域安裝, 這樣每個專案都可以使用 step 2 - 執行 假設我們已經在localhost3000執行要監看的專案 此時你需要修改一下執行命令 官網上有詳細說明, 但是這邊我分享我修改後的命令 在你的專案路近下, 終端機輸入此命令 browser-sync start --proxy "localhost:3000" --files "./**/**/**" 瀏覽器會開啟一個新視窗(應該是http://localhost:3001) 這樣你變動任何檔案 例如: html, css, hbs, js 都會自動刷新瀏覽器 至於涉及到伺服器重啟動作, 則是需要安裝/使用nodemon
發表文章
四個步驟使用Helper (express-handlebars) 目的 handlebars檔案(已下簡稱.hbs)中的{{#if }} 只能依照布林值做反應, 不能夠做 === 這樣的判定 要讓.hbs也能做等於的判定可以使用helper來實現 Step 1. 創建一個hbs-helper.js 檔案, 檔名跟位置沒有限定. 我這邊是直接放在根目錄. 也可以放在public Step 2. hbs.helper.js 中 輸出一個定義好helper的函式 其中 eq 就是之後要用來呼叫的helper的函式名稱 Step 3. 於 app.js 呼叫此檔案, 並於app.engine中加入helper的設定 const hbsHelper = require ( './hbs-Helper' ) app . engine ( 'hbs' , exphbs . engine ({ defaultLayout : 'main' , extname : 'hbs' , helpers : hbsHelper //這邊加入helper的設定 })) Step 4. 現在就可以.hbs中 使用定義好的helper做判定了 原本的 {{#if}} 後空格, 接一個括號 (A, B, C) A = 定義的函式名稱 B = 函式的第一個參數, 這邊是函式中的 a C = 函式的第二個參數, 這邊是函式中的 b 都是用空格隔開 {{ #if ( eq this.categoryId 1 ) }} < i class= "fa-solid fa-house fa-2x item-icon m-1" ></ i > {{ /if }} 補充 Helper裡面還有一個很常用的東西是option 但是比較負責, 等之後遇到實際運用在寫吧
AC_A3老爸的私房錢 (記帳本) 你為何會選擇這個專案？ 這個專案涵蓋了很多簡單又常用的功能. 使用者的註冊登入, 資料庫的CURD與簡單的計算跟sorting. 日後我有一個side project要做一個PM用的ERP 所用到的功能跟這個會很貼近. 所以是一個用來強化記憶的好專案 你使用了什麼技術？ 這是一個佈署再Heroku上的網站應用, 是用Node.js中的Express架構來完成的 前端是以express-handlebars, bootstrap, 以及一些手刻的CSS 後端是用mongoose連接mongoDB做資料管理 註冊登入功能是使用passport搭配bcrypt.js做加密 哪部分你相對能掌握？哪裡花了最多時間？ Express的架構以及Mongoose的資料庫管理是我最有信心的 花最多時間的是登入功能, 因為涉及到很多套件的使用例如passport, local, session, facebook等 套件 而每個套件又有自己的函式與參數設定. 這部分我需要看著官方文件做. 還沒辦法都記起來 過程中碰到什麼困難？又如何克服？（例如：查找網路文件） 有一個地方卡很久是在依照記帳類別來顯示對應的icon的功能 這個功能我上網找了一下可以用handlebars中的helper來完成 我試做了一下沒有做出來, 而且在做的過程有點牴觸. 因為這個功能只有一個地方用到, 專門為它去創一個helper覺得有點浪費. 所以後來就直接在資料處理這邊用邏輯的方式處理掉了 過程中你有對哪個技術有特別深刻的學習？ 非同步處理 在跟資料庫索取資料, 處理資料, 回傳前端這部分涉及到同步/非同步的任務 從callback, promise, async/await的方式都試過. 目前是用比較熟悉的promise語法來完成 但是看了網路上很多人推崇async/await的寫法, 因為更直觀, 日後小組維護程式碼更容易 所以這禮拜想把promise的地方用async改寫看看, 熟悉一下. 還有一個就是前端設計這塊, 因為類似的專案很多...