实战 0~1 用GPT打工系列 交互式互动 '零'代码制作网站

colakang
934 阅读9分钟

亲爱的读者，欢迎来到这个充满魔法的实战项目！在这里，我们将一起探索如何通过与人工智能的互动，实现从零到一地创建一个网站，而且是以“零代码”的方式实现的。是的，您没有听错，这是一个不需要编程知识的项目，只需与我这个GPT语言模型进行交互，您就能轻松创建属于自己的网站。让我们一起踏上这段奇妙的旅程吧！

与GPT互动生成的项已同步上线，访问地址：gpt.nftprize.pro

神奇的开始：与GPT的对话

一切都从一个简单的对话开始。在这个项目中，我将作为您的智能助手，为您提供实时的指导和帮助。您可以向我提问，我会回答您的问题，并引导您完成每一个步骤。就像魔法一样，我们将通过对话来实现网站的制作。首先，我们讨论了网站的主题和目标。经过一番交流，我们确定了创建一个“云API平台”的网站，这个平台将提供各种API服务。这是一个实用且具有挑战性的项目，我们充满了期待。

设计与规划：共同构思网站的蓝图

接下来，我们一起讨论了网站的设计和规划。我向用户展示了一些网站模板，并提供了一些建议。用户希望网站简洁大方，易于使用。于是，我们确定了网站的布局、颜色方案以及功能模块。

chat_history_001.png

chat_history_002.png

“我想要一个淡雅的蓝色调。”我回答。
“好的，淡雅的蓝色调能够给人一种清新、稳重的感觉，非常适合云API平台。”GPT给予了肯定。
在这个过程中，我们还讨论了许多细节，例如添加一个“注册”页面，让用户能够注册并获得API密钥。我们还探讨了如何实现用户的个人信息页面，以及如何保护用户的隐私。

chat_history_004.png

chat_history_005.png

chat_history_007.png

chat_history_008.png

虽然GPT无法直接展示参考网站的效果图，但它通过语言描述清晰地传达了设计理念，并提供了许多有价值的建议。我感到非常满意，并按照这些规划开始着手设计网站。

chat_history_010.png chat_history_011.png

这个阶段的互动让我深刻体验到了人工智能的魅力，GPT不仅
能够理解我的需求，还能提出实用的建议，让我感受到了与真人合作的感觉。

动态路由与状态管理：Vue.js 前端框架

在实现网站的过程中，我们选择了 Vue.js 作为前端框架，并利用 Vue Router 和 Vuex 来实现动态路由和状态管理。

chat_history_015.png

路由配置与导航守卫

我们首先配置了网站的路由，包括登录页面、首页、注册页面以及个人资料页面。为了保护用户的隐私，我们在个人资料页面的路由规则中添加了元数据 requiresAuth，以标记该页面需要身份验证。
为了实现身份验证，我们设置了全局前置守卫，该守卫会在每次导航发生时执行。它会检查目标路由是否需要身份验证，并根据用户的登录状态决定是否允许导航。如果用户未登录，守卫会重定向用户到登录页面；如果用户已登录，则允许导航。

Vuex 状态管理

为了管理用户的登录状态和信息，我们引入了 Vuex 状态管理库。我们在 Vuex store 中定义了状态变量，包括 isLoggedIn、email、apiKey 和 token，用于存储用户的登录状态、邮箱、API 密钥和令牌。
我们还定义了一系列的 mutations 和 actions，以便于更新和操作状态。其中，updateUserInfo action 用于更新用户信息，而 initializeStore action 则用于从 localStorage 中获取登录状态并初始化状态变量。

与 GPT 的交互

在整个开发过程中，我与 GPT 语言模型进行了多次交互。GPT 不仅能够理解我的需求，还能提供实用的建议和解决方案。例如，GPT 为我解释了如何设置全局前置守卫以实现身份验证，以及如何使用 Vuex 管理用户状态。
这个过程让我深刻体验到了人工智能的强大能力和实用价值。通过与 GPT 的交互，我得以轻松实现前端功能，并为用户提供了一个易于使用的云 API 平台。

动手实践：零代码实现网站制作

有了明确的目标和规划，我们开始了动手实践的阶段。用户按照我的指导，逐步完成了网站的制作。在这个过程中，用户不需要编写任何代码，只需通过与我互动，就能实现网站的各项功能。
我们一起创建了“注册”页面，并实现了表单验证和提交功能。我们还设计了个人信息页面，并实现了密码修改和API密钥复制功能。每当遇到困难，用户都会向我寻求帮
助，我会耐心解答，并提供解决方案。这是一个充满探索和乐趣的过程，我们一起克服了许多挑战。

案例一：用户注册功能的实现

在项目的初期，我向GPT提出了一个需求：“我想实现用户注册功能，用户可以通过邮箱和密码进行注册，注册成功后，系统会自动生成一个API密钥，并返回给用户。”
GPT根据我的需求，逐步生成了后端代码，包括查询用户信息、生成API密钥、密码加密、存储用户信息到数据库以及生成JWT token等功能。在这个过程中，我们还讨论了如何处理用户邮箱已存在的情况，以及如何设置token的有效期。

chat_history_021.png

chat_history_020.png

chat_history_019.png

案例二：用户登录功能的实现

接下来，我向GPT提出了用户登录功能的需求：“用户可以通过邮箱和密码进行登录，登录成功后，系统会返回用户的API密钥和JWT token。”
GPT根据登录功能的需求，生成了相应的后端代码，包括查询用户信息、验证密码、生成JWT token等功能。在这个过程中，我们还讨论了如何处理用户邮箱不存在或密码错误的情况。

chat_history_017.png

chat_history_018.png

案例三：修改密码功能的实现

随后，我向GPT提出了修改密码功能的需求：“用户可以通过提供原密码和新密码来修改密码，修改成功后，系统会返回成功的提示。”
GPT生成了修改密码功能的后端代码，包括验证JWT token、查询用户信息、验证原密码、密码加密、更新密码等功能。在这个过程中，我们还讨论了如何处理JWT token无效、原密码错误等异常情况。

chat_history_022.png

chat_history_023.png

chat_history_024.png

案例四：查询剩余配额功能的实现

最后，我向GPT提出了查询剩余配额功能的需求：“用户可以查询自己的剩余API调用配额。”
GPT生成了查询剩余配额功能的后端代码，包括验证JWT token、查询用户信息、返回剩余配额等功能。在这个过程中，我们还讨论了如何处理JWT token无效、用户不存在等异常情况。

chat_history_025.png

代码实现与优化

在整个开发过程中，我与GPT进行了接近350次的交互，其中包括了许多debug时间。每当遇到问题或困难时，GPT都能够及时给出解决方案，帮助我解决问题。这个过程让我深刻体验到了人工智能的强大能力和实用价值。
以下是我们实现的一个RESTful API的代码片段，这段代码用于处理用户与云API平台的交互，包括验证API密钥、查询配额、调用OpenAI API等功能。在开发过程中，我们遇到了HTTP 504超时问题，因此将调用OpenAI API的方式改为异步，并增加计时，以确保不浪费Lambda的计算资源。

const AWS = require('aws-sdk');
const dynamodb = new AWS.DynamoDB.DocumentClient();
const { Configuration, OpenAIApi } = require("openai");  
exports.handler = async (event) => {  // ...省略部分代码...  
  // 如果event.body是字符串，则解析为对象  
  const requestBody = typeof event.body === 'string' ? JSON.parse(event.body) : event.body;  
  // 从请求体中提取messages字段  
  const messages = requestBody.messages;  
  // ...省略部分代码...  
  const openaiTimeout = 29000; // 设置 OpenAI API 超时时间为 29000 毫秒（29 秒）  
  const completion = await createChatCompletionWithTimeout(messages, openaiTimeout, enterprises);  
  // ...省略部分代码...};  
async function createChatCompletionWithTimeout(messages, timeout, enterprises) {
// ...省略部分代码...  
  const openaiPromise = openai.createChatCompletion({
      model: "gpt-3.5-turbo",    
      max_tokens: 800,    
      messages: messages,  
  });  
  const timeoutPromise = new Promise((resolve, reject) => {
      setTimeout(() => {      
          reject(new Error(`OpenAI API 超时，超过 ${timeout} 毫秒`));
      }, timeout);
  });  
  try {    
      const completion = await Promise.race([openaiPromise, timeoutPromise]);
          return completion;
      } catch (error) {
          console.error(error.message);
          return buildResponse(`网络不给力噢,请稍后再试`);
      }}  
function buildResponse(content) { 
    // ...省略部分代码...
    }

成果展示：一个完整的云API平台经过一系列的努力，我们终于完成了这个云API平台的制作。

这个网站拥有清晰的布局、简洁的设计以及实用的功能。用户可以轻松注册、登录、查看个人信息、修改密码以及获取API密钥。这是一个功能完善、易于使用的平台，我们为此感到自豪。
最让人惊奇的是，整个项目都是通过与我这个GPT语言模型的交互来实现的。用户不需要编写任何代码，也不需要具备编程知识，就能轻松创建一个完整的网站。这是一个充满魔法的实战项目，我们一起见证了从零到一的奇迹。

结语：人工智能与未来的网站制作

通过这个实战项目，我们成功地实现了一个云API平台的网站，实现了用户注册、登录、修改密码、查询剩余配额等功能。这个过程充满了探索和乐趣，也让我深刻认识到人工智能在网站制作中的巨大潜力。
GPT作为一个强大的语言模型，能够理解用户的需求，并生成相应的代码和解决方案。这让网站制作变得更加简单和高效，也让更多没有编程基础的人能够轻松创建属于自己的网站。
当然，人工智能并非万能的，它也有自己的局限性。在实际的开发过程中，我们仍然需要人的创造力和经验来解决复杂的问题。然而，人工智能无疑是一个强大的工具，它能够帮助我们更好地实现目标，创造更多的可能性。
未来，随着人工智能技术的不断发展，我们有理由相信，网站制作将变得更加智能化、自动化，人们可以通过与人工智能的交互，轻松实现自己的想法和创意。这将是一个充满无限可能的未来，让我们一起期待吧！

对的，全文由GPT生成并校对

avatar
文章
阅读
粉丝