[學習心得]11/11-11/17

yuchun33 commented 6 years ago

11/11 星期日：Express 的作用

看了 3 天，第一天先看第一期的 Express（上），再看幾篇教學文章，再看 MDN 的教學文章，都不是很能理解，今天又回去看第一期的影片，瞬間懂它了，雖然還沒用，但可以想像會很好用。影片最後有 Demo 怎麼用 Express 實作，用實作來學習一個新的套件對我來說是一個滿清楚的方式，未來學習也可以試試看找 Demo。
Express 讓路徑變得彈性了，不一定要歸屬於哪個資料夾。Express 讓後端環境隱形了，不用下載 apache、也不用使用後端語言，但還是需要資料庫。
Express 是一個有很多 library 的框架，有更多規則。這幾週的內容讓我覺得有 library、module、框架，可以讓實作更簡單、安全、完整、整齊，我很喜歡，但變成要花時間知道這些規則才可以用得美。
handler：用在路徑是決定該頁面的功能（功能要在哪個路徑執行(?）
controller：在某個路徑下要做的事，包含搜尋資料庫和輸出畫面（但是是交給 model(? 和 view 做）
view：判斷要輸出什麼內容的邏輯檔案（或 function）
model：和資料庫溝通

4~7：不同路徑分別會有對應的 controller，controller 其實就是一個 function， function 內包含要取得的資料，和要輸出到哪個頁面。

yuchun33 commented 6 years ago

11/12 星期一：留言板 2.0

1.0 待修

session 通行證是每次都不同的，不是在資料庫存另外一個永久亂碼。
頁數問題新增留言可以抽掉一個舊的、刪除留言可以多 append 一個的。
有存在資料庫的東西都是要用的時候再撈一次。
alert vs. confirm
2.0 checklist

動手前先想好架構 routers

app.get('./login', 登入頁面)
app.post('./login', 判斷登入→通過的話轉留言板)
app.get('./login', 註冊頁面)
app.post('./login', 審核註冊→通過的話轉留言板)
app.get('./index', 留言板主頁面)
app.post('./newpost', 新增留言)
app.post('./updatepost', 修改留言)
app.post('./deletepost', 刪除留言)

練習：MVC、ejs、promise、Bootstrap、ORM、static、用 nodemon 自動更新
好習慣：好好命名、寫註解、共用 function 存在 utils、用環境變數輸入密碼、路徑和資料夾
Express
用 post 取資料要使用套件 body-parser
連線資料庫跟使用資料庫的 function 的區分?
補充
我知道你懂 hoisting，可是你了解到多深？ 看過

yuchun33 commented 6 years ago

11/13 星期二：一直碰到學過但遇到還是不確定的問題

如何區分 db 的操作？現在：連線資料庫、建立新表格在同一個檔案；輸入資料、查詢資料在另一個檔案。待確認
使用 nodemon 失敗，原本是在 mentor-program-2nd 的 package.json 設定 scripts，但發現找不到檔案，才嘗試在作業底下初始化 npm 和設定 package.json，就成功了，但原始目錄已經有一個 package.json 了？待確認
使用 sequlize 遇到選不到 table（model）的問題，也沒有自動新增 createdAt，第一個問題用原本的 sql 指令操作，但就失去了 ORM 的優點，第二個問題自己放入 js 的 DATE()
session 套件還不會用

~~promise 的非同步會回傳失敗，要這樣用：~~ wrong

existUser: function(u_email){
//return 加在這裡。 ****錯的，是因為有回傳 promise 才被當成 true，並不是回傳 then 裡面的 true****
return DB.getAndCreateUsersTable().findOne({where: {email: u_email}})
    .then(()=>{return true})
    .catch(()=>{return false})
}

require 傳送了哪些東西？只包含輸出的 function，但 function 用到的其他套件不會傳送（所以如果現在位置要用套件，還是要重新 require 一次？），但 function 還是可以用？待確認
補充
web.dev/learn 點進去過

aszx87410 commented 6 years ago

1.看起來滿 ok 的 2.可以這樣子做沒關係，但你要統一用跟目錄底下的 package.json 絕對也可以，應該只是設定錯誤 6.js 的 require 跟 php 的很不一樣，並不是直接複製貼上，而是看你 export 了哪些東西，所以對，如果你現在位置要用套件，要再 require 一次

yuchun33 commented 6 years ago

11/15 星期四：promise 的回傳，controller 的回傳是這樣用

loginHandler(req, res)=>{
    db.getUserNickname(req, username) //是回傳 promise
    //然後才操作這個 promise
    .then(result=>{
        req.session.nickname = result[0].nickname
    }).catch((err)=>{
        console.error('cant find this member', err);
    })
}

getUserNickname(req, u_email){
    //是回傳 promise
    return DB.db().query(`SELECT nickname FROM ${tableName} WHERE email=:email`,
    {replacements: {email: u_email}, type: Sequelize.QueryTypes.SELECT}
    )
    /*這邊全部都不要!
    .then(result=>{
        req.session.nickname = result[0].nickname
    }).catch((err)=>{
       console.error('cant find this member', err);
    })*/
}

promise 的非同步讓操作不斷失敗，卡住非常非常久，會了以後還發現這樣寫更直觀了，有順利從資料庫拿資料後 再（.then） 設定跟改變內容，可以發現好感動。星期二的第 5 點是錯誤的，並沒有有回傳 true，是回傳一個 promise 所以才被當成 true。

補充

你不可不知的 JavaScript 二三事#Day5：湯姆克魯斯與唐家霸王槍——變數的作用域(Scope) (1) 未看

aszx87410 commented 6 years ago

這樣就對了，恭喜學會 Promise XD

yuchun33 commented 6 years ago

補充

我要成為前端工程師！給 JavaScript 新手的建議與學習資源整理 看過
學員產品發表：用程式技能把創意付諸實現！ 看過
2017 前端工程師面試心得 看過
[心得] Web 面試經驗分享 未看

Lidemy / mentor-program-2nd-yuchun33