大家好，我是狂師。

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

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

• 開發(fā)背景
• 成果展示
• 產(chǎn)品定位
• 產(chǎn)品需求分析、功能梳理
• 設(shè)計思路、技術(shù)方案確認
• 項目開發(fā)
• 生產(chǎn)環(huán)境部署方案確認
• IPC備案與公案備案
• 生產(chǎn)環(huán)境部署
• 產(chǎn)品上架

1、開發(fā)背景

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

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

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

于是萌生了開發(fā)一個工具導(dǎo)航網(wǎng)站的想法，并且現(xiàn)在AI編程這么火爆，不如就借助AI編程來開發(fā)設(shè)計一款全新的、完全由自己定制開發(fā)的導(dǎo)航網(wǎng)站。

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

2、成果展示

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

整個網(wǎng)站，采用的是前后端分離開發(fā)架構(gòu)，除了用戶端訪問的前端網(wǎng)站外，還開發(fā)設(shè)計了一套后臺管理系統(tǒng)，主要是用于發(fā)布上架產(chǎn)品以及后臺配置、數(shù)據(jù)分析運營等用途。

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

2.1 網(wǎng)站基本信息

網(wǎng)站名稱： 快捷導(dǎo)航

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

網(wǎng)站訪問地址為快捷導(dǎo)航名稱的縮寫

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

2.2 前端主要功能

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

1. 支持分類導(dǎo)航： 支持多級分類結(jié)構(gòu)，方便用戶查找工具，覆蓋AI、辦公、開發(fā)、測試、設(shè)計、運維、自媒體創(chuàng)作等多領(lǐng)域優(yōu)質(zhì)工具。

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

3. 支持多引擎搜索：

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

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

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

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

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

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

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

10. 支持用戶自定義網(wǎng)址： 用戶能在我的導(dǎo)航->自定義網(wǎng)地址，輕松自定義自己常用的工具網(wǎng)站，實現(xiàn)個性化導(dǎo)航。

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

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

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

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

15. 易用性優(yōu)化： 當頁面內(nèi)容過長時，支持一鍵直達網(wǎng)站導(dǎo)航欄、網(wǎng)站底部功能。

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

17. 安全優(yōu)化: 動態(tài)API認證，每次請求都獲取最新配置，無需重啟服務(wù)即可修改安全策略

18. 可配置的網(wǎng)站設(shè)置： 通過SiteSettings模型管理網(wǎng)站全局配置

• 網(wǎng)站名稱、標語和SEO設(shè)置
• API認證開關(guān)和保護路徑配置
• 無需重啟服務(wù)即可生效

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

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

2.3 后端主要功能

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

1. 提供后臺數(shù)據(jù)管理

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

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

2. 用戶系統(tǒng)

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

3. API接口

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

4. 系統(tǒng)配置

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

3、產(chǎn)品定位

展示完網(wǎng)站產(chǎn)品階段成果后，接下來，講一下作為一款產(chǎn)品，網(wǎng)站開發(fā)過程，各個階段重點關(guān)注的工作要點。

當決定開發(fā)一款工具導(dǎo)航網(wǎng)站的想法后，首當其中，第一件事，產(chǎn)品定位。

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

因此，我在給網(wǎng)站定位取名時，避開了專一賽道: 如AI工具導(dǎo)航、測試開發(fā)工具導(dǎo)航之類的。

最終產(chǎn)品網(wǎng)站名稱定為：快捷導(dǎo)航，寓意為，一切皆可導(dǎo)。

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

4、產(chǎn)品需求分析、功能梳理

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

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

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

5、設(shè)計思路、技術(shù)方案確認

本項目采用前后端分離架構(gòu)，共三層：

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

5.1前端技術(shù)棧

前端采用現(xiàn)代化的組件化開發(fā)方式，基于Vue 3生態(tài)系統(tǒng)構(gòu)建：

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

5.2 后端技術(shù)棧

后端采用Django生態(tài)系統(tǒng)，構(gòu)建安全、高效的API服務(wù)：

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

6、項目開發(fā)

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

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

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

6.1 利用AI開發(fā)前端項目

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

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

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

2、點擊發(fā)送后，Cursor將自動生成項目結(jié)構(gòu)及各文件代碼。

3、選擇允許接受所有代碼后，自動生成的項目結(jié)構(gòu)如下所示：

4、在終端執(zhí)行npm install 安裝依賴，接著運行npm run dev 啟動本地開發(fā)服務(wù)

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

6.2 利用AI開發(fā)后臺管理系統(tǒng)

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

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

6.3 利用Curos開發(fā)經(jīng)驗分享

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

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

7、生產(chǎn)環(huán)境部署方案確認

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

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

具體細節(jié)，涉及到一些敏感內(nèi)容，就不細講了。

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

如果您在使用網(wǎng)站時，出現(xiàn)不穩(wěn)定的問題，可以給我留言反饋。

8、IPC備案與HTTPS證書申請

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

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

8.1 IPC備案

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

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

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

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

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

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

8.2 HTTPS證書申請

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

HTTPS證書有兩類：

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

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

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

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

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

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

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

5、上傳證書到服務(wù)器，修改與證書相關(guān)的配置即可。

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

8、生產(chǎn)環(huán)境部署

生產(chǎn)環(huán)境部署階段，主要涉及幾項關(guān)鍵工作：

• 云服務(wù)器基礎(chǔ)環(huán)境準備
• 配置安全組
• 域名解析
• 配置HTTPS證書
• MySQL數(shù)據(jù)庫準備
• 前端項目部署
• 后端服務(wù)部署

9、產(chǎn)品上架

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

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

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

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

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

講到這里，想吐槽一下，我體驗過數(shù)十款導(dǎo)航網(wǎng)站，大部分的工具和工具內(nèi)容都是通過爬蟲或自動化的方式自動采集出來的。里面的工具質(zhì)量參差不齊，LOGO，配圖動不動就是404顯示，看著真是一言難盡啊，你們在搞啥?。。。?/p>

10、最后

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

總結(jié)

以上是生活随笔為你收集整理的万字长文： 仅花7天，利用AI编程神器Cursor 从0到1开发上线个人网站，保姆级教程！的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。