XEM BÀI VIẾT THEO TỪ KHÓA
angular api aspnetcore bkap books csharp eclipse flutter frontend giai-thuat java jsp labguides laravel mongodb nosql opencv oracle php postgresql project python restful review servlet slides spring boot sql webapi webservice website xml xsd xslt
CÔNG NGHỆ THÔNG TIN >> SINH VIÊN BKAP

Xây dựng chức năng đăng ký người dùng trong SpringBoot

Đăng lúc: 03:50 PM - 29/03/2025 bởi Charles Chung - 94

Phát triển tiếp session8example1, trong bài này tôi sẽ hướng dẫn các bạn xây dựng chức năng đăng ký người dùng.

1. Giới thiệu

Đăng ký người dùng trên là một chức năng không thể thiếu đối với các website thương mại điện tử, trong bài này chúng ta sẽ phát triển tiếp bài session8example1, bổ sung thêm chức năng đăng ký người dùng.

2. Thực hiện

Bước 1: Tải source code bài session8example1 về.

Bước 2: Tạo project springboot session8example2

Bước 3: Copy toàn bộ code và tài nguyên từ session8example1 sang session8example2

Bước 4: Tạo gói com.bkap.models, bên trong tạo lớp AccountModel (biểu diễn thông tin đăng ký trên form)

  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
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
 
package com.bkap.models;


import jakarta.validation.constraints.Email;
import jakarta.validation.constraints.NotBlank;
import jakarta.validation.constraints.Size;

public class AccountModel {
	
	private String accountId;
	
	@NotBlank(message = "Không để trống")
	@Size(min = 3, max = 50, message = "Độ dài không hợp lệ 5-50")
	private String username;
	@NotBlank(message = "Không để trống")
	@Size(min = 3, max = 50, message = "Độ dài không hợp lệ 5-50")
	private String password;
	@NotBlank(message = "Không để trống")
	@Size(min = 3, max = 50, message = "Độ dài không hợp lệ 5-50")
	private String confirmpassword;
	@NotBlank(message = "Không để trống")
	@Email(message = "Email không hợp lệ")
	private String email;
	
	@NotBlank(message = "Không để trống")
	private String fullname;
	
	@NotBlank(message = "Không để trống")
	private String address;
	
	@NotBlank(message = "Không để trống")
	private String phone;
	
	private String picture;
	public AccountModel() {
		// TODO Auto-generated constructor stub
	}
	
	
	public AccountModel(String accountId, String username, String password, String confirmpassword, String email,
			String fullname, String address, String phone, String picture) {
		super();
		this.accountId = accountId;
		this.username = username;
		this.password = password;
		this.confirmpassword = confirmpassword;
		this.email = email;
		this.fullname = fullname;
		this.address = address;
		this.phone = phone;
		this.picture = picture;
	}


	public String getAccountId() {
		return accountId;
	}
	public void setAccountId(String accountId) {
		this.accountId = accountId;
	}
	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 getConfirmpassword() {
		return confirmpassword;
	}
	public void setConfirmpassword(String confirmpassword) {
		this.confirmpassword = confirmpassword;
	}
	public String getEmail() {
		return email;
	}
	public void setEmail(String email) {
		this.email = email;
	}
	public String getFullname() {
		return fullname;
	}
	public void setFullname(String fullname) {
		this.fullname = fullname;
	}
	public String getAddress() {
		return address;
	}
	public void setAddress(String address) {
		this.address = address;
	}
	public String getPhone() {
		return phone;
	}
	public void setPhone(String phone) {
		this.phone = phone;
	}
	public String getPicture() {
		return picture;
	}
	public void setPicture(String picture) {
		this.picture = picture;
	}
	
}

Bước 5: Tạo thêm interface com/bkap/repository/RoleRepository

1
2
3
4
5
6
7
8
9
 
package com.bkap.repositories;

import org.springframework.data.jpa.repository.JpaRepository;
import com.bkap.entities.ERole;
import com.bkap.entities.Role;

public interface RoleRepository extends JpaRepository<Role, Integer> {
	Role findByRoleName(ERole role);
}

Bước 6: Tạo thêm class com/bkap/repository/RoleService

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
 
package com.bkap.services;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.bkap.entities.ERole;
import com.bkap.entities.Role;
import com.bkap.repositories.RoleRepository;

@Service
public class RoleService {
	@Autowired 
	RoleRepository roleRepository;
	public Role getByRole(ERole role) {
		return roleRepository.findByRoleName(role);
	}
}

Bước 7: Bổ sung constructor sau vào lớp com/bkap/entities/Account (mục đích chuyển AccountModel sang Account kèm theo role)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
 
public Account(AccountModel accountModel, Role role) {
		this.accountId=UUID.randomUUID().toString().toUpperCase();
		this.username=accountModel.getUsername();
		this.password=new BCryptPasswordEncoder().encode(accountModel.getPassword());
		this.fullname=accountModel.getFullname();
		this.address=accountModel.getAddress();
		this.phone=accountModel.getPhone();
		this.picture=accountModel.getPicture();
		this.enabled=true;
		this.email=accountModel.getEmail();
		var roles=new HashSet<Role>();
		roles.add(role);
		this.setRoles(roles);
	}

Bước 8: Bổ sung thêm 2 action sau vào com/bkap/controller/client/HomeController (Xử lý đăng ký, bạn có thể bổ sung thêm kiểm tra trùng username nhé)

 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
 
@GetMapping("/register")
	public String register(Model model) {

		model.addAttribute("account",new AccountModel());
		return "home/register";
	}
	
	@PostMapping("/register")
	public String register(@Valid @ModelAttribute("account") AccountModel account,BindingResult result,@RequestParam MultipartFile file, Model model) {
		if(result.hasErrors())
		{
			model.addAttribute("account",account);
			return "home/register";
		}
		if(!account.getPassword().equals(account.getConfirmpassword())) {
			model.addAttribute("msgError","Mật khẩu không khớp");
			model.addAttribute("account",account);
			return "home/register";
		}
		
		 // upload ảnh avatar
		try {
			
			if (!file.isEmpty()) {
				File imageFolder=new File( new ClassPathResource(".").getFile()+"/static/assets/images");
				if(!imageFolder.exists())
					imageFolder.mkdir();
				Path path=Paths.get(imageFolder.getAbsolutePath(),file.getOriginalFilename());
				System.out.println(path);
				file.transferTo(path);
				account.setPicture(file.getOriginalFilename());
			}
		} catch (IllegalStateException e) {
			e.printStackTrace();
		} catch (IOException e) {
			e.printStackTrace();
		}
		
		//khởi tạo role mặc định là User
		Role role=roleService.getByRole(ERole.ROLE_USER);
		//chuyển đổi AccountModel qua account và lưu vào DB
		accountDetailService.insert(new Account(account,role));
		return "home/login";
	}

Bước 9: Tạo view template/home/register.html và code như sau:

 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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
 
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultrap.net.nz/thymeleaf/layout" layout:decorate="~{home_layout}">
<head>
<meta charset="UTF-8">
<title>Đăng ký tài khoản</title>
</head>
<body>
<div layout:fragment="page_content">
<!--Page Title-->
    	<div class="page section-header text-center">
			<div class="page-title">
        		<div class="wrapper"><h1 class="page-width">Create an Account</h1></div>
      		</div>
		</div>
        <!--End Page Title-->

        <div class="container">
        	<div class="row">
                <div class="col-12 col-sm-12 col-md-6 col-lg-6 main-col offset-md-3">
                	<div class="mb-4">
                       <form method="post" th:action="@{/register}" th:object="${account}" enctype="multipart/form-data" accept-charset="UTF-8" class="contact-form">
      
                          <div class="row">
	                         
                               <div class="col-12 col-sm-12 col-md-12 col-lg-12">
                                <div class="form-group">
                                    <label for="username">Username</label>
                                    <input type="text" th:field="*{username}"  autofocus="" class="form-control">
                                     <span th:if="${#fields.hasErrors('username')}" th:errors="*{username}" class="text-danger">username error</span>
                                </div> 
                             
                               </div>
                           
                            <div class="col-12 col-sm-12 col-md-12 col-lg-12">
                                <div class="form-group">
                                    <label for="password">Password</label>
                                    <input type="password" th:field="*{password}" >  
                                    <span th:if="${#fields.hasErrors('password')}" th:errors="*{password}" class="text-danger">password error</span>                      	
                                </div>
                            </div>
                             <div class="col-12 col-sm-12 col-md-12 col-lg-12">
                                <div class="form-group">
                                    <label for="confirmpassword">Confirm password</label>
                                    <input type="password" value="" th:field="*{confirmpassword}" >      
                                    <span th:if="${#fields.hasErrors('confirmpassword')}" th:errors="*{confirmpassword}" class="text-danger">confirmpassword error</span>
                                                 <span class="text-danger" th:text="${msgError}">Lỗi</span>             	
                                </div>
                            </div>
                            
                             <div class="col-12 col-sm-12 col-md-12 col-lg-12">
                                <div class="form-group">
                                    <label for="fullname">Full Name</label>
                                    <input type="text" th:field="*{fullname}">
                                      <span th:if="${#fields.hasErrors('fullname')}" th:errors="*{fullname}" class="text-danger">fullname error</span>      
                                </div>
                               </div>
                                <div class="col-12 col-sm-12 col-md-12 col-lg-12">
                                <div class="form-group">
                                    <label for="email">Email</label>
                                    <input type="email" th:field="*{email}">
                                    <span th:if="${#fields.hasErrors('email')}" th:errors="*{email}" class="text-danger">email error</span>      
                                </div>
                            </div>
                             <div class="col-12 col-sm-12 col-md-12 col-lg-12">
                                <div class="form-group">
                                    <label for="address">Address</label>
                                    <input type="text" th:field="*{address}">
                                    <span th:if="${#fields.hasErrors('address')}" th:errors="*{address}" class="text-danger">address error</span>
                                </div>
                            </div>
                             <div class="col-12 col-sm-12 col-md-12 col-lg-12">
                                <div class="form-group">
                                    <label for="phone">Phone</label>
                                    <input type="text" th:field="*{phone}">
                                    <span th:if="${#fields.hasErrors('phone')}" th:errors="*{phone}" class="text-danger">phone error</span>
                                </div>
                            </div>
                             <div class="col-12 col-sm-12 col-md-12 col-lg-12">
                                <div class="form-group">
                                    <label for="file">Picture</label>
                                    <input type="file" name="file" accept="image/png, image/jpeg" id="file" >
                                </div>
                            </div>
                          </div>
                          <div class="row">
                            <div class="text-center col-12 col-sm-12 col-md-12 col-lg-12">
                                <input type="submit" class="btn mb-3" value="Register">
                            </div>
                         </div>
                     </form>
                    </div>
               	</div>
            </div>
        </div>
</div>

</body>
</html>

Bước 10: Chạy và kiểm tra kết quả 

Source code tải tại đây

Video quay sau

thay lời cảm ơn!

QUẢNG CÁO - TIẾP THỊ