iT邦幫忙

設計好網站相關文章
共有 30 則文章

技術 從零到一:網站架設和網頁設計流程的初學者指南

你想學習網站架設嗎?你想瞭解如何做好網頁設計嗎?網站流程是什麼?網站需要哪些費用?在這篇文章中將會完整為你說明 如果想更完整瞭解關於網頁設計的相關教學,請參考下...

鐵人賽 Modern Web DAY 30

技術 完賽,道路仍在

今天是參與「2022 iThome 鐵人賽」的最後一天,就不寫程式了。 想談論一下寫的學習過程心得以及簡單的自介。 前後端分離架構及佈署 前端架構及佈署 使用了...

鐵人賽 Modern Web DAY 29

技術 Vite 使用環境變數

在 webmix_efficiency 資料夾下,在串接 API 時,筆者之前都是寫 localhost 這樣的 API,所以當佈署到伺服器上時,會導致 API...

鐵人賽 Modern Web DAY 28

技術 佈署 - GraphQL API 的映像檔

今天要來將 GraphQL API 的映像檔,佈署至 DigitalOcean 的 Apps 服務。 Dockerfile 建立映像檔 在 webmix_api...

鐵人賽 Modern Web DAY 27

技術 佈署 - GraphQL API 程式打包成 Docker 映像檔(Image)

先前所寫的 GraphQL API,筆者想要用 Docker 的方式,也就是打包成映像檔(Image),然後做佈署。所以今天就來練習一下,怎麼打包成映像檔。 目...

鐵人賽 Modern Web DAY 26

技術 佈署 - 使用 DigitalOcean 的 Apps 服務佈署靜態網站

在上一篇文章當中,已經將網站 push 至 GitHub 上的特定 repo 了。接下來呢,就要透過 DigitalOcean 上的 Apps 服務,經過設定之...

鐵人賽 Modern Web DAY 25

技術 佈署 - vite build 出來的靜態網站,推到 GitHub

目前有一個資料夾 webmix_efficiency,也就是一開始使用 vite 架設出來的網站。 接下來要產出靜態網站,並 push 到 GitHub。 第一...

鐵人賽 Modern Web DAY 24

技術 佈署(Deploy) 簡述 - 前後端分離

接下來就倒數七天的文章了,今天想先闡述一下目前的架構,以及後續的佈署。 前後端分離,所以目前有兩個網站 兩個網站描述如下: 使用 Vite + Vue 3 +...

鐵人賽 Modern Web DAY 23

技術 使用 vue-router 來防護需登入,才可瀏覽的頁面

目前有三個頁面,分別是(以下列出本機端的範例網站): 首頁(http://127.0.0.1:5173/):這個頁面不論有無登入,都可瀏覽。 註冊頁(http...

鐵人賽 Modern Web DAY 22

技術 登出功能,練習寫一下使用 $emit 觸發自訂事件

登出功能原來是寫在 Home.vue 當中,但像這種登出功能,是很多頁面其實也會用到,像這類型的功能,如果能夠一直往父層去放的話,比較能達到所謂共用的目的。 所...

鐵人賽 Modern Web DAY 21

技術 Vue 頁面的登入狀態及登出

目前已經登入成功,那就先來將登入狀態處理一下,以及登出的功能。 驗證 JWT 的 API 在 typedefs.ts 檔案,先加上以下的 checkJWT 那...

鐵人賽 Modern Web DAY 20

技術 登入的 API 串接,取得 JWT 後,存至 localStorage

今天要來寫登入的 API 串接,取得 JWT 後,存至 localStorage。 將 Key 存在另個檔案 目前先用程式動態產生 key 的方式,之後有機會再...

鐵人賽 Modern Web DAY 19

技術 Vue 串接 GraphQL API(註冊會員) - 使用 fetch 語法

已經寫好了註冊的 API,接下來要在 Vue 中,使用原生 JS 的 fetch 語法來串接。 事件綁定 在 webmix_efficiency 資料夾裡,sr...

鐵人賽 Modern Web DAY 18

技術 Vue 的註冊頁面,練習使用 v-model 做雙向綁定 及 computed 做密碼檢查是否相同

在 webmix_efficiency 資料夾下,src/views/register.vue 就是註冊頁面,今天來寫 Vue 的基本練習,也就是 JS 的部份...

鐵人賽 Modern Web DAY 17

技術 註冊的 GraphQL API,密碼使用 bcrypt 雜湊加密(with salt)

今天要來寫註冊的 GraphQL API,以及註冊時,都會有密碼,密碼的部份,會使用 bcrypt 雜湊演算法來加密。 這邊會避免過多的邏輯判斷,所以就先著重在...

鐵人賽 Modern Web DAY 16

技術 使用 Deno 建立資料庫 migration 檔

由於後續要做註冊及登入,所以呢,今天先來將註冊登入會用到的資料庫 migration 檔建立起來。 什麼是 migration 及 seed 檔 一般來說,在建...

鐵人賽 Modern Web DAY 15

技術 Deno 程式讀取環境設定檔 .env

一般在架設網站的時候,都會有所謂的環境設定檔,常見的檔名為 .env,當然也有可能是其它的。 環境設定檔做什麼? 環境設定檔最主要的用途,就是用來儲存一些設定類...

鐵人賽 Modern Web DAY 14

技術 Vite + Vue3 建立頁面 - 首頁微調、建立註冊頁面、規劃註冊流程

今天想要來建立註冊頁面,以及將首頁做點微調,並規劃一下後續的註冊流程。 微調首頁 更新 webmix_efficiency 資料夾中的 src/views/Ho...

鐵人賽 Modern Web DAY 13

技術 寫一個 GraphQL API,回傳 JSON Web Tokens(JWT)

這邊呢,其實我先忽略註冊、登入密碼驗證。 主要先著重在我初次使用的產生 JWT 這樣的機制。 GraphQL 的 Schema 定義 在 webmix_api...

鐵人賽 Modern Web DAY 12

技術 登入機制驗證,淺談 JSON Web Tokens(JWT)

後續要來實作登入的相關功能。這次打算來使用 JWT 的機制。 過去使用 session 一般最常見的登入方式,就是使用 session 機制,也就是會在伺服器端...

鐵人賽 Modern Web DAY 11

技術 Vite + Vue3 建立頁面 - 調整 WebBuild.vue 版面

今天就先來將 WebBuild.vue 這個頁面元件檔的版面,做些調整吧,也就是寫 CSS(使用 sass 語法)。可以先看一下結果畫面。 WebBuild.v...

鐵人賽 Modern Web DAY 10

技術 Vite + Vue3 建立頁面 - 使用 vue-router 來建立單頁式應用程式(SPA)

之前有安裝過 vue-router 這個套件,它就是可以用來做單頁式應用程式,可以讓你的網站速度效能變好,因為在點擊站內連結時,不會每次都重新整理頁面。 目前我...

鐵人賽 Modern Web DAY 9

技術 Vite + Vue3 建立頁面 - SFC 元件的 template 使用 pug 語法

元件 SFC 寫法 在 Vue 3 的 SFC(Single-File Component,副檔名為 .vue) 語法當中,我們一般會寫以下的程式,也就是有三個...

鐵人賽 Modern Web DAY 8

技術 Vite + Vue3 建立頁面 - 首頁

終於可以先回到之前建立的 webmix_efficiency 資料夾了,也就是打算使用 Vue 3 來建立 Web APP,先在專案資料夾下執行以下指令: np...

鐵人賽 Modern Web DAY 7

技術 GraphQL 基本 CRUD

今天要來練習寫一下 GraphQL 基本的 CRUD。 先調整一個東西,就是將 users 資料表當中的 id 欄位,變成是 AUTO INCREMENT,執行...

鐵人賽 Modern Web DAY 6

技術 使用 Deno 連線資料庫,搭配 GraphQL API 抓取資料

今天要來建立資料庫,以及使用 GraphQL 的 query 來抓取資料庫裡的資料。 建立 MySQL 資料庫 這裡我是使用雲端服務 DigitalOcean...

鐵人賽 Modern Web DAY 5

技術 GraphQL 中的 Schema 和 Resolver

今天要來整理上一篇文章中所寫的 graphql.ts 檔案,以便後續串接資料庫。在 GraphQL 的執行環境中,通常有兩個基本概念是 Schema 和 Res...

鐵人賽 Modern Web DAY 4

技術 安裝 GraphQL 執行環境

目前我們已經安裝好 Deno 的執行環境了,接下來因為要使用 Deno 來撰寫 GraphQL API,所以今天先來安裝 GraphQL 的執行環境。 使用第三...

鐵人賽 Modern Web DAY 3

技術 安裝撰寫 API 的環境 - 使用 Deno 程式語言

今天要來安裝 Deno 的執行環境,因為之後要使用 Deno 程式語言,來撰寫 API,所以今天就先來安裝 Deno。 什麼是 Deno Deno 是一個針對...

鐵人賽 Modern Web DAY 2

技術 開啟一個本機端網站 - 使用 Vite + Vue 3 + Vue Router

這並不是一個特定技術的教學文,我也是透過實作當中,不斷的找資料,達成想實作的需求喔。今天想先使用 Vite + Vue 3 + Vue Router 先將環境給...