🧸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 Development Environment
3. Creating the User Entity Class
🚦4. Registration – Persistence Layer
✨Plan the SQL statements to execute
✨Design interfaces and abstract methods
🚦5. Registration – Business Layer
🎃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.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
|
1 2 3 |
spring.datasource.url=jdbc:mysql://localhost:3306/store?useUnicode=true&characterEncoding=utf-8&serverTimezone=Asia/Shanghai spring.datasource.username=root spring.datasource.password=root |
8. Create a store database
|
1 2 3 |
spring.datasource.url=jdbc:mysql://localhost:3306/store?useUnicode=true&characterEncoding=utf-8&serverTimezone=Asia/Shanghai spring.datasource.username=root spring.datasource.password=root |
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
- Clearing Idea cache
- Double-click clean and install again after clean
- Rebuild project
- Restart IDEA and operating system
- 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.
- 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
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.
🎯 User Registration
🚦 1. Choose Data Table
|
1 |
use store |
🚦 2. Create t_user Table
|
1 2 3 4 |
[crayon–67efc678724fa750524680 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]
|
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; |
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.
|
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
|
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.
|
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.
|
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.
|
1 2 3 4 |
[crayon–67efc67872501853325838 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.
|
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
|
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.
|
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:
|
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.
|
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.
|
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.
|
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.
|
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.
|
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.
|
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.
|
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.
|
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.
|
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.
|
1 2 |
[crayon–67efc67872511456346650 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.
|
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:
|
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
[crayon–67efc67872515236664507 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:
Leave a Reply
You must be logged in to post a comment.