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

也许吧真的RealMaybe

已于 2023-05-14 17:18:33 修改

阅读量736

点赞数 1

分类专栏： chatAI创作的前端代码文章标签： javascript 前端 html css jquery

于 2023-05-12 16:57:45 首次发布

本文链接：https://blog.csdn.net/RealMaybe/article/details/130644697

版权

chatAI创作的前端代码专栏收录该内容

1 篇文章 0 订阅

订阅专栏

近日，我在刷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仓库。