讀:從零構(gòu)建一個(gè)數(shù)據(jù)庫驅(qū)動(dòng)的全棧博客應(yīng)用)
后端前端Web框架開發(fā)工具【免費(fèi)下載鏈接】redwoodRedwoodGraphQL項(xiàng)目地址https://gitcode.com/gh_mirrors/re/redwood點(diǎn)擊查看免費(fèi)下載這篇導(dǎo)讀基于 Redwood 倉庫中 version-4.x 的教程前言 展開。RedwoodJS 是一個(gè)有主見opinionated的全棧 JavaScript/TypeScript Web 應(yīng)用框架將 React 前端、GraphQL API 與 Prisma 數(shù)據(jù)層有機(jī)整合。閱讀本文后你將理解官方教程為什么要用博客來教學(xué)的選型邏輯、教程從舊版part 1 / part 2演變?yōu)榘凑鹿?jié)組織的來龍去脈并掌握開課前必備的版本前提、前置知識(shí)與環(huán)境搭建命令從而以正確的姿勢(shì)進(jìn)入后續(xù)章節(jié)的實(shí)戰(zhàn)學(xué)習(xí)。教程的核心目標(biāo)構(gòu)建一個(gè)完整的博客引擎前言開門見山地說明了整部教程的實(shí)踐產(chǎn)物——一個(gè)功能完整的博客引擎。選型博客作為教學(xué)載體并非因?yàn)樗钇鹾?Redwood 的架構(gòu)而是因?yàn)樗鼡碛袃蓚€(gè)關(guān)鍵優(yōu)勢(shì)開發(fā)者熟悉度幾乎所有開發(fā)者都寫過或讀過博客業(yè)務(wù)語義幾乎無需額外解釋可以把全部注意力放在框架本身的用法上功能覆蓋面博客應(yīng)用會(huì)用到 Redwood 的絕大多數(shù)核心能力——頁面與路由、數(shù)據(jù)庫建模與遷移、GraphQL 查詢/變更、Cell 數(shù)據(jù)獲取、表單、認(rèn)證與權(quán)限、測(cè)試與 Storybook 組件開發(fā)等一次學(xué)習(xí)即可貫通全棧。前言同時(shí)也坦誠地指出了博客的非理想之處博客文章完全可以存入 CMS、靜態(tài)生成后以 HTML 平鋪文件的形式托管在 CDN 上這正是經(jīng)典 Jamstack 的典型場(chǎng)景并不需要?jiǎng)討B(tài)數(shù)據(jù)庫。教程之所以明知故犯恰恰是為了演示 Redwood 在**數(shù)據(jù)庫驅(qū)動(dòng)型單頁應(yīng)用database-backed SPA**上的完整能力。這與倉庫根目錄 README.md 中對(duì)框架的定位完全一致——Redwood 把 React 前端與自定義 GraphQL API 組合在一起API 層再通過 Prisma 操作數(shù)據(jù)庫開箱即用地集成 Jest 測(cè)試、Pino 日志與 Storybook 組件目錄并支持同時(shí)部署到 serverless 平臺(tái)與傳統(tǒng)服務(wù)器。教程的演變從上下兩冊(cè)到按邏輯分章前言還交代了一段版本演進(jìn)史早先的教程被拆分為 part 1 和 part 2這并非刻意設(shè)計(jì)而是歷史遺留——part 1 寫作時(shí)part 2 所演示的大多數(shù)框架特性如 Cell、認(rèn)證、Storybook 集成等尚未存在待這些特性補(bǔ)齊后官方將它們收進(jìn) part 2。如今框架各項(xiàng)能力已充分整合教程也隨之重組為按邏輯歸類的章節(jié)。從當(dāng)前倉庫 version-4.x 教程目錄 可以看到這套章節(jié)體系的實(shí)際落地章節(jié)主題覆蓋內(nèi)容Chapter 1起步前置要求、安裝啟動(dòng)、文件結(jié)構(gòu)、第一個(gè)頁面、布局、第二個(gè)頁面Chapter 2數(shù)據(jù)驅(qū)動(dòng)Cell、動(dòng)態(tài)數(shù)據(jù)、路由參數(shù)、支線任務(wù)Chapter 3表單與持久化表單、保存數(shù)據(jù)Chapter 4認(rèn)證與部署認(rèn)證、部署上線Chapter 5測(cè)試與組件Storybook、Jest 測(cè)試、首個(gè) story、首個(gè)測(cè)試Chapter 6評(píng)論功能評(píng)論 schema、評(píng)論表單、多評(píng)論、The Redwood WayChapter 7權(quán)限與 RBACAPI 側(cè) currentUser、基于角色的訪問控制此外還有三篇特殊文檔幕間休息Chapter 4 與 Chapter 5 之間的銜接指南、結(jié)語 以及本篇前言。這樣一條主線走到底的組織方式讓讀者無需在多個(gè)并行分支間跳轉(zhuǎn)可以按順序循序漸進(jìn)地完成整個(gè)應(yīng)用。貫穿全書的 Callout 約定前言專門介紹了教程中反復(fù)出現(xiàn)的四種提示塊callout用于在正文之外補(bǔ)充細(xì)節(jié)、指向延伸閱讀或發(fā)出警告:::tip—— 實(shí)用小技巧例如第一章中記憶開發(fā)端口的小竅門8-9-10:::caution—— 需要注意的注意事項(xiàng)version-4.x 文檔用caution主線文檔docs/docs中同位置為warning:::danger—— 強(qiáng)烈警告通常是容易踩坑或容易出錯(cuò)的地方:::info—— 補(bǔ)充背景信息或重要前提說明如版本假設(shè)。閱讀時(shí)遇到這些塊不要跳過——它們往往承載了正文之外的關(guān)鍵上下文。例如前言末尾的:::info明確指出本教程version-4.x 版本假設(shè)你使用的 RedwoodJS 版本不低于 1.0.0。版本前提與運(yùn)行環(huán)境要求版本不低于 1.0.0是該教程的基本前提。如果你從零開始yarn create redwood-app會(huì)自動(dòng)安裝當(dāng)時(shí)的最新版本無需手動(dòng)關(guān)心但如果你已有舊版本創(chuàng)建的存量項(xiàng)目則需要先逐版本對(duì)照官方 Release Notes 中的 Code Modifications 部分完成代碼改造再執(zhí)行升級(jí)命令yarn redwood upgrade與此同時(shí)前置要求文檔 給出了安裝引導(dǎo)時(shí)會(huì)嚴(yán)格校驗(yàn)的運(yùn)行時(shí)版本紅線——版本不滿足時(shí)安裝引導(dǎo)會(huì)直接報(bào)錯(cuò)Node.js16.19且18.x推薦 Nodejs.org 的 LTS 版本Current 版本不受支持Yarn1.15經(jīng)典版 Yarn 1.x動(dòng)手前先在終端確認(rèn)環(huán)境node --version yarn --version如果你的系統(tǒng)版本不達(dá)標(biāo)請(qǐng)先升級(jí)。Windows 用戶還需額外參考倉庫中的 Windows 推薦開發(fā)環(huán)境配置指南該指南覆蓋了 JavaScript 開發(fā)在 Windows 上除 Yarn/npm 之外的特定要求。作為橫向參照倉庫當(dāng)前主干中 packages/create-redwood-app/package.json 記錄的框架版本已演進(jìn)到 8.0.0說明這套教程所基于的 1.0.0 是當(dāng)時(shí)的最低門檻實(shí)際使用時(shí)應(yīng)以安裝時(shí)獲得的最新穩(wěn)定版本為準(zhǔn)。前置知識(shí)不必恐慌但心中有數(shù)教程默認(rèn)讀者對(duì)四類技術(shù)已有基本認(rèn)知React—— 前端組件化開發(fā)GraphQL—— 前后端之間的查詢與變更協(xié)議Prisma—— 數(shù)據(jù)庫建模與 ORMJamstack 部署—— 靜態(tài)站點(diǎn)/CDN 類的部署模式。如果對(duì)這些技術(shù)一知半解也沒關(guān)系前置要求文檔 明確安撫道你可以一邊做教程一邊現(xiàn)學(xué)現(xiàn)用只是可能會(huì)在個(gè)別術(shù)語上暫時(shí)迷失但這些技術(shù)的細(xì)節(jié)完全可以在完成教程后補(bǔ)課。屆時(shí)你會(huì)更清楚地看到哪些能力來自 Redwood 本身的封裝、哪些來自底層技術(shù)原生的實(shí)現(xiàn)。開課第一步安裝、啟動(dòng)與首次提交正式動(dòng)手前的標(biāo)準(zhǔn)流程記錄在 安裝與啟動(dòng)開發(fā)文檔 中1. 創(chuàng)建應(yīng)用骨架Yarn 是硬性依賴# JavaScript 版本 yarn create redwood-app ./redwoodblog # TypeScript 版本 yarn create redwood-app --ts ./redwoodblog2. 啟動(dòng)開發(fā)服務(wù)器cd redwoodblog yarn redwood dev瀏覽器會(huì)自動(dòng)打開http://localhost:8910呈現(xiàn) Redwood 歡迎頁。記憶端口號(hào)有個(gè)小訣竅8-9-10數(shù)到三位就到了。3. 提交首個(gè) commit可選但強(qiáng)烈建議git init git add . git commit -m First commitgit 并非完成教程的必需品但如果想走到最后一步部署上線代碼庫需要托管在 GitHub 或 GitLab 上因此盡早建立版本管理是明智之舉。4. 生成第一個(gè)頁面讓應(yīng)用脫離歡迎頁詳見 我們的第一個(gè)頁面yarn redwood generate page home /這一條命令會(huì)一次性完成四件事創(chuàng)建web/src/pages/HomePage/HomePage.{js,tsx}命名自動(dòng)轉(zhuǎn)為 PascalCase 并追加Page后綴、生成配套的測(cè)試文件HomePage.test.{js,tsx}、生成 Storybook 故事文件HomePage.stories.{js,tsx}并在web/src/Routes.{js,tsx}中注冊(cè)/到HomePage的路由映射。值得留意的是Routes 文件中的頁面組件無需手動(dòng) import——Redwood 會(huì)自動(dòng)導(dǎo)入所有頁面省去了冗長(zhǎng)的 import 聲明。學(xué)習(xí)路徑建議官方給出的推進(jìn)節(jié)奏是按章節(jié)順序一路完成 Chapter 1 到 Chapter 4此時(shí)你已經(jīng)具備頁面、路由、Cell、表單、認(rèn)證與部署的完整經(jīng)驗(yàn)進(jìn)入 Chapter 5 之前幕間休息 給出了兩條可選路線沿用自己寫的代碼庫若想與教程后續(xù)的 CSS 類名保持一致可先執(zhí)行yarn rw setup ui tailwindcss引入 Tailwind若此前部署時(shí)已把schema.prisma的數(shù)據(jù)庫 provider 切換為postgresql還需同步本地開發(fā)環(huán)境參考倉庫中的 Local Postgres Setup 文檔使用官方示例倉庫推薦克隆教程配套的 redwood-tutorial 示例倉庫執(zhí)行yarn install、yarn rw prisma migrate dev創(chuàng)建本地 SQLite 數(shù)據(jù)庫并填充示例文章再用yarn rw g secret生成會(huì)話加密密鑰填入項(xiàng)目根目錄的.env文件SESSION_SECRET...這是 Chapter 4 認(rèn)證章節(jié) 中 dbAuth 安全 Cookie 的加密基礎(chǔ)最后yarn rw dev一鍵起航。Chapter 5 起教程將引入 Storybook 與 JestChapter 5 目錄并為博客新增評(píng)論功能與基于角色的評(píng)論審核權(quán)限最終章 Chapter 7 則聚焦 API 側(cè)的currentUser與 RBAC 實(shí)現(xiàn)。整套教程結(jié)束之際結(jié)語 還會(huì)為你指出優(yōu)化與進(jìn)階方向如調(diào)用第三方 API、禁用數(shù)據(jù)庫的無 API 部署等。小結(jié)這篇前言為整部教程定下了基調(diào)用一座人人都懂的博客應(yīng)用串起 Redwood 作為數(shù)據(jù)庫驅(qū)動(dòng)全??蚣艿娜筷P(guān)鍵能力。在動(dòng)手之前請(qǐng)先對(duì)照本文確認(rèn)三件事版本假設(shè)≥1.0.0、Node/Yarn 版本紅線、React/GraphQL/Prisma 的基本概念儲(chǔ)備。準(zhǔn)備就緒后從 Chapter 1 的前置要求開始一步步搭建屬于你的第一個(gè) Redwood 全棧應(yīng)用吧。贊分享后端前端Web框架開發(fā)工具【免費(fèi)下載鏈接】redwoodRedwoodGraphQL項(xiàng)目地址https://gitcode.com/gh_mirrors/re/redwood點(diǎn)擊查看免費(fèi)下載相關(guān)推薦RedwoodJS 官方教程開篇導(dǎo)讀從零構(gòu)建一個(gè)數(shù)據(jù)庫驅(qū)動(dòng)的全棧博客應(yīng)用RedwoodJS 官方教程開篇導(dǎo)讀從零構(gòu)建一個(gè)數(shù)據(jù)庫驅(qū)動(dòng)的全棧博客應(yīng)用 本文是 RedwoodJS 倉庫根目錄 https://link.gitcode.后端前端Web框架開發(fā)工具RedwoodJS 官方教程導(dǎo)讀從零構(gòu)建全棧博客應(yīng)用的完整學(xué)習(xí)路徑RedwoodJS 官方教程導(dǎo)讀從零構(gòu)建全棧博客應(yīng)用的完整學(xué)習(xí)路徑 歡迎來到 RedwoodJS 官方教程。本篇導(dǎo)讀基于倉庫中的 docs/versioned后端前端Web框架開發(fā)工具RedwoodJS 官方教程導(dǎo)讀從博客引擎入手掌握全棧 React 應(yīng)用開發(fā)RedwoodJS 官方教程導(dǎo)讀從博客引擎入手掌握全棧 React 應(yīng)用開發(fā) 本篇指南以 Redwood 倉庫中的官方教程 docs/docs/tutori后端前端Web框架開發(fā)工具創(chuàng)作聲明:本文部分內(nèi)容由AI輔助生成(AIGC),僅供參考