全端網站設計範例:後端登入驗證機制

本篇為「全端網站架構」中的後端範例及細節。需先建立專案至後端伺服器啟動(請參閱上一篇:全端網站設計範例:後端新增 Apollo server)。

登入機制的實做會用 JWT Token 儲存在瀏覽器 LocalStorage 的方式實做,不會在後端儲存使用者的 Session。雖然這種做法無法在後端撤銷特定使用者的登入 Token,但足夠輕量且開發較為容易。

繼續閱讀

全端網站設計範例:後端新增 Apollo server

本篇為「全端網站架構」中的後端範例及細節。需先建立專案(請參閱上一篇:全端網站設計範例:後端專案建立)。

由於此專案前後端用 GraphQL 作為 API 的形式,考慮到便利性,前後端都會使用 Apollo 所提供的框架。

主要參閱 Get started with Apollo Server 這篇官方教學文來實做。

繼續閱讀

全端網站架構

本篇記錄建置一個全端網站的架構設計概述,使用的框架、套件如下

  • Backend - Node.js + Apollo Server (GraphQL)
  • Frontend - React + Apollo Client (GraphQL)
  • Database - MySQL
  • Deployment - AWS EC2, Nginx
繼續閱讀

RegExp 正規表達式 - JS 學習筆記

RegExp 為 Regular Expresssion 的縮寫,中文翻譯成「正規表達式」,又或是「正規表示法」、「正則表達式」等等。用來表達符合某個句法規則的字串。

例如你想在一份客戶的資料中,搜尋所有台灣手機號碼,你會怎麼做呢?

首先你知道手機號碼必定是數字,而且是「09」開頭的,總長度又是 10。
這時,正規表達式就派上用場了,你可以將剛剛描述台灣手機號碼的幾個規則用正規表達寫出來,用簡單一行程式碼就過濾出一篇文章中所有符合這個規則的手機號碼!

具體要怎麼做呢?

繼續閱讀

JavaScript 的兩個重要觀念:Execution Context, Lexical Environments - JS 學習筆記

若要深入學習 JavaScript,就需要認知到你寫的這段程式碼,是如何被翻譯給電腦執行的。以下三個名詞則是了解 JavaScript Engine 是如何運作的重要觀念:

  1. Lexical Environments - 詞彙環境
  2. Execution Context - 執行環境

如果你是剛接觸這門語言,甚至是剛接觸程式語言的人,或許會傻在這裡。我起初見到這幾個名詞的時候,也愣了很久,一愣就是兩三年,程式碼都寫了萬行了,還是沒有很了解其背後運作的原理。但,這幾個觀念對於想學好 JavaScript 的人來說,絕對是不得不弄懂的檻。

繼續閱讀