SPRING BOOT+VUE+資料庫到底是甚麼

試講45分:https://youtu.be/VjkGPFXigqo

SPRING BOOT+VUE+資料庫引導您了解基本操作和資料庫的結構。
展示如何建立實體資料模型，以便於資料庫互動。
探索開發操作流程，包括建置Controllers和產生Views。
提供清晰的示範和解說，讓您能夠輕鬆地理解和應用所學內容。
透過這份演講，您將能夠掌握核心概念，並以實際案例加深對其運作方式的理解。無論您是初學者還是有一定程度經驗的開發者，都能夠從中獲益並提升自己的開發能力

Transcript

1. SPRING BOOT+VUE+資料庫 到底是甚麼 TZU 留言給我 29歲女生學程式FB
2. 簡報大綱 • 簡報動機 • 先看作品 • 概念知識 • 後端 • 資料庫 • 前端
3. 想帶給讀者的是什麼？ • 29歲女生學程式FB的幕後編輯者 • 希望可以讓讀者知道作品的內容 • 安全感~ 29歲女生學程式FB
4. 作品http://localhost:8080/default
5. 作品 http://localhost:8080/member/registerfor m
6. 作品 http://localhost:8080/customers/qry/coun try
7. 作品 http://localhost:8080/customers/allcusto mers
8. 作品 http://localhost:8080/customers/add
9. Spring Boot 中去套用 MVC 架構模式的概念
10. 整個專案需要的檔案
11. 整個專案需要的檔案:細看
12. 先用圖片測試是否有把軟體裝好要看到的畫 面:http://localhost:8080/images/s3%E4%BE %BF%E5%AE%9C%E8%97%A5%E5%A6%9D.png
13. 顯示圖片需要的檔案
14. 顯示圖片需要的檔案CODE
15. 執行後:顯示圖片
16. 看到的畫面: http://localhost:8080/images/s3%E4%BE%BF %E5%AE%9C%E8%97%A5%E5%A6%9D.png
17. 要看到的畫面: 首頁http://localhost:8080/default
18. 需要的HomeController
19. 顯示需要的檔案CODE
20. 需要的index.html
21. 要看到的畫面: 首頁http://localhost:8080/default
22. 概念知識:DAO和ENTITY是甚麼 • DAO（Data Access Object）是一個用於訪問資料庫或其他資料 存取層的介面。它提供了對資料的增、刪、改、查等操作方法， 使得業務邏輯程式能夠與資料庫進行解耦，增加了程式碼的可讀 性和可維護性。 • 在 DAO 模式中，ENTITY 是指表示資料庫中的實體或表格的 Java 物件。ENTITY 包含了資料庫中表格的結構和對應的屬性， 以及與資料庫中資料對應的方法。
23. 簡答題: ENTITY舉例說明 • 在此範例中，User 類別代表了一個使用者 ENTITY，包含了使用者的 識別 ID、姓名和電子郵件等屬性。 • public class User { • private int id; • private String name; • private String email; • • // 建構子、getter 和 setter 方法省略 • // 其他相關方法 • }
24. 簡答題: ENTITY之建構子、getter 和 setter • public String getName() { • return name; • } • public void setName(String name) { • this.name = name; • } • public String getEmail() { • return email; • } • public void setEmail(String email) { • this.email = email; • } • } public class User { private int id; private String name; private String email; public User(int id, String name, String email) { this.id = id; this.name = name; this.email = email; } public int getId() { return id; } public void setId(int id) { this.id = id; }
25. 簡答題:DAO舉例說明1 • UserDao 是一個介面，定義了對使用者 ENTITY 執行資料存取操 作的方法。UserDaoImpl 是 UserDao 的具體實作類別，實作了 在介面中定義的方法。 • public interface UserDao { • void createUser(User user); • User getUserById(int id); • List<User> getAllUsers(); • void updateUser(User user); • void deleteUser(int id); • }
26. 簡答題:DAO舉例說明2 • UserDaoImpl 是 UserDao 的具體實作類別，實作了在介 • 面中定義的方法。 • public class UserDaoImpl implements UserDao { • @Override • public void createUser(User user) { • // 實作創建使用者的方法 • } • @Override • public User getUserById(int id) { • // 實作獲取使用者的方法 • return null; • } • @Override • public List<User> getAllUsers() { • // 實作獲取所有使用者的方法 • return null; • } • @Override • public void updateUser(User user) { • // 實作更新使用者的方法 • } • @Override • public void deleteUser(int id) { • // 實作刪除使用者的方法 • } • }
27. 簡答題: Bean 和 SQLMap是甚麼 • Bean 和 SQLMap 是常見的概念，用於描述資料物件和資料庫映 射的相關技術。 • Bean 是一個概念，用於表示一個普通的 Java 物件，通常用於 封裝資料和提供相關的方法。Bean 物件通常具有私有的屬性和 對應的 getter 和 setter 方法，以便對屬性進行設置和獲取。 • SQLMap 是一種用於描述資料庫操作的配置檔案或映射檔案。它 提供了資料庫表格與 Java 物件之間的映射關係，並定義了對資 料庫進行操作的 SQL 陳述式。
28. 簡答題: Bean舉例說明 • public class User { • private int id; • private String name; • private String email; • • // 建構子、getter 和 setter 方法省略 • • // 其他相關方法 • }
29. 資料庫~是? • SQL基礎語法:資料庫和資料表建立 • select 敍述子句 :select from • 資料操作 insert into/update /delete • Order by排序 • having篩選 • Group by分群 • 關聯式sql語法撰寫
30. 舉例說明 Java 的 JDBC API 來執行資料庫CRUD • CRUD 是一個常用的資料庫操作詞彙，代表資料的「新增」 (Create)、「讀取」(Read)、「更新」(Update) 和「刪除」 (Delete)。這四個操作涵蓋了資料庫中最常見的基本操作。
31. 舉例說明:新增 (Create)： 使用 INSERT INTO 陳述式來插入新的資料列。 • // 使用 PreparedStatement 執行 INSERT 陳述式 • String sql = "INSERT INTO users (name, email) VALUES (?, ?)"; • try (Connection connection = DriverManager.getConnection(url, username, password); • PreparedStatement statement = connection.prepareStatement(sql)) { • statement.setString(1, "John"); • statement.setString(2, "john@example.com"); • int rowsInserted = statement.executeUpdate(); • if (rowsInserted > 0) { • System.out.println("新增成功"); • } • } catch (SQLException e) { • e.printStackTrace(); • }
32. 舉例說明:讀取 (Read)：使用 SELECT 陳 述式搭配 ResultSet 來檢索資料。 • // 使用 Statement 執行 SELECT 陳述式 • String sql = "SELECT * FROM users"; • try (Connection connection = DriverManager.getConnection(url, username, password); • Statement statement = connection.createStatement(); • ResultSet resultSet = statement.executeQuery(sql)) { • while (resultSet.next()) { • int id = resultSet.getInt("id"); • String name = resultSet.getString("name"); • String email = resultSet.getString("email"); • System.out.println("ID: " + id + ", Name: " + name + ", Email: " + email); • } • } catch (SQLException e) { • e.printStackTrace(); • }
33. 舉例說明:更新 (Update)：使用 UPDATE 陳述式來修改資料列。 • // 使用 PreparedStatement 執行 UPDATE 陳述式 • String sql = "UPDATE users SET email = ? WHERE id = ?"; • try (Connection connection = DriverManager.getConnection(url, username, password); • PreparedStatement statement = connection.prepareStatement(sql)) { • statement.setString(1, "newemail@example.com"); • statement.setInt(2, 1); • int rowsUpdated = statement.executeUpdate(); • if (rowsUpdated > 0) { • System.out.println("更新成功"); • } • } catch (SQLException e) { • e.printStackTrace(); • }
34. 舉例說明:刪除 (Delete)：使用 DELETE FROM 陳述式來刪除資料列。 • // 使用 PreparedStatement 執行 DELETE 陳述式 • String sql = "DELETE FROM users WHERE id = ?"; • try (Connection connection = DriverManager.getConnection(url, username, password); • PreparedStatement statement = connection.prepareStatement(sql)) { • statement.setInt(1, 1); • int rowsDeleted = statement.executeUpdate(); • if (rowsDeleted > 0) { • System.out.println("刪除成功"); • } • } catch (SQLException e) { • e.printStackTrace(); • }
35. 資料庫都是用有關聯的~ • 關聯式資料庫（Relational Database）是一種以表格 （Table）形式組織和儲存資 料的資料庫。在關聯式資料庫 中，資料被組織成多個相互關 聯的表格，每個表格由一個或 多個欄位（Column）組成，代 表不同的屬性，並且使用主鍵 （Primary Key）和外鍵 （Foreign Key）建立表格之 間的關聯。 • 關聯式資料庫
36. 作品 http://localhost:8080/member/registerfor m
37. 介紹Mysql資料庫1:按>進入
38. 介紹Mysql資料庫2:新增資料表
39. 介紹Mysql資料庫3:資料類別
40. 介紹Mysql資料庫4:加入資料
41. 介紹Mysql資料庫5:執行>查詢
42. 介紹Mysql資料庫5:顯示現有資料
43. Mysql資料庫5跟後端連結設定
44. 需要的MemberController
45. MemberController程式碼1
46. MemberController程式碼2
47. MemberController程式碼3
48. MemberController程式碼4
49. 顯示畫面memberregister.html
50. 顯示畫面memberregister.html下拉1
51. 顯示畫面memberregister.html下拉2
52. 需要的檔案CODE: Member
53. 檔案CODE: Member • Bean 具有私有的屬性和對應 • getter 和 setter 方法
54. 執行後顯示 http://localhost:8080/member/registerfor m
55. 測試後顯示
56. 測試後>資料庫顯示
57. 作品 http://localhost:8080/customers/qry/coun try
58. 介紹Mysql資料庫1:新增資料表
59. 介紹Mysql資料庫2:資料類別
60. 介紹Mysql資料庫3:新增VIEW資料表
61. 介紹Mysql資料庫4:資料類別
62. 介紹Mysql資料庫5:VIEW執行>查詢
63. Mysql資料庫5跟後端連結設定
64. 需要的CustomersController
65. CustomersController程式碼1
66. CustomersController程式碼2
67. CustomersController程式碼3
68. 顯示畫面customersqrycountry.html
69. 顯示畫面customersqrycountry.html下拉1
70. 顯示畫面customersqrycountry.html下拉2
71. 需要的檔案CODE: Customer
72. 檔案CODE Customer • Bean 具有私有的屬性和對應 • getter 和 setter 方法
73. 作品 http://localhost:8080/customers/qry/coun try
74. 測試查詢 http://localhost:8080/customers/qry/coun try
75. 作品 http://localhost:8080/customers/allcusto mers
76. 介紹Mysql資料庫1:新增資料表
77. 介紹Mysql資料庫2:資料類別
78. 介紹Mysql資料庫3:執行>查詢
79. Mysql資料庫跟後端連結設定
80. 檔案CODE CustomersRepository
81. 檔案CODE CustomerService
82. 檔案CODE CustomerService下拉1
83. 檔案CODE CustomerService下拉2
84. 檔案CODE CustomerService下拉3
85. 檔案CODE CustomerService下拉4
86. 接續用CustomersController
87. CustomersController程式碼1
88. CustomersController程式碼2
89. CustomersController程式碼3
90. CustomersController程式碼4
91. CustomersController程式碼5
92. 顯示畫面customersall.html
93. 顯示畫面customersall.html下拉1
94. 顯示畫面customersall.html下拉2
95. 顯示畫面customersall.html下拉3
96. 顯示畫面customersall.html下拉4
97. 顯示畫面customersall.html下拉5
98. 作品 http://localhost:8080/customers/allcusto mers
99. 按編輯 http://localhost:8080/customers/allcusto mers
100. 顯示畫面customersall.html下拉6>編輯
101. 顯示畫面customersall.html下拉7>編輯
102. 作品 http://localhost:8080/customers/allcusto mers
103. 顯示畫面customersall.html下拉>刪除後
104. 需要的檔案CODE: customers
105. 檔案 customers
106. 檔案 customers
107. 檔案 customers • Bean 具有私有的屬性和對應 • getter 和 setter 方法
108. 作品 http://localhost:8080/customers/allcusto mers
109. 作品 http://localhost:8080/customers/add
110. 檔案CODE CustomersRepository
111. 接續 CustomerService
112. 檔案CODE CustomerService下拉1
113. 檔案CODE CustomerService下拉2
114. 檔案CODE CustomerService下拉3
115. 檔案CODE CustomerService下拉4
116. 檔案CODE CustomerService下拉5
117. 檔案CODE CustomerService下拉6
118. 接續用CustomersController
119. CustomersController程式碼1
120. CustomersController程式碼2
121. CustomersController程式碼3
122. CustomersController程式碼4
123. CustomersController程式碼5
124. 顯示畫面
125. 顯示畫面customersinsert.html
126. customersinsert.html下拉1
127. customersinsert.html下拉2
128. customersinsert.html下拉3
129. customersinsert.html下拉4
130. customersinsert.html下拉5
131. customersinsert.html下拉6
132. customersinsert.html下拉7
133. customersinsert.html下拉8
134. customersinsert.html下拉9
135. customersinsert.html下拉10
136. customersinsert.html下拉11
137. 作品 http://localhost:8080/customers/add
138. 測試新增 http://localhost:8080/customers/add
139. 留言板 • http://jzs2home.byethost15.com/index.php?i=3&fbclid=IwAR30I3q lbkBAbp0MEE_JtIldTH1KdZQdXjT-msg35saXVHUY_7-jxXOsZdo 29歲女生學程式FB