通过ChatGPT生成产品代码

本文涉及的产品
云数据库 RDS MySQL,集群系列 2核4GB
推荐场景:
搭建个人博客
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
密钥管理服务KMS,1000个密钥,100个凭据,1个月
简介: 通过ChatGPT生成产品代码

1、通过提示语生成用户注册界面

用户注册界面包括。

  • 账号:文本框,5-20位大小写英文字符、数字。
  • 密码:密码框,必须包括大小写英文字符、数字和特殊字符,5-30位,SHA256散列传输。
  • 码确认:与密码一致
  • 手机号:符合中国手机号码格式
  • Email:符合标准Email格式
  • 注册按键

请生成相应的HTML代码以及JavaScript程序。

输出

以下是一个用户注册界面的 HTML 代码和 JavaScript 程序,满足您的要求:

账号:文本框,5-20位大小写英文字符、数字。

密码:密码框,必须包括大小写英文字符、数字和特殊字符,5-30位,使用SHA256散列传输。

密码确认:与密码保持一致。

手机号:符合中国手机号码格式。

Email:符合标准Email格式。

注册按键:提交表单。

HTML 代码与 JavaScript 验证

代码语言:javascript

复制

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>用户注册界面</title>
<script
src="https://cdn.jsdelivr.net/npm/crypto-js@4.1.1/core.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/crypto-js@4.1.1/sha256.js"></script>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f4f4f4;
}
.container {
max-width: 400px;
margin: auto;
padding: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
input[type="text"], input[type="password"],
input[type="email"], input[type="tel"] {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
}
button:hover {
background-color: #45a049;
}
.error {
color: red;
font-size: 12px;
}
</style>
</head>
<body>
<div class="container">
<h2>用户注册</h2>
<form id="registerForm" onsubmit="return
validateForm()">
<label for="username">账号 (5-20位字母或数字):</label>
<input type="text" id="username"
name="username" required>
<div id="usernameError"
class="error"></div>
<label for="password">密码 (5-30位,包含大小写字母、数字和特殊字符):</label>
<input type="password" id="password"
name="password" required>
<div id="passwordError"
class="error"></div>
<label for="confirmPassword">密码确认:</label>
<input type="password" id="confirmPassword"
name="confirmPassword" required>
<div id="confirmPasswordError"
class="error"></div>
<label for="phone">手机号 (中国):</label>
<input type="tel" id="phone"
name="phone" required>
<div id="phoneError"
class="error"></div>
<label for="email">邮箱:</label
<input type="email" id="email"
name="email" required>
<div id="emailError"
class="error"></div>
<button type="submit">注册</button>
</form>
</div>
<script>
function validateForm() {
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
const confirmPassword =
document.getElementById('confirmPassword').value;
const phone = document.getElementById('phone').value;
const email = document.getElementById('email').value;
let isValid = true;
document.getElementById('usernameError').innerText = '';
document.getElementById('passwordError').innerText = '';
document.getElementById('confirmPasswordError').innerText = '';
document.getElementById('phoneError').innerText = '';
document.getElementById('emailError').innerText = '';
const usernamePattern = /^[a-zA-Z0-9]{5,20}$/;
if (!usernamePattern.test(username)) {
document.getElementById('usernameError').innerText = '账号必须是5-20位的字母或数字';
isValid = false;
}
const passwordPattern =
/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_]).{5,30}$/;
if (!passwordPattern.test(password)) {
document.getElementById('passwordError').innerText = '密码必须包含大小写字母、数字和特殊字符';
isValid = false;
}
if (password !== confirmPassword) {
document.getElementById('confirmPasswordError').innerText = '密码确认不一致';
isValid = false;
}
const phonePattern = /^1[3-9]\d{9}$/;
if (!phonePattern.test(phone)) {
document.getElementById('phoneError').innerText = '请输入有效的中国手机号';
isValid = false;
}
const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
if (!emailPattern.test(email)) {
document.getElementById('emailError').innerText = '请输入有效的Email地址';
isValid = false;
}
if (isValid) {
const hashedPassword =
CryptoJS.SHA256(password).toString(CryptoJS.enc.Base64);
console.log('加密后的密码:', hashedPassword);
alert('注册成功!');
}
return isValid;
 }
</script>
</body>
</html>

说明:

l此代码包含了所有必要的输入验证和密码加密处理。

l使用了 CryptoJS 库来进行密码的 SHA256 散列。

l表单提交前会进行所有必要的验证,确保所有数据符合规定的格式。

2、对生成的注册页面进行调整

2.1建立css目录

在css目录下建立index.css。

代码语言:javascript

复制

<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f4f4f4;
}
.container {
max-width: 400px;
margin: auto;
padding: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
input[type="text"], input[type="password"],
input[type="email"], input[type="tel"] {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
}
button:hover {
background-color: #45a049;
}
.error {
color: red;
font-size: 12px;
}
</style>

2.2建立js目录

在js目录下建立index. js。

代码语言:javascript

复制

function validateForm() {
    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;
    const confirmPassword = document.getElementById('confirmPassword').value;
    const phone = document.getElementById('phone').value;
    const email = document.getElementById('email').value;
         
    let isValid = true;
    document.getElementById('usernameError').innerText = '';
    document.getElementById('passwordError').innerText = '';
    document.getElementById('confirmPasswordError').innerText = '';
    document.getElementById('phoneError').innerText = '';
    document.getElementById('emailError').innerText = '';
         
    const usernamePattern = /^[a-zA-Z0-9]{5,20}$/;
    if (!usernamePattern.test(username)) {
        document.getElementById('usernameError').innerText = '账号必须是5-20位的字母或数字';
        isValid = false;  
    }
         
    const passwordPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_]).{5,30}$/;
    if (!passwordPattern.test(password)) {
        document.getElementById('passwordError').innerText = '密码必须包含大小写字母、数字和特殊字符';
        isValid = false;
    }
         
    if (password !== confirmPassword) {
        document.getElementById('confirmPasswordError').innerText = '密码确认不一致';
        isValid = false;
    }
         
    const phonePattern = /^1[3-9]\d{9}$/;
    if (!phonePattern.test(phone)) {
        document.getElementById('phoneError').innerText = '请输入有效的中国手机号';
        isValid = false;
    }  
         
    const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    if (!emailPattern.test(email)) {
        document.getElementById('emailError').innerText = '请输入有效的Email地址';
        isValid = false;
    }
         
    if (isValid) {
         const hashedPassword = CryptoJS.SHA256(password).toString(CryptoJS.enc.Base64);
         console.log('加密后的密码:', hashedPassword);
         alert('注册成功!');
        }
         
     return isValid;
    }

2.3修改register.html

代码语言:javascript

复制

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>用户注册界面</title>
 <link
rel="stylesheet" type="text/css"
href="css/index.css"/>
 <script
src="js/index.js" type="text/javascript"></script>
<script
src="https://cdn.jsdelivr.net/npm/crypto-js@4.1.1/core.js"></script>
 <script
src="https://cdn.jsdelivr.net/npm/crypto-js@4.1.1/sha256.js"></script>
</head>
<body>
<div class="container">
<h2>用户注册</h2>
 <form name="myForm"
method="POST" action="jsp/register.jsp"
onsubmit="return validateForm();">
<label for="username">账号 (5-20位字母或数字):</label>
<input type="text" id="username"
name="username" required>
<div id="usernameError"
class="error"></div>
<label for="password">密码 (5-30位,包含大小写字母、数字和特殊字符):</label>
<input type="password" id="password"
name="password" required>
<div id="passwordError"
class="error"></div>
<label for="confirmPassword">密码确认:</label>
<input type="password" id="confirmPassword"
name="confirmPassword" required>
<div id="confirmPasswordError"
class="error"></div>
<label for="phone">手机号:</label>
<input type="tel" id="phone"
name="phone" required>
<div id="phoneError"
class="error"></div>
<label for="email">邮箱:</label>
<input type="email" id="email"
name="email" required>
<div id="emailError"
class="error"></div>
<button type="submit">注册</button>
</form>
</div>
</body>
</html>

2.4修改index.js文件

见黄色部分

代码语言:javascript

复制

if (isValid) {
       // 获取密码并进行SHA-256哈希
       let passwordField = document.forms["myForm"]["password"];
       let hashedPassword = CryptoJS.SHA256(password).toString(CryptoJS.enc.Base64);
        
       // 将哈希后的密码重新赋值给表单的密码字段
       passwordField.value = hashedPassword;
       console.log('加密后的密码:', hashedPassword);
    alert('注册成功!');
}

3、生成处理注册的Java代码

输入

注册代码用java bean+jsp实现,处理页面为register.jsp,

数据库结构为

id   int 自动加1

uesrname varchar(50)

password varchar(100)

phone  varchar(50)

email  varchar(50)

数据库名为ebusiness,表为user

请实现java bean+jsp代码以及数据库创建SQL语句

请修改register.html,让其调用java bean+jsp代码

输出

首先,让我们开始创建数据库和表的 SQL 语句,然后再实现 Java Bean、JSP 代码,并最后修改 register.html 以调用这些代码。

1. 创建数据库和用户表的 SQL 语句

2. 修改 Java Bean (User.java)

代码语言:javascript

复制

-- 创建数据库
CREATE DATABASE IF NOT EXISTS ebusiness;
         
-- 使用数据库
USE ebusiness;
         
-- 创建用户表
CREATE TABLE IF NOT EXISTS user (  
    id INT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(50) NOT NULL,
    password VARCHAR(100) NOT NULL,
    phone VARCHAR(50) NOT NULL,
    email VARCHAR(50) NOT NULL
);

User 类需要包括数据库操作,插入注册信息到数据库。

代码语言:javascript

复制

public class User {
    private int id;
    private String username;
    private String password;
    private String phone;
    private String email;
         
    // Getters and Setters
    public int getId() {
        return id;
    }
         
    public void setId(int id) {
        this.id = id;
    }  
         
    public String getUsername() {
        return username;
    }
         
    public void setUsername(String username) {
        this.username = username;
    }
         
    public String getPassword() {
        return password;
    }
         
    public void setPassword(String password) {
        this.password = password;
    }
         
    public String getPhone() {
        return phone;
    }
         
    public void setPhone(String phone) {  
        this.phone = phone;
    }
         
    public String getEmail() {
        return email;
    }
         
    public void setEmail(String email) {
        this.email = email;
    }
}

3. 创建 JSP 文件 register.jsp

这个 JSP 文件将处理注册请求,并将用户数据存储到数据库。

代码语言:javascript

复制

<%@ page import="java.sql.*, javax.sql.*" %>
<%@ page import="ebusiness.User" %>
<%
    String username = request.getParameter("username");
    String password = request.getParameter("password"); // Assuming password is already hashed from client-side
    String phone = request.getParameter("phone");
    String email = request.getParameter("email");  
         
    User user = new User();
    user.setUsername(username);
    user.setPassword(password);
    user.setPhone(phone);
    user.setEmail(email);
         
    try {
        Class.forName("com.mysql.jdbc.Driver");
        Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/ebusiness", "root", "123456");
        String query = "INSERT INTO user (username, password, phone, email) VALUES (?, ?, ?, ?)";
        PreparedStatement ps = con.prepareStatement(query);
        ps.setString(1, user.getUsername());
        ps.setString(2, user.getPassword());
        ps.setString(3, user.getPhone());
        ps.setString(4, user.getEmail());
        ps.executeUpdate();
        out.println("注册成功!");
    } catch (Exception e) {  
        out.println("数据库连接失败:" + e.getMessage());
    }
%>

总结:

注意事项

安全性: 在上面的示例中,密码假定已经在客户端用 JavaScript 进行了哈希处理。然而,在实际应用中,应该在服务器端再次进行哈希处理以确保安全。

数据库连接信息: 在 register.jsp 中,数据库用户名和密码被硬编码为 root 和 password。在实际部署时,应该使用更安全的认证方式,并可能需要根据实际环境调整这些值。

错误处理: 应该增加更详细的错误处理逻辑,以便在出现问题时提供更多的上下文信息。

驱动加载: 确保已经将 MySQL JDBC 驱动添加到项目的类路径中。

3.1修改register.jsp

1)<%@ page import="your.package.User" %>

将<%page import=" your.package.User" %>

改为<%@ page import="ebusiness.User" %>

2)由于数据库root的密码为123456,所以修改

代码语言:javascript

复制

Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/ebusiness", "root", "password");

代码语言:javascript

复制

Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/ebusiness", "root", "123456");

3.2将register.jsp中对数据库的操作封闭在Java bean中

建立DBuser

代码语言:javascript

复制

package ebusiness;
         
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
         
public class DBuser {
       private static final String url = "jdbc:mysql://localhost:3306/ebusiness";
       private static final String user = "root";
       private static final String password = "123456";  
       private static Statement stmt = null;
       private static ResultSet rs;
    
       //建立链接
       public Connection connect() throws SQLException  {
              try {
                     //新版本改为"com.mysql.cj.jdbc.Driver"
                     Class.forName("com.mysql.cj.jdbc.Driver");
            Connection conn = DriverManager.getConnection(url, user, password);
            stmt = conn.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE, ResultSet.CONCUR_READ_ONLY);
            return conn;
              } catch (ClassNotFoundException e) {
                     System.out.println("JDBC 驱动未找到: " + e.getMessage());
        } catch (SQLException e) {
            System.out.println("数据库连接失败: " + e.getMessage());
        }
              return null;
       }
         
       //断开连接
       public void disconnect(Connection conn) {
              try {
                     if (rs != null) {
                            rs.close();
                     }
                     stmt.close();
               conn.close();
              }catch (Exception e) {
            e.printStackTrace();
        }
       }
       
       //插入数据
       public boolean insert(Connection conn,User user) throws SQLException {
              String insertString = "INSERT INTO user (username, password, phone, email) VALUES (?, ?, ?, ?)";
        try {
               PreparedStatement ps= conn.prepareStatement(insertString);
                // 设置参数
               ps.setString(1, user.getUsername());
            ps.setString(2, user.getPassword());  
            ps.setString(3, user.getPhone());
            ps.setString(4, user.getEmail());
            // 执行插入操作
            int affectedRows = ps.executeUpdate();
            if (affectedRows == 1) {
                   return true;
            }else {
                   return false;
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
              return false;
       }
}

3.2再次修改register.jsp

代码语言:javascript

复制

<%@ page contentType="text/html; charset=utf-8" %>
<%@ page import="java.sql.*, javax.sql.*" %>
<%@ page import="ebusiness.User" %>
<%@ page import="ebusiness.DBuser" %>
           
<%
    String username = request.getParameter("username");
    String password = request.getParameter("password");
    String phone = request.getParameter("phone");
    String email = request.getParameter("email");
         
    User user = new User();
    user.setUsername(username);
    user.setPassword(password);
    user.setPhone(phone);
    user.setEmail(email);
         
    try {
          DBuser mysql = new DBuser();
          Connection conn = mysql.connect();
          if (mysql.insert(conn,user))
                 out.println("注册成功!");
          mysql.disconnect(conn);
    } catch (Exception e) {
        out.println("数据库连接失败:" + e.getMessage());
    }       
%>
目录
相关文章
|
19天前
|
前端开发 JavaScript 测试技术
使用ChatGPT生成登录产品代码的测试用例和测试脚本
使用ChatGPT生成登录产品代码的测试用例和测试脚本
72 35
|
19天前
|
前端开发 JavaScript Java
使用ChatGPT生成登录产品代码
使用ChatGPT生成登录产品代码
65 33
|
19天前
|
JavaScript 前端开发 Java
使用ChatGPT生成关于登录产品代码的单元测试代码
使用ChatGPT生成关于登录产品代码的单元测试代码
41 16
|
19天前
|
前端开发 JavaScript Java
使用ChatGPT关于登录产品代码的代码评审
整体来看,您的测试代码结构清晰,覆盖面广,关注了安全性测试。通过一些小的改进,可以提高代码的可维护性和安全性。继续保持良好的测试习惯,并考虑使用一些现代化的工具和库来简化测试工作。
38 13
|
5月前
|
JavaScript 前端开发 Java
ChatGPT与代码扫描
ChatGPT与代码扫描,感觉英文回答比中文好
42 5
|
5月前
|
调度
CPU调度器实现提示:针对特定体系结构代码【ChatGPT】
CPU调度器实现提示:针对特定体系结构代码【ChatGPT】
|
5月前
|
安全 Linux 调度
保持内核代码的可抢占安全 【ChatGPT】
保持内核代码的可抢占安全 【ChatGPT】
|
5月前
|
存储 Linux 开发工具
提交补丁:将您的代码提交到内核的基本指南 【ChatGPT】
提交补丁:将您的代码提交到内核的基本指南 【ChatGPT】
|
5月前
|
机器学习/深度学习 Linux 开发工具
Linux内核开发流程指南 - 5. 编写正确的代码【ChatGPT】
Linux内核开发流程指南 - 5. 编写正确的代码【ChatGPT】
|
1月前
|
机器学习/深度学习 人工智能 搜索推荐
哈佛推出全新类ChatGPT癌症诊断AI,登上Nature!准确率高达96%
哈佛大学研究团队开发的新型AI模型CHIEF,在《自然》期刊发表,癌症诊断准确率达96%。CHIEF基于深度学习,能自动识别、分类癌症并预测生存期,具高准确性、多任务能力和泛化性。它结合病理图像与基因组学等数据,显著提升诊断效率和个性化治疗水平,有望改善医疗资源不平等。但数据隐私和临床效果验证仍是挑战。论文见:https://www.nature.com/articles/s41586-024-07894-z
167 101