今天終於開始要有前端啦~
起手式
裝網頁編輯器VSCODE藍色的https://code.visualstudio.com/docs/?dv=win
8. 裝中文套件
9. 找到電腦裡WEB放的地方的html
10. C:\SpringTools4\myweb\myweb\src\main\resources\templates
11. 打?html選html5
12. VSCODE顯示
13.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
這是一個簡單的HTML文件模板,通常用作網頁的基本結構。以下是這個HTML模板的主要部分:
<!DOCTYPE html>
:這是HTML5的文檔類型聲明,表示這是一個HTML5文件。
<html lang="en">
:這是HTML文檔的根元素,並指定了文件的語言屬性為英語("en")。
<head>
元素:這是用於包含HTML文件的元設定資訊的部分,如字符集、網頁標題等。
<meta charset="UTF-8">
:指定字符集為UTF-8,這確保了文檔中的文本可以正確顯示各種字符。<meta http-equiv="X-UA-Compatible" content="IE=edge">
:指示瀏覽器使用最新的Internet Explorer渲染引擎。<meta name="viewport" content="width=device-width, initial-scale=1.0">
:這個meta標籤通常用於響應式網頁設計,以確保網頁在各種設備上正確呈現。<title>
元素:這是網頁的標題,會顯示在瀏覽器的標籤標題中。你可以在這裡設置網頁的標題文字。
<body>
元素:這是實際的HTML內容區域。你可以在這裡添加網頁的主要內容,包括文本、圖片、超連結和其他HTML元素。
這個HTML模板是一個基本的骨架,你可以在 <body>
元素中添加你的網頁內容,以構建完整的網頁。
13. 把內容改成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>首頁</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
這是一個簡單的HTML文件,用作網頁的基本結構,其中包含了一個標題和一個標題1(<h1>
)級別的標題文字。以下是這個HTML文件的主要部分:
<!DOCTYPE html>
:這是HTML5的文檔類型聲明,表示這是一個HTML5文件。
<html lang="en">
:這是HTML文檔的根元素,並指定了文件的語言屬性為英語("en")。
<head>
元素:這是用於包含HTML文件的元設定資訊的部分,如字符集、網頁標題等。
<meta charset="UTF-8">
:指定字符集為UTF-8,這確保了文檔中的文本可以正確顯示各種字符。<meta http-equiv="X-UA-Compatible" content="IE=edge">
:指示瀏覽器使用最新的Internet Explorer渲染引擎。<meta name="viewport" content="width=device-width, initial-scale=1.0">
:這個meta標籤通常用於響應式網頁設計,以確保網頁在各種設備上正確呈現。<title>
元素:這是網頁的標題,會顯示在瀏覽器的標籤標題中。在這個例子中,標題設置為 "首頁"。
<body>
元素:這是實際的HTML內容區域。在這個例子中,我們在 <body>
元素中包含了一個標題1(<h1>
)級別的標題,其內容是 "Hello World"。這將在網頁上顯示一個大標題。
這個HTML文件可以用作基本網頁的起點。你可以在 <body>
元素中添加更多的內容,如段落、圖片、連結等,以構建完整的網頁。
加入線條與法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>首頁</title>
</head>
<body>
<fieldset>
<legend>首頁</legend>
<h1 style="color: rgb(22, 19, 224);">Hello World</h1>
</fieldset>
</body>
</html>
這是一個包含更多內容和樣式的HTML文件,仍然用作網頁的基本結構。以下是這個HTML文件的主要部分:
<!DOCTYPE html>
:這是HTML5的文檔類型聲明,表示這是一個HTML5文件。
<html lang="en">
:這是HTML文檔的根元素,並指定了文件的語言屬性為英語("en")。
<head>
元素:這是用於包含HTML文件的元設定資訊的部分,如字符集、網頁標題等,與之前的相同。
<title>
元素:這是網頁的標題,會顯示在瀏覽器的標籤標題中。在這個例子中,標題設置為 "首頁"。
<body>
元素:這是實際的HTML內容區域。
<fieldset>
元素:這是一個用來組織表單元素的容器,通常具有邊框和標題。
<legend>
元素:這是<fieldset>
元素的標題。在這裡,它設置為 "首頁"。<h1>
元素:這是一個標題1級別的標題,其內容是 "Hello World"。它使用了style
屬性來設置文字顏色為藍色(color: rgb(22, 19, 224);
)。這個HTML文件在 <fieldset>
元素中包含了一個標題和一個標題1級別的標題,並使用樣式來設置標題的文字顏色。這是一個具有基本結構和一些樣式的HTML網頁示例,你可以根據需要進一步擴展和自訂它。
內容自動帶過去springtool4,沒有自動帶過去,就要手動了,後端的html 沒有帶過去是不會顯示的
顯示變更
package com.tzu.controllers;
import org.springframework.web.bind.annotation.RequestMapping;
//做會員註冊
@RequestMapping(path="/member")
public class MemberController {
//註冊
@RequestMapping("/register")
public String register() {
//直接調用註冊表單
return "memberregister";
}
}
這是一個Spring Framework中的Controller類,用於處理會員註冊相關的HTTP請求。以下是這個Controller類的主要部分:
@RequestMapping(path="/member")
:這是一個類級別的註解,指定了處理URL路徑以 "/member" 開頭的請求。這表示這個Controller專門處理/member路徑下的請求。
@RequestMapping("/register")
:這是一個方法級別的註解,指定了處理URL路徑為 "/register" 的GET或POST請求。當使用者訪問/member/register路徑時,這個方法將被呼叫。
public String register()
:這是處理/register請求的方法。它返回一個名為 "memberregister" 的字符串。通常,這個字符串代表視圖名稱,告訴Spring框架要顯示哪個視圖模板,顯示會員註冊表單。
這個Controller設計用於處理會員註冊相關的操作,當用戶訪問/member/register路徑時,它將返回相應的視圖,通常是一個包含註冊表單的HTML頁面。這樣的設計允許你將不同的URL映射到不同的Controller方法,以實現Web應用程式的不同功能。
package com.tzu.controllers;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
//做會員註冊
@Controller
@RequestMapping(path="/member")
public class MemberController {
//註冊
@RequestMapping(path="/register",method=RequestMethod.GET)
public String register() {
//直接調用註冊表單
return "memberregister";
}
}
這個Spring Framework中的MemberController
類已經用@Controller
和@RequestMapping
註解進行了標記,用於處理會員註冊相關的HTTP GET請求。
以下是這個Controller類的主要部分:
@Controller
:這個註解標記了這是一個Spring的Controller類,它告訴Spring框架要掃描並管理這個類。
@RequestMapping(path="/member")
:這是一個類級別的註解,指定了處理URL路徑以 "/member" 開頭的請求。這表示這個Controller專門處理/member路徑下的請求。
@RequestMapping(path="/register", method=RequestMethod.GET)
:這是一個方法級別的註解,指定了處理URL路徑為 "/register" 的HTTP GET請求。當使用者訪問/member/register路徑時,這個方法將被呼叫。
public String register()
:這是處理/register GET請求的方法。它返回一個名為 "memberregister" 的字符串。通常,這個字符串代表視圖名稱,告訴Spring框架要顯示哪個視圖模板,顯示會員註冊表單的HTML頁面。
這樣的Controller設計允許你根據不同的URL路徑和HTTP方法來定義不同的處理方法,以實現Web應用程式中的不同功能。在這個情況下,/member/register路徑的GET請求將調用register()
方法,該方法可能用於顯示會員註冊表單的頁面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>註冊作業</title>
</head>
<body>
<fieldset>
<legend>註冊作業</legend>
</fieldset>
</body>
</html>
這是一個簡單的HTML文件,用作註冊作業的基本頁面結構。以下是這個HTML文件的主要部分:
<!DOCTYPE html>
:這是HTML5的文檔類型聲明,表示這是一個HTML5文件。
<html lang="en">
:這是HTML文檔的根元素,並指定了文件的語言屬性為英語("en")。
<head>
元素:這是用於包含HTML文件的元設定資訊的部分,如字符集、網頁標題等,與之前的相同。
<title>
元素:這是網頁的標題,會顯示在瀏覽器的標籤標題中。在這個例子中,標題設置為 "註冊作業"。
<body>
元素:這是實際的HTML內容區域。
<fieldset>
元素:這是一個用來組織表單元素的容器,通常具有邊框和標題。
<legend>
元素:這是<fieldset>
元素的標題。在這裡,它設置為 "註冊作業"。這個HTML文件建立了一個包含"註冊作業"標題的頁面結構,但目前內容是空的。你可以根據需要在<fieldset>
元素內添加註冊表單的元素和內容,以實現註冊功能的具體操作。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>註冊作業</title>
</head>
<body>
<fieldset>
<legend>註冊作業</legend>
<!--設計表單-->
<form>
<div>
<div>使用者帳號</div>
<input type="text">
</div>
</form>
</fieldset>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>註冊作業</title>
</head>
<body>
<fieldset>
<legend>註冊作業</legend>
<!--設計表單-->
<form>
<div>
<div>使用者帳號</div>
<input type="text">
</div>
<div>
<div>使用者密碼</div>
<input type="password">
</div>
<div>
<div>真實姓名</div>
<input type="text">
</div>
<div>
<div>EMAIL</div>
<input type="text">
</div>
<div>
<div>聯絡電話</div>
<input type="text">
</div>
<br/>
<input type="submit" value="註冊"/>
</form>
</fieldset>
</body>
</html>
已經在HTML中建立了一個基本的註冊表單,以下是你的HTML代碼的詳細說明:
<form>
元素:這是HTML表單的開始,它包含了一組要提交的表單元素。
<div>
元素:這是一個用來組織表單元素的容器。在你的表單中,每個表單字段都被包裝在一個<div>
內。
使用者帳號
:這是一個文字標籤,用來描述表單字段。通常,它顯示在表單字段的前面,以提供用戶有關該字段的信息。
<input type="text">
:這是一個文本輸入字段,用戶可以在其中輸入文本信息。這是一個基本的文本框,用戶可以輸入使用者帳號。
繼續擴展這個表單,以包括其他必要的註冊信息,例如密碼、姓名、電子郵件等。此外,你可以使用HTML的表單元素,如<input type="password">
用於密碼,<input type="email">
用於電子郵件等等,以便更好地定義表單的各個字段。一旦表單設計完成,可以添加提交按鈕以完成註冊過程。
package com.tzu.controllers;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
//做會員註冊
@Controller
@RequestMapping(path="/member")
public class MemberController {
//註冊
@RequestMapping(path="/register",method=RequestMethod.GET)
public String register() {
System.out.println("register...");
//直接調用註冊表單
return "memberregister";
}
}
這個Spring Framework中的MemberController
類已經用@Controller
和@RequestMapping
註解進行了標記,用於處理會員註冊相關的HTTP GET請求。
以下是這個Controller類的主要部分:
@Controller
:這個註解標記了這是一個Spring的Controller類,它告訴Spring框架要掃描並管理這個類。
@RequestMapping(path="/member")
:這是一個類級別的註解,指定了處理URL路徑以 "/member" 開頭的請求。這表示這個Controller專門處理/member路徑下的請求。
@RequestMapping(path="/register", method=RequestMethod.GET)
:這是一個方法級別的註解,指定了處理URL路徑為 "/register" 的HTTP GET請求。當使用者訪問/member/register路徑時,這個方法將調用並執行。
public String register()
:這是處理/register GET請求的方法。它返回一個名為 "memberregister" 的字符串。通常,這個字符串代表視圖名稱,告訴Spring框架要顯示哪個視圖模板。在這個例子中,它可能指示要顯示會員註冊表單的HTML頁面。
在register()
方法中添加了一行 System.out.println("register...");
,這將在每次GET請求訪問/member/register路徑時在控制台上輸出 "register...",以便在應用程序日誌中進行記錄和調試。
這樣的Controller設計允許你根據不同的URL路徑和HTTP方法來定義不同的處理方法,以實現Web應用程式中的不同功能。在這個情況下,/member/register路徑的GET請求將調用register()
方法,該方法可能用於顯示會員註冊表單的頁面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>註冊作業</title>
</head>
<body>
<fieldset>
<legend>註冊作業</legend>
<!--設計表單-->
<form method="post">
<div>
<div>使用者帳號</div>
<input type="text">
</div>
<div>
<div>使用者密碼</div>
<input type="password">
</div>
<div>
<div>真實姓名</div>
<input type="text">
</div>
<div>
<div>EMAIL</div>
<input type="text">
</div>
<div>
<div>聯絡電話</div>
<input type="text">
</div>
<br/>
<input type="submit" value="註冊"/>
</form>
</fieldset>
</body>
</html>
已經擴展了註冊表單,現在它包含以下字段:
password
,這將隱藏輸入的內容,以保護密碼。此外,你添加了一個<input type="submit">
元素,它是一個提交按鈕。當用戶填寫完所有字段後,他們可以單擊此按鈕提交表單數據。
請注意,這個表單中的每個<input>
元素都需要一個name
屬性,以便在提交表單時識別各個字段的值。例如:
<input type="text" name="username">
<input type="password" name="password">
<input type="text" name="fullname">
<input type="text" name="email">
<input type="text" name="phone">
你可以在後端的Spring Controller中使用這些名稱來接收和處理用戶提交的數據。
3. 對應
package com.tzu.controllers;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
//做會員註冊
@Controller
@RequestMapping(path="/member")
public class MemberController {
//註冊
@RequestMapping(path="/register",method=RequestMethod.GET)
public String register() {
System.out.println("register...");
//直接調用註冊表單
return "memberregister";
}
}
你的Spring Controller已經設定好處理會員註冊的GET請求,並返回名為 "memberregister" 的視圖名稱。接下來,你需要建立一個對應的Thymeleaf視圖模板,以便在訪問/member/register時顯示註冊表單。
你可以創建一個名為 "memberregister.html"(或其他你喜歡的名稱)的HTML文件,並將其放在適當的視圖模板文件夾中。在這個HTML文件中,你可以使用Thymeleaf模板語言來設計註冊表單,並在需要顯示數據的地方插入Thymeleaf的表達式。
以下是一個簡單的示例,展示了如何在Thymeleaf中設計註冊表單:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>註冊作業</title>
</head>
<body>
<fieldset>
<legend>註冊作業</legend>
<!-- 設計表單 -->
<form method="post" action="/member/register">
<div>
<div>使用者帳號</div>
<input type="text" name="username">
</div>
<div>
<div>使用者密碼</div>
<input type="password" name="password">
</div>
<div>
<div>真實姓名</div>
<input type="text" name="fullname">
</div>
<div>
<div>EMAIL</div>
<input type="text" name="email">
</div>
<div>
<div>聯絡電話</div>
<input type="text" name="phone">
</div>
<br />
<input type="submit" value="註冊" />
</form>
</fieldset>
</body>
</html>
注意以下幾點:
xmlns:th="http://www.thymeleaf.org"
:這是Thymeleaf命名空間的聲明,用於引用Thymeleaf的表達式。th:action="/member/register"
:這個屬性設置了表單的提交動作,將表單數據提交到/member/register路徑,這與你Controller中的請求映射相對應。<input type="text" name="username">
:這是一個表單字段,用戶可以輸入他們的使用者名稱。name
屬性的值應該與Controller中的數據綁定名稱相匹配。將這個HTML文件保存在你的Thymeleaf視圖模板文件夾中,並確保你的Spring Boot應用程序配置了Thymeleaf視圖解析器,以便它能夠解析和顯示這個視圖。
當用戶訪問/member/register路徑時,將顯示這個註冊表單。你可以繼續在表單中添加其他必要的字段和樣式,以滿足你的註冊需求。
從下面的console看是否啟動起來Initializing Spring embedded WebApplicationContext
5. 顯示405表示方法不夠允許要新增方法RequestMethod.POST
package com.tzu.controllers;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
//做會員註冊
@Controller
@RequestMapping(path="/member")
public class MemberController {
//註冊
@RequestMapping(path="/register",method= {RequestMethod.GET,RequestMethod.POST})
public String register() {
System.out.println("register...");
//直接調用註冊表單
return "memberregister";
}
}
你現在已經更新了register()
方法,以處理GET和POST請求。這意味著當用戶訪問/member/register時,它將顯示註冊表單,並且當用戶提交該表單時,也可以處理提交的數據。
接下來,你可以在Thymeleaf視圖模板中設計一個表單,以便用戶輸入註冊數據。在這個表單中,你可以使用Thymeleaf的表達式來連接模型層的數據,並將提交的數據發送到後端控制器。
以下是一個簡單的示例,展示了如何在Thymeleaf中設計註冊表單,並將表單數據提交到你的Spring Controller:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>註冊作業</title>
</head>
<body>
<fieldset>
<legend>註冊作業</legend>
<!-- 設計表單 -->
<form method="post" th:action="@{/member/register}">
<div>
<div>使用者帳號</div>
<input type="text" name="username" th:value="${user.username}">
</div>
<div>
<div>使用者密碼</div>
<input type="password" name="password" th:value="${user.password}">
</div>
<div>
<div>真實姓名</div>
<input type="text" name="fullname" th:value="${user.fullname}">
</div>
<div>
<div>EMAIL</div>
<input type="text" name="email" th:value="${user.email}">
</div>
<div>
<div>聯絡電話</div>
<input type="text" name="phone" th:value="${user.phone}">
</div>
<br />
<input type="submit" value="註冊" />
</form>
</fieldset>
</body>
</html>
這個示例中,我們使用Thymeleaf的th:action
和th:value
屬性來連接表單和後端模型數據。th:action
用於指定表單提交的URL,th:value
用於填充表單字段的值。在這個示例中,假設你的模型層有一個名為user
的對象,並且它具有相應的屬性(例如username
、password
等)。
當用戶提交表單時,Spring將自動將表單數據綁定到Controller中的模型對象(在這個例子中是user
),你可以在Controller中處理這些數據。
7. 沒有出現405只是又還原
8. 前端給識別名稱
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>註冊作業</title>
</head>
<body>
<fieldset>
<legend>註冊作業</legend>
<!--設計表單-->
<form method="post">
<div>
<div>使用者帳號</div>
<input type="text" name="username">
</div>
<div>
<div>使用者密碼</div>
<input type="password" name="password">
</div>
<div>
<div>真實姓名</div>
<input type="text" name="realname">
</div>
<div>
<div>EMAIL</div>
<input type="text" name="email">
</div>
<div>
<div>聯絡電話</div>
<input type="text">
</div>
<br/>
<input type="submit" value="註冊"/>
</form>
</fieldset>
</body>
</html>
表單字段的name
屬性在後端Controller中用於識別每個字段。因此,確保name
屬性的值與模型類的字段名相匹配,以便Spring能夠正確地綁定數據。
10.後端給識別名稱(如果是userName會對不到=駝峰語法)
package com.tzu.controllers;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
//做會員註冊
@Controller
@RequestMapping(path="/member")
public class MemberController {
//註冊
@RequestMapping(path="/register",method= {RequestMethod.GET,RequestMethod.POST})
public String register(String username,String password,String email,String realname) {
System.out.println("register..."+username);
//直接調用註冊表單
return "memberregister";
}
}
已經設置了註冊頁面的GET和POST請求處理方法,要處理POST請求中的表單數據,也可以使用@RequestParam
註釋或@ModelAttribute
註釋。下面是兩種不同的方法:
@RequestParam
註釋:@RequestMapping(path="/register", method= {RequestMethod.GET, RequestMethod.POST})
public String register(
@RequestParam String username,
@RequestParam String password,
@RequestParam String email,
@RequestParam String realname) {
System.out.println("register..." + username);
// 其他處理
return "memberregister";
}
@ModelAttribute
註釋:首先,創建一個Java類,該類的字段對應於表單字段。例如:
public class RegistrationForm {
private String username;
private String password;
private String email;
private String realname;
// getter和setter方法
}
然後在Controller中使用它:
@RequestMapping(path="/register", method= {RequestMethod.GET, RequestMethod.POST})
public String register(@ModelAttribute RegistrationForm form) {
String username = form.getUsername();
String password = form.getPassword();
String email = form.getEmail();
String realname = form.getRealname();
System.out.println("register..." + username);
// 其他處理
return "memberregister";
}
後面進一步處理用戶註冊的邏輯,將用戶信息保存到數據庫中
試跑看console:register...null
register...123
有顯示
謝謝收看