SpringBoot的Web開發入門案例1

SpringBoot的Web開發入門案例1—登錄和頁面數據遍歷讀取

新建maven項目：logintest
pom.xml文件：

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.blu</groupId>
  <artifactId>logintest</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  
  <parent>
  	<groupId>org.springframework.boot</groupId>
  	<artifactId>spring-boot-starter-parent</artifactId>
  	<version>2.0.0.RELEASE</version>
  	<relativePath/> 
  </parent>
  
  <dependencies>
  	<dependency>
  		<groupId>org.springframework.boot</groupId>
  		<artifactId>spring-boot-starter-web</artifactId>
  	</dependency>
  	<dependency>
  		<groupId>org.projectlombok</groupId>
  		<artifactId>lombok</artifactId>
  		<scope>provided</scope>
  	</dependency>
  	<dependency>
  		<groupId>org.webjars</groupId>
  		<artifactId>bootstrap</artifactId>
  		<version>3.3.7</version>
  	</dependency>
  	<dependency>
  		<groupId>org.springframework.boot</groupId>
  		<artifactId>spring-boot-starter-thymeleaf</artifactId>
  	</dependency>
  	<dependency>
  		<groupId>org.springframework.boot</groupId>
  		<artifactId>spring-boot-starter-test</artifactId>
  		<scope>test</scope>
  		<exclusions>
  			<exclusion>
  				<groupId>org.junit.vintage</groupId>
  				<artifactId>junit-vintage-engine</artifactId>
  			</exclusion>
  		</exclusions>
  	</dependency>
  	<dependency>
  		<groupId>org.springframework.boot</groupId>
  		<artifactId>spring-boot-devtools</artifactId>
  	</dependency>
  </dependencies> 
</project>

application.yml

server:
  port: 8088

spring:
  thymeleaf:
    cache: false

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"></meta>
<title>Spring Boot Web 開發測試</title>
<link rel="stylesheet" th:href="@{webjars/bootstrap/3.3.7/css/bootstrap.min.css}" />
<link rel="stylesheet" th:href="@{webjars/bootstrap/3.3.7/css/bootstrap-theme.min.css}" />
<script type="text/javascript" th:src="@{webjars/jquery/1.11.1/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{webjars/bootstrap/3.3.7/js/bootstrap.min.js}"></script>
<script type="text/javascript">
	$(function() {
		$("#loginbtn").click(function() {
			var loginName = $("#loginName");
			var password = $("#password");
			var msg = "";
			if (loginName.val() == "") {
				msg = "登錄名不能爲空!";
				loginName.focus();
			} else if (password.val() == "") {
				msg = "密碼不能爲空!";
				password.focus();
			}
			62
			if (msg != "") {
				alert(msg);
			} else {
				$("#loginform").submit();
			}
		})
	})
</script>
</head>
<body>
	<div class="container">
		<div class="row">
			<!-- 頁面標題 -->
			<div class="page-header">
				<h2>用戶登錄</h2>
				<form class="form-horizontal" action="login" method="post"
					id="loginform">
					<div class="form-group">
						<div class="input-group col-md-4">
							<span class="input-group-addon"> <i
								class="glyphicon glyphicon-user"></i>
							</span> <input class="form-control" placeholder="用戶名/郵箱" type="text"
								name="loginName" id="loginName" />
						</div>
					</div>
					<div class="form-group">
						<div class="input-group col-md-4">
							<span class="input-group-addon"><i
								class="glyphicon glyphicon-lock"></i></span> <input
								class="form-control" placeholder="密碼" type="password"
								name="password" id="password" />
						</div>
					</div>
					<p th:if="${not #strings.isEnpty(errorMsg)}" style="color : red">[[${errorMsg}]]</p>
					<div class="form-group">
						<div class="col-md-4">
							<div class="btn-group btn-group-justified">
								<div class="btn-group">
									<button type="button" class="btn btn-success" id="loginbtn">
										<span class="glyphicon glyphicon-log-in"></span>&nbsp;登錄
									</button>
								</div>
								<div class="btn-group">
									<button type="button" class="btn btn-danger" id="registerbtn">
										<span class="glyphicon glyphicon-edit"></span>&nbsp;註冊
									</button>
								</div>
							</div>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</body>
</html>

main.html（放在templates文件夾下）

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"></meta>
<link rel="stylesheet" th:href="@{webjars/bootstrap/3.3.7/css/bootstrap.min.css}" />
<link rel="stylesheet" th:href="@{webjars/bootstrap/3.3.7/css/bootstrap-theme.min.css}" />
<script type="text/javascript" th:src="@{webjars/jquery/1.11.1/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{webjars/bootstrap/3.3.7/js/bootstrap.min.js}"></script>
<title>網站首頁</title>
</head>
<body>
	<div class="panel panel-primary">
		<div class="panel-heading">
			<h3 class="panel-title">第一個 Spring Boot Web 開發示例</h3>
		</div>
	</div>
	<br/>
	<br/>
	<div class="container">
		<div class="panel panel-primary">
			<div class="panel-heading">
				<h3 class="panel-title">圖書信息列表</h3>
			</div>
			<div class="panel-body">
				<div class="container">
					<div class="row">
						<div class="col-md-4 col-sm-6" th:each="book : ${books}">
							<a href=""> <img th:src="@{${book.bookImg}==null ? 'img/disappear.jpg' : 'img/'+${book.bookImg}}" src="img/java.jpg" alt="圖書封面" width="100px" height="138px"/>
							</a>
							<div class="captio">
								<h4 th:text="${book.bookName}"> Java </h4>
								<p th:text="${book.author}">BLU</p>
								<p th:text="${book.publisher}">未知出版社</p>
								<p th:text="${book.price}">0.00</p>
								<p th:text="${book.id}">0000</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

兩張圖片：java.jpg 和 disappear.jpg (放在 static/img 文件夾下)

啓動類WebApplication

package com.blu;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class WebApplication {

	public static void main(String[] args) {
		SpringApplication.run(WebApplication.class, args);
	}
}

Book實體：

package com.blu.entity;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Book {
	
	private String id;
	private String bookName;
	private String author;
	private String publisher;
	private Double price;
	private String bookImg;
}

DemoController

package com.blu.controller;

import java.util.Arrays;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;

import com.blu.entity.Book;

@Controller
public class DemoController {
	
	@GetMapping("/toLogin")
	public String toLogin() {	
		return "login";
	}

	@PostMapping("/login")
	public String login(String loginName,String password, Model model) {
		if(loginName.equals("admin")&&password.equals("123456")) {
			return "redirect:/main";
		}else {
			model.addAttribute("errorMsg","用戶名或密碼錯誤");
			return "login";
		}
	}
	
	@GetMapping("/main")
	public String mainHTML(Model model) {
		Book b1 = new Book("1001","瘋狂 Java 講義1","李剛","電子工業出版社",109.00,"java.jpg");
		Book b2 = new Book("1002","瘋狂 Java 講義2","李剛","電子工業出版社",119.00,"java.jpg");
		Book b3 = new Book("1003","瘋狂 Java 講義3","李剛","電子工業出版社",129.00,null);
		Book b4 = new Book("1004","瘋狂 Java 講義4","李剛","電子工業出版社",139.00,"java.jpg");
		model.addAttribute("books",Arrays.asList(b1,b2,b3,b4));
		return "main";
	}
}

測試

運行啓動類，瀏覽器訪問：http://localhost:8088/toLogin 進入登陸頁面

正確輸入用戶名admin和密碼123456後登陸可進入main頁面
如果用戶名/密碼輸入錯誤：

SpringBoot的Web開發入門案例1

Nodejs 筆記

SpringMVC07_數據校驗

SpringMVC06_表單標籤庫

SpringMVC05_文件上傳和下載

SpringBoot的Web開發入門案例1

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結