這並不是一個特定技術的教學文，我也是透過實作當中，不斷的找資料，達成想實作的需求喔。今天想先使用 Vite + Vue 3 + Vue Router 先將環境給...
後續要來實作登入的相關功能。這次打算來使用 JWT 的機制。 過去使用 session 一般最常見的登入方式，就是使用 session 機制，也就是會在伺服器端...
之前有安裝過 vue-router 這個套件，它就是可以用來做單頁式應用程式，可以讓你的網站速度效能變好，因為在點擊站內連結時，不會每次都重新整理頁面。 目前我...
在 webmix_efficiency 資料夾下，在串接 API 時，筆者之前都是寫 localhost 這樣的 API，所以當佈署到伺服器上時，會導致 API...
元件 SFC 寫法 在 Vue 3 的 SFC(Single-File Component，副檔名為 .vue) 語法當中，我們一般會寫以下的程式，也就是有三個...
終於可以先回到之前建立的 webmix_efficiency 資料夾了，也就是打算使用 Vue 3 來建立 Web APP，先在專案資料夾下執行以下指令： np...
今天要來安裝 Deno 的執行環境，因為之後要使用 Deno 程式語言，來撰寫 API，所以今天就先來安裝 Deno。 什麼是 Deno Deno 是一個針對...
你想學習網站架設嗎？你想瞭解如何做好網頁設計嗎？網站流程是什麼？網站需要哪些費用？在這篇文章中將會完整為你說明 如果想更完整瞭解關於網頁設計的相關教學，請參考下...
目前有一個資料夾 webmix_efficiency，也就是一開始使用 vite 架設出來的網站。 接下來要產出靜態網站，並 push 到 GitHub。 第一...
今天想要來建立註冊頁面，以及將首頁做點微調，並規劃一下後續的註冊流程。 微調首頁 更新 webmix_efficiency 資料夾中的 src/views/Ho...
目前我們已經安裝好 Deno 的執行環境了，接下來因為要使用 Deno 來撰寫 GraphQL API，所以今天先來安裝 GraphQL 的執行環境。 使用第三...
今天要來建立資料庫，以及使用 GraphQL 的 query 來抓取資料庫裡的資料。 建立 MySQL 資料庫 這裡我是使用雲端服務 DigitalOcean...
這邊呢，其實我先忽略註冊、登入密碼驗證。 主要先著重在我初次使用的產生 JWT 這樣的機制。 GraphQL 的 Schema 定義 在 webmix_api...
目前已經登入成功，那就先來將登入狀態處理一下，以及登出的功能。 驗證 JWT 的 API 在 typedefs.ts 檔案，先加上以下的 checkJWT 那...
今天就先來將 WebBuild.vue 這個頁面元件檔的版面，做些調整吧，也就是寫 CSS(使用 sass 語法)。可以先看一下結果畫面。 WebBuild.v...
今天要來整理上一篇文章中所寫的 graphql.ts 檔案，以便後續串接資料庫。在 GraphQL 的執行環境中，通常有兩個基本概念是 Schema 和 Res...
一般在架設網站的時候，都會有所謂的環境設定檔，常見的檔名為 .env，當然也有可能是其它的。 環境設定檔做什麼？ 環境設定檔最主要的用途，就是用來儲存一些設定類...
今天要來練習寫一下 GraphQL 基本的 CRUD。 先調整一個東西，就是將 users 資料表當中的 id 欄位，變成是 AUTO INCREMENT，執行...
在 webmix_efficiency 資料夾下，src/views/register.vue 就是註冊頁面，今天來寫 Vue 的基本練習，也就是 JS 的部份...
今天要來寫登入的 API 串接，取得 JWT 後，存至 localStorage。 將 Key 存在另個檔案 目前先用程式動態產生 key 的方式，之後有機會再...
已經寫好了註冊的 API，接下來要在 Vue 中，使用原生 JS 的 fetch 語法來串接。 事件綁定 在 webmix_efficiency 資料夾裡，sr...
今天是參與「2022 iThome 鐵人賽」的最後一天，就不寫程式了。 想談論一下寫的學習過程心得以及簡單的自介。 前後端分離架構及佈署 前端架構及佈署 使用了...
在上一篇文章當中，已經將網站 push 至 GitHub 上的特定 repo 了。接下來呢，就要透過 DigitalOcean 上的 Apps 服務，經過設定之...
接下來就倒數七天的文章了，今天想先闡述一下目前的架構，以及後續的佈署。 前後端分離，所以目前有兩個網站 兩個網站描述如下： 使用 Vite + Vue 3 +...
目前有三個頁面，分別是(以下列出本機端的範例網站)： 首頁(http://127.0.0.1:5173/)：這個頁面不論有無登入，都可瀏覽。 註冊頁(http...
先前所寫的 GraphQL API，筆者想要用 Docker 的方式，也就是打包成映像檔(Image)，然後做佈署。所以今天就來練習一下，怎麼打包成映像檔。 目...
登出功能原來是寫在 Home.vue 當中，但像這種登出功能，是很多頁面其實也會用到，像這類型的功能，如果能夠一直往父層去放的話，比較能達到所謂共用的目的。 所...
由於後續要做註冊及登入，所以呢，今天先來將註冊登入會用到的資料庫 migration 檔建立起來。 什麼是 migration 及 seed 檔 一般來說，在建...
今天要來寫註冊的 GraphQL API，以及註冊時，都會有密碼，密碼的部份，會使用 bcrypt 雜湊演算法來加密。 這邊會避免過多的邏輯判斷，所以就先著重在...
今天要來將 GraphQL API 的映像檔，佈署至 DigitalOcean 的 Apps 服務。 Dockerfile 建立映像檔 在 webmix_api...
Carlos Chang
iThome鐵人賽
看影片追技術