第一个spring boot web程序

ゝ一纸荒年。 2022-05-11 07:58 278阅读 0赞

# Spring Boot简介 #

Spring boot是由pivotal团队提供的全新框架，其设计目的是用来简化spring应用的创建、运行、调试、部署等。

## Spring Boot解决的问题 ##

Spring boot的出现带来了以下优点：

1.**使编码变得更简单**：推荐使用注解。

2.**使配置变得简单**：自动配置、快速构建项目、快速集成新技术的能力。

3.**使部署变得简单**：内嵌Tomcat、Jetty等web容器。

4.**使监控变得简单**：自带项目监控。

示例：第一个spring boot web程序(基于Thymeleaf模板引擎)

**项目结构：**

![70][]

**pom.xml文件引入相关依赖。**

<?xml version="1.0" encoding="UTF-8"?>
    <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 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    	<modelVersion>4.0.0</modelVersion>
    
    	<groupId>com.dwx</groupId>
    	<artifactId>hello</artifactId>
    	<version>0.0.1-SNAPSHOT</version>
    	<packaging>jar</packaging>
    
    	<name>springboot2</name>
    	<description>hello project for Spring Boot</description>
    
    	<parent>
    		<groupId>org.springframework.boot</groupId>
    		<artifactId>spring-boot-starter-parent</artifactId>
    		<version>2.0.5.RELEASE</version>
    		<relativePath/> 
    	</parent>
    
    	<properties>
    		<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    		<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
    		<java.version>1.8</java.version>
    	</properties>
    
    	<dependencies>
    		<dependency>
    			<groupId>org.springframework.boot</groupId>
    			<artifactId>spring-boot-starter-web</artifactId>
    		</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>
    		</dependency>
    	</dependencies>
    
    	<build>
    		<plugins>
    			<plugin>
    				<groupId>org.springframework.boot</groupId>
    				<artifactId>spring-boot-maven-plugin</artifactId>
    			</plugin>
    		</plugins>
    	</build>
    
    
    </project>

**程序清单：/springboot2/src/main/resources/templates/login.html**

<!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <link rel="stylesheet" th:href="@{css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{css/bootstrap-theme.min.css}"/>
    <script type="text/javascript" th:src="@{js/jquery-1.11.0.min.js}"></script>
    <script type="text/javascript" th:src="@{js/bootstrap.min.js}"></script>
    </head>
    <body>
    	<div class="panel panel-primary">
    		<div class="panel-heading">
    			<h3 class="panel-title">第一个spring boot web程序</h3>
    		</div>
    	</div>
    	<div class="container">
    		<div class="row">
    			<form action="login" method="post">
    				<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="userName">
    					</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">
    					</div>
    				</div>
    				<div class="btn-group">
    					<button type="submit" class="btn btn-success" id="loginbtn">
    						<span class="glyphicon glyphicon-log-in"></span> 登录
    					</button>
    				</div>
    				<div class="btn-group">
    					<button type="submit" class="btn btn-success" id="loginbtn">
    						<span class="glyphicon glyphicon-log-in"></span> 注册
    					</button>
    				</div>
    			</form>
    		</div>
    	</div>
    </body>
    </html>

**程序清单：/springboot2/src/main/resources/templates/main.html**

<!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
    <meta charset="UTF-8">
    <title>主页</title>
    <link rel="stylesheet" th:href="@{css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{css/bootstrap-theme.min.css}"/>
    <script type="text/javascript" th:src="@{js/jquery-1.11.0.min.js}"></script>
    <script type="text/javascript" th:src="@{js/bootstrap.min.js}"></script>
    </head>
    <body>
    	<div class="panel panel-primary"> 
    		<div class="panel-heading">
    			<h3 class="panel-title">商品信息列表    当前用户：<span th:text="${session.userName}"></span></h3>
    		</div>
    	</div>
    	<div class="container">
    		<div class="row">
    			<div class="col-md-4">
    				<img alt="" src="img/Apple iPad.jpg" height="200">
    				<h4>Apple ipad</h4>
    				<p>3999.00</p>
    			</div>
    			<div class="col-md-4">
    				<img alt="" src="img/iPhone X.jpg" height="200">
    				<h4>iPhone X</h4>
    				<p>10999.00</p>
    			</div>
    			<div class="col-md-4">
    				<img alt="" src="img/vivo_nex.jpg" height="200">
    				<h4>vivo nex</h4>
    				<p>2999.00</p>
    			</div>
    		</div>
    	</div>
    </body>
    </html>

**程序清单：/springboot2/src/main/java/com/dwx/hello/loginController.java**

package com.dwx.hello;
    import javax.servlet.http.HttpSession;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestParam;
    @Controller
    public class loginController {
    	@RequestMapping("/loginForm")
    	public String loginForm() {
    		return "login";
    	}
    	
    	@RequestMapping("/mainForm")
    	public String main() {
    		return "main";
    	}
    	
    	@RequestMapping("/login")
    	public String login(@RequestParam("userName")String userName,
    			@RequestParam("passWord")String passWord,HttpSession session) {		
    		System.out.println(userName);
    		session.setAttribute("userName", userName);
    		return "redirect:mainForm";
    	}
    }

**Spring Boot项目启动后，在浏览器输入以下URL来测试应用。**

[http://localhost:8080/loginForm][http_localhost_8080_loginForm]

![70 1][]

**输入用户名、密码，单击“登录”按钮。**

![70 2][]

[70]: /images/20220511/734bb672138c4d39bef2f18ec47938af.png
[http_localhost_8080_loginForm]: http://localhost:8080/loginForm
[70 1]: /images/20220511/c47bfc566443479e9029fbb9a62bb374.png
[70 2]: /images/20220511/7397e4a80ca5419d8b461898c4b423b5.png