Spring boot初探----建立第一个属于自己的HTML5页面

前言：

1. 可以参考项目结构
2. 在application.properties中配置h5页面的路径

一、直接上项目结构与代码框架：

二、application.properties的配置

​​#thymelea模板配置
#在构建URL时添加到视图名称前的前缀（默认值：classpath:/templates/）
spring.freemarker.template-loader-path=classpath:/templates/
#在构建URL时添加到视图名称后的后缀（默认值：.html）
spring.freemarker.suffix=.html
#要运用于模板之上的模板模式。另见StandardTemplate-ModeHandlers(默认值：HTML5)
spring.thymeleaf.mode=HTML5
#模板编码
spring.thymeleaf.encoding=UTF-8
##开启模板缓存（默认值：true）
spring.thymeleaf.cache=false
spring.resources.chain.strategy.content.enabled=true
spring.resources.chain.strategy.content.paths=/**
#容器启动时加载优先级。当值小于0或者没有指定时，则表示容器在该servlet被选择时才会去加载；正数的值越小，该servlet的优先级越高，应用启动时就越先加载。
spring.mvc.servlet.load-on-startup=10

三、pom.xml配置

	4.0.0
	jar
	
		org.springframework.boot
		spring-boot-starter-parent
		2.3.0.RELEASE
		 
	
	com.example

	demo
	0.0.1-SNAPSHOT
	demo
	Demo project for Spring Boot

	
		1.8
	

	
		
			org.springframework.boot
			spring-boot-starter
		
		
			org.springframework.boot
			spring-boot-starter-test
			test
			
				
					org.junit.vintage
					junit-vintage-engine
				
			
		
		
			org.springframework.boot
			spring-boot-starter-web
		
		
			com.example
			demo
			0.0.1-SNAPSHOT
		
		
			org.springframework.boot
			spring-boot-starter-web
		
		
			org.springframework.boot
			spring-boot-starter-web
		
		
			org.springframework.boot
			spring-boot-starter-web
		
		
			org.springframework.boot
			spring-boot-starter-web
		
		
			org.springframework.boot
			spring-boot-starter-web
		
		
			org.springframework.boot
			spring-boot-starter-web
		
		
			org.springframework.boot
			spring-boot-test
		
		
			org.springframework.boot
			spring-boot-starter-actuator
		
		
		
			org.springframework.boot
			spring-boot-starter-thymeleaf
		

	

	
		
			
				org.springframework.boot
				spring-boot-maven-plugin
			
		
	

四、strle.css配置

body {
    background-color: #cccccc;
    font-family: arial,helvetica,sans-serif;
}
.bookHeadline {
    font-size: 12pt;
    font-weight: bold;
}
.bookDescription {
    font-size: 10pt;
}
label {
    font-weight: bold;
}

table {
    margin: 20px 40px 20px 0px;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout:auto;
    word-wrap: break-word;
}
table>tbody>tr:nth-of-type(odd) {
    background-color: #F7F7F7
}
th, td {
    padding: 8px;
    text-align: left;
    vertical-align: middle;
    font-weight: normal;
    font-size: 12px;
    border-bottom: 1px solid #fff;
}
th {
    padding-bottom: 10px;
    color: #fff;
    font-weight: 700;
    background: rgba(66, 185, 131, .9)
}
td {
    border-bottom-width: 1px
}

五、Demo.Application代码

package com.example.controller;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;

import com.example.bean.Account;
import org.springframework.web.servlet.ModelAndView;

import java.util.ArrayList;
import java.util.List;

@Controller
@SpringBootApplication
public class DemoApplication {

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

	@RequestMapping("/home")
	public String home() {
		return "home";
	}

	@RequestMapping("/hello")
	public String hello() {
		return "WELCOME YOU";
	}

	@RequestMapping(value = "/veo")
	public  String veo() {
		return "testupload";
	}

	@RequestMapping(value = "/greeting")
	public ModelAndView test(ModelAndView mv) {
		mv.setViewName("/greeting");
		mv.addObject("title","欢迎使用Thymeleaf!");
		return mv;
	}

	@RequestMapping("/account")
	public String account(Model m) {
		List list = new ArrayList();
		list.add(new Account("KangKang", "康康", "e10adc3949ba59abbe56e", "超级管理员", "17777777777"));
		list.add(new Account("Mike", "麦克", "e10adc3949ba59abbe56e", "管理员", "13444444444"));
		list.add(new Account("Jane","简","e10adc3949ba59abbe56e","运维人员","18666666666"));
		list.add(new Account("Maria", "玛利亚", "e10adc3949ba59abbe56e", "清算人员", "19999999999"));
		m.addAttribute("accountList",list);
		return "account";
	}
}

六、Account代码

package com.example.bean;

public class Account {
    private String account;
    private String name;
    private String password;
    private String accountType;
    private String tel;
    public Account(String account, String name, String password, String accountType, String tel) {
        super();
        this.account = account;
        this.name = name;
        this.password = password;
        this.accountType = accountType;
        this.tel = tel;
    }
    public String getAccount() {
        return account;
    }
    public void setAccount(String account) {
        this.account = account;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getPassword() {
        return password;
    }
    public void setPassword(String password) {
        this.password = password;
    }
    public String getAccountType() {
        return accountType;
    }
    public void setAccountType(String accountType) {
        this.accountType = accountType;
    }
    public String getTel() {
        return tel;
    }
    public void setTel(String tel) {
        this.tel = tel;
    }
}