Springboot~開始有前端

2023 iThome 鐵人賽

DAY 13

Modern Web

自己開發一個~?系列第 13 篇

15th鐵人賽

Tzu

2023-09-27 19:39:45

337 瀏覽

分享至

今天終於開始要有前端啦~

起手式
裝網頁編輯器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 沒有帶過去是不會顯示的

瀏覽器測試
http://localhost:8080/

顯示變更

做會員註冊:
在com.tzu.controllers下面新增class叫MemberController

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()方法，該方法可能用於顯示會員註冊表單的頁面。

templates再加入檔案File name:memberregister.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>

</fieldset>
</body>
</html>

這是一個簡單的HTML文件，用作註冊作業的基本頁面結構。以下是這個HTML文件的主要部分：

<!DOCTYPE html>：這是HTML5的文檔類型聲明，表示這是一個HTML5文件。
<html lang="en">：這是HTML文檔的根元素，並指定了文件的語言屬性為英語（"en"）。
<head> 元素：這是用於包含HTML文件的元設定資訊的部分，如字符集、網頁標題等，與之前的相同。
<title> 元素：這是網頁的標題，會顯示在瀏覽器的標籤標題中。在這個例子中，標題設置為 "註冊作業"。
<body> 元素：這是實際的HTML內容區域。
- <fieldset> 元素：這是一個用來組織表單元素的容器，通常具有邊框和標題。
  - <legend> 元素：這是<fieldset>元素的標題。在這裡，它設置為 "註冊作業"。

這個HTML文件建立了一個包含"註冊作業"標題的頁面結構，但目前內容是空的。你可以根據需要在<fieldset>元素內添加註冊表單的元素和內容，以實現註冊功能的具體操作。

再用網頁 http://localhost:8080/member/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>
    <div>
        <div>使用者帳號</div>
        <input type="text">
    </div>
</form>
</fieldset>
</body>
</html>

複製表格形式:使用者密碼改password

<!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">用於電子郵件等等，以便更好地定義表單的各個字段。一旦表單設計完成，可以添加提交按鈕以完成註冊過程。

會使用到GET跟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)
	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..."，以便在應用程序日誌中進行記錄和調試。

前端做post

<!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，這將隱藏輸入的內容，以保護密碼。
真實姓名：用戶可以輸入他們的真實姓名。
EMAIL：用戶可以輸入他們的電子郵件地址。
聯絡電話：用戶可以輸入他們的聯絡電話號碼。

此外，你添加了一個<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
有顯示

謝謝收看