GPT生产前端代码

我让GPT生成一段前端代码：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
  <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
  <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
    <style>
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.chat-messages {
  overflow-y: scroll;
  flex: 1;
    height: 100vh;
}


    </style>
</head>
<body>

<div>
   <div id="messages"></div> <!-- 用于显示对话内容 -->
   <input type="text" id="messageInput"></input> <!-- 用于输入对话内容 -->
   <button id="sendButton">发送</button> <!-- 用于发送对话内容的按钮 -->
</div>

    <script>
const apiUrl = 'https://localhost';
         
const messagesDiv = document.getElementById('messages');
const messageInput = document.getElementById('messageInput');
const sendButton = document.getElementById('sendButton');

sendButton.addEventListener('click', () => {
  const xhr = new XMLHttpRequest();
  xhr.open('POST', apiUrl);
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.onreadystatechange = () => {
    if (xhr.readyState === 4 && xhr.status === 200) {
      const data = JSON.parse(xhr.responseText);
      const messageDiv = document.createElement('div');
      messageDiv.innerText = data;
      messagesDiv.appendChild(messageDiv);
      messageInput.value = '';
    }
  };
  xhr.send(JSON.stringify({ message: messageInput.value }));
});
</script>
</body>
</html>
View Code

最开始   messageDiv.innerText = data.message;

但控制台:

 修改：   messageDiv.innerText = data;

而请求url注意是否加s，有证书认证。

 测试请求url在服务器写成web api技术，这里是测试数据。启动时用vs iis启动的。

posted @ 2023-07-12 12:28  有翅膀的大象  阅读(215)  评论(0)  编辑  收藏  举报