Anqingh：Personal Home

   Personal Column：[Computer Network][MyBatis Series]

About Me：A fun and sleepy INTP student who looks forward to sharing knowledge with more people sincerely.

---

Table of Contents

Project Overview

Project Functionality

Development Sequence

Module Development

Project Development Environment

 Building the Project

 User Registration

1. Selecting the Data Table

2. Creating the t_user Table

3. Creating the User Entity Class

 Create BaseEntity

 Create User Entity

4. Registration – Persistence Layer 

Plan the SQL statements to execute

Design interfaces and abstract methods

Mapping Editor

5. Registration – Business Layer

5.1 Planning Abnormalities

5.1.1 RuntimeException Exception

5.1.2 Username Already Taken Exception

5.1.3 Data Insertion Abnormality

5.2 Design Interfaces and Abstract Methods

6. Registration – Control Layer

6.1 Create Response

6.2 Design Request

6.3 Handling Requests

6.4 Control Layer Optimization Design

7. Registration – Frontend Page

---

 Project Basic Introduction

Project Functionality

This project mainly implements the following functions: login, registration, hot products, user management (password, personal information, avatar, shipping address), shopping cart (display, add, delete), and order module.

Development Sequence

Registration, login, user management, shopping cart, products, and order modules.

Development of the Module

• Persistance layer development: design SQL statements based on frontend page settings and configuration.
• Business layer development: control core functionalities, perform operations, and handle exceptions.
• Controller layer development: receive requests and process responses.
• Frontend development: connect backend using JavaScript, jQuery, AJAX, etc.

Project Development Environment

1. JDK: Version 1.8 or higher

2. Maven: Configured in IDEA, version 3.6.1

3. Database: MySQL, version 5.1 or higher

4. Development platform: IntelliJ IDEA

  Setting Up the Project

1. Project name: store (indicating a mall)

2. Structure: com.cy.store

3. Resource files: located in the resources folder (static and templates)

4. Unit tests: test.com.cy.store

5.

6. After clicking next, select the following three JAR packages first.

(1) WEB: Spring Web (for front-end and back-end connection)

(2) SQL: Mybatis Framework

(3) SQL: MySQL Driver (for MySQL database driver)

7. Configure the database source information in the properties file

8. Create a store database

9. Test the connection:

• Start the Spring Boot main class and check if the corresponding Spring graphical output appears

In src->main->java->com.cy.store->StoreApplication, start the main method, and you will see the following graphic upon successful startup:

• Test the database connection in the unit test class to see if it loads normally

If the following image of Hikari appears, it indicates successful connection. Hikari is used to manage database connections.



10. Can static resources of the project be loaded normally? All static resources are copied under the static directory.

Note: IDEA has poorer compatibility with JS code, and sometimes JS code cannot be loaded properly even if written.

• Clearing Idea cache
• Double-click clean and install again after clean



• Rebuild project
• Restart IDEA and operating system

  User Registration

1. Choose Data Table

use store

1

use store

2. Create t_user Table

[crayon-67ff1fe9a3b51895558634 inline=”true” class=”language-sql”]CREATE TABLE t_user ( uid INT AUTO_INCREMENT COMMENT ‘User ID’, username VARCHAR(20) NOT NULL UNIQUE COMMENT ‘Username’, password CHAR(32) NOT NULL COMMENT ‘Password’,

1 2 3 4

[crayon–67ff1fe9a3b51895558634 inline=“true”  class=“language-sql”]CREATE TABLE t_user ( uid INT AUTO_INCREMENT COMMENT ‘User ID’, username VARCHAR(20) NOT NULL UNIQUE COMMENT ‘Username’, password CHAR(32) NOT NULL COMMENT ‘Password’,

[/crayon]

salt CHAR(36) COMMENT ‘Salt value’, phone VARCHAR(20) COMMENT ‘Phone number’, email VARCHAR(30) COMMENT ‘Email address’, gender INT COMMENT ‘Gender: 0-female, 1-male’, avatar VARCHAR(50) COMMENT ‘Profile picture’, is_delete INT COMMENT ‘Delete status: 0-not deleted, 1-deleted’, created_user VARCHAR(20) COMMENT ‘Log – Creator’, created_time DATETIME COMMENT ‘Log – Creation time’, modified_user VARCHAR(20) COMMENT ‘Log – Last modifier’, modified_time DATETIME COMMENT ‘Log – Modification time’, PRIMARY KEY (uid) ) ENGINE=InnoDB DEFAULT CHARSET=utf8;

1 2 3 4 5 6 7 8 9 10 11 12

salt CHAR(36) COMMENT ‘Salt value’, phone VARCHAR(20) COMMENT ‘Phone number’, email VARCHAR(30) COMMENT ‘Email address’, gender INT COMMENT ‘Gender: 0-female, 1-male’, avatar VARCHAR(50) COMMENT ‘Profile picture’, is_delete INT COMMENT ‘Delete status: 0-not deleted, 1-deleted’, created_user VARCHAR(20) COMMENT ‘Log – Creator’, created_time DATETIME COMMENT ‘Log – Creation time’, modified_user VARCHAR(20) COMMENT ‘Log – Last modifier’, modified_time DATETIME COMMENT ‘Log – Modification time’, PRIMARY KEY (uid) ) ENGINE=InnoDB DEFAULT CHARSET=utf8;

• Salt value: Used during user registration to encrypt the password, which is crucial.
• Gender: Uses Arabic numbers 0 and 1 to represent gender because it’s difficult for the front-end to display text-based options. Gender is a radio button, so an integer is easier to operate and judge.
• Delete status: Most vendors do not implement true deletion; they only perform a check during login. If it is not 0, it indicates that the user has been deleted.
• Four basic fields are essential in any table, serving as core components of the entity class.

created_user VARCHAR(20) COMMENT ‘Creator’,

created_time DATETIME COMMENT ‘Creation time’,

modified_user VARCHAR(20) COMMENT ‘Last modifier’,

modified_time DATETIME COMMENT ‘Modification time’,

3. Create User Entity Class

 Create BaseEntity

The entity base class stores the common fields for all tables.

public class BaseEntity implements Serializable { private String createdBy; private Date createdAt; private String modifiedBy; private Date updatedAt; } //get and set methods, equals and hashCode() methods, toString method

1 2 3 4 5 6 7

public class BaseEntity implements Serializable { private String createdBy; private Date createdAt; private String modifiedBy; private Date updatedAt; } //get and set methods, equals and hashCode() methods, toString method

 Create User Entity Class

public class BaseEntity implements Serializable { private String createdBy; private Date createdAt; private String modifiedBy; private Date updatedAt; } //get and set methods, equals and hashCode() methods, toString method

1 2 3 4 5 6 7

public class BaseEntity implements Serializable { private String createdBy; private Date createdAt; private String modifiedBy; private Date updatedAt; } //get and set methods, equals and hashCode() methods, toString method

4. Registration – Persistence Layer 

Operating the database through MyBatis. The process of developing with MyBatis.

Plan the SQL statements to be executed

1. User registration functionality is equivalent to performing an insert operation on the data.

insert into t_user(username,password) values(value list)

1	insert into t_user(username,password) values(value list)

2. When a user registers, we first need to check if the current username already exists; if it does, registration cannot proceed. This is essentially a query statement.

insert into t_user(username,password) values(value list)

1	insert into t_user(username,password) values(value list)

Design interfaces and abstract methods

1. Define the Mapper interface. Under the project directory structure, first create a mapper package, then within this package create mapper interfaces according to different functional modules. Create an UserMapper interface. In this interface, define the abstract methods for these two SQL statements.

[crayon-67ff1fe9a3b58629787777 inline=”true” class=”language-java”]public interface UserMapper { // Insert user data // @param user User data // @return Number of affected rows (for insert, delete, update operations, the number of affected rows is returned as a value; this can be used to determine if the operation was successful)

1 2 3 4

[crayon–67ff1fe9a3b58629787777 inline=“true”  class=“language-java”]public interface UserMapper {     // Insert user data     // @param user User data     // @return Number of affected rows (for insert, delete, update operations, the number of affected rows is returned as a value; this can be used to determine if the operation was successful)

[/crayon]

DATABASE INTERACTION

1. Define the Mapper interface methods for database operations.

// Insert a user record into the database int insert(User user); // Query user data by username // @param username Username of the user to query // @return The user data if found, otherwise returns null User findByUsername(String username);

1 2 3 4 5 6 7

// Insert a user record into the database int insert(User user); // Query user data by username // @param username Username of the user to query // @return The user data if found, otherwise returns null User findByUsername(String username);

2. Configure Mapper interface file location in the main application class

// Specify the package path for Mapper interfaces using MapperScan annotation, // which automatically loads all interfaces during application startup @MapperScan(“com.cy.store.mapper”)

1 2 3 4

// Specify the package path for Mapper interfaces using MapperScan annotation, // which automatically loads all interfaces during application startup @MapperScan(“com.cy.store.mapper”)

Write Mappings

1. Define XML mapping files and associate them with corresponding interfaces. All mapping files need to be placed under the resources directory. Create a mapper folder in this directory, and store Mapper configuration files there.

2. Create mapping files corresponding to interfaces, keeping file names consistent with interface names. Create a UserMapper.xml file.

3. Configure SQL statements corresponding to methods in the interface using tags for insert/update/delete/select operations, which correspond to SQL’s CRUD actions.

<?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”> <!–The namespace attribute specifies which interface this mapping corresponds to and must include the complete package path of the interface–> <mapper namespace=”com.cy.store.mapper.UserMapper”> <!–Use resultMap to define mapping rules–> <resultMap id=”UserEntityMap” type=”com.cy.store.entity.User”> <!–Define mapping rules for columns that have different names in the database and class: column: column name in the table property: property name in the class –> <!–Primary key cannot be omitted when defining mapping rules–> <id column=”uid” property=”uid”></id> <result column=”is_delete” property=”isDelete”></result> <result column=”created_user” property=”createdUser”></result> <result column=”created_time” property=”createdTime”></result> <result column=”modified_user” property=”modifiedUser”></result> <result column=”modified_time” property=”modifiedTime”></result> </resultMap> <!–The id attribute represents the method name in the interface. SQL statements are written directly inside the tag–> <!–useGeneratedKeys: Enable auto-increment for a specific field (set primary key to auto-increment)–> <!–keyProperty: Specify which column is the primary key for auto-increment–> <insert id=”insert” useGeneratedKeys=”true” keyProperty=”uid”> insert into t_user(username,password,salt,phone,email,gender,avatar,is_delete,created_user,created_time,modified_user,modified_time) values (#{username},#{password},#{salt},#{phone},#{email},#{gender},#{avatar},#{isDelete},#{createdUser},#{createdTime},#{modifiedUser},#{modifiedTime} ) </insert> <select id=”findByUsername” resultMap=”UserEntityMap”> select * from t_user where username=#{username} </select> </mapper>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

<?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”> <!—The namespace attribute specifies which interface this mapping corresponds to and must include the complete package path of the interface—> <mapper namespace=“com.cy.store.mapper.UserMapper”> <!—Use resultMap to define mapping rules—> <resultMap id=“UserEntityMap” type=“com.cy.store.entity.User”> <!—Define mapping rules for columns that have different names in the database and class: column: column name in the table property: property name in the class —> <!—Primary key cannot be omitted when defining mapping rules—> <id column=“uid” property=“uid”></id> <result column=“is_delete” property=“isDelete”></result> <result column=“created_user” property=“createdUser”></result> <result column=“created_time” property=“createdTime”></result> <result column=“modified_user” property=“modifiedUser”></result> <result column=“modified_time” property=“modifiedTime”></result> </resultMap> <!—The id attribute represents the method name in the interface. SQL statements are written directly inside the tag—> <!—useGeneratedKeys: Enable auto–increment for a specific field (set primary key to auto–increment)—> <!—keyProperty: Specify which column is the primary key for auto–increment—> <insert id=“insert” useGeneratedKeys=“true” keyProperty=“uid”> insert into t_user(username,password,salt,phone,email,gender,avatar,is_delete,created_user,created_time,modified_user,modified_time) values (#{username},#{password},#{salt},#{phone},#{email},#{gender},#{avatar},#{isDelete},#{createdUser},#{createdTime},#{modifiedUser},#{modifiedTime} ) </insert> <select id=“findByUsername” resultMap=“UserEntityMap”> select * from t_user where username=#{username} </select> </mapper>

4. Register the location of the mapper files in the corresponding properties configuration file. Add the following code to the application.properties file:

mybatis.mapper-locations=classpath:mapper/*.xml

1	mybatis.mapper–locations=classpath:mapper/*.xml

5. Unit testing: After each independent layer is completed, unit test methods need to be written to test the current functionality. Create a mapper package under the interface in the test package, and create a persistence layer test in this package.

mybatis.mapper-locations=classpath:mapper/*.xml

1	mybatis.mapper–locations=classpath:mapper/*.xml

5. Register – Business Layer

5.1 Planning Abnormalities

5.1.1 RuntimeException Exception

As a subclass of this exception, then define specific types of exceptions to inherit from this exception. The base class for business layer exceptions, ServiceException exception. This exception inherits from RuntimeException. Establishing the mechanism of exceptions.

//Base class for business layer exceptions public class ServiceException extends RuntimeException{ public ServiceException() { super(); } public ServiceException(String message) { super(message); } public ServiceException(String message, Throwable cause) { super(message, cause); } public ServiceException(Throwable cause) { super(cause); } protected ServiceException(String message, Throwable cause, boolean enableSuppression, boolean writableStackTrace) { super(message, cause, enableSuppression, writableStackTrace); } }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

//Base class for business layer exceptions public class ServiceException extends RuntimeException{ public ServiceException() { super(); } public ServiceException(String message) { super(message); } public ServiceException(String message, Throwable cause) { super(message, cause); } public ServiceException(Throwable cause) { super(cause); } protected ServiceException(String message, Throwable cause, boolean enableSuppression, boolean writableStackTrace) { super(message, cause, enableSuppression, writableStackTrace); } }

Based on the different functions of the business layer, define specific types of exceptions in detail and uniformly inherit from the ServiceException exception class.

5.1.2 Username Already Taken Exception

When a user registers, they may encounter an error where the username is already taken, resulting in a UsernameDuplicatedException exception being thrown.

//Username is already taken exception public class UsernameDuplicatedException extends ServiceException{ public UsernameDuplicatedException() { super(); } public UsernameDuplicatedException(String message) { super(message); } public UsernameDuplicatedException(String message, Throwable cause) { super(message, cause); } public UsernameDuplicatedException(Throwable cause) { super(cause); } protected UsernameDuplicatedException(String message, Throwable cause, boolean enableSuppression, boolean writableStackTrace) { super(message, cause, enableSuppression, writableStackTrace); } }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

//Username is already taken exception public class UsernameDuplicatedException extends ServiceException{ public UsernameDuplicatedException() { super(); } public UsernameDuplicatedException(String message) { super(message); } public UsernameDuplicatedException(String message, Throwable cause) { super(message, cause); } public UsernameDuplicatedException(Throwable cause) { super(cause); } protected UsernameDuplicatedException(String message, Throwable cause, boolean enableSuppression, boolean writableStackTrace) { super(message, cause, enableSuppression, writableStackTrace); } }

Press alt+insert to open the shortcut menu and select the first five options as shown in the figure:



5.1.3 Data Insertion Exception

When performing a data insertion operation, the server and database crash. An exception generated during the ongoing insertion process: InsertException exception.

//Exception occurred during data insertion public class InsertException extends ServiceException{ public InsertException() { super(); } public InsertException(String message) { super(message); } public InsertException(String message, Throwable cause) { super(message, cause); } public InsertException(Throwable cause) { super(cause); } protected InsertException(String message, Throwable cause, boolean enableSuppression, boolean writableStackTrace) { super(message, cause, enableSuppression, writableStackTrace); } }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

//Exception occurred during data insertion public class InsertException extends ServiceException{ public InsertException() { super(); } public InsertException(String message) { super(message); } public InsertException(String message, Throwable cause) { super(message, cause); } public InsertException(Throwable cause) { super(cause); } protected InsertException(String message, Throwable cause, boolean enableSuppression, boolean writableStackTrace) { super(message, cause, enableSuppression, writableStackTrace); } }

5.2 Design Interfaces and Abstract Methods

1. Create an IUserService interface in the service package.

//Exception occurred during data insertion public class InsertException extends ServiceException{ public InsertException() { super(); } public InsertException(String message) { super(message); } public InsertException(String message, Throwable cause) { super(message, cause); } public InsertException(Throwable cause) { super(cause); } protected InsertException(String message, Throwable cause, boolean enableSuppression, boolean writableStackTrace) { super(message, cause, enableSuppression, writableStackTrace); } }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

//Exception occurred during data insertion public class InsertException extends ServiceException{ public InsertException() { super(); } public InsertException(String message) { super(message); } public InsertException(String message, Throwable cause) { super(message, cause); } public InsertException(Throwable cause) { super(cause); } protected InsertException(String message, Throwable cause, boolean enableSuppression, boolean writableStackTrace) { super(message, cause, enableSuppression, writableStackTrace); } }

2. Create a service implementation class UserServiceImpl that implements the interface and overrides the abstract methods.

//Implementation class for the user module service layer @Service public class UserServiceImpl implements IUserService { @Autowired private UserMapper userMapper; @Override public void reg(User user) { // Retrieve username from the user parameter passed in. String username= user.getUsername(); // Call findByUsername(username) to check if the user has been registered before. User result = userMapper.findByUsername(username); // If the result is not null, throw an exception indicating the username is already taken. if(result !=null){ throw new UsernameDuplicatedException(“Username already exists”); } // Implement password encryption using MD5 algorithm: concatenate the string with password and another string for encryption, and perform this three times in succession. The salt value is a random string concatenated before and after the password. String oldPassword = user.getPassword(); // Generate a salt value (randomly generated). String salt = UUID.randomUUID().toString().toUpperCase(); // Complete data by setting the salt value. user.setSalt(salt); // Encrypt the password along with the salt value as a whole, enhancing security regardless of the original password strength. String md5Password = getMD5Password(oldPassword,salt); // Set the encrypted password back to the user object. user.setPassword(md5Password); // Complete data by setting is_delete to 0. user.setIsDelete(0); // Complete data by setting four log information fields. user.setCreatedUser(user.getUsername()); user.setModifiedUser(user.getUsername()); Date date=new Date(); user.setCreatedTime(date); user.setModifiedTime(date); // Execute the registration business logic (expecting rows=1). Integer rows=userMapper.insert(user); if(rows!=1){ throw new InsertException(“An unknown exception occurred during user registration”); } } // Define an MD5 encryption method. private String getMD5Password(String password,String salt){ // Perform MD5 encryption three times in succession. for(int i=0;i<3;i++){ password=DigestUtils.md5DigestAsHex((salt+password+salt).getBytes()).toUpperCase(); } // Return the encrypted password. return password; } }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

//Implementation class for the user module service layer @Service public class UserServiceImpl implements IUserService { @Autowired private UserMapper userMapper; @Override public void reg(User user) { // Retrieve username from the user parameter passed in. String username= user.getUsername(); // Call findByUsername(username) to check if the user has been registered before. User result = userMapper.findByUsername(username); // If the result is not null, throw an exception indicating the username is already taken. if(result !=null){ throw new UsernameDuplicatedException(“Username already exists”); } // Implement password encryption using MD5 algorithm: concatenate the string with password and another string for encryption, and perform this three times in succession. The salt value is a random string concatenated before and after the password. String oldPassword = user.getPassword(); // Generate a salt value (randomly generated). String salt = UUID.randomUUID().toString().toUpperCase(); // Complete data by setting the salt value. user.setSalt(salt); // Encrypt the password along with the salt value as a whole, enhancing security regardless of the original password strength. String md5Password = getMD5Password(oldPassword,salt); // Set the encrypted password back to the user object. user.setPassword(md5Password); // Complete data by setting is_delete to 0. user.setIsDelete(0); // Complete data by setting four log information fields. user.setCreatedUser(user.getUsername()); user.setModifiedUser(user.getUsername()); Date date=new Date(); user.setCreatedTime(date); user.setModifiedTime(date); // Execute the registration business logic (expecting rows=1). Integer rows=userMapper.insert(user); if(rows!=1){ throw new InsertException(“An unknown exception occurred during user registration”); } } // Define an MD5 encryption method. private String getMD5Password(String password,String salt){ // Perform MD5 encryption three times in succession. for(int i=0;i<3;i++){ password=DigestUtils.md5DigestAsHex((salt+password+salt).getBytes()).toUpperCase(); } // Return the encrypted password. return password; } }

3. Create a UserServiceTests class in the unit test package, and add unit testing functionality to this class.

//@SpringBootTest annotation marks the current class as a test class, which will not be packaged with the project @SpringBootTest public class UserServiceTests { @Autowired private IUserService userService; // Unit testing method: can run independently without starting the entire project, improving code execution efficiency // 1. Must be annotated with @Test // 2. Return type must be void // 3. Method parameters do not specify any types // 4. Method access modifier must be public @Test public void reg() { try { User user = new User(); user.setUsername(“yuanxin01”); user.setPassword(“123”); userService.reg(user); System.out.println(“OK”); } catch (ServiceException e) { // Get the class object and obtain the class name System.out.println(e.getClass().getSimpleName()); // Get specific description information of the exception System.out.println(e.getMessage()); } } }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

//@SpringBootTest annotation marks the current class as a test class, which will not be packaged with the project @SpringBootTest public class UserServiceTests {     @Autowired     private IUserService userService;     // Unit testing method: can run independently without starting the entire project, improving code execution efficiency     // 1. Must be annotated with @Test     // 2. Return type must be void     // 3. Method parameters do not specify any types     // 4. Method access modifier must be public     @Test     public void reg() {         try {             User user = new User();             user.setUsername(“yuanxin01”);             user.setPassword(“123”);             userService.reg(user);             System.out.println(“OK”);         } catch (ServiceException e) {             // Get the class object and obtain the class name             System.out.println(e.getClass().getSimpleName());             // Get specific description information of the exception             System.out.println(e.getMessage());         }     } }

6. Registration – Controller Layer

6.1 Create Response

Status code, status description information, and data. This functionality is packaged in a class, which is returned as the method return value to the browser.

// Respond with data in Json format public class JsonResult<E> implements Serializable { // Status code private Integer state; // Description information private String message; // Data private E data; public JsonResult(Integer state) { this.state = state; } public JsonResult(Throwable e) { this.message = e.getMessage(); } public JsonResult(Integer state, E data) { this.state = state; this.data = data; } public Integer getState() { return state; } public void setState(Integer state) { this.state = state; } public String getMessage() { return message; } public void setMessage(String message) { this.message = message; } public E getData() { return data; } public void setData(E data) { this.data = data; } }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46

// Respond with data in Json format public class JsonResult<E> implements Serializable {     // Status code     private Integer state;     // Description information     private String message;     // Data     private E data;       public JsonResult(Integer state) {         this.state = state;     }       public JsonResult(Throwable e) {         this.message = e.getMessage();     }       public JsonResult(Integer state, E data) {         this.state = state;         this.data = data;     }       public Integer getState() {         return state;     }       public void setState(Integer state) {         this.state = state;     }       public String getMessage() {         return message;     }       public void setMessage(String message) {         this.message = message;     }       public E getData() {         return data;     }       public void setData(E data) {         this.data = data;     } }

6.2 Design Request

Based on the current business functional modules, design the request.

Request path: /users/reg

Request parameters: user user

Request type: POST

Response result: JsonResult<void>

6.3 Handle Request

1. Create a corresponding controller class UserController that depends on the interface of the service layer.

@RestController //@Controller+@RequestBody @RequestMapping(“users”) public class UserController { @Autowired private IUserService userService; @RequestMapping(“reg”) // @RequestBody // indicates that the response result of this method will be in JSON format to the frontend public JsonResult<Void> reg(User user){ JsonResult<Void> result=new JsonResult<>(); try { userService.reg(user); result.setState(200); result.setMessage(“User registration successful”); } catch (UsernameDuplicatedException e) { result.setState(4000); result.setMessage(“Username already occupied”); }catch (InsertException e) { result.setState(5000); result.setMessage(“An unknown exception occurred during registration”); } return result; } }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

@RestController  //@Controller+@RequestBody @RequestMapping(“users”) public class UserController { @Autowired private IUserService userService; @RequestMapping(“reg”) // @RequestBody // indicates that the response result of this method will be in JSON format to the frontend public JsonResult<Void> reg(User user){ JsonResult<Void> result=new JsonResult<>(); try { userService.reg(user); result.setState(200); result.setMessage(“User registration successful”); } catch (UsernameDuplicatedException e) { result.setState(4000); result.setMessage(“Username already occupied”); }catch (InsertException e) { result.setState(5000); result.setMessage(“An unknown exception occurred during registration”); } return result; } }

Optimization Design of Control Layer

Extract a parent class from the control layer and unify handling of exception operations in this parent class. Write a BaseController class to uniformly handle exceptions.

[crayon-67ff1fe9a3b67855569346 inline=”true” class=”language-java”]//Base controller class public class BaseController{

1 2	[crayon–67ff1fe9a3b67855569346 inline=“true”  class=“language-java”]//Base controller class public class BaseController{

[/crayon]


public static final int OK=200;



@ExceptionHandler(ServiceException.class) //Used to uniformly handle exceptions thrown
public JsonResult<Void> handleException(Throwable e){
JsonResult<Void> result=new JsonResult<>(e);
if(e instanceof UsernameDuplicatedException){
result.setState(4000);
result.setMessage(“Username is already in use”);
}else if(e instanceof InsertException){
result.setState(5000);
result.setMessage(“An unknown exception occurred during registration”);
}
return result;
}
}

 Reconstructed the reg() method.

@RestController //@Controller+@RequestBody @RequestMapping(“users”) public class UserController extends BaseController{ @Autowired private IUserService userService; @RequestMapping(“reg”) public JsonResult<Void> reg(User user){ userService.reg(user); return new JsonResult<>(OK); } }

1 2 3 4 5 6 7 8 9 10 11

@RestController  //@Controller+@RequestBody @RequestMapping(“users”) public class UserController extends BaseController{ @Autowired private IUserService userService; @RequestMapping(“reg”) public JsonResult<Void> reg(User user){ userService.reg(user); return new JsonResult<>(OK); } }

7.Registration – Frontend Page

1. Write the method to send requests in the register page, and complete it by clicking events. Select the corresponding button (using $(“selector”)), then add a click event, and use the $.ajax() function to send an asynchronous request.

2. JQuery encapsulates a function called $.ajax(), which uses AJAX to asynchronously load related requests through object invocation. AJAX treats a specific part of the code as an independent unit. It relies on the XHR (XmlHttpResponse) object provided by JavaScript, which packages this functionality.

3. Usage of ajax(). A method must be passed as a parameter to the function, with a pair of curly braces representing the method body. AJAX receives multiple parameters, separated by commas between them, and each parameter group is separated by a colon. The components of a parameter include the parameter name (which cannot be arbitrarily defined) and its value, which should be represented as a string. There is no required order for declaring parameters. Syntax structure:

$.ajax({ url:””, type:””, data:””, dataType:””, success:function(){ }, error:function(){ } });

1 2 3 4 5 6 7 8 9 10

$.ajax({ url:“”, type:“”, data:“”, dataType:“”, success:function(){ }, error:function(){ } });

4. The meaning of the parameters in the ajax() function:

Parameter	Description
url	Identifies the request address (URL), excluding any parameter list content. Example: url:”localhost:8080/users/reg”
type	Request type (GET and POST request types). Example: type:”POST”
data	Data submitted to the specified URL address. Example: data:”username=tom&pwd=123″
dataType	Data type of the submission. Typically specified as JSON type. dataType:”json”
success	When the server responds normally to the client, the success parameter method is automatically called, and the returned data from the server is passed to this method’s parameters.
error	When the server fails to respond normally to the client, the error parameter method is automatically called, and the returned data from the server is passed to this method’s parameters.

5.JavaScript code can be independently declared in a separate JavaScript file or within a script tag.

[crayon-67ff1fe9a3b6b670608590 inline=”true” class=”language-javascript”]<script> // 1.Listen for the registration button click event, and execute a method if clicked $(“#btn-reg”).click(function () { // 2.Send an asynchronous AJAX request to complete user registration functionality $.ajax({ url: “/users/reg”, type: “POST”, data: $(“#form-reg”).serialize(), dataType: “JSON”, success: function (json) { if (json.state == 200) { alert(“Registration successful”); } else { alert(“Registration failed”); } }, error: function (xhr) { alert(“An unknown error occurred during registration!” + xhr.status); } }); }); </script>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

[crayon–67ff1fe9a3b6b670608590 inline=“true”  class=“language-javascript”]<script> // 1.Listen for the registration button click event, and execute a method if clicked $(“#btn-reg”).click(function () {     // 2.Send an asynchronous AJAX request to complete user registration functionality     $.ajax({         url: “/users/reg”,         type: “POST”,         data: $(“#form-reg”).serialize(),         dataType: “JSON”,         success: function (json) {             if (json.state == 200) {                 alert(“Registration successful”);             } else {                 alert(“Registration failed”);             }         },         error: function (xhr) {             alert(“An unknown error occurred during registration!” + xhr.status);         }     }); }); </script>

[/crayon]

6.JavaScript code fails to be properly parsed and executed by the server, manifested by no response when clicking buttons on the page. Solutions:

• Clean and reinstall the project under Maven configuration
• Clear cache in the project’s file settings
• Rebuild the project under build options
• Restart IDEA
• Restart the computer