大家好，我是讯享网，很高兴认识大家。这里提供最前沿的Ai技术和互联网信息。



大家好，我是狂师。

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

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

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

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

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

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

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

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

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

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

网站基本信息概述

网站名称：快捷导航

访问地址： 或

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

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

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

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

1. 分类导航功能： 该平台支持多级分类，用户可以轻松找到所需工具，涵盖 AI、办公、开发、测试、设计、运维及自媒体创作等多个领域的优质资源。

首页

2. 工具展示卡片： 采用视觉吸引力十足的卡片式设计，展示各类工具的详细信息和标签。

3. 多引擎检索支持：

4. 直接跳转功能的支持： 为了提升用户体验，我们特别添加了直达链接功能，让用户能够迅速访问目标网站，显著提高了使用效率，避免了一系列繁琐的操作。

5. 工具详情介绍： 用户可通过工具详情页面，轻松获取工具的定位、基本介绍以及其核心功能特性等信息。

工具详细页面

6. 最近的使用记录： 即使没有注册账户，用户也能轻松查阅自己近期使用过的工具，依赖浏览器的 Cookie 功能，这极大地方便了访问体验。

7. 能够查看最新发布及最受欢迎的工具: 系统通过时间、访问量、相关性与热度等综合排序算法进行展示。

最新发布 热门推荐

8. 提供用户互动选项： 用户可通过注册和登录功能，对喜爱的工具进行点赞与收藏。

9. 收藏功能的便利性： 用户可通过在工具详情页面点击星形图标，轻松添加或删除收藏选项。这样，您喜爱的工具便能被保存至“我的收藏”页面，方便随时访问，并且可以一键直达相关网址。

我的导航 -> 我的收藏

10. 用户自定义网址的功能： 在“我的导航”中，用户可以轻松地自定义常用工具的网址，打造个性化的导航体验。

我的导航 -> 自定义网址

11. 记录工具的历史使用： 用户可在“我的导航”中找到“我用过的”选项，查看自己最近访问或使用过的工具记录。

12. 无限制的免费学习资源： 我们提供免费的教程和资源供用户在线获取和下载，助力他们迅速掌握新工具的使用技巧。（真是太划算了~）

免费的学习资源

13. 工具提交与收录支持: 我们鼓励用户和工具服务提供者在网站上分享、评价并提交工具，以促进健康的生态环境。

提升网站体验的便捷功能
收录申请

14. 快速收藏功能： 只需按下（Ctrl+D），便可迅速将网站收藏保存。

15. 用户体验提升： 当页面内容较为庞大时，支持一键快速跳转到网站的导航或底部功能。

网站将支持在首页以动态轮播的形式展现最新的资讯信息，为用户提供及时的内容更新。

系统采用动态 API 认证机制，确保每次请求时都能获取到最新的配置信息。用户无需重启服务，即可灵活调整安全策略，提升网站的安全性。

通过 SiteSettings 模型，用户能够轻松管理网站的全局设置，包括：

• 网站的名称、标语以及 SEO 相关配置
• API 认证的开启与路径保护的配置
• 所有设置可在不重启服务的情况下立即生效

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

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

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

首页

1. 后台数据管理功能

三、API 接口

全面解析 API 接口的核心功能
API

RESTful API：提供标准化的 REST 接口以供调用

API 认证：使用时间戳、签名和 nonce 构建安全性认证机制

访问控制：可定制的 API 路径保护及访问策略

请求限流：用于防止 API 被频繁调用

4. 系统配置

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

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

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

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

1、在 的 AI 对话框中，请选择 Agent 模式，并指定模型为：或。（最新版本已升级为）

接着输入：“根据上述需求，自动为我生成前端页面代码，使用 vue 实现。”

2、点击发送后，Cursor 会自动创建项目结构及相关文件代码。

3、选择允许接收所有代码，随后自动生成的项目结构如下：

4、在终端中执行 以安装所需依赖，之后运行 启动本地开发服务。

接下来，启动浏览器并访问

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

首先，登录到数字证书管理服务控制台，在左侧导航栏中选择 > 。在个人测试证书页面上，点击“立即购买”按钮即可。

2、在购买界面，请保持默认的设置，仔细查看并勾选服务协议，然后点击“立即购买”以完成支付。

3、在个人测试证书页面（原免费的证书）中，点击“创建证书”，填写所需的基本信息，其他选项保持默认，确保信息准确后，提交审核。

在此处输入您想要申请证书的域名，例如，并勾选“快捷签发”选项。

4、域名所有权验证成功后，证书一般会在 1 到 15 分钟内完成签发，平均时长为此。签发后，证书状态将显示为已签发。选择与您的 Web 服务器类型相匹配的证书（例如 Nginx），然后点击下载证书文件的压缩包。

5、将证书上传至服务器，并调整相关配置即可完成设置。

若需了解 HTTPS 证书的具体操作和配置，请访问本网站 ()-> 在 免费教程 菜单中进行查阅。

在生产环境的部署阶段，需重点关注以下几个重要环节：

当一切都准备妥当后，便可以开始将产品（包括工具和教程）正式发布了。这项工作耗费了我不少的时间，甚至在某些方面，所花的时间超过了之前的编码阶段。

尽管这一阶段的工作量很大，但其重要性不可忽视。我认为产品上线的耗时主要体现在几个方面：