做自己网站彩票短视频排名seo

引言

本系统允许用户输入用户名和密码，前端通过AJAX请求将数据发送到后端，后端验证并存储用户信息，同时为每个用户创建一个专属图书表。尽管这是一个基础实现，但它展示了前后端分离开发的核心思想。博客还将讨论潜在的优化点，如密码安全和数据库设计。

1. 约定前后端交互接口

前后端分离开发需要明确的接口约定，以确保数据交互顺畅。在本系统中，前端通过HTTP POST请求将用户注册信息发送到后端的/user/register端点，后端返回JSON格式的响应，指示注册结果。

请求格式

前端发送的请求包含以下字段：

{"userName": "exampleUser","password": "examplePassword"
}

• userName：用户输入的用户名，字符串类型。
• password：用户输入的密码，字符串类型。

响应格式

后端返回的JSON对象包含以下字段：

{"status": "SUCCESS" | "FAIL","errorMessage": "错误信息（如果有）"
}

• status：表示注册结果，SUCCESS表示成功，FAIL表示失败。
• errorMessage：当注册失败时，提供错误原因，如“用户已存在”或“请填写账号密码”。

2. 整体逻辑

用户注册系统的逻辑分为前端和后端两部分。前端负责用户输入验证和数据发送，后端处理数据存储和业务逻辑。后端采用经典的三层架构：Controller、Service和Mapper。

2.1 Controller的逻辑

Controller层是后端的入口，负责接收前端的HTTP请求，调用Service层处理业务逻辑，并返回响应。在本系统中，UserInfoController类的register方法处理/user/register请求：

1. 参数验证：检查传入的UserInfo对象是否为空。
2. 调用Service：将请求委托给userInfoService.registerUserInfo方法。
3. 响应处理：根据Service层的返回结果，设置响应的状态和错误消息。

2.2 Service层

Service层封装业务逻辑，确保注册过程的完整性和事务性。UserInfoService类的registerUserInfo方法执行以下步骤：

1. 检查用户是否存在：查询数据库，确认用户名是否已被注册。
2. 插入新用户：如果用户名可用，将用户信息插入数据库。
3. 创建图书表：为新用户创建一个专属的图书表，存储其图书信息。
4. 事务管理：使用@Transactional注解确保操作的原子性。

2.3 Mapper层

Mapper层通过MyBatis与数据库交互，执行SQL操作。UserInfoMapper接口定义了三个关键方法：

• queryUserInfoByUserNameNormal：根据用户名查询用户信息，用于检查用户是否存在。
• insertUserInfo：插入新用户记录。
• createBooktable：为用户创建图书表，表名以用户ID命名。

MyBatis的XML映射文件定义了createBooktable的SQL语句，使用动态表名创建图书表。

3. 后端代码实现

以下是后端代码的详细实现，分为Controller和Service层。

3.1 Controller层

UserInfoController类处理用户注册请求：

@Slf4j
@RestController
@RequestMapping("/user")
public class UserInfoController {@RequestMapping("/register")public Result register(UserInfo userInfo){Result result = new Result();if(userInfo == null){result.setStatus(ResultStatus.FAIL);result.setErrorMessage("请填写账号密码");return result;}result = userInfoService.registerUserInfo(userInfo);if(result == null){result.setStatus(ResultStatus.FAIL);result.setErrorMessage("注册失败");log.info("注册时，Service返回的result为空");return result;}result.setStatus(ResultStatus.SUCCESS);return result;}
}

• 注解说明：
  • @RestController：标记为REST控制器，返回JSON响应。
  • @RequestMapping("/user")：设置基础路径，所有请求以/user开头。
  • @RequestMapping("/register")：映射/user/register路径。
• 逻辑流程：
  1. 检查userInfo是否为空，若为空，返回错误。
  2. 调用Service层的registerUserInfo方法。
  3. 处理Service返回结果，若为空，记录日志并返回错误；否则返回成功。

3.2 Service层

UserInfoService类实现注册的业务逻辑：

@Slf4j
@Service
public class UserInfoService {@Transactionalpublic Result registerUserInfo(UserInfo userInfo){Result result = new Result();UserInfo getUserInfo = userInfoMapper.queryUserInfoByUserNameNormal(userInfo.getUserName());if(getUserInfo != null){result.setErrorMessage("用户已存在，请重新注册");result.setStatus(ResultStatus.FAIL);return result;}Integer count = userInfoMapper.insertUserInfo(userInfo);if(count == 1){result.setStatus(ResultStatus.SUCCESS);UserInfo u = userInfoMapper.queryUserInfoByUserNameNormal(userInfo.getUserName());userInfoMapper.createBooktable(u.getId());return result;}else{result.setStatus(ResultStatus.FAIL);result.setErrorMessage("用户注册失败");log.info("新用户插入后返回的值不是1");return result;}}
}

• 注解说明：
  • @Service：标记为Spring的服务组件。
  • @Transactional：确保方法内的数据库操作具有事务性。
• 逻辑流程：
  1. 调用queryUserInfoByUserNameNormal检查用户名是否已存在。
  2. 若不存在，调用insertUserInfo插入用户。
  3. 检查插入结果，若成功（count == 1），查询新用户ID并调用createBooktable创建图书表。
  4. 若失败，记录日志并返回错误。

3.3 Mapper层实现

UserInfoMapper接口定义了数据库操作：

@Mapper
public interface UserInfoMapper {@Select("select id,user_name,password,delete_flag,create_time,updata_time from normal_user_info where user_name= #{userName}")UserInfo queryUserInfoByUserNameNormal(String userName);@Insert("insert into normal_user_info (user_name,password) values(#{userName},#{password})")Integer insertUserInfo(UserInfo userInfo);Integer createBooktable(Integer userId);
}

对应的MyBatis XML映射文件定义了createBooktable的SQL：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="org.example.booksmanagementsystem.mapper.UserInfoMapper"><update id="createBooktable">create table #{id}_book_info(`id` INT(11) NOT NULL AUTO_INCREMENT,`book_name` VARCHAR(127) NOT NULL,`author` VARCHAR(127) NOT NULL,`count` INT(11) NOT NULL,`price` DECIMAL(7,2) NOT NULL,`publish` VARCHAR(256) NOT NULL,`status` TINYINT(4) DEFAULT 1 COMMENT '0-无效, 1-正常, 2-不允许借阅',`create_time` DATETIME DEFAULT now(),`update_time` DATETIME DEFAULT now() ON UPDATE now(),PRIMARY KEY (`id`)) ENGINE = INNODB DEFAULT CHARSET = utf8mb4;</update>
</mapper>

• 关键点：
  • queryUserInfoByUserNameNormal使用@Select注解执行查询。
  • insertUserInfo使用@Insert注解插入数据。
  • createBooktable在XML中定义，动态创建表，表名以用户ID为前缀。

4. 前端代码

前端代码包括HTML表单和JavaScript逻辑，使用Bootstrap美化界面，jQuery处理AJAX请求。

HTML代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>用户注册</title><link rel="stylesheet" href="css/bootstrap.min.css"><link rel="stylesheet" href="css/register.css">
</head>
<body>
<div class="container-login"><div class="container-pic"></div><div class="login-dialog"><h3>新用户注册</h3><form id="registerForm"><div class="row"><span>账户</span><input type="text" name="username" id="username" class="form-control" required></div><div class="row"><span>密码</span><input type="password" name="password" id="password" class="form-control" required></div><div class="row"><span>确认密码</span><input type="password" name="confirmPassword" id="confirmPassword" class="form-control" required></div><div class="row" style="margin-top: 20px;"><div class="col-md-6"><button type="button" class="btn btn-success btn-lg btn-block" onclick="submitRegister()">立即注册</button></div><div class="col-md-6"><button type="button" class="btn btn-secondary btn-lg btn-block" onclick="history.back()">返回登录</button></div></div></form></div>
</div>

• 结构说明：
  • 使用Bootstrap的form-control类美化输入框。
  • 包含用户名、密码和确认密码三个输入字段。
  • 提供“立即注册”和“返回登录”两个按钮。

JavaScript代码

function submitRegister() {// 基础验证if ($("#password").val() !== $("#confirmPassword").val()) {alert("两次密码输入不一致！");return;}$.ajax({url: "/user/register",type: "post",data: {"userName": $("#username").val(),"password": $("#password").val()},success: function(result) {if(result.status == "SUCCESS") {alert("注册成功！");location.href = "login_test.html";} else {alert("注册失败，请重试");}}});
}

功能说明：

• 密码验证：先检查密码和确认密码是否一致，不一致则弹出提示并停止。
• AJAX请求：密码一致时，通过POST请求发送到/user/register，携带用户名和密码。
• 响应处理：成功时，若状态为"SUCCESS"，弹出成功提示并跳转到登录页；失败时，弹出失败提示。

5 .总结

本博客详细解析了用户注册系统的实现，从前端表单设计到后端业务逻辑，涵盖了HTML、JavaScript、Spring Boot和MyBatis的集成。系统允许用户注册并为每个用户创建专属图书表，体现了前后端分离开发的优势。