SpringBoot的Web开发入门案例1

落日映苍穹つ 2023-07-24 13:14 15阅读 0赞

**SpringBoot的Web开发入门案例1—登录和页面数据遍历读取**

1.  新建maven项目：logintest
2.  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>

1.  application.yml

server:
      port: 8088
    
    spring:
      thymeleaf:
        cache: false

1.  login.html（放在**templates**文件夹下）

<!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> 登录
    									</button>
    								</div>
    								<div class="btn-group">
    									<button type="button" class="btn btn-danger" id="registerbtn">
    										<span class="glyphicon glyphicon-edit"></span> 注册
    									</button>
    								</div>
    							</div>
    						</div>
    					</div>
    				</form>
    			</div>
    		</div>
    	</div>
    </body>
    </html>

1.  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** 文件夹下)

![java.jpg][] ![java.jpg][java.jpg 1]

1.  启动类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);
    	}
    }

1.  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;
    }

1.  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";
    	}
    }

**测试**

1.  运行启动类，浏览器访问：http://localhost:8088/toLogin 进入登陆页面

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JMVV8xMTE_size_16_color_FFFFFF_t_70]

1.  正确输入用户名admin和密码123456后登陆可进入main页面  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JMVV8xMTE_size_16_color_FFFFFF_t_70 1]
2.  如果用户名/密码输入错误：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JMVV8xMTE_size_16_color_FFFFFF_t_70 2]

[java.jpg]: /images/20230528/c2e1f554f541428e92f852dc6fc69fd9.png
[java.jpg 1]: https://img-blog.csdnimg.cn/20200411223435431.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JMVV8xMTE=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JMVV8xMTE_size_16_color_FFFFFF_t_70]: /images/20230528/0e43cb87deb74d2ab450281117cf1847.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JMVV8xMTE_size_16_color_FFFFFF_t_70 1]: /images/20230528/f5558b54812e44fdb3b62790b50962f9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JMVV8xMTE_size_16_color_FFFFFF_t_70 2]: /images/20230528/0d405cb51c7c44df982088382e777ef4.png