iT邦幫忙

鐵人檔案

2023 iThome 鐵人賽
回列表
Modern Web

由前向後,從前端邁向全端 系列

最近想學習前端以外的知識,並且拓展自己的領域,並從前端邁向全端。這次會使用到的套件包含為Nextjs、Nestjs、Graphql、prisma來創建一個簡易的購物車網站。

鐵人鍊成 | 共 30 篇文章 | 11 人訂閱 訂閱系列文 RSS系列文
DAY 11

11.【從前端到全端,Nextjs+Nestjs】使用Nx創建component generator

文章重點 建立自定義生成器 (Generator):為了增加效率和一致性,我們創建了自己的生成器。 Nx React 生成器的整合:我們將 Nx 的 Re...

2023-09-26 ‧ 由 Felix阿甫 分享
DAY 12

12.【從前端到全端,Nextjs+Nestjs】創建商店頁面-實現頁面和元件區塊

文章重點 創建修改product頁面 創建修改user頁面 本文 今天我們要完成的部分,是我們的product相關頁面以及user相關頁面。 我們先來完成...

2023-09-27 ‧ 由 Felix阿甫 分享
DAY 13

13.【從前端到全端,Nextjs+Nestjs】創建商店頁面-建立表單

文章重點 建立不同的表單,如登入表單、結帳表單和購物車表單 使用 react-hook-form 和 zod 建立表單和進行表單驗證 本文 今天,我們著重...

2023-09-28 ‧ 由 Felix阿甫 分享
DAY 14

14.【從前端到全端,Nextjs+Nestjs】創建商店頁面-加入狀態管理

文章重點 使用recoil管理購物車和商品的狀態 使用recoil組織資料的schemas與actions 本文 今天我們要對我們的網路商店加入狀態管理。...

2023-09-29 ‧ 由 Felix阿甫 分享
DAY 15

15.【從前端到全端,Nextjs+Nestjs】在Nextjs 13設置並使用GraphQL

文章重點 在Next.js 13專案中導入和設置Apollo Client 3進行GraphQL查詢 Apollo Client的基本架構及其運作方式 使用C...

2023-09-30 ‧ 由 Felix阿甫 分享
DAY 16

16.【從前端到全端,Nextjs+Nestjs】使用Mock來模擬GraphQL

文章重點 修改AppProvider以使用新的apollo-client.ts檔案 在graphql-mocks.ts中創建模擬數據和GraphQL型別 使用...

2023-10-01 ‧ 由 Felix阿甫 分享
DAY 17

17.【從前端到全端,Nextjs+Nestjs】加入測試

文章重點 設定Jest 加入元件和元件生成器測試 本文 今天我們來為我們的Nextjs App和component來添加測試。我們先使用已經建立好的Jes...

2023-10-02 ‧ 由 Felix阿甫 分享
DAY 18

18.【從前端到全端,Nextjs+Nestjs】加入測試(二)

文章重點 利用 Playwright 進行網頁的端到端測試(E2E Testing) 為元件添加 aria-label 屬性以便於 Playwright 測試...

2023-10-03 ‧ 由 Felix阿甫 分享
DAY 19

19.【從前端到全端,Nextjs+Nestjs】在 NX 中創建 Nest.js 後端

文章重點 安裝 Nest.js 相關依賴 配置 Prettier 以適應 Decorator 啟動並測試 Nest.js 伺服器 本文 Nest.js 是...

2023-10-04 ‧ 由 Felix阿甫 分享
DAY 20

20.【從前端到全端,Nextjs+Nestjs】在Nx中設置NestJS GraphQL server

文章重點 安裝必要的依賴包以設置GraphQL環境。 創建配置文件以定義GraphQL和其他相關設置。 建立GraphQL模組和配置服務來初始化GraphQL...

2023-10-05 ‧ 由 Felix阿甫 分享