如果让chatAI来写代码，会是怎么样的效果？

近日，我在刷B站的时候看到了由UP主老耗游戏发布的这个视频这下键盘不会废了！

在这个视频中，我了解到了这个网站：WeTab新标签页，也在这个网站中真正的接触到了ChatAI。

这个网站的chatAI功能实际上还是需要下载安装如谷歌浏览器、Edge浏览器等的相关插件后才可运行，网页端并不提供chatAI服务。

在使用相关插件时，需要注册、登录对应的账号，不过只要有邮箱就可以了。

这个插件的开发人员的哔哩哔哩主页在这里：WeTab新标签页

因为我自己有接触过一些前端开发的东西，之前也听说过用chatGPT来写代码的相关行为，所以，在好奇心的驱使下，我给这个插件中的chatAI提供了一些我想要的效果，让chatAI根据我提供的目标样式、目标效果等来生成相关的代码，你们猜猜写出来的代码怎么样？

令我感到惊奇的是，chatAI不仅用很快的速度完成了相关的代码内容，同时还对我提出的相关的报错内容做出了非常快速的修复，下面展示相关内容。

在我的这条很长的消息过后，chatAI开始给我提供相关的代码。

由于代码内容相对较长，我将把chatAI提供的代码放在后面的位置，现在只展示chatAI的消息和提供的部分代码内容。

接下来是css代码

然后是必不可少的JavaScript代码内容

在这时，我将chatAI所写的相关的代码复制到了vscode中的文件中，并使用这一套代码来与准备好的一套后台代码来进行交互。

下图为chatAI提供的代码所实际构成的页面样式。

在首次的交互中，在前台页面出现了跨域报错，我将相关报错输入chatAI之后，chatAI提供了解决方案：

随后，我让chatAI写出来自他的后端代码：

在写入chatAI所提供的后端代码后，再次出现了跨域报错，于是，我将报错内容再次提供给了chatAI，他也提供出了来自他的解决办法

而在这之后，所有的代码内容能够成功的进行运行，并达到我想要的相关的效果。

那么，说了这么多，chatAI到底是提供了怎样的代码呢？

接下来，让我们一起看看chatAI提供的相关的代码内容。

首先是HTML的代码

<!DOCTYPE html>
<html>
<head><title>Login/Signup Page</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" type="text/css" href="style.css"><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body><header><h1>Login/Signup Page</h1></header><main><form id="loginForm" class="form"><h2>Login</h2><label for="username">Username:</label><input type="text" name="username" id="login-username"><label for="password">Password:</label><input type="password" name="password" id="login-password"> <button type="button" id="login-btn">Login</button></form><form id="signupForm" class="form"><h2>SignUp</h2><label for="signup-username">Username:</label><input type="text" name="signup-username" id="signup-username"><label for="signup-password">Password:</label><input type="password" name="signup-password" id="signup-password"><button type="button" id="signup-btn">SignUp</button></form></main><footer><p>&copy;2023 All rights reserved.<br>Authors: Your Name</p></footer><script src="script.js"></script>
</body>
</html>

接下来是CSS的代码内容

header{display: flex;justify-content: center;align-items: center;height: 100px;background-color: #0072C6;color: #fff;font-size: 2em;font-weight: bold;
}main{display: flex;flex-direction: column;justify-content: center;align-items: center;min-height: 400px;
}.form{display: flex;flex-direction: column;margin: 20px;padding: 20px;background-color: #ddd;box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2);border-radius: 4px;
}form h2{font-size: 1.5em;margin-bottom: 10px;
}label{font-size: 1.2em;
}button{background-color: #0072C6;color: #fff;border: none;border-radius: 4px;padding: 10px 20px;margin-top: 10px;font-size: 1.2em;cursor: pointer;
}button:hover{background-color: #005CA4;
}footer{text-align: center;background-color: #0072C6;color: #fff;font-size: 0.8em;padding: 10px;
}

再然后是JavaScript的代码内容

$(document).ready(function() {// 注册$('#signup-btn').click(function() {var username = $('#signup-username').val();var password = $('#signup-password').val();var data = {username: username,password: password};$.post('http://localhost:8080/saveData', data, function(response) {// 注册成功提示alert(response);});});// 登录$('#login-btn').click(function() {var username = $('#login-username').val();var password = $('#login-password').val();var data = {username: username,password: password};$.post('http://localhost:8080/checkData', data, function(response) {if(response.status === "success") {// 登录成功提示alert(response.message);} else {// 登录失败提示alert(response.message);}});});
});

随后，则是由chatAI提供的后端的代码内容

const express = require('express');
const app = express();
const bodyParser = require('body-parser');const port = 8080;// 使用body-parser中间件解析请求体
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());// 存储注册用户信息的数组
const users = [];// 处理注册请求
app.post('/saveData', (req, res) => {const { username, password } = req.body;if (users.find(user => user.username === username)) {// 如果用户名已存在，返回错误信息res.send('Username already exists!');return;}// 将用户信息添加到users数组中users.push({ username, password });res.send('Registration success!');
});// 处理登录请求
app.post('/checkData', (req, res) => {const { username, password } = req.body;const user = users.find(user => user.username === username && user.password === password);if (user) {// 如果用户名和密码匹配，返回成功信息res.send({ status: "success", message: "Login success!" });} else {// 如果用户名或密码错误，返回错误信息res.send({ status: "failed", message: "Invalid username or password!" });}
});// 启动服务
app.listen(port, () => {console.log(`App listening at http://localhost:${port}`)
});

上述代码在运行时，出现了如下的跨域报错

Access to XMLHttpRequest at 'http://localhost:8080/saveData' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

以及在出现跨域报错后，chatAI提供的解决方案

// 安装cors中间件npm install cors// 在后端 Node.js 代码中引入cors中间件：const cors = require('cors');
app.use(cors());// 在配置完以上代码后，重启后端服务器，就会发现前端的代码可以成功发起跨域请求了。
// 同时，你也可以配置一些选项来针对性地解决跨域问题，比如允许来自指定域名下的请求访问：app.use(cors({origin: 'http://example.com'
}));

这个登录、注册页面，全部都由chatAI来完成，本人只负责了将代码复制下来并运行。

相关完整的源码及我与chatAI对话的内容导出的*.md文档均已上传至git仓库。