Bctt CNTT Xây dựng website xem phim online

1. TP. HỒ CHÍ MINH – Năm 2020
TRƯỜNG ĐẠI HỌC GIAO THÔNG VẬN TẢI TP. HỒ CHÍ MINH
KHOA CÔNG NGHỆ THÔNG TIN
---------------------------------------
BÁO CÁO THỰC TẬP TỐT NGHIỆP
TÌM HIỂU FRAMEWORK VUEJS, JAVA SPRING BOOT
VÀ XÂY DỰNG WEBSITE XEM PHIM ONLINE
Tải bài mẫu qua zalo 0936.885.877
Tham khảo dịch vụ làm báo cáo thực tập
luanvantrithuc.com
NGÀNH: Công nghệ thông tin
CHUYÊN NGÀNH: Công nghệ thông tin
NGƯỜI HƯỚNG DẪN SINH VIÊN THỰC HIỆN:
ThS. Vũ Đình Long Bùi Văn Quang; MSSV1651120115
Lê Tuấn Khải; MSSV: 1651120096

2. TP. HỒ CHÍ MINH – Năm 2020
TRƯỜNG ĐẠI HỌC GIAO THÔNG VẬN TẢI TP. HỒ CHÍ MINH
KHOA CÔNG NGHỆ THÔNG TIN
---------------------------------------
Bùi Văn Quang
&
Lê Tuấn Khải
TÌM HIỂU FRAMEWORK VUEJS, JAVA SPRING
BOOT VÀ XÂY DỰNG WEBSITE XEM PHIM ONLINE
NGÀNH: Công nghệ thông tin
CHUYÊN NGÀNH: Công nghệ thông tin
BÁO CÁO THỰC TẬP TỐT NGHIỆP
NGƯỜI HƯỚNG DẪN
ThS. Vũ Đình Long

3. LỜI CAM ĐOAN
Tôi xin cam đoan đồ án tốt nghiệp “Xây dựng website xem phim trực
tuyến” là công trình nghiên cứu của tôi và bạn Lê Tuấn Khải. Những phần sử
dụng tài liệu tham khảo trong đồ án đã được nêu rõ trong phần tài liệu tham khảo.
Các số liệu, kết quả trình bày trong đồ án là hoàn toàn trung thực, nếu sai tôi xin
chịu hoàn toàn trách nhiệm và chịu mọi kỷ luật của bộ môn và nhà trường đề ra.
Hồ Chí Minh, tháng 5 năm 2020
Sinh viên thực hiện
Bùi Văn Quang & Lê Tuấn Khải

4. i
MỤC LỤC
LỜI CAM ĐOAN................................................................................................3
MỤC LỤC............................................................................................................i
DANH MỤC HÌNH ẢNH ..................................................................................iv
DANH MỤC BẢNG BIỂU ................................................................................vi
DANH MỤC CÁC TỪVIẾTTẮT ...........................................................................vii
1. CHƯƠNG 1. GIỚI THIỆU..........................................................................1
1.1. Lý do chọn đề tài..................................................................................1
1.2. Phạm vi đề tài.......................................................................................1
1.3. Phương pháp nghiên cứu......................................................................2
1.4. Bố cục luận văn....................................................................................2
2. CHƯƠNG 2. CƠ SỞ LÝTHUYẾT...................................................................3
2.1. Ngôn ngữ lập trình Java .......................................................................3
2.1.1. Javavà lịchsử phát triển.......................................................................3
2.2. Spring framework................................................................................5
2.2.1. Tổng quan Spring..........................................................................5
2.2.2. Lịch sử phát triển...........................................................................6
2.2.3. Một số khái niệm chính ........................................................................6
2.2.4. Spring boot..................................................................................12
2.2.5. Srping MVC................................................................................12
2.2.6. Spring Security............................................................................16
2.3. VueJS ................................................................................................19
2.3.1. Tổng quan vềVueJS..............................................................................19
2.3.2. Cácđặc trưng củaVueJS.......................................................................21
2.3.3. Ưuđiểm củaVueJS ...............................................................................22
2.4. MySQL..............................................................................................23

5. ii
2.4.1. Tổng quan về SQL.......................................................................23
2.4.2. MySQL .......................................................................................24
2.4.3. Ưuđiểmvà nhược điểm của MySQL................................................27
2.5. Bootstrap và Responsive....................................................................28
2.6. Đặc thù hệ thống ................................................................................30
2.6.1. Tổng quan hệ thống.....................................................................30
2.6.2. Cơ cấu hệ thống...........................................................................31
2.7. Google Firebase.................................................................................31
2.7.1. Khái niệm....................................................................................31
2.7.2. Lịch sử phát triển.........................................................................32
2.7.3. Cácdịch vụ của Firebase.......................................................................32
2.7.4. Các tính năng chính .....................................................................33
3. CHƯƠNG 3.THIẾTKẾVÀCÀI ĐẶTCHƯƠNGTRÌNH..........................37
3.1. Thiết kế cơ sở dữ liệu .........................................................................37
3.1.1. Bảng actor_has_movie..........................................................................37
3.1.2. Bảng actors..................................................................................37
3.1.3. Bảng comments...........................................................................37
3.1.4. Bảng countries ............................................................................38
3.1.5. Bảng directors .............................................................................38
3.1.6. Bảng favorites .............................................................................38
3.1.7. Bảng genre_has_movie.........................................................................39
3.1.8. Bảng genres.................................................................................39
3.1.9. Bảng images................................................................................39
3.1.10. Bảng movies................................................................................39
3.1.11. Bảng rates....................................................................................40
3.1.12. Bảng users...................................................................................40
3.1.13. Bảng user_role ............................................................................41
3.2. RESTfulAPI......................................................................................41
3.3. Sơ đồ usecase.....................................................................................43

6. ii
i
3.3.1. Class Diagram.............................................................................45
3.3.2. Sequency diagram.......................................................................46
3.3.3. Biểu đồ phâncấp chức năng...............................................................49
3.4. Giao diện và chức năng .............................................................................49
3.4.1. Một số giao diệnchính........................................................................49
3.4.2. Một số chứcnăngnổi bật....................................................................56
4. CHƯƠNG 4. KẾTLUẬNVÀ HƯỚNG PHÁTTRIỂN.................................59
4.1. Kết quả đạt được ................................................................................59
4.2. Hạn chế..............................................................................................59
4.3. Hướng phát triển................................................................................60
TÀI LIỆU THAM KHẢO..................................................................................60
Website..........................................................................................................60

7. iv
DANH MỤC HÌNH ẢNH
Hình 2.1 Luồng điều khiển của chương trình bình thường................................8
Hình 2.2 Servlet Container .................................................................................9
Hình 2.3 : Kiểm thử đơn vị với JUnit...............................................................10
Hình 2.4 Mô hình ứng dụng áp dụng IoC ........................................................11
Hình 2.5 Kiến trúc module Spring MVC .........................................................13
Hình 2.6 Sơ đồ luồng hoạt động của Spring MVC ..........................................14
Hình 2.7 Luồng xử lý một request trong spring MVC.....................................16
Hình 2.8 Single Page Application ....................................................................21
Hình 2.9 Mô hình MVVM trong VueJS...........................................................21
Hình 2.10 One-way binding và Two-way binding...........................................22
Hình 2.11 Mô hình hoạt động MySQL ............................................................27
Hình 2.12 Tổng quan hệ thống .........................................................................30
Hình 2.13 Các dịch vụ của Firebase.................................................................32
Hình 2.14 Realtime Database ...........................................................................33
Hình 2.15 Đồng bộ hoá thời gian thực .............................................................34
Hình 2.16 Authentication bằng firebase...........................................................35
Hình 2.17 Firebase Cloud Messaging...............................................................36
Hình 3.1 RESTful API trang home ..................................................................42
Hình 3.2 RESTful API Movie ..........................................................................42
Hình 3.4 RESTful API User Role ....................................................................42
Hình 3.5 Sơ đồ usecase.....................................................................................44
Hình 3.6 Class diagram.....................................................................................45
Hình 3.7 Biểu đồ tuần tự đăng nhập.................................................................46
Hình 3.8 Biểu đồ tuần tự thêm người dùng......................................................47
Hình 3.9 Biểu đồ tuần tự cập nhật thông tin người dùng.................................48

8. v
Hình 3.10 Biểu đồ phân cấp chức năng............................................................49
Hình 3.11 Trang thể loại ...................................................................................50
Hình 3.12 Trang chủ .........................................................................................51
Hình 3.13 Trang xem phim...............................................................................52
Hình 3.14 Trang thêm tài khoản người dùng....................................................53
Hình 3.15 Trang quản lý người dùng................................................................54
Hình 3.16 Trang quản lý phim..........................................................................55
Hình 3.17 Trang login.......................................................................................56
Hình 3.18 Ứng dụng với ngôn ngữ tiếng Việt ..................................................57
Hình 3.19 Ứng dụng với ngôn ngữ tiếng Anh ..................................................58

9. vi
DANH MỤC BẢNG BIỂU
Bảng 2.1 Phân loại người dùng hệ thống .........................................................31
Bảng 3.1 Bảng actor_has_movie ......................................................................37
Bảng 3.3 Bảng comments.................................................................................37
Bảng 3.4 Bảng countries...................................................................................38
Bảng 3.5 Bảng directors....................................................................................38
Bảng 3.6 Bảng favorites....................................................................................38
Bảng 3.7 Bảng genre_has_movie .....................................................................39
Bảng 3.8 Bảng genres .......................................................................................39
Bảng 3.9 Bảng images ......................................................................................39
Bảng 3.10 Bảng movies....................................................................................40
Bảng 3.11 Bảng rates........................................................................................40
Bảng 3.12 Bảng users .......................................................................................41
Bảng 3.13 Bảng user_role.................................................................................41
Bảng 3.14 Danh sách các actor.........................................................................43
Bảng 3.15 Danh sách các usecase ....................................................................43

10. vii
DANH MỤC CÁC TỪ VIẾT TẮT
AJAX Asynchronous JavaScript and XML
AOP Aspect – oriented programming
API Application programming interface
CSDL Cở sở dữ liệu
DAO Data Access Object
DOM Document Object Model
EJB Enterprise Java Bean
HTML HyperText Markup Language
IoC Inversion of Control
JSM Java Message System

11. 1
1. CHƯƠNG 1. GIỚI THIỆU
1.1. Lý do chọn đề tài
Ngày nay đời sống con người ngày một nâng cao, các nhu cầu vui chơi, giải
trí ngày càng phát triển cả về mặt số lượng và chất lượng.
Xem phim trực tuyến là một loại hình giải trí nhẹ nhàng ra đời và phát triển
mạnh mẽ từ khi có nền công nghiệp công nghệ thông tin. Thị trường phim là
một thị trường đa dạng và rất phong phú. Sản phẩm phim rất phong phú về mặt
thể loại, từ hành động, lãng mạng, kinh dị,… đều đã có mặt trên thị trường
nhằm phục vụ nhu cầu giải trí của con người. Thị trường phim ở từng quốc gia,
khu vực cũng tương đối khác nhau.
Vì vậy nhóm chúng tôi chọn làm website xem phim trực tuyến để phục vụ
nhu cầu xem phim giải trí của con người hiện nay.
1.2. Phạm vi đề tài
Luận văn sẽ tập trung trình bày kết quả nghiên cứu của chúng tôi về các
nội dung sau: Spring framework, VueJS framework, MySQL, Boostrap và
Maven. Mỗi phần chúng tôi sẽ giới thiệu sơ lược và trình bày những nội dung
cơ bản nhất, những điểm mạnh hay lợi ích mà nó mang lại cho các nhà phát
triển phần mềm.
Cụ thể về Spring framework chúng tôi sẽ tập trung tìm hiểu và trình bày 3
module: Spring boot, Spring MVC và Spring Security.
Sau khi tìm hiểu chúng tôi sẽ vận dụng kết quả tìm hiểu được vào việc xây
dựng một ứng dụng nhằm mục đích minh họa cho phần lý thuyết đã trình bày.
Chúng tôi sẽ xây dựng một web xem phim trực tuyến.

12. 2
1.3. Phương pháp nghiên cứu
Tìm kiếm và nghiên cứu các tài liệu về Spring Framework và các công
nghệ có liên quan đến việc phát triển một ứng dụng web enterprise như VueJS,
MySQL, Maven của các tác giả trong và ngoài nước, các bài báo, thông tin
trên mạng,… sau đó chọn lọc và sắp xếp lại theo ý tưởng của mình.
Dựa trên kết quả tìm hiểu được để xây dựng một ứng dụng web xem phim
trực tuyến có áp dụng tất cả những nội dung đã nghiên cứu nhằm mục đích
minh họa cho phần cơ sở lý thuyết sẽ trình bày trong nội dung luận văn này.
Các công cụ hỗ trợ nghiên cứu
1. MicrosoftWord:dùngđểviết tàiliệubáo cáo
2. Microsoft Project: dùng để phân công nhiệmvụ cậpnhật tiến độ dự án
3. Visio: dùngđểvẽ các biểuđồ
4. VisualStudio Code: dùng để codefront end
5. IntelliJ: dùngđể code back end
6. Web server for chorme:làm server ảo chứa hình ảnh của trang web
7. MySQLWorkbench: dùng để lưutrữ cơ sởdữ liệu
1.4. Bố cục luận văn
Trong phần này chúng tôi sẽ trình bày ngắn gọn về nội dung chính của
từng phần trong luận văn nhằm giúp cho người đọc dễ dàng theo dõi.
Chương 1: Giới thiệu tổng quan về cơ quan thực tập; lý do và tính cấp thiết
để thực hiện đề tài này. Trong chương này còn trình bày về các vấn đề cụ thể
cần phải giải quyết và hướng giải quyết cho từng vấn đề; phạm vi cũng như
phương pháp nghiên cứu đề tài.
Chương 2: Trình bày về cơ sở lý thuyết được sử dụng trong đề tài bao gồm
các nội dung về ngôn ngữ lập trình Java, Spring framework, VueJS, MySQL

13. 3
và Bootstrap:
Trong phần Spring framework chúng tôi sẽ giới thiệu sơ lược về
framework này và một số khái niệm liên quan, tiếp theo sẽ trình bày về 3
module là Spring Boot, Spring MVC và Spring Security.
- Phần VueJS sẽ trình bàytổngquan về frameworknàyvà những đ ặc
trưng nổi bật của nó.
- Phần tiếp theo trình bày về MySQL, các dạng của MySQL; giới thiệu về
MySQLvà ưu điểmcủa hệ quản trị CSDLnày.
- Phần cuối cùng sẽ giới thiệu về Bootstrap và tính năng responsive mà
Bootstrap hỗ trợ trong việc xây dựng giao diện người dùng cho ứng dụng
web.
Chương 3: Sau khi tìm hiểu về Spring, VueJS, MySQL và Bootstrap
chương này trình bày phần phân tích, thiết kế và cài đặt ứng dụng xem phim
trực tuyến sử dụng các công nghệ vừa nêu.
Chương 4: Những kết quả đạt được, thảo luận những vấn đề khó khăn và
đưa ra hướng phát triển trong tương lai.
2. CHƯƠNG 2. CƠ SỞ LÝ THUYẾT
2.1. Ngôn ngữ lập trình Java
2.1.1. Java và lịch sử phát triển
Java là một ngôn ngữ lập trình dạng lập trình hướng đối tượng (OOP).
Khác với phần lớn ngôn ngữ lập trình thông thường, thay vì biên dịch mã
nguồn thành mã máy hoặc thông dịch mã nguồn khi chạy, Java được thiết kế
để biên dịch mã nguồn thành bytecode, bytecode sau đó sẽ được môi trường
thực thi (runtime environment) chạy.

14. 4
Cú pháp Java được vay mượn nhiều từ C và C++ nhưng có cú pháp hướng
đối tượng đơn giản hơn và ít tính năng xử lý cấp thấp hơn. Do đó việc viết một
chương trình bằng Java dễ hơn, đơn giản hơn, đỡ tốn công sửa lỗi hơn.
Java được khởi đầu bởi James - Gosling và bạn đồng nghiệp ở Sun
Microsystems năm 1991. Ban đầu ngôn ngữ này được gọi là Oak (có nghĩa là
cây sồi) do bên ngoài cơ quan của ông Gosling có trồng nhiều loại cây này.
Java được phát hành vào năm 1994. Sau khi Oracle mua lại công ty Sun
Microsystems năm 2009 - 2010, Oracle đã mô tả họ là "người quản lý công
nghệ Java với cam kết không ngừng để bồi dưỡng một cộng đồng tham gia và
minh bạch".
Lịch sử phiên bản java:
1. JDK 1.0 (23 tháng 01,1996)
2. JDK1.1 (19 tháng 2, 1997)
3. J2SE1.2(Playground) 08 tháng12, 1998
4. J2SE1.3(Kestrel)08 tháng 5,2000
5. J2SE1.4.0 (Merlin)06 tháng 02,2002
6. J2SE5 (1.5.0) (Tiger) 30 tháng 9,2004
7. JavaSE6(còngọilà Mustang),đượccôngbố 11tháng12năm2006.
8. Java SE 7 (còn gọi là Dolphin), được bắt đầu từ tháng 8 năm 2006
và công bố ngày28 tháng 7năm2011.
9. JDK 8,18 tháng 3 năm2014
10. JDK 9,21 tháng 9 năm 2017
11. JDK 10,20 tháng 3năm 2018

15. 5
2.2. Spring framework
2.2.1. Tổng quan Spring
Spring framework, hay ngắn hơn là Spring, là một cấu trúc dùng để xây
dựng chương trình ứng dụng mã nguồn mở dành cho ngôn ngữ lập trình Java.
Phiên bản đầu tiên của nó do Rod Johnson viết và đã được ông xuất bản cùng
với quyển sách đầu tay Expert One-on-One JavaEE Design and Development
(Nhà xuất bản Wrox Press, Tháng 10 năm 2002).
Kiến trúc của Spring framework được ra mắt công chúng lần đầu tiên hồi
tháng 6 năm 2003 dưới Giấy phép Apache - phiên bản 2.0. Phiên bản 1.0 đánh
dấu mốc thành đạt đầu tiên được xuất bản vào tháng 3 năm 2004 và tiếp đó
vào tháng 9 năm 2004, tháng 3 năm 2005.
Tuy Spring framework không bắt buộc người ta phải tuân theo một mô
hình lập trình cụ thể nào, song nó lan truyền rộng rải trong cộng đồng những
người viết chương trình dùng Java, như một hình thức chủ yếu thay thế cho
mô hình Enterprise Java Bean. Theo thiết kế, bộ framework này giải phóng lập
trình viên dùng Java, cho phép họ nhiều quyền tự do hơn và đồng thời cung
cấp một giải pháp tiện lợi, đầy đủ dẫn chứng bằng tài liệu, dễ dàng sử dụng,
phù hợp với những thực hành thông dụng trong công nghệ phần mềm.
Bên cạnh những đặc trưng nền tảng của Spring framework là những cái có
thể dùng được trong bất cứ một chương trình ứng dụng Java nào, rất nhiều các
mở rộng và tiến bộ trong việc kiến tạo các trình ứng dụng dành cho nền tảng
mạng web (web-based application) dựa trên nền Java Enterprise cũng tồn tại
nữa. Spring framework nổi tiếng cũng một phần do chính đặc thù kể trên và
được giới thương mại công nhận như một nền tảng kiến trúc có tầm quan trọng
trong chiến lược kiến tạo phần mềm.

16. 6
2.2.2. Lịch sử phát triển
Phần đầu tiên của Spring framework ban đầu nguyên được Rod Johnson
viết vào năm 2000. Vào năm 2001, những mô hình lập trình cho các trình ứng
dụng Web được đại đa số sử dụng đều do Java Servlet API và Enterprise Java
Bean cung cấp.
Năm 2003 thành lập dự án phát tại Sourceforge để phát triển Spring. Sau
khi phát triển trên nền tảng ban đầu hơn một năm họ đã phát hành phiên bản
đầu tiên (1.0) vào tháng 3 năm 2004.
Spring framework đã làm cho những kỹ thuật vốn không được biết đến
mấy trở nên những kỹ thuật được mọi người ưa chuộng trong một thời gian
ngắn ngủi. Một trong những kỹ thuật nổi tiếng hơn cả là kỹ thuật “đảo ngược
quyền điều khiển” (Inversion of Control, IoC).
Năm 2005 cho thấy mức độ hưởng ứng nâng cao hơn những năm trước,
nguyên do cũng vì những phiên bản mới được giới thiệu với những cột mốc
đáng kể và những tính năng mới được thêm vào. Diễn đàn Spring (Spring
Forum) ra đời cuối năm 2004 cũng góp phần không nhỏ trong việc nâng cao
tính phổ biến của bộ framework và từ đó đến nay đã sinh trưởng trở thành một
nguồn thông tin quan trọng, giúp đỡ cho người sử dụng.
Vào tháng 12 năm 2005, hội thảo đầu tiên về Spring Framework đã được
tổ chức tại Miami, Florida thu hút 300 nhà phát triển trong 3 ngày và tiếp theo
đó cuộc hộithảo ở Antwerp vào tháng 6 năm 2006, thu hút hơn 400 người.
2.2.3. Một số khái niệm chính
Hai trong những thành phần chủ chốt và là nền tảng tạo nên sức mạnh của
Spring chính là IoC và DI.

17. 7
2.2.3.1.1. Inversion of Control (IoC)
IoC Container trong Spring được xây dựng dựa trên nguyên lý Inversion of
Control (đảo ngược điều khiển) đã xuất hiện khá lâu trong các mẫu hình thiết
kế (design pattern), và được phổ biến rộng rãi nhờ Robert C. Martin và Martin
Fowler. Để hiểu về Spring, trước tiên chúng ta cần hiểu khái niệm IoC là gì?
Muốn vậy, chúng ta cần trả lời câu hỏi: Control (điều khiển) trong chương
trình phần mềm là gì, và Inversion (sự đảo ngược) đối với điều khiển trong
ngữ cảnh này được hiểu như thế nào?
Khái niệm Control Flow (tạm dịch là luồng thực thi) được sử dụng cho
trình tự thực hiện các câu lệnh, chỉ thị hoặc lời gọi hàm trong một chương
trình, khi chương trình này thực thi.
Do chương trình ngày càng phức tạp, nên các lập trình viên áp dụng
phương pháp lập trình hướng đối tượng nhằm phân loại, chia tách các chức
năng và gom thành các đối tượng. Các lập trình viên còn tạo dựng các thư viện
tạo sẵn để có thể sử dụng lại. Luồng thực thi của chương trình, trong những
tình huống cần xem xét ở mức tổng thể, không còn quan tâm đến các bước
thực thi câu lệnh cụ thể nữa, mà chỉ xem xét đến quá trình gọi phương thức của
các đối tượng trong ứng dụng cũng như các đối tượng của thư viện dựng sẵn.
Các lập trình viên, khi xây dựng ứng dụng từ đầu, đã thực hiện hai nhiệm
vụ: trực tiếp điều khiển luồng thực thi của chương trình và xây dựng các chức
năng để đáp ứng nghiệp vụ của ứng dụng. Thực tế, có nhiều chương trình hoặc
bộ phận trong chương trình có luồng thực thi rất giống nhau, chẳng hạn phần
tương tác với HTTP trong các ứng dụng web, phần unit testing trong các ứng
dụng,… Việc trực tiếp tạo dựng và kiểm soát luồng thực thi của chương trình
lặp đi lặp lại khi xây dựng nhiều ứng dụng sẽ làm mất nhiều công sức, chi phí,

18. 8
tạo ra sự nhàm chán và dễ phát sinh lỗi. Điều này tạo ra động lực cũng như môi
trường để nguyên lý đảo ngược điều khiển nảy nở và phát triển.
Hình 2.1 Luồng điều khiển của chương trình bình thường
Vậy sự “đảo ngược” (inversion) luồng điều khiển chương trình trong ngữ
cảnh này được hiểu như thế nào? Chúng ta hãy xem xét 2 ví dụ dưới đây.
Ví dụ 1: Ứng dụng web trong Java với JavaServlet
Khi lập trình ứng dụng web bằng JavaServlet cần thực hiện các bước lập trình
như sau:

19. 9
Tạo lớp đối tượng kế thừa từ HttpServlet, override các phương thức doGet(),
doPost(),…
- Đăng ký trong file cấu hình Deployment Descriptor tương ứng Servlet nàyvới
đường dẫn xác định.
đến? Ai chịu trách nhiệm chuyển đổi các thông điệp HTTP (HTTP Request
và HTTP Response) thành các đối tượng Java (HttpServletRequest và
HttpServletResponse) để truyền cho các hàm doGet(), doPost()? Đó chính
là Servlet Container.
Hình 2.2 Servlet Container
Ví dụ 2: Lập trình kiểm thử đơn vị (Unit testing) với Junit
Trong quá trình phát triển các thành phần chức năng của ứng dụng, chúng ta
thường áp dụng kiểm thử đơn vị để đảm bảo chức năng đó vẫn chạy đúng
trong suốt quá trình ứng dụng được mở rộng và phát triển thêm. Để tạo bộ unit
test, chúng ta chỉ cần tạo một lớp đối tượng, định nghĩa các phương thức khởi
tạo, phương thức kết thúc và các phương thức test. Sau đó, chúng ta chỉ việc
chạy bộ test để kiểmthử.

20. 10
Việc điều khiển trình tự thực thi các phương thức được giao cho thư viện
bên ngoài đảm nhiệm chẳng hạn như TestNG hoặcJUnit.
Hình 2.3 : Kiểm thử đơn vị với JUnit
Với hai ví dụ trên, chúng ta nhận thấy trong các ứng dụng đã có sự thay
đổi vai trò. Ứng dụng không còn ôm đồm vừa trực tiếp tạo dựng và kiểm soát
luồng thực thi, vừa xây dựng chức năng nghiệp vụ. Việc kiểm soát luồng thực
thi được tách khỏi chức năng nghiệp vụ và bị đẩy ra bên ngoài. Người lập trình
đã ủy thác việc kiểm soát luồng thực thi ứng dụng cho một thành phần (thường
là thư viện dựng sẵn) bên ngoài đảm nhiệm, chỉ còn tập trung vào chức năng
chính của ứng dụng.

21. 11
Hình 2.4 Mô hình ứng dụng áp dụng IoC
Như vậy, khái niệm “đảo ngược” ở đây chính là chuyển nhiệm vụ kiểm
soát lưu trình thực thi từ ứng dụng cho một thành phần chuyên trách (thường
là một thư viện phần mềm khung – framework – dựng sẵn ở bên ngoài). Ứng
dụng chính chúng ta quan tâm phát triển không kiểm soát việc điều khiển luồng
thực thi nữa, mà chỉ tập trung vào việc định nghĩa chức năng. Thư viện phần
mềm khung chuyên trách kiểm soát điều khiển sẽ dựa trên mô tả trong cấu
hình của ứng dụng để thay mặt ứng dụng điều phối luồng thực thi trong
chương trình.
Dễ dàng nhận thấy thư viện phần mềm khung này khác với các thư viện
thông thường ở chỗ: thư viện thông thường cung cấp các chức năng và chờ
được ứng dụng gọi đến, còn thư viện phần mềm khung tạo dựng luồng thực
thi và gọi đến các chức năng của ứng dụng.
Nói một cách ngắn gọn IoC là một design pattern và tập hợp các kỹ thuật
lập trình liên quan, trong đó luồng thực thi của một hệ thống bị đảo ngược so
với cách tương tác truyền thống [3, tr1]. IoC trong Spring cũng hoàn toàn
mang ý nghĩa như trên. Trong Spring các đối tượng chính để xây dựng ứng
dụng thì được quản lý bởi Spring IoC container. Và IoC container gọi các đối
tượng đó là các bean. Một bean chỉ đơn giản là một đối tượng được khởi tạo

22. 12
và quản lý bởi Spring IoC container.
2.2.3.2. Dependency Injection (DI)
Dependency Injection là khả năng liên kết giữa các thành phần lại với
nhau, đó chính là việc các thuộc tính trong một đối tượng được “tiêm chích”
(injection) để tham chiếu lần lượt đến các đối tượng khác. Dependency
Injection trong Spring hoạt động dựa trên Java Reflection.
2.2.4. Spring boot
2.2.4.1. Khái niệm
Spring Boot là một dự án phát triển bởi JAVA (ngôn ngữ java) trong hệ
sinh thái Spring framework. Nó giúp cho các lập trình viên chúng ta đơn giản
hóa quá trình lập trình một ứng dụng với Spring, chỉ tập trung vào việc phát
triển business cho ứng dụng.
2.2.4.2. Ưuđiểm của Springboot
1. Cócáctính năng của Spring Framework.
2. Tạo ứng dụng độc lập, có thể chạy bằng java -jar (cho cả java web)
3. Nhúng trực tiếp các ứng dụng server (Tomcat, Jetty…) do đó không cần
phải triển khai file WAR
4. Cấu hình ít, tự động cậu hình bất kì khi nào có thể (Giảm thời gian viết
code, tăng năng suất)
5. Không yêu cầu XML config…
6. Cung cấp nhiều plugin
7. Chuẩn cho Microservices (Cloud support; giảm việc setup, config; các
thư viện hỗ trợ…)
2.2.5. Srping MVC
2.2.5.1. Tổng quanvềspring MVC
Spring MVC là một module con trong Spring framework, cung cấp kiến

23. 13
trúc Model-View-Controller và các components sẵn có để sử dụng và phát
triển ứng dụng web một cách linh hoạt.
Hình 2.5 Kiến trúc module Spring MVC
Mô hình MVC là kết quả của việc tách các khía cạnh khác nhau của ứng
dụng (logic đầu vào, các xử lý logic, UI) trong khi đó cung cấp một sự kết hợp
giữa các thành phần đó một cách “lỏng lẻo”.
Model: đóng gói dữ liệu ứng dụng và bao gồm các POJO.
View: Chịu trách nhiệm nhận giá trị của model và vẽ ra trang HTML mà
trình duyệt có thể hiển thị được.

24. 14
Controller: Chịu trách nhiệm nhận và xử lý các yêu cầu từ người dùng và
tạo các model phù hợp và trả về cho view.
Spring MVC được thiết kế xung quanh DispatcherServlet để xử lý tất cả các
HTTP request và HTTP response. Luồng xử lý các yêu cầu của
DispatcherServlet được minh họa theo hình 2.6:
Hình 2.6 Sơ đồ luồng hoạt động của Spring MVC
Đây là chuỗi sự kiện tương ứng khi nhận một yêu cầu HTTP gửi đến
DispatcherServlet:
1. Sau khi nhận một HTTP request, DispatcherServlet gửi yêu cầu đến
HandlerMapping (một bản đồ cấu hình URL) để xác định controller nào
sẽ xử lý yêu cầu này.
2. Controller sẽ nhận các request và gọi các phương thức dịch vụ
(service methods) phù hợp dựa trên việc sử dụng các method
GET/POST… Nếu yêu cầu đó cần truy xuất cơ sở dữ liệu thì Controller
sẽ ủy nhiệm cho một business logic hay nhiều hơn một model để lấy

25. 15
thông tin và gửi dữ liệu về cho Controller. Lúc này Controller đóng gói
mô hình dữ liệu và tên của một view sẽ được tải lên thành đối tượng
ModelAndView và gửi trả về cho DispathcherServlet
3. DispatcherServlet gửi gói ModelAndView cho ViewResolver để tìm
xem view (thông thường là một trang JSP, HTML) nào sẽ được load
lên.
4. Sau khi hoàn tất, DispatcherServlet sẽ chuyển dữ liệu từ model đến
view và cuối cùng hiển thị trên trình duyệt.
2.2.5.2. DispathcherServlet
DispathcherServlet là thành phần tiếp nhận tất cả các request từ browser,
điều khiển luồng xử lý và trung chuyển giữa các thành phần (components)
trong MVC. Hơn thế nữa, nó còn tích hợp các Spring IoC container, cho phép
ta sử dụng đến tất cả các tính năng của Spring [4, tr439].
Hình 2.7 sẽ cho chúng ta thấy luồng xử lý một request trong Spring MVC
và DispatcherServlet chính là Front controller.

26. 16
Hình 2.7 Luồng xử lý một request trong spring MVC
DispatcherServlet thực sự là một Servlet (nó thừa kế từ lớp cơ sở
HttpServlet), và được khai báo trong tập tin web.xml của ứng dụng web. Các
requests muốn DispatcherServlet xử lý sẽ phải được ánh xạ bằng cách sử
dụng một bộ ánh xạ URL trong cùng một tập tin web.xml.
2.2.6. Spring Security
2.2.6.1. Tổng quan vềSpring Security
Spring Security cung cấp một giải pháp bảo mật toàn diện cho các ứng
dụng enterprise dựa trên J2EE, Spring Security cố gắng để cung cấp cho chúng
ta một hệ thống bảo mật hữu ích và dễ dàng để cấu hình cho các dự án được
phát triển dựa trên Spring framework [1, tr2].
Vào năm 2003, Spring Security ban đầu chỉ là một dự án nhỏ và độc lập với
Spring với tên gọi là “The Acegi Security System for Spring”. Đến tháng
3/2004 một dự án chính thức được thành lập để phát triển nó. Khoảng một

27. 17
năm sau khi dự án được giới thiệu Acegi Security chính thức trở thành một dự
án con (subproject) của Spring Framework. Phiên bản 1.0.0 được giới thiệu
vào tháng 5/2006 sau hơn hai năm rưỡi phát triển với hàng trăm cải tiến đáng
kể. Cuối năm 2007 Acegi Security chính thức trở thành một project của Spring
và được đổi tên thành Spring Security.
Hai nhiệm vụ chính của việc bảo mật ứng dụng là "xác thực"
(authentication) và "ủy quyền" (authorization) hay "kiểm soát truy cập"
(access-control) [1, tr2], đây cũng chính là hai phần chính của Spring Security.
Xác thực là quá trình xác nhận và chứng thực một principal (một principal
thường có nghĩa là một người sử dụng, thiết bị hoặc một số hệ thống khác mà
có thể thực hiện một hành động trong ứng dụng) [1, tr2].
Uỷ quyền đề cập đến quá trình quyết định có một principal được phép thực
hiện những hành động gì trong phạm vi ứng dụng của chúng ta [1, tr2]. Để
được ủy quyền thì quá trình xác thực là cần thiết và phải được thực hiện trước,
ủy quyền chỉ được thực hiện khi xác thực thành công [1, tr2]. Đây là những
khái niệm rất phổ biến cho hầu hết các ứng dụng và nó không phải là riêng
của Spring Security.
Ở một mức độ xác thực, Spring Security hỗ trợ một loạt các mô hình xác
thực. Hầu hết các mô hình xác thực này hoặc được cung cấp bởi bên thứ ba,
hoặc được phát triển bởi các cơ quan như IETF (Internet Engineering Task
Force) [1, tr2]. Ngoài ra, Spring Security còn cung cấp các mô hình xác thực
riêng cho mình. Cụ thể, Spring Security hiện đang hỗ trợ tích hợp xác thực
với tất cả các công nghệ này:
- HTTPBASIC authentication headers (an IEFTRFC-basedstandard)
- HTTPDigest authentication headers (an IEFTRFC-basedstandard)
- HTTPX.509 client certificateexchange(an IEFTRFC-basedstandard)

28. 18
- LDAP (một phương pháp xác thực cross-platform phổ biến thường
được sử dụng trongcác môi trường lớn)
- Form-based authentication
- OpenID authentication
- Authentication based on pre-established request headers (such as
ComputerAssociates Siteminder)
- JA-SIG Central Authentication Service (hay còn gọi là CAS, một mã
nguồn mở single sign)
- Transparent authentication context propagation for Remote Method
Invocation (RMI) andHttpInvoker (aSpring remoting protocol)
- Automatic "remember-me" authentication
- Anonymous authentication
- Run-as authentication
- JavaAuthentication andAuthorization Service (JAAS)
- JEE container autentication
- Kerberos
- Java Open Source Single Sign On(JOSSO)
- OpenNMS Network ManagementPlatform
- AppFuse
- AndroMDA
- Mule ESB
- DirectWebRequest (DWR)
- Grails
- Tapestry
- Jtrac
- Jasypt
- Roller

29. 19
- Elastic Path
- Atlassian Crowd
Nhiều công ty phần mềm áp dụng Spring Security vì nó cung cấp những
mô hình xác thực một cách linh hoạt [1, tr3]. Làm như vậy cho phép các công
ty phần mềm nhanh chóng tích hợp các giải pháp của họ với bất cứ khách hàng
nào, mà không thực hiện rất nhiều kỹ thuật hoặc yêu cầu khách hàng phải thay
đổi môi trường. Nếu không có cơ chế xác thực phù hợp với nhu cầu của khách
hàng, Spring Security là một nền tảng mở và nó thực sự đơn giản để viết cơ
chế xác thực của riêng chúng ta [1, tr3].
Đôi khi chỉ xác thực là không đủ, chúng ta cũng cần phải quan tâm đến
việc nó tích hợp vào ứng dụng như thế nào. Ví dụ, chúng ta có thể muốn đảm
bảo rằng tất cả các request chỉ đến qua HTTPS, để bảo vệ mật khẩu khỏi bị
nghe trộm hay từ các cuộc tấn công man-in-the-middle. Điều này đặc biệt hữu
ích để bảo vệ quá trình phát hiện mật khẩu từ các cuộc tấn công brute force,
hoặc chỉ đơn giản là để làm cho nó khó khăn hơn cho người dùng để sao chép
nội dung quan trọng của ứng dụng. Để giúp chúng ta đạt được những mục tiêu
này, Spring Security hỗ trợ "channel security", cùng với JCaptcha để giải
quyết những yêu cầu trên.
2.3. VueJS
2.3.1. Tổng quan về VueJS
Công nghệ HTML hỗ trợ tốt cho các trang web tĩnh, kiểu như trước năm
2000 vậy. Khi chúng ta xây dựng 1 trang web với PHP, Node/Express, hay
Ruby thì nó cũng chỉ là một trang web tĩnh với nội dung được thay đổi khi
chúng ta gửi request về máy chủ, máy chủ sẽ render 1 trang với nội dung tương
ứng. Tuy nhiên mọi thứ đã thay đổi nhiều từ sự phát triển của HTML5, nhất là
khi có sự hổ trợ từ những tập đoàn công nghệ lớn như Google, Yahoo,

30. 20
Facebook, và sự tập hợp đông đảo của cộng đồng mã nguồn mở.
Ngoài ra sự thành công của jQuery đã khiến JavaScript được nhiều người
yêu thích vì tính đơn giản và dễ sử dụng. Việc phát triển một website sử dụng
AJAX thì không khó, chúng ta có thể dùng jQuery để làm việc này với $.ajax
tuy nhiên làm thế nào để xây dựng một phần mềm có thể mở rộng, dễ test,
nâng cấp và bảo trì thì không hề đơn giản vì bản thân JavaScript không được
thiết kế ngay từ đầu để làm những việc này. Do đó sự ra đời của những
framework hỗ trợ lập trình viên xây dựng ứng dụng web 1 cách có hệ thống
đã ra đời như ReactJS, , AngularJS,vàVueJS
Vue.js là một framework linh động (nguyên bản tiếng Anh: progressive
– tiệm tiến) dùng để xây dựng giao diện người dùng (user interfaces). Khác
với các framework nguyên khối (monolithic), Vue được thiết kế từ đầu theo
hướng cho phép và khuyến khích việc phát triển ứng dụng theo từng bước.
Khi phát triển lớp giao diện (view layer), người dùng chỉ cần dùng thư viện
lõi (core library) của Vue, vốn rất dễ học và tích hợp với các thư viện hoặc dự
án có sẵn. Cùng lúc đó, nếu kết hợp với những kĩ thuật hiện đại như SFC
(single file components) và các thư viện hỗ trợ, Vue cũng đáp ứng được dễ
dàng nhu cầu xây dựng những ứng dụng một trang (SPA - Single-Page
Applications) với độ phức tạp cao hơn nhiều
Ngày nay các ứng dụng web hiện đại thường được xây dựng như một
Single Page Application (SPA) và VueJS là một framework tuyệt vời để xây
dựng 1 SPA.
Một Single Page Application là một ứng dụng web hiển thị vừa vặn trên
một mặt của trang với mục đích giúp người dùng có trải nghiệm giống như
đang dùng ứng dụng trên desktop và làm tăng hiệu suất của ứng dụng [2, tr7].
Hay nói một cách khác là ứng dụng chạy bên trong trình duyệt mà không yêu

31. 21
cầu phải tải lại toàn bộ trang web mỗi lần sử dụng.
Hình 2.8 Single Page Application
2.3.2. Các đặc trưng của VueJS
Dưới đây là những đặc trưng nổi bật của AngularJS: kiến trúc MVVM,
Two-way binding, Routing, , Form validation, Testing
Hình 2.9 Mô hình MVVM trong VueJS
2.3.2.1. Two-waybinding

32. 22
Để hiểu rõ hơn về two-way binding ta sẽ xem xét one-way binding trước.
Khi làm việc với các mô hình MVC framework khác chúng ta sẽ rơi vào
trường hợp model và view chỉ được ghép với nhau một lần duy nhất, vì vậy
mọi sự cập nhật dữ liệu từ một trong hai lớp đó đều không liên quan gì đến
lớp còn lại. Hệ quả là developer phải viết thêm phần “đồng bộ hóa” giữa hai
lớp này. Đó chính là one-way binding.
Tuy nhiên VueJS có thể thực hiện được cả hai chiều, đó chính là two-way
binding. Hay nói một cách khác two-way binding trong AngularJS là tính năng
đồng bộ hóa giữa model và view. Quá trình đồng bộ luôn xảy ra giữa model
và view. Mọi sự thay đổi dữ liệu trong lớp này, ngay lập tức được cập nhật
vào lớp kia [7, 11]. Chúng ta chỉ cần “bind” một lần, và mọi thứ hoạt động
trơn tru. Hình 2-19 sẽ cho thấy rõ hơn về one-way binding và two-way
binding.
Hình 2.10 One-way binding và Two-way binding
2.3.3. Ưu điểm của VueJS
1. Kíchthước nhỏgọn:TỷlệthànhcôngcủaJavaScript frameworksẽphụthuộc
vào kích thước của nó. Kích thước càng nhỏ thì công năng sử dụng càng nhiều.
Kíchthướccủavue.jsframeworklà18–21KB,ngườidùngsẽkhôngmấtthờigian
để tải xuống và sử dụng. Tuy nhiên, điều này không có nghĩa là tốc độ chạy của

33. 23
vue.js thấp do kích thước nhỏ. Thay vào đó, vue.js đánh bại tất cả các khung công
tác cồngkềnh như React.js,Angular.js vàEmber.js.
2. Dễdàng tìmhiểuvà pháttriểnứng dụng: Mộttrongnhững lý doframework
nàyphổbiến là nótương đối dễ hiểu.Nhờ cấutrúcđơngiảncủavue.js,ngườidùng
có thể dễ dàng thêm phần mềm vào dự án website đang thực hiện của mình. Cả
hai mô hình quy mô nhỏ cũng như quy mô lớn đều có thể được phát triển thông
qua framework này, do đó tiết kiệm rất nhiều thời gian. Trong trường hợp xảy ra
bất kỳ vấn đề nào, người dùng cũng có thể dễ dàng tìm ra các khu vực lỗi. Tất cả
là nhờ cấu trúcđơngiản của vue.js.
3. Tíchhợpđơngiản:Vue.js cũnglàphầnmềmđượccácwebdevelopersửdụng
khá phổ biến nhờ dễ dàng trong quá trình tích hợp với các ứng dụng hiện có. Sự
tiện lợi này xuất phát từ vue.js được xây dựng dựa trên JavaScript framework và
do đó, có thểtíchhợp được vào các ứng dụng khác xâydựngtrên JavaScripttương
đối đơn giản. Như vậy, vue.js sẽ rất hữu ích cho các công việc như phát triển các
ứng dụng web mới và thay đổi các ứng dụng đã có từ trước đó. Có được khả năng
tích hợp này lànhờVue.js có tất cả các yếu tố sẵn sàng.
2.4. MySQL
2.4.1. Tổng quan về SQL
SQL là viết tắt của Structured Query Language là ngôn ngữ truy vấn có
cấu trúc. Nó là một ngôn ngữ, là tập hợp các lệnh để tương tác với cơ sở dữ
liệu. Dùng để lưu trữ, thao tác và truy xuất dữ liệu được lưu trữ trong một cơ
sở dữ liệu quan hệ. Trong thực tế, SQL là ngôn ngữ chuẩn được sử dụng hầu
hết cho hệ cơ sở dữ liệu quan hệ. Tất cả các hệ thống quản lý cơ sở dữ liệu quan
hệ (RDMS) như MySQL, MS Access, Oracle, Postgres và SQL Server… đều
sử dụng SQL làm ngôn ngữ cơ sở dữ liệu chuẩn.
SQL bắt đầu từ những năm 1970, khi các kỹ sư của IBM là Donald
Chamberlin và Raymond Boyce thiết kế phiên bản đầu tiên để tương tác và

34. 24
lấy dữ liệu được lưu trữ trong hệ thống cơ sở dữ liệu của công ty. Họ gọi nó là
SEQUEL, mặc dù sau đó họ buộc phải thay đổi nó do các vấn đề bản quyền.
SQL được sử dụng phổ biến vì nó có các ưu điểm sau:
 Cho phép truy cập dữ liệu trong các hệ thống quản lý cơ sở dữ liệu
quan hệ.
 Cho phép mô tả dữ liệu.
 Cho phép xác định dữ liệu trong cơ sở dữ liệu và thao tác dữ liệu đó.
 Cho phép nhúng trong các ngôn ngữ khác sử dụng mô-đun SQL, thư
viện và trình biên dịch trước.
 Cho phép tạo và thả các cơ sở dữ liệu và bảng.
 Cho phép tạo chế độ view, thủ tục lưu trữ, chức năng trong cơ sở dữ
liệu.
 Cho phép thiết lập quyền trên các bảng, thủ tục và view.
Hầu như công ty nào lớn cũng cần xây dựng một hệ thống để lưu trữ cơ sở
dữ liệu. Mọi thứ trong cơ sở dữ liệu này sẽ được diễn tả ra thành nhiều bảng,
có mối quan hệ với nhau. Để truy vấn và lấy dữ liệu từ các bảng này nhằm
tổng hợp thành thông tin nào đó, người ta dùng đến SQL thông qua các câu
query.
2.4.2. MySQL
MySQL là một hệ thống quản trị cơ sở dữ liệu mã nguồn mở (Relational
Database Management System, viết tắt là RDBMS) hoạt động theo mô hình
client-server. RDBMS là một phần mềm hay dịch vụ dùng để tạo và quản lý
các cơ sở dữ liệu (Database) theo hình thức quản lý các mối liên hệ giữa chúng.
MySQL là một trong số các phần mềm RDBMS. RDBMS và MySQL
thường được cho là một vì độ phổ biến quá lớn của MySQL. Các ứng dụng

35. 25
web lớn nhất như Facebook, Twitter, YouTube, Google, và Yahoo! đều dùng
MySQL cho mục đích lưu trữ dữ liệu. Kể cả khi ban đầu nó chỉ được dùng rất
hạn chế nhưng giờ nó đã tương thích với nhiều hạ tầng máy tính quan trọng
như Linux, macOS, Microsoft Windows, và Ubuntu.
Giải thích các thuật ngữ sử dụng ở trên.
Database
Database là tập hợp dữ liệu theo cùng một cấu trúc. Hãy thử nghĩ về việc
chụp hình tự sướng: bạn nhấn nút chụp ảnh về chính bản thân bạn. Hình ảnh là
dữ liệu, thư viện lưu ảnh là cơ sở dữ liệu. Cơ sở dữ liệu, hay database, là nơi
chứa và sắp đặt dữ liệu. Dữ liệu được đặt trong một bộ dữ liệu chung, dataset,
được tổ chức sắp xếp giống như một bảng tính vậy. Mỗi “bảng” này có liên hệ
với nhau theo cách nào đó. Vì vậy từ Relational (liên hệ) trong RDBMS có ý
nghĩa như vậy. Nếu phần mềm không hỗ trợ mô hình dữ liệu quan hệ với nhau
như vậy thì gọi là DBMS.
Open source
Open source dịch là mã nguồn mở, có nghĩa là ai cũng có thể dùng và chỉnh
sửa nó. Bất kỳ ai cũng có thể cài đặt phần mềmn ày. Bạn cũng có thể học cách
tùy chỉnh phần mềm theo nhu cầu của bạn. Tuy nhiên, giấy phép GPL (GNU
Public License) quyết định bạn có thể làm gì tùy vào điều kiện nhất định. Phiên
bản thương mại cũng được xuất bản nếu bạn cần thêm chủ quyền linh hoạt và
hỗ trợ cao cấp.
Mô hình Client-server
Máy tính cài đặt và chạy phần mềm RDBMS được gọi là client (máy
khách). Mỗi khi chúng cần truy cập dữ liệu, chúng kết nối tới máy chủ (server)
RDBMS. Cách thức này chính là mô hình “client-server”.

36. 26
MySQL Server
MySQL Server là máy tính hay một hệ các máy tính cài đặt phần mềm
MySQL dành cho server để giúp bạn lưu trữ dữ liệu trên đó, để máy khách có
thể truy cập vào quản lý. Dữ liệu này được đặt trong các bảng, và các bảng có
mối liên hệ với nhau. MySQL server nhanh, an toàn, đáng tin cậy. Phần mềm
MySQL cũng miễn phí và được phát triển, phân phối và hỗ trợ bởi Oracle
Corporation.
MySQL Client
MySQL client không hẵn phải cài phần mềm MySQL của Oracle mà là nói
chung của mọi phần mềm có thể thực hiện truy vấn lên một MySQL server và
nhận kết quả trả về. MySQL client điển hình là đoạn mã PHP script trên một
máy tính hay trên cùng server dùng để kết nối tới cơ sở dữ liệu MySQL
database. Phpmyadmin cũng là một MySQL client có giao diện người dùng.
Một số công cụ miễn phí dùng làm MySQL là:
 MySQL Workbench (Mac, Windows, Linux), Miễn phí, mã nguồn mở
 Sequel Pro (Mac), miễn phí, mã nguồn mở
 HeidiSQL (Windows; chạy trên Mac hoặc Linux bằng WINE emulator),
miễn phí
 phpMyAdmin (web app), miễn phí, mã nguồn mở

37. 27
Hình 2.11 Mô hình hoạt động MySQL
Hình 2.11 giải thích cấu trúc cơ bản về việc giao tiếp giữa client-server model.
Một máy client sẽ liên lạc với máy server trong một mạng nhất định. Mỗi client
có thể gửi một request từ giao diện người dùng (Graphical user interface – GUI)
trên màn hình, và server sẽ trả về kết quả như mong muốn. Miễn là cả hai hiểu
nhau. Cách vận hành chính trong môi trường MySQL cũng như vậy:
1. MySQL tạo ra bảng để lưu trữ dữ liệu, định nghĩa sự liên quan giữa các
bảng đó.
2. Client sẽ gửi yêu cầu SQL bằng một lệnh đặc biệt trên MySQL.
3. Ứng dụng trên server sẽ phản hồi thông tin và trả về kết quả trên máy
client.
2.4.3. Ưu điểm và nhược điểm của MySQL
2.4.3.1. Ưu điểm
Dễ sử dụng: MySQL là cơ sở dữ liệu tốc độ cao, ổn định, dễ sử dụng và
hoạt động trên nhiều hệ điều hành cung cấp một hệ thống lớn các hàm tiện ích
rất mạnh.

38. 28
Độ bảo mật cao: MySQL rất thích hợp cho các ứng dụng có truy cập
CSDL trên Internet khi sở hữu nhiều nhiều tính năng bảo mật thậm chí là ở cấp
cao.
Đa tính năng: MySQL hỗ trợ rất nhiều chức năng SQL được mong chờ
từ một hệ quản trị cơ sở dữ liệu quan hệ cả trực tiếp lẫn gián tiếp.
Khả năng mở rộng và mạnh mẽ: MySQL có thể xử lý rất nhiều dữ liệu và
hơn thế nữa nó có thể được mở rộng nếu cần thiết.
Nhanh chóng: Việc đưa ra một số tiêu chuẩn cho phép MySQL để làm việc
rất hiệu quả và tiết kiệm chi phí, do đó nó làm tăng tốc độ thực thi.
2.4.3.2. Nhược điểm
Giới hạn: Theo thiết kế, MySQL không có ý định làm tất cả và nó đi kèm
với các hạn chế về chức năng mà một vào ứng dụng có thể cần.
Độ tin cậy: Cách các chức năng cụ thể được xử lý với MySQL (ví dụ tài
liệu tham khảo, các giao dịch, kiểm toán,…) làm cho nó kém tin cậy hơn so với
một số hệ quản trị cơ sở dữ liệu quan hệ khác.
Dung lượng hạn chế: Nếu số bản ghi của bạn lớn dần lên thì việc truy xuất
dữ liệu của bạn là khá khó khăn, khi đó chúng ta sẽ phải áp dụng nhiều biện
pháp để tăng tốc độ truy xuất dữ liệu như là chia tải database này ra nhiều
server, hoặc tạo cache MySQL
2.5. Bootstrap và Responsive
Bootstrap là front-end framework, là một bộ sưu tập miễn phí các công cụ
để tạo ra các trang web và các ứng dụng web. Bootstrap bao gồm HTML và
CSS dựa trên các mẫu thiết kế cho kiểu chữ, hình thức, các button và các thành
phần giao diện khác, cũng như mở rộng tùy chọn JavaScript.

39. 29
Boostrap định nghĩa sẵn các class CSS giúp người thiết kế giao diện
website tiết kiệm rất nhiều thời gian. Các thư viện Bootstrap có những đoạn
mã sẵn sàng cho chúng ta áp dùng vào website của mình mà không phải tốn
quá nhiều thời gian để tự viết.
Với Bootstrap, việc phát triển giao diện website để phù hợp với đa thiết bị
trở nên dễ dàng hơn bao giờ hết. Đây là xu hướng phát triển giao diện website
đang rất được ưu chuộng hiện nay. Bootstrap cung cấp tính năng responsive
và mobile first, nghĩa là làm cho trang web có thể tự co giãn để tương thích
với mọi thiết bị khác nhau, từ điện thoại di động đến máy tính bảng, máy tính
xách tay, máy tính để bàn,...
Một khía cạnh khác là responsive web design làm cho trang web cung cấp
được trải nghiệm tuyệt vời cho người dùng trên nhiều thiết bị, kích thước màn
hình khác nhau. Đây là một đặc điểm vô cùng quan trọng vì chúng ta không
thể lường trước được các thiết bị, kích thước màn hình sẽ sử dụng để truy cập
vào trang web. Một trang có thể hoạt động tốt bất kể sự biến đổi sẽ cung cấp
một trải nghiệm người dùng tốt và nhất quán hơn một trang được thiết kế cho
một loại thiết bị và kích thước màn hình cụ thể.

40. 30
Trả kết quả truy vấn (3)
Model
Controller
2.6. Đặc thù hệ thống
2.6.1. Tổng quan hệ thống
Người dùng
Hiển thị dữ liệu
cho người dùng (5)
Truyển dữ liệu cho view (4)
Gửi yêu cầu (1) Xử lý yêu cầu (2)
Hình 2.12 Tổng quan hệ thống
Hệ thống gồm 2 trang là trang xem phim và trang quản trị
Trang xem phim gồm
 Trang danh sách phim: gồmdanh sách các phim lẻ vàphim bộ
 Trangchitiếtphim:hiểnthịchitiếttênphim,diễnviên,thờilượng,bình
luận có trong bộ phim, đánhgiá,phim mà người dùng đã chọn
 Trang phim theo thể loại: danh sách các phim theo thể loại người dùng
đã chọn
 Trang xemphim: trang đểphát phim chongười dùng xem
 Trang đăng nhậpđăng ký.
Trang quản trị gồm:
 Trang đăng nhậpđăng ký
 Trang quản lýngười dùng
Trangquảnlýngườidùngcócácchứcnăngnhư:thêmxoásửangườidùng,
chọn làm admin,bỏ chọn làmadmin
 Trang quản lýphim
View

41. 31
Trang quản lý phim trong đó có các chức năng như: thêm xoá sửa phim,
quản lý bình luận, xoá những bình luận không phù hợp, quản lý quốc gia,
quản lý diễn viên,…
2.6.2. Cơ cấu hệ thống
Hệ thống có 3 loại người dùng
Bảng 2.1 Phân loại người dùng hệ thống
STT Kiểu người dùng Chứcnăng
1 Người dùng không có tài khoản trên website Khi truy cập vào website
có thể xem phim và sử
dụng chức năng tìm kiếm
2 Người dùng có tài khoản trên website Ngoài sử dụng các chức
năngnhưxemphimvàtìm
kiếm thì kiểm tài khoản
này có thể comment,
download phim và yêu
cầu postphim
3 Người dùng làAdmincủahệthống Quản lý các tài khoản của
ngườidùng vàquản trị nội
dung của website
2.7. Google Firebase
2.7.1. Khái niệm
Firebase là một nền tảng phát triển ứng dụng web và mobile, cung cấp cho
các nhà phát triển một bộ công cụ và dịch vụ giúp họ phát triển các ứng chất
lượng cao, tăng trưởng lượng người dùng và kiếm được nhiều lợi nhuận hơn.

42. 32
2.7.2. Lịch sử phát triển
Năm 2011, startup tiền thân của Firebase được thành lập, được gọi là
Envolve. Nó cung cấp cho các nhà phát triển API cho phép tích hợp tính năng
nhắn tin trực tuyến vào trang web của họ.
Điều thú vị là các nhà phát triển sử dụng Envolve không chỉ để làm nhắn tin
trực tuyến. Họ sử dụng Envolve để đồng bộ hóa dữ liệu ứng dụng, chẳng hạn
như một trạng thái game giữa các user trong thời gian thực.
Điều đó đã dẫn đến các nhà sáng lập của Envolve tách riêng hệ thống chat
và kiến trúc realtime. Năm 2012, Firebase được tạo như một công ty cung
cấp Backend as a Service với tính năng realtime.
Sau khi được Google mua lại năm 2014, Firebase nhanh chóng phát triển
thành một nền tảng đa chức năng như ngày nay
2.7.3. Các dịch vụ của Firebase
Firebase chia các dịch vụ của nó thành 3 nhóm:
Hình 2.13 Các dịch vụ của Firebase

43. 33
2.7.4. Các tính năng chính
1. Realtime Database
Firebase Realtime Database là một cơ sở dữ liệu NoSQL trên đám
mây cho phép bạn lưu trữ và đồng bộ hóa dữ liệu giữa các user trong thời
gian thực.
Realtime Database cơ bản chỉ là một đối tượng JSON lớn mà các nhà
phát triển có thể quản lý thời gian thực.
Hình 2.14 Realtime Database
Chỉ với một API duy nhất, Realtime Database cung cấp cho ứng dụng của
bạn cả giá trị hiện tại của dữ liệu và bất kì cập nhật mới nào.

44. 34
Hình 2.15 Đồng bộ hoá thời gian thực
Đồng bộ hóa thời gian thực giúp người dùng truy cập dữ liệu của họ dễ dàng
từ bất kì thiết bị nào cũng như tương tác với các người dùng khác.
Một lợi ích tuyệt vời khác của Realtime Database là nó cung cấp SDKs cho
cả web và mobile, cho phép bạn xây dựng ứng dụng mà không cần server.
Khi người dùng ngoại tuyến, Realtime Databse SDKs sử dụng local cache
trên trình duyệt để lưu trữ thay đổi. Khi thiết bị online các dữ liệu đó sẽ được tự
động đồng bộ hóa.
Realtime Database cũng tích hợp với Firebase Authentication để cung cấp
một tiến trình xác thực đơn giản và trực quan.
2. Authentication

45. 35
Hình 2.16 Authentication bằng firebase
Firebase Authentication cung cấp dịch vụ backend, SDKs sẵn sàng sử dụng,
và các thư viện UI được làm sẵn để giúp ứng dụng của bạn xác thực người dùng.
Thông thường, bạn phải mất cả tháng để xây dựng hệ thống xác thực và
thường xuyên phải bảo trì nó. Nhưng nếu bạn sử dụng Firebase, bạn chỉ dưới 10
dòng code để xử lý mọi thứ, bao gồm cả những thao tác phức tạp như sát nhập
tài khoản.
Bạn có thể xác thực người dùng qua các phương thức như: Email, Phone
number, Facebook, Google, Twitter, ...
Sử dụng Firebase Authentication giúp dễ dang hơn cho việc xây dựng hệ
thống xác thực an toàn, trong khi cũng cải thiện trải nghiệm cho người dùng.
Firebase Authentication được phát triển bởi những người đã tạo ra Google
Signin, Smart Lock và Chrome Password Manager.

46. 36
3. Firebase Cloud Messaging (FCM)
Hình 2.17 Firebase Cloud Messaging
Firebase Cloud Messaging cung cấp một kết nối hiệu quả và đáng tin cậy
giữa server và thiết bị của bạn, cho phép bạn gửi và nhận tin nhắn hoặc thông
báo trên iOS, Android và Web mà không mất thêm chi phí.
Bạn có thể gửi tin nhắn thông báo (giới hạn 2KB) hoặc tin nhắn dữ liệu (giới
hạn 4KB).
Sử dụng FCM, bạn có thể dễ dàng xác định đối tượng mục tiêu với các phân
khúc được định nghĩa trước hoặc do bạn tự định nghĩa, sử dụng nhân khẩu học
và hành vi. Bạn có thể gửi tin nhắn tới một nhóm các thiết bị được đăng kí theo
các chủ đề xác định, hoặc bạn có thể nhận được chi tiết như một thiết bị duy
nhất.
FCM có thể gửi tin nhắn ngay lập tức hoặc trong tương lai theo múi giờ của
người dùng. Bạn có thể gửi dữ liệu tùy chỉnh như cài đặt độ ưu tiên, âm thanh,
ngày hết hạn, và cũng theo dõi các sự kiện tùy chỉnh.

47. 37
Điều tuyệt vời nhất là hầu như không cần thêm bất kì code nào! FCM được
tích hợp hoàn toàn với Firebase Analytics, cho phép bạn khả năng theo dõi chi
tiết các hoạt động.
3. CHƯƠNG 3. THIẾT KẾ VÀ CÀI ĐẶT CHƯƠNG TRÌNH
3.1. Thiết kế cơ sở dữ liệu
3.1.1. Bảng actor_has_movie
Dùng để lưu diễn viên có trong phim
Bảng 3.1 Bảng actor_has_movie
STT Tên field Kiểu dữ liệu
1 Id Int
2 Movie_id Int
3 User_id Int
4 Description Varchar
3.1.2. Bảng actors
Dùng để lưu diễn viên
Bảng 3.2 Bảng actors
STT Tên field Kiểu dữ liệu
1 Id Int
2 Name Varchar
3 Description Varchar
3.1.3. Bảng comments
Dùng để lưu bình luận của người dùng
Bảng 3.2 Bảng comments

48. 38
STT Tên field Kiểu dữ liệu
1 Id Int
2 Movie_id Int
3 User_id Int
4 Description Varchar
3.1.4. Bảng countries
Dùng để lưu thông tin các nước
Bảng 3.3 Bảng countries
STT Tên field Kiểu dữ liệu
1 Id Int
2 Name Varchar
3.1.5. Bảng directors
Dùng để lưu thông tin đạo diễn
Bảng 3.4 Bảng directors
STT Tên field Kiểu dữ liệu
1 Id Int
2 Name Varchar
3 Description Varchar
3.1.6. Bảng favorites
Dùng để lưu phim yêu thích
Bảng 3.5 Bảng favorites
STT Tên field Kiểu dữ liệu
1 Id Int
2 Movie_id Int

49. 39
STT Tên field Kiểu dữ liệu
3 User_id Int
3.1.7. Bảng genre_has_movie
Dùng để lưu thể loại có phim
Bảng 3.6 Bảng genre_has_movie
STT Tên field Kiểu dữ liệu
1 Id Int
2 Movie_id Int
3 Gener_id Int
3.1.8. Bảng genres
Dùng để lưu thể loại
Bảng 3.7 Bảng genres
STT Tên field Kiểu dữliệu
1 Id Int
2 Name Varchar
3 Slug Varchar
3.1.9. Bảng images
Dùng để lưu hình ảnh
Bảng 3.8 Bảng images
STT Tên field Kiểu dữ liệu
1 Id Int
2 url Varchar
3 Alt Varchar
3.1.10. Bảng movies
Dùng để lưu thông tin phim

50. 40
Bảng 3.9 Bảng movies
STT Tên field Kiểu dữ liệu
1 Id Int
2 country_id Int
3 image_id Int
4 Banner_id Int
1 Name Varchar
2 Slug Varchar
3 Description Varchar
4 Release_year Int
5 Num_view Int
6 Run_time int
7 Rate Int
8 Num_rate int
3.1.11. Bảng rates
Dùng để lưu đánh giá phim
Bảng 3.10 Bảng rates
STT Tên field Kiểu dữ liệu
1 Id Int
2 Movie_id Int
3 User_id Int
4 title Varchar
5 Rate Int
6 Description Varchar
3.1.12. Bảng users
Dùng để lưu thông tin người dùng

51. 41
Bảng 3.11 Bảng users
STT Tên field Kiểu dữ liệu
1 Id Int
2 User_role_id Int
3 country_id Int
4 Username Varchar
5 Password Varchar
6 Email Varchar
7 Firstname Varchar
8 Lastname Varchar
3.1.13. Bảng user_role
Dùng để lưu vai trò người dùng
Bảng 3.12 Bảng user_role
STT Tên field Kiểudữ liệu
1 Id Int
2 name Varchar
3.2. RESTful API
Hình 3.1, 3.2, 3.3 và 3.4 trình bày các REST API mà phía back-end
(Spring boot) đã xây dựng để phía fornt-end (VueJS) sử dụng.

52. 42
Hình 3.1 RESTful API trang home
Hình 3.2 RESTful API Movie
Hình 3.3 RESTful API User
Hình 3.3 RESTful API User Role

53. 43
3.3. Sơ đồ usecase
Bảng 3.13 Danh sách các actor
STT Actor Vai trò
1 User User là đối tượng chính tác động trực tiếp và nhiều
nhất vào hệ thống.
User có thể thực hiện hầu như các chức năng của ứng
dụng.
2 Admin Admin là actor kế thừa actor user và thêm các chức
năng quản trị
Bảng dưới đây trình bày các chức năng chính của ứng dụng.
Bảng 3.14 Danh sách các usecase
STT Chức năng Mô tả
1 Login Xác thực và phân quyền cho người dùng khi họ
sử dụng ứng dụng
2 Logout Thoát khỏi phiên làm việc.
3 Sign up Đăng ký tài khoản để sử dụng ứng dụng
4 Change password Thay đổi mật khẩu người dùng
5 Add movie Thêm một phim mới
6 Edit movie Chỉnh sửa thông phim
7 Delete movie Xóa phim
8 Play movie Phát phim
9 Add user Thêm người dùng
10 Edit user Chỉnh sửa thông tin người dùng
11 Delete user Xóa người dùng

54. 44
Đăng nhập
Quản lý người dùng
admin
Người dùng
Xem phim
Quản lý thể loại
Bình luận
Chức năng của người dùng Cập nhật mật khẩu Chức năng của admin Quản lý diễn viên
Tạo mới
Cập nhật thông tin cá nhân
Cập nhật
Quản lý phim
Xoá
Xem
Dưới đây là sơ đồ mối quan hệ giữa các actor với actor, actor với use
case và use case và use case.
Hình 3.4 Sơ đồ usecase

55. 45
1
n
1
1 1 n
1
1
n
n
n
1
-ID(PK): int
name:varchar(255)
description:varchar(255)
-ID(PK): int
movie_id:int(20)
user_id:int(20)
user_role
favorite
-ID(PK): int
avatar_id:int(20)
user_role_id:int(20)
country_id:int(20)
username:varchar(255)
firstname:varchar(255)
lastname:varchar(255)
email:varchar(255)
password:varchar(255)
description: varchar(255)
users
-ID(PK): int
movie_id:int(20)
genre_id:int(20)
genres_has_movie
-ID(PK): int
name:varchar(255)
slug:varchar(2550
genres
n
-ID(PK): int
movie_id:int(20)
user_id:int(20)
description:varchar(255)
-ID(PK): int
name:varchar(255)
description:varchar(255)
birthday: timestamp
-ID(PK): int
country_id: int(20)
image_id: int(20)
banner_id:int(20)
name: varchar(255)
slug:varchar(255)
description:
varchar(255)
num_view:int(20)
run_time:int(20)
num_rate:int(20)
comments
actors
movies
3.3.1. Class Diagram
Hình 3.5 Class diagram

56. 46
Send request login
Require username & password
Type username & password Send username & password
check username & password
return result
return notificaion
Account
User System
3.3.2. Sequency diagram
Hình 3.6 Biểu đồ tuần tự đăng nhập

57. 47
k
Hình 3.7 Biểu đồ tuần tự thêm người dùng
Press button create user
Open
enter infomation & click create button
Chec alidate
notify error validate
createUser()
query into database
confirm success and view list users after create
confirm error
v
[if false]
[if true]
[if true]
[if false]
<<Model>>
:Users
<<GUI>>
Create User
<<GUI>>
List Users
Admin

58. 48
k
Hình 3.8 Biểu đồ tuần tự cập nhật thông tin người dùng
Press button edit user
Open
enter infomation & click save button
Chec alidate
notify error validate
updateUser()
query into database
confirm success and view list users after create
confirm error
v
[if false]
[if true]
[if true]
[if false]
<<Model>>
:Users
<<GUI>>
Create User
<<GUI>>
List Users
Admin

59. 49
Người quản trị
Quản lý phim Quản lý phân
quyền
Quản lý thể loại
Quản lý diễn
viên
Thêm phim Thêm thể loại Thêm diễn viên
Cập nhật quyền
Cập nhật phim Cập nhật thể loại
Cập nhật diễn
viên
Thêm quyền
Xoá phim Xoá diễn viên
3.3.3. Biểu đồ phân cấp chức năng
Hình 3.9 Biểu đồ phân cấp chức năng
3.4. Giao diện và chức năng
3.4.1. Một số giao diện chính
Xoá người dùng
Cập nhật người
dùng
Thêm người
dùng
Quản lý người
dùng
Xoá thể loại

60. 50
Hình 3.10 Trang thể loại

61. 51
Hình 3.11 Trang chủ

62. 52
Hình 3.12 Trang xem phim

63. 53
Hình 3.13 Trang thêm tài khoản người dùng

64. 54
Hình 3.14 Trang quản lý người dùng

65. 55
Hình 3.15 Trang quản lý phim

66. 56
Hình 3.16 Trang login
3.4.2. Một số chức năng nổi bật
Tính năng đa ngôn ngữ của ứng dụng. Ứng dụng hỗ trợ 2 ngôn ngữ
là Tiếng Việt và Tiếng Anh.

67. 57
Hình 3.17 Ứng dụng với ngôn ngữ tiếng Việt

68. 58
Hình 3.18 Ứng dụng với ngôn ngữ tiếng Anh

69. 59
4. CHƯƠNG 4. KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN
4.1. Kết quả đạt được
Nghiên cứu và trình bày một cách có hệ thống các nội dung cơ bản về
Spring framework, VueJS,MySQL và một số công nghệ, kỹ thuật khác
trong việc xây dựng một ứng dụng Java enterprise trên nền web.
Về mặt lý thuyết:
- Nắm đượckiến trúc tổng quan của Spring Framework cũng như các
nguyênlý cơ bản và cơ chế hoạt động củaframeworknày.
- Nắm được mô hình web MVC trong Spring framework và các cơ
chế đểbảomật mộtứngdụngwebđượchỗtrợtrongmodule Spring
Security.
Về mặt ứng dụng:
- XâydựngđượcứngdụngwebdạngSPAmà việcgiaotiếpvớiserver
thông quaRESTful service với sự hỗ trợcủaVueJS.
- Thiết kế giao diện người dùng với HTM5 và Bootstrap có hỗ trợ
responsive.
- Xâydựngthành công webxemphimtrựctuyến với đầyđủ cácchứcnăng
cơ bản.
4.2. Hạn chế
Các chức năng cơ bản của ứng dụng đã hoàn thành tốt, tuy nhiên do
yêu cầu và phạm vi đề tài chỉ dừng lại ở mức demo công nghệ nên ứng
dụng chưa hấp dẫn.
Hạn chế về vật chất, không có host trên internet có cài đặt đầy đủ các
phần mềm cần thiết tạo khó khăn trong việc thực hiện demo chương trình
trên internet. Vấn đề triển khai những công nghệ nêu trên không khó về

70. 60
mặt kỹ thuật nhưng phải xây dựng một cơ sở hạ tầng đầy đủ và tốt để có
thể thực thi ứng dụng.
4.3. Hướng phát triển
Tiếp tục tìm hiểu về một số cơ chế xác thực và phân quyền trong
module Spring Security như cơ chế xác thực Oauth, Oauth2, OpenID,…
để xây dựng ứng dụng với cơ chế bảo mật hơn.
Bên cạnh đó tiếp tục tìm hiểu các module còn lại của Spring Framework
như Spring AOP nhằm tích hợp vào hệ thống để thực hiện một số chức
năng đặc biệt như ghi log người dùng.
Tìm hiểu về web socket và kết hợp với VueJS để hướng đến việc xây
dựng một ứng dụng web động với thời gian thực.
TÀI LIỆU THAM KHẢO
[1] BenAlex,LukeTaylo.Spring SecurityReference Documentation
[2] Ho Ngoc Tung.2014. Single Page Web Application with Restful API And
AngularJS.Helsinki Metropolia UniversityofAppliedSciences
[3] Praveen Gupta. Spring Web MVC Framework for rapid open source J2EE
applicationdevelopmentacasestudy.InternationalJournalofEngineeringScienceand
Technology,Vol.2(6), 2010,1684-1689
[4] Rod Johnson, Juergen Hoeller, Keith Donald, Colin Sampaleanu, Rob Harrop,
ThomasRisberg,...SpringFrameworkReference Documentation4.1.4.RELEASE
Website
- https://vueschool.io/lessons/vue-router-nested-routes
- https://www.baeldung.com/rest-with-spring-course
- https://vuejs.org/v2/guide/