7天打造个人网站，AI编程神器Cursor带你轻松入门！

大家好，我是狂师。

今天，我将与大家分享如何借助 AI 编程来创建一个个性化的网站。这将是一个极为详细的教程，请务必先保存以便收藏。

本文将从零开始，逐步讲解如何利用 AI 编程开发并上线个人网站，内容涵盖在正式发布时需要关注的关键点以及 AI 编程的要素，具体结构包括：

• 开发背景
• 成果展示
• 产品定位
• 需求分析与功能梳理
• 设计思路及技术方案确定
• 项目开发
• 生产环境部署方案确认
• IPC 及公案备案
• 生产环境部署
• 产品上架

1、开发背景

在我们的日常工作和生活中，常常需要借助各种工具以提高效率并解决问题。尤其是随着人工智能技术的迅猛发展，各种 AI 工具和应用层出不穷。

相信很多人都或多或少使用浏览器的收藏夹或其他方式来保存各种工具（我自己的几台电脑上也有不少类似的收藏）。然而，随着收藏数量的增多，往往会出现“收藏即无用”的现象，尤其是缺乏良好分类习惯时，收藏夹就会变成一个杂乱的信息库，查找特定工具时需要逐一浏览，耗时且费力。此外，收藏夹通常只保存链接和名称，难以记录工具的核心功能、使用场景或个人评估（例如：“适合新手使用，但导出功能需付费”），这就导致后续使用的频率降低。

作为开发者或创作者，我深刻意识到需要一个专业且易用的导航平台，来帮助我快速找到并了解各种工具与资源。虽然市场上有许多工具导航网站，我尝试过不少，但总体而言并没有让我特别满意。大多数导航网站都是通过爬虫技术获取数据，单纯追求工具数量，却堆砌了许多无效、难用甚至失效的工具。

因此，我产生了构建一个导航工具网站的想法。考虑到目前 AI 编程的热潮，为什么不利用它来创建一个全新且完全自定义的导航网站呢？

既然有了这个想法，那就马上行动吧！这便是今天文章的开发背景。

2、成果展示

在本次开发过程中，我使用了 Cursor 这款 AI 编程辅助工具。借助于 Cursor，我的开发效率确实得到了很大提升。

该网站采用了前后端分离的开发模式，除了为用户提供的前端网站外，我还设计了一套后台管理系统，主要用于产品的发布、上架以及后台配置和数据分析等功能。

整个项目从零开始到上线大约花费了 7 天 的时间（包括备案），而在这 7 天内，我并没有全力以赴投入其中。如果没有借助 AI 编程，按照现在的功能实现，若全靠手动编码，预计需要花费 1 到 1.5 个月的时间。因此，AI 编程的使用使得整体开发效率提高了至少 4 到 6 倍。

2.1 网站基本信息

网站基本信息概述

网站名称：快捷导航

访问地址：https://www.kjdaohang.com 或 https://kjdaohang.com

快捷导航网站概述与前端功能亮点

访问该网站的链接为 快捷导航，这是其名称的简写。

关于网站： 这是一个先进的工具导航平台，旨在帮助用户迅速找到并利用各种在线工具与资源。它整合了 AI 搜索、分类浏览、学习教程以及个性化定制等多种功能，致力于打造高效且便捷的工具发现体验。

2.2 前端功能概述

目前，该网站前端已发布第一版，其核心功能特点包括：

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 认证的开启与路径保护的配置
• 所有设置可在不重启服务的情况下立即生效

网站功能与用户体验提升指南

提示：我们将不断更新网站内的各种工具、免费教程和资源。如果这些内容对你有所帮助，并且你喜欢它们，请及时关注并收藏哦~

此外，目前网站尚未实现移动端自适应功能，建议用户在 PC 端浏览器上进行访问以获得最佳体验。未来，若用户数量增加，我们将考虑推出移动端的小程序版本。如果在某些小尺寸笔记本上出现显示问题，可以通过调整浏览器的缩放比例来解决。

2.3 后端核心功能

作为初始版本，管理后台的功能设计已相当成熟，尽管依然存在改进的空间，但基本满足了使用需求。以下是后台管理首页的展示：

首页

1. 后台数据管理功能

• 分类管理：支持多层级的分类结构以及用户自定义的分类层次

全面掌控：工具与教程管理系统

• 
  工具管理
  ：提供增删改查的功能，涵盖工具的名称、图标、链接以及标签等信息。



• 
  教程管理
  ：负责管理各类工具的教程，支持多达六种不同的教程类型，前端展示方式也随之变化。

• 
  资讯管理
  ：负责发布和管理新闻资讯内容，展示于首页的轮播区。

2. 用户系统的重要组成部分

• 账户管理
  ：提供注册、登录及密码找回的功能。

教程管理与资讯管理的部分，这里就不再附图了。

• 权限管理：区分管理员与普通用户的权限设置
• 用户活动监测：能够记录用户的访问行为及使用情况

三、API 接口

API

• RESTful API：提供标准化的 REST 接口以供调用
• API 认证：使用时间戳、签名和 nonce 构建安全性认证机制
• 访问控制：可定制的 API 路径保护及访问策略

4. 系统配置

• 网站设置：允许用户自定义网站的名称、标语及 SEO 相关信息

系统安全与性能监控的重要组成

• 
  安全设置
  ：API 的认证功能和受保护路径的配置

• 
  数据统计
  ：包括用户、工具及其访问量的各类统计信息

• 
  系统记录
  ：关注关键操作和错误信息的记录

3、产品定位


网站开发过程中的关键要素与产品定位

在展示了网站的产品阶段成果后，接下来将重点介绍网站开发中的各个阶段所应关注的主要工作要素。

当我们决定要创建一个工具导航网站时，首先必须明确的便是 产品的定位。

具体而言：这款产品旨在解决哪些难题？能够为用户带来哪些价值？ 最初我的想法是开发一个专注于 AI 工具或测试开发工具的网站，但经过深入的研究与分析，我意识到如果只聚焦某一特定领域，虽然工具或内容会更加集中，但作为一个工具导航类产品，其性质与其他类型的网站依然存在差异。无论是程序员、测试开发者还是自媒体创作者，所需的效率工具往往并不单一，它们主要是围绕工作需求，以场景为导向的。而在不同场景和工作需求下，所需的效率工具各不相同，且通常跨越多个分类和领域，往往需要多种工具的组合。

因此，在为网站进行命名和定位时，我避免选择过于专一的方向，比如 AI 工具导航或测试开发工具导航等。

最终，我们为产品网站确定的名称为：快捷导航 ， 寓意为“一切皆可导”。

网站功能规划与需求分析

网站定位与内容概述： 本平台汇聚了人工智能、大数据、软件测试、开发、设计、运维、职场效率以及自媒体创作等众多领域的优质资源和工具。无论是寻求 AI 助手、开发测试工具还是提高工作效率，都能够满足用户的多样化需求。我们致力于构建国内最具实用性的工具导航平台，旨在帮助用户在不同场景中便利地获取所需，无需繁琐的搜索，迅速找到所需的资源。

4、产品功能需求分析与整合

在明确了网站定位后，接下来便是确定需要实现哪些功能，这就涉及到需求分析的过程。那么，这一步该如何实施呢？尽管方法不止一种，我愿意分享一些个人的经验，通常我会分为以下三个步骤：

• 第一步，依据对导航网站的理解，撰写一份初步的需求草案。
• 第二步，借助 AI 工具，例如让 Cursor 协助分析并生成需求文档。
• 第三步，亲自访问其他导航网站，分析其共通之处，提炼出值得借鉴的优点。

通过上述三个步骤的实施，最终能够整合出一份清晰的需求文档。

5、确认设计思路和技术方案

本项目将采用前后端分离的架构，主要由三层组成：

• 前端部分：利用 Vue 3 框架构建单页应用，负责用户界面和互动体验
• 后端 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（定制化用户界面）

6、项目开发

AI 编程辅助工具的崭露头角

在需求及解决方案明确之后，AI 编程辅助工具：Cursor便可以大显身手了。

提到这一点，不禁让我回想起近期关于 AI 编程热潮时期，常听到的一些看法：“AI 是否会取代程序员，程序员是否会失业”等相关话题

借此机会，分享一下我的看法：尽管 AI 在编程中能够显著提高效率，但这种提升主要体现在编码环节。至于产品定位、需求分析、方案设计、以及产品创新等方面，仍然需要依靠人类的经验和长时间的学习来积累。这正是人类的核心竞争力。因此，大家无需过于担心 AI 会完全取代程序员或测试工程师。关键在于持续学习，并保持那些 AI 难以替代的技能。

6.1 利用 AI 进行前端项目开发

关于 Cursor 的使用与介绍，并不是本文的主要内容，这里就不多做展开。如果对此感兴趣的读者，可以在后台留言。如果有很多人对此感兴趣，我们将考虑后续单独撰写一篇文章。

利用 AI 提升前端开发效率的步骤

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 启动本地开发服务。

接下来，启动浏览器并访问http://localhost:3000

6.2 利用 AI 开发后台管理系统

同样的操作，在 Cursor 的 AI 对话框中，选择 Agent 模式，进行提示词输入，即可生成后端项目结构，如下图所示。

功能有限，其它的特性就不再一一列举，总之，您只需将开发需求或问题提供给 Cursor 即可。

6.3 Curos 开发经验分享

使用 Cursor 这种 AI 编程辅助工具时，最为重要的是如何向 AI 提出清晰且有效的问题。有人可能会疑惑，问 AI 是否有技巧呢？其实很简单：首先理清自己的需求或面临的问题，然后用简洁自然的口语表达方式向 AI 进行阐述。此外，尽量在一次提问中不包含过多的需求或问题，并提供相关上下文。

在使用 AI 编程工具生成代码时，若发现 AI 生成的内容偏离主题，未能达到预期效果，很可能是因为您未能清晰地表达需求，或未提供足够的上下文信息。

7、确认生产环境部署方案

项目部署及上线前的准备工作

整个项目的前后端功能开发大约花费了一周时间，完成开发后，接下来就必须进行项目的部署与上线。

在进行项目部署之前，建议参考需求分析阶段的思路，整理出一份《正式环境部署方案》。

具体的细节，因涉及敏感信息，这里就不再详细说明了。

简而言之，在部署阶段所采用的方案是：云服务器 +Nginx+Gunicorn，目前尚未引入高可用的解决方案，待用户数量增长后再考虑实施。

如果您在使用网站过程中遇到不稳定的情况，尝试重试后仍无法正常访问，请随时给我留言反馈。

8、IPC 备案与 HTTPS 证书申请

在网站正式上线之际，除了代码部署及功能层面的关注外，还需重视网站的易用性、合法性与安全性等问题。这需要进行一系列的准备工作，例如：云服务器购买 、 域名申请 、IPC 备案、 公安备案 、HTTPS 证书申请 等。当然，这些准备工作可以同步开展，尤其是 IPC 备案，提交相关信息后，需耐心等待几天以获得审核结果。

8.1 IPC 备案与 HTTPS 证书申请的详细解读

在此，我们将重点讨论 IPC 备案 和HTTPS 证书申请 的相关事宜。

我们可以看到，IPC 备案是一个非常重要的步骤，通常需要提交相关信息后耐心等待几天才能得到审核结果。与此同时，HTTPS 证书的申请过程也不容小觑，它为网站的安全性提供了保障。因此，这两个过程可以并行进行，以提高整体效率。

深入了解 ICP 备案的流程与注意事项

ICP 备案 的全称为互联网内容提供商备案，是中国政府对境内网站进行的一项管理规定。所有在国内提供信息服务的网站，都必须按照备案所在地的管理机构的规定，先进行 ICP 备案，之后才能正常对外提供相关服务。因此，ICP 备案是合法运营网站的基础。

进行 ICP 备案的过程，可以分为五个主要步骤：

• 第一步：填写相关订单
• 第二步：阿里云进行初步审核
• 第三步：工信部短信验证
• 第四步：管理局审核
• 第五步：查询 ICP 备案的进度和结果

例如，以下是我的 ICP 备案流程及所耗费的时间。（总共用时三天，速度相对较快）

值得注意的是，如果您的网站已经完成 ICP 备案并希望在中国大陆进行访问，则需在网站正式对外服务后的 30 天内提交公安联网备案申请。相较于 ICP 备案，公安联网备案所需的时间通常更长，审核时间甚至可能因为碰到周末而延长至五天。

8.2 申请 HTTPS 证书的步骤

为了确保网站在对外提供服务时的安全性，很多网站会实施 HTTPS 协议，申请 HTTPS 证书便是这一过程中不可或缺的环节。

HTTPS 证书主要分为两种类型：

• 个人测试证书（免费提供）。
• 正式证书（需收费）。

用户可以根据自己的需求选择申请测试证书或购买正式证书，这里将以个人测试证书为例进行说明。

首先，登录到数字证书管理服务控制台，在左侧导航栏中选择 证书管理 > 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、总结

分享的快乐，大家共享。如果在工作中你有值得推荐的优秀工具，或者在使用本站时遇到任何问题和建议，欢迎随时与我们沟通。