通过ChatGPT生成产品代码

顾翔

发布于 2024-11-25 17:43:36

7400

代码可运行

文章被收录于专栏：啄木鸟软件测试啄木鸟软件测试

运行总次数：0

代码可运行

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

用户注册界面包括。

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

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

输出

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

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

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

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

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

Email：符合标准Email格式。

注册按键：提交表单。

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>
<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。

<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。

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

<!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文件

见黄色部分

…
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)

-- 创建数据库
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 类需要包括数据库操作，插入注册信息到数据库。

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 文件将处理注册请求，并将用户数据存储到数据库。

<%@ 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，所以修改

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

为

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

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

建立DBuser

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

<%@ 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());
    }       
%>

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2024-11-24，如有侵权请联系 cloudcommunity@tencent.com 删除

chatgpt