Strapi怎麼用 開源無頭CMS搭建教程

Strapi是一個開源的無頭CMS，用Node.js構建，可以自定義內容結構，再透過API給前端提供資料，適合做網站和應用後臺。它把內容管理與頁面展示分開：編輯在後臺錄入和釋出內容，前端則可用React、Vue等技術自由呈現。下面以Strapi 5為例，帶你從本地安裝到請求資料走一遍。

第一步：安裝Strapi

開始前先準備Node.js與npm，並開啟終端。進入你打算存放專案的目錄，執行命令：npx create-strapi@latest my-project。按終端提示選擇配置；想快速體驗，也可以執行：npx create-strapi@latest my-project –quickstart。安裝過程需要下載依賴，網路較慢時耐心等待，期間不要關閉終端。

專案建立後，進入目錄並啟動開發伺服器：cd my-project，再執行npm run develop。首次啟動時，終端會顯示後臺地址，通常為http://localhost:1337/admin；在瀏覽器開啟它，按頁面提示建立管理員帳號。登入後就能看到管理面板。開發環境適合本機試用，正式上線前還要配置資料庫、環境變數和部署環境。

若安裝報錯，先確認Node.js與npm能在終端正常執行，再檢查網路和專案目錄權限。不要在已有重要專案目錄裡隨意執行初始化命令；新手建議單獨建一個資料夾。完成安裝後，先在後臺熟悉左側選單，確認伺服器仍在執行，再繼續建立內容模型。

第二步：建立內容型別和欄位

進入後臺的Content-Type Builder，點選建立Collection Type，集合型別適合儲存多篇文章這類可重複內容。輸入名稱Article，確認單數和複數API標識後，依次新增欄位：用Text儲存標題，用Rich Text儲存正文，用Date儲存釋出日期，也可按需要新增圖片或布林欄位。欄位名稱儘量清楚，方便前端呼叫。

建立欄位時按資料特點選擇型別：標題一般用短文字，正文用富文字，封面圖選媒體欄位，分類之間可設定關係。每個欄位可配置是否必填、是否唯一以及預設值。完成後儲存，Strapi可能提示重啟或更新結構，按後臺提示確認；此時內容型別會生成管理入口和對應API。

接著開啟Content Manager，進入Article集合，點選新建條目，填寫標題、正文等內容並儲存。若啟用了草稿與釋出流程，儲存不一定代表公眾介面已經能讀到內容，還需點選Publish釋出。先錄入一篇簡單測試文章，後面請求API時就能檢查欄位是否符合預期。

配置角色和權限

如果前端要不登入就讀取已釋出文章，開啟Settings，在Users & Permissions Plugin中進入Roles，再選Public。找到Article對應的權限項，勾選find和findOne，分別允許讀取列表與單條內容，然後儲存。只開放確實需要的讀取權限；建立、修改和刪除權限不要為了測試隨手開放給公眾。

儲存權限後回到前端測試介面。如果返回403，通常是角色沒有對應權限；如果列表為空，檢查文章是否已釋出、API標識是否正確。涉及寫入或使用者專屬資料時，應使用受控的認證方式與適當權限，不要把高權限API令牌直接放進瀏覽器程式碼或公開倉庫。

第三步：透過API獲取資料

Strapi會按內容型別生成REST介面。若Article的複數API標識是articles，可在瀏覽器或終端請求http://localhost:1337/api/articles。也可以用fetch在前端獲取：fetch(‘http://localhost:1337/api/articles’).then(r => r.json()).then(data => console.log(data))。返回結果通常包含data陣列，可遍歷其中的文章並渲染標題。

預設響應主要包含頂層欄位；關聯內容、媒體和元件通常需要透過populate引數請求，例如訪問/api/articles?populate=*。需要篩選或排序時，可按REST API支援的查詢引數組合請求，並在前端檢查響應結構。媒體資源還要留意返回的路徑與伺服器域名，部署後確保圖片地址可從前端訪問。

如果介面返回401或403，檢查權限或認證配置；若返回404，核對API路徑與複數標識；若資料沒顯示，檢視內容是否已釋出以及前端讀取的欄位名。開發階段可用瀏覽器開發者工具檢視網路請求和JSON響應，逐項定位問題。部署前再配置生產資料庫、跨域策略、HTTPS與備份。

如果希望用更直觀的方式規劃網站頁面，也可以瞭解國內工具墨刀AI；它可作為介面設計與原型協作的補充，和Strapi承擔的內容管理、API服務不是同一類工作。官網：modao.cgref.cn。從本地練習開始，先跑通模型、釋出和讀取，再逐步擴充套件關係欄位與部署配置。