大家好，我是狂師。

今天我們來分享一下，如何利用AI編程幫助我們開發一款個人定制網站，保姆級教程，篇符較長，建議先保存收藏。

這篇文章，將從0到1，講解如何利用AI編程開發并上線一款個人網站產品，包括正式上線網站時，會涉及到哪些關鍵工作和AI編程要點，內容劃分為：

• 開發背景
• 成果展示
• 產品定位
• 產品需求分析、功能梳理
• 設計思路、技術方案確認
• 項目開發
• 生產環境部署方案確認
• ICP備案與公案備案
• 生產環境部署
• 產品上架

1、開發背景

在日常工作生活中，我們經常會借助不同的工具來提升效率、輔助解決各類問題，特別是隨著AI技術的快速發展,各種AI工具和應用層出不窮。

相信大部分人或多或少都會利用瀏覽器收藏夾或是其它方式，收藏保存了很多工具（我自己的幾臺電腦里，同樣也收藏了很多工具）。 但隨著收藏工具增多，容易形成 “收藏即吃灰” 的情況，尤其是缺乏分類習慣時，收藏夾會變成無序的 “信息倉庫”，查找特定工具需逐一遍歷，耗時費力。并且收藏夾通常僅保存鏈接和名稱，難以記錄工具的核心功能、使用場景或個人評價（如 “適合新手但導出功能收費”），導致后續復用率低。

而作為一名開發者，亦或是一名創作者，我深感需要一個專業、好用的導航平臺，幫助我能快速找到并了解各類工具、資源。市面上雖然也有很多工具導航網站，我也體驗了數十個，但整體下來，沒有一個比較滿意的，而且市面上的導航網站，大多都是采用爬蟲的方式獲取數據， 不味地追求工具數量，爬取堆砌了很多無用，不好用，甚至失效的工具。

于是萌生了開發一個工具導航網站的想法，并且現在AI編程這么火爆，不如就借助AI編程來開發設計一款全新的、完全由自己定制開發的導航網站。

說干，就動手吧~ 這算是今天這篇文章的開發背景了。

2、成果展示

在此次開發過程中， 我選擇了 Cursor 這款AI輔助編程工具。借助 Cursor 在整個開發期間，確實極大的提升了我的開發效率。

整個網站，采用的是前后端分離開發架構，除了用戶端訪問的前端網站外，還開發設計了一套后臺管理系統，主要是用于發布上架產品以及后臺配置、數據分析運營等用途。

整個項目從0到1開發到上線，花了大概7天的時間(包括備案在內)，并且這7天內，我也并非所有的時間All in在里面。 我測算了一下，如果沒有利用AI編程，按照現在開發出來的功能，全靠手擼代碼的話，按照目前每天能在編程上投入工作量，全程預計需要花費1_{1.5個月左右，也就是說，AI編程讓整體開發**效率提升了至少4}6倍**。

2.1 網站基本信息

網站名稱： 快捷導航

訪問地址： https://www.kjdaohang.com 或 https://kjdaohang.com

網站訪問地址為快捷導航名稱的縮寫

網站介紹： 一款現代化的工具導航網站，幫助用戶快速找到并使用各類在線工具和資源。集成了AI搜索、分類瀏覽、教程學習和個性化定制等功能，打造高效便捷的工具發現平臺。

2.2 前端主要功能

目前網站前端上線的第1個版本，主要功能特性有：

1. 支持分類導航： 支持多級分類結構，方便用戶查找工具，覆蓋AI、辦公、開發、測試、設計、運維、自媒體創作等多領域優質工具。

2. 工具卡片展示： 美觀的卡片式布局，顯示工具詳情、標簽等信息

3. 支持多引擎搜索：

• 站內搜索： 基于工具名稱、描述和標簽的全文搜索， 搜索網站收錄的工具
• AI搜索： 集成知名AI搜索引擎 (納米AI、秘塔AI、文心一言等)
• 搜索引擎： 集成主流搜索引擎 (百度、Google、Bing、GitHub等)

4. 支持直接跳轉功能： 考慮用戶體驗，我們增加了直達鏈接即可直接跳轉到目標網站的功能，提高了訪問效率，減少了繁瑣的步驟。

5. 支持工具詳情介紹: 通過工具詳細頁，方便用戶了解工具定位、基本介紹、核心功能特性等。

6. 最近使用記錄： 即使未注冊，用戶也可以方便地查看自己最近使用過的工具記錄，借助瀏覽器Cookie實現，極大提升了訪問便捷性。

7. 支持查看最新上架、最受歡迎的工具: 基于時間、訪問量、相關性、熱度等排序算法展示。

8. 支持用戶互動功能： 支持用戶注冊、登錄，并對喜歡的工具進行點贊、收藏。

9. 支持工具收藏： 可在工具詳細頁上通過點擊星星圖標進行添加或取消收藏，將喜歡的工具，收藏到在我的收藏頁中，并在收藏頁中支持一鍵直達目標網址。

10. 支持用戶自定義網址： 用戶能在我的導航->自定義網地址，輕松自定義自己常用的工具網站，實現個性化導航。

11. 支持工具歷史訪問記錄： 用戶可以在我的導航->我用過的，查看自己最近使用或訪問過的工具記錄。

12. 免費教程, 無限白嫖: 支持免費教程，免費資源在線查閱獲取、直接下載，幫助用戶快速上手新工具。(白嫖哦~)

13. 支持工具提交收錄: 鼓勵用戶或工具服務商分享、評價和提交工具到網站，形成良性生態。

14. 支持快捷收藏功能： 通過一鍵（Ctrl+D）快速收藏保存網站功能。

15. 易用性優化： 當頁面內容過長時，支持一鍵直達網站導航欄、網站底部功能。

16. 首頁資訊展示: 支持在首頁動態輪播顯示最新資訊。

17. 安全優化: 動態API認證，每次請求都獲取最新配置，無需重啟服務即可修改安全策略

18. 可配置的網站設置： 通過SiteSettings模型管理網站全局配置

• 網站名稱、標語和SEO設置
• API認證開關和保護路徑配置
• 無需重啟服務即可生效

PS: 網站上的工具和免費教程、資源，會持續上架更新，覺得對自己有用，喜歡的話，趕緊關注收藏吧~

另外，網站目前并沒有做移動端的自適應，建議用戶在使用時，直接在PC端瀏覽器訪問使用即可，后期用的人多了，后續會考慮上線移動端小程序版。如果在一些小屏筆記本出現顯示不全，可以通過調整瀏覽器縮放比例來解決。

2.3 后端主要功能

作為第1個版本，其實管理后臺功能已經設計的比較完善了，雖然也還有很多可以改進的點，但基本夠用了。后臺管理首頁如下圖所示：

1. 提供后臺數據管理

• 分類管理：支持多級分類結構管理、自定義分類層級
  
• 工具管理：增刪改查工具信息，包括名稱、圖標、URL、標簽等
  
• 教程管理：管理工具教程內容，支持6種教程類型，不同類型，前端打開方式會有所差異。
• 資訊管理：發布和管理資訊內容,以輪播的形式展示到首頁。

教程管理和資訊管理，就不貼圖了。

2. 用戶系統

• 賬戶管理：支持注冊、登錄、找回密碼
• 權限控制：支持管理員和普通用戶權限區分
• 用戶行為追蹤：支持記錄用戶訪問和使用情況

3. API接口

• RESTful API：提供標準的REST接口
• API認證：基于時間戳、簽名和nonce的安全認證機制
• 訪問控制：可配置的API路徑保護和訪問規則
• 請求限流：防止API過度調用

4. 系統配置

• 網站設置：自定義網站名稱、標語、SEO信息等
• 安全配置：API認證開關，受保護路徑配置
• 統計分析：用戶、工具、訪問量等統計數據
• 系統日志：記錄關鍵操作和錯誤信息

3、產品定位

展示完網站產品階段成果后，接下來，講一下作為一款產品，網站開發過程，各個階段重點關注的工作要點。

當決定開發一款工具導航網站的想法后，首當其中，第一件事，產品定位。

即：開發出來的這款產品，要解決什么問題？為用戶提供什么價值？ 一開始，我是想要不就開發一款專注AI工具或測試開發工具的網站，但后面仔細研究分析后，發現如果僅圍繞某個特定的領域，雖然工具或內容可以更專注聚焦，但作為工具導航性質的產品和其它類型的網站，還是有所區別的。無論是程序員、測試開發、自媒體創作，所用到的提效工具，往往都并非單一的，基本都是面向工作，以場景問題為導向。而不同的場景、工作要求，所需要的提效工具可能都不一樣且都是跨類別、跨領域的，往往需要多個工具組合。

因此，我在給網站定位取名時，避開了專一賽道: 如AI工具導航、測試開發工具導航之類的。

最終產品網站名稱定為：快捷導航，寓意為，一切皆可導。

網站內容定位： 匯聚了 AI、大數據、測試、開發、設計、運維、職場辦公、自媒體創作等領域的海量優質工具、資源、教程。無論是 AI人工智能助手、測試開發工具，職場辦公提效，都能滿足您的需求。 致力于打造國內最優質、實用的工具導航平臺，滿足用戶在不同場景下的各類需求。無需繁瑣搜索，告別無效跳轉，讓您以最快速度獲取所需。

4、產品需求分析、功能梳理

確定好了網站定位，那網站需要提供哪些功能呢，接下來就要做需求分析了。這一步，具體該怎么做呢？ 方法并非唯一，這里給大家分享一些我的個人經驗， 我的做法，分為三步：

• 第一步，自己基于對導航網站的理解，先寫一個需求草稿。
• 第二步，利用AI工具，比如讓Cursor幫忙分析并輸出需求文檔。
• 第三步，親自體驗其它的導航網站，從中找出共性和提取值得參考的優點。

基于上述三步，再最終整合一下，需求文檔基本就能出來了。

5、設計思路、技術方案確認

本項目采用前后端分離架構，共三層：

• 前端應用：基于Vue 3的SPA(單頁應用)，負責用戶界面和交互
• 后端API：基于Django REST Framework的RESTful API服務
• 數據庫：存儲工具、用戶、分類等核心數據

5.1前端技術棧

前端采用現代化的組件化開發方式，基于Vue 3生態系統構建：

• 核心框架：Vue 3 (使用Composition API)
• 狀態管理：Pinia (替代Vuex，更輕量且支持TypeScript)
• 路由管理：Vue Router 4
• UI組件庫：Element Plus (基于Element UI的Vue 3版本)
• HTTP客戶端：Axios (支持攔截器、統一錯誤處理)
• 構建工具：Vite (比Webpack更快的構建和熱重載)
• CSS預處理：SCSS (支持變量、嵌套、混合等)
• 響應式設計：自定義媒體查詢和彈性布局

5.2 后端技術棧

后端采用Django生態系統，構建安全、高效的API服務：

• 框架：Django + Django REST Framework
• 數據庫ORM：Django ORM+MySQL
• 認證系統：JWT + 自定義API認證中間件
• 緩存：Django Cache Framework
• API文檔：Swagger/OpenAPI
• 后臺管理：采用Django Admin+SimpleUI（定制UI）

6、項目開發

需求和方案確定好之后，接下來，AI編程輔助工具： Cursor，就可以閃亮登場了。

講到這里，讓我想到前段時間，AI編程爆火后，經常聽到的一些觀點: "AI會不會取代程序員，程序員會不會失業等話題

趁著這個機會，說一下我的個人觀點： AI輔助編程固然能提效，但提效更多體現在編碼階段，而對于編碼外的一些工作，比如產品定位、需求分析挖掘、產品創新點以及AI提問的技巧，這些都還是需要依賴人的經驗和長期學習才能培養的。這也是人的核心競爭力，因此大家不用過于擔憂盲目的認為AI會取代程序員、測試工程師之類的觀點。持續學習，保持AI無法或者很難取代的那部分能力，方才是關鍵。

6.1 利用AI開發前端項目

關于Cursor的介紹和使用，不是本文重點，這里就不再闡述了，如果對這塊感光趣的讀者，可以后臺留言。感光趣的讀者多的話，后續可考慮單獨分享一篇。

1、在Cursor AI對話框，選擇Agent模式，模型選擇：claude-3.5-sonnet或claude-3.7-sonnet。 （最新已經升級為claude-4-sonnet）

輸入：“基于上面的需求，幫我自動生成前端的頁面代碼，以vue來實現“

2、點擊發送后，Cursor將自動生成項目結構及各文件代碼。

3、選擇允許接受所有代碼后，自動生成的項目結構如下所示：

4、在終端執行npm install 安裝依賴，接著運行npm run dev 啟動本地開發服務

5、打開瀏覽器，訪問http://localhost:3000

6.2 利用AI開發后臺管理系統

同樣的方式，在Cursor AI對話框，選擇Agent模式，輸入提示詞，生成后端項目結構，如圖所示。

篇符有限，其余功能就不一一羅列了，總的來說，就是把你的開發需求或問題喂給Cursor。

6.3 利用Curos開發經驗分享

利用Cursor這類AI編程輔助工具，我認為最關鍵的是，如何準確的向AI提問。可能有人會說，向AI提問是否有技巧呢？答案很簡單：把自身的需求或遇到的問題，自己先想清楚，再用簡潔、口語化的自然描述語言向AI表達出來就可以了，且一次提問，盡量不要包括太多的需求或問題點，提供有效的上下文信息。

如果你在使用AI編程工具生成代碼期間，遇到AI生成的內容扯東扯西的，達不到自己的預期，八成是因為你自己沒要把需求向AI講清楚，或者是沒有提供有效的上下文。

7、生產環境部署方案確認

整個項目前后端功能開發，斷斷續續差不多耗時一周的時間，項目開發好之后，接著就要想辦法把項目部署上線。

項目部署之前，建議可以參考需求分析階段的思路，先梳理一份《正式環境部署方案》。

具體細節，涉及到一些敏感內容，就不細講了。

簡單來說，部署階段采用的是: 云服務器+Nginx+Gunicorn，目前還沒有引入高可用方案，后續等用戶基數上來后，會考慮。

如果您在使用網站時，出現不穩定的問題，可以給我留言反饋。

8、ICP備案與HTTPS證書申請

網站正式上線時，除了部署代碼,關注功能層面外，還要考慮網站易用性、合法性和安全性等問題。需要開展一系列上線前準備工作，比如云服務器購買、域名申請、ICP備案、公安備案、HTTPS證書申請等。當然這些工作，可以在前期同步開展，特別是ICP備案，提交信息后，需要耐心等待幾天，等待審核結果通過。

這里就挑ICP備案和HTTPS證書申請單獨講一下。

8.1 ICP備案

ICP 備案全稱為互聯網內容提供商（Internet Content Provider）備案。它是中國政府對在境內運營的網站實施的一種管理措施，要求在中國境內提供信息服務的網站，都必須按照備案主體所在省市的管局規則先進行ICP備案，才能對外提供服務，ICP 備案是網站合法運營的前提。

ICP備案，具體操作，可劃分為五步：

• 步驟一：填寫訂單
• 步驟二：阿里云初審
• 步驟三：工信部短信核驗
• 步驟四：管局審核
• 步驟五：ICP備案進度及結果查詢

比如，下圖是我的ICP備案流程與所花費的時間。(共花了三天，其實還算快的)

這里特別補充一下，如果您的網站已完成ICP備案且需要在中國內地訪問，就需要在開通網站（即網站對外提供訪問服務）之日起的30日內提交公安聯網備案申請。公安聯網備案，比ICP備案花的時間還要久，審核了5天。

具體ICP備案和公安聯網備案，操作步驟和注意細節，有需要了解學習的讀者，可訪問本網站(www.kjdaohang.com)->進入到 免費教程 菜單中查閱。

8.2 HTTPS證書申請

網站對外提供服務，為了保證安全性，通常都會采用HTTPS協議，這就需要涉及到申請HTTPS證書了。

HTTPS證書有兩類：

• 個人測試證書。（免費）
• 正式證書。 (收費)

大家可以根據需要來申請測試證書或選擇購買正式證書，這里個人測試證書為例。

1、登錄數字證書管理服務控制臺，在左側導航欄，選擇證書管理 > SSL 證書管理。在個人測試證書（原免費證書）頁簽，單擊立即購買。

2、在立即購買面板，保持默認選項，仔細閱讀并勾選服務協議，單擊立即購買并完成支付。

3、在個人測試證書（原免費證書）頁簽單擊創建證書，填寫以下必要信息，其他保持默認即可，確認信息無誤后，單擊提交審核。

輸入您要申請證書的域名，例如kjdaohang.com，勾選快捷簽發。

4、域名所有權驗證成功后，證書通常會在1~15分鐘（平均時長）內完成簽發。證書簽發后，證書狀態將變更為已簽發。選擇與您Web服務器類型對應的證書（如Nginx），單擊下載證書文件壓縮包。

5、上傳證書到服務器，修改與證書相關的配置即可。

具體HTTPS證書操作配置細節，可訪問本網站(www.kjdaohang.com)->進入到 免費教程 菜單中查閱學習。

8、生產環境部署

生產環境部署階段，主要涉及幾項關鍵工作：

• 云服務器基礎環境準備
• 配置安全組
• 域名解析
• 配置HTTPS證書
• MySQL數據庫準備
• 前端項目部署
• 后端服務部署

9、產品上架

一切就緒后，就可以將產品（工具、教程）發布上架了。產品上架這項工作，花了我不少時間。甚至比前面的編碼工作耗費的時間還要多。

這項工作前期很耗時，但很重要，之所以我說產品上架比較耗時，時間主要耗費在幾件事上：

• 需要重新整理自己用過，且個人認為好用、實用的工具，很多工具因為時間久遠，得重新體驗測評一番。
• 收集各個工具lOGO、對應工具有代表性的截圖
• 定義工具標簽、寫工具介紹、詳細介紹等。

可能有的人說，這些內容工作，寫個腳本，借助AI、RPA自動化跑一下，不是很快就能搞定嗎？

這就是我的網站和別人的不同之處，我的想法，要求很簡單：網站上上架的工具一定要是我自己用過，或者認為還不錯的。工具搭配的logo、配圖一定要經過我人為把關，認可合適的才會放上去。只有用心了，用戶體驗下來，感受自然也會不一樣。雖然這只是一個很小的點，但站在產品的角度，易用性不容忽視。

講到這里，想吐槽一下，我體驗過數十款導航網站，大部分的工具和工具內容都是通過爬蟲或自動化的方式自動采集出來的。里面的工具質量參差不齊，LOGO，配圖動不動就是404顯示，看著真是一言難盡啊，你們在搞啥啊！！！

10、最后

獨樂不如眾樂，最后，如果你在工作中有好的工具想分享給大家、或在使用本網站期間，有任何問題建議，歡迎反饋給我們。