下面是一个网页注册写入数据库的完整示例，使用：
前端：HTML + Vue.js（可选）
后端：Spring Boot（Java）
数据库：MySQL
✅ 一、数据库表设计（MySQL）
CREATE DATABASE userdb;
USE userdb;
CREATE TABLE user(
id INT PRIMARY KEY AUTO_INCREMENT,
username VARCHAR(100) NOT NULL,
password VARCHAR(100) NOT NULL
);
✅ 二、后端 Spring Boot（Java）
1. Maven 依赖（pom.xml）
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<!-- MySQL JDBC 驱动 -->
<dependency>
<groupId>com.mysql</groupId>
<artifactId>mysql-connector-j</artifactId>
<version>8.3.0</version> <!-- 或最新稳定版 -->
</dependency>
</dependencies>
2. 配置数据库（application.properties）
spring.application.name=webregister
spring.web.resources.static-locations=classpath:/static/
# 数据库连接配置
spring.datasource.url=jdbc:mysql://localhost:3306/userdb?useSSL=false&serverTimezone=UTC
spring.datasource.username=root
#本地mysql数据库密码为空所以为空
#若有则写上你的密码
spring.datasource.password=
# JPA 配置
spring.jpa.hibernate.ddl-auto=update
spring.jpa.show-sql=true
# 建议手动指定数据库方言（避免 Hibernate 无法识别）
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MySQL8Dialect
3. 实体类 User.java
package org.example.webregister;
import jakarta.persistence.Entity;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.GenerationType;
import jakarta.persistence.Id;
@Entity
public class User {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Integer id;
private String username;
private String password;
// Getter 和 Setter
public Integer getId() {
return id;
}
public void setId(Integer 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;
}
}
4. 数据访问层 UserRepository.java
package org.example.webregister;
import org.springframework.data.jpa.repository.JpaRepository;
public interface UserRepository extends JpaRepository<User, Integer> {
boolean existsByUsername(String username);
}
5. 控制器 UserController.java
package org.example.webregister;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;
@RestController
@RequestMapping("/api")
@CrossOrigin // 允许跨域访问
public class UserController {
@Autowired
private UserRepository userRepository;
@PostMapping("/register")
public ResponseEntity<String> register(@RequestBody User user) {
if (userRepository.existsByUsername(user.getUsername())) {
return ResponseEntity.status(HttpStatus.CONFLICT).body("用户名已存在");
}
userRepository.save(user);
return ResponseEntity.ok("注册成功");
}
}✅ 三、前端注册页面（HTML）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
</head>
<body>
<h2>用户注册</h2>
<form id="regForm">
用户名：<input type="text" id="username"><br><br>
密码：<input type="password" id="password"><br><br>
<button type="submit">注册</button>
</form>
<script>
document.getElementById("regForm").addEventListener("submit", function(e) {
e.preventDefault();
const username = document.getElementById("username").value;
const password = document.getElementById("password").value;
fetch("http://localhost:8080/api/register", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({ username, password })
})
.then(res => res.text())
.then(msg => alert(msg))
.catch(err => console.error(err));
});
</script>
</body>
</html>
✅ 运行顺序：
启动 MySQL，并建表。
启动 Spring Boot 后端服务。
打开 HTML 页面，填写注册表单。
注册信息会写入数据库。
运行后，浏览器登录
http://localhost:8080/