springboot基础框架搭建

admin管理员组

文章数量:1794759

springboot基础框架搭建

一、springboot

开源，轻量级开发框架

为了解决企业级应用开发的复杂性而创建的，简化开发

如何简化开发的

基于POJO的轻量级和最小侵入性编程

通过IOC，依赖注入和面向接口实现松耦合

基于切面AOP和管理进行声明式编程

通过切面和模板减少样式代码

创建项目

Spring官方提供了非常方便的工具让我们快速构建应用

Spring Initializr：start.spring.io/

项目创建方式一：

使用Spring Initializr 的 Web页面创建项目

1、打开 start.spring.io/

2、填写项目信

3、点击”Generate Project“按钮生成项目；下载此项目

4、解压项目包，并用IDEA以Maven项目导入，一路下一步即可，直到项目导入完毕。

5、如果是第一次使用，可能速度会比较慢，包比较多、需要耐心等待一切就绪。

项目创建方式二：

使用 IDEA 直接创建项目

1、创建一个新项目

2、选择spring initalizr ， 可以看到默认就是去官网的快速构建工具那里实现

3、填写项目信

4、选择初始化的组件（初学勾选 Web 即可）

5、填写项目路径

6、等待项目构建成功

在浏览器输入localhost:8080 ，出现下图这样算成功

项目结构分析：

通过上面步骤完成了基础项目的创建。就会自动生成以下文件。

1、程序的主启动类 xxApplication.java

2、一个 application.properties 配置文件

3、一个 测试类 xxApplicationTests.java

4、一个 pom.xml

pom.xml

spring-boot-starter所有springboot依赖的开头

<?xml version="1.0" encoding="UTF-8"?> <project xmlns="maven.apache/POM/4.0.0" xmlns:xsi="www.w3/2001/XMLSchema-instance" xsi:schemaLocation="maven.apache/POM/4.0.0 maven.apache/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <!-- 有一个父项目[远程的]--> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.7.0</version> <relativePath/> <!-- lookup parent from repository --> </parent> <!-- 坐标--> <groupId>com.ckl</groupId> <artifactId>demo</artifactId> <version>0.0.1-SNAPSHOT</version> <name>demo</name> <description>Demo project for Spring Boot</description> <properties> <java.version>1.8</java.version> </properties> <!-- 依赖--> <dependencies> <!-- web依赖：里面集成了tomcat-，配置了DispatcherServlet，xml等--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <!-- 单元测试 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> </dependencies> <build> <!-- 打jar包 插件 --> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build> </project> banner图案

在网站上查找复制进行修改

www.bootschool/ascii

在resource目录下新建banner.txt文件

二、原理： 1.自动配置： pom.xml:

• spring-boot-dependencies:核心依赖在父工程中
• 在引入依赖时，不需要指定版本，因为有版本仓库

<!-- 有一个父项目[远程的]--> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.7.0</version> <relativePath/> <!-- lookup parent from repository --> </parent> 启动器: - <!-- 启动器--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter</artifactId> </dependency>

• 就是springboot的启动场景；
• 比如：spring-boot-starter-web，自动导入web环境所有依赖
• springboot会将所有的功能场景都编程一个个的启动器，如果使用寿命功能只需要找到对应的启动器[starter]

docs.spring.io/spring-boot/docs/current/reference/html/using.html#using.build-systems.starters

2.@SpringBootApplication

//标注这个类是一个springboot的应用 启动类下的所有资源被导入

进入这个注解可以看到上面还有很多其他注解！

@Target({ElementType.TYPE}) @Retention(RetentionPolicy.RUNTIME) @Documented @Inherited @SpringBootConfiguration @EnableAutoConfiguration @ComponentScan( excludeFilters = {@Filter( type = FilterType.CUSTOM, classes = {TypeExcludeFilter.class} ), @Filter( type = FilterType.CUSTOM, classes = {AutoConfigurationExcludeFilter.class} )} ) public @interface SpringBootApplication {}

• 注解

- --@SpringBootConfiguration :springboot的配置 ----@Configuration :spring配置类 ------@Component ：说明这是一个spring组件 --@EnableAutoConfiguration ：自动配置 ----@AutoConfigurationPackage ： 自动配置包 ------@Import({Registrar.class}) ：自动注册 '包注册' ----@Import({AutoConfigurationImportSelector.class}) ：自动导入选择 在AutoConfigurationImportSelector.class中有 //获取所有配置 List<String> configurations = this.getCandidateConfigurations(annotationMetadata, attributes);

获取候选的配置

//在上述getCandidateConfigurations中 protected List<String> getCandidateConfigurations(AnnotationMetadata metadata, AnnotationAttributes attributes) { List<String> configurations = new ArrayList(SpringFactoriesLoader.loadFactoryNames(this.getSpringFactoriesLoaderFactoryClass(), this.getBeanClassLoader())); ImportCandida tes.load(AutoConfiguration.class, this.getBeanClassLoader()).forEach(configurations::add); Assert.notEmpty(configurations, "No auto configuration classes found in META-INF/spring.factories nor in META-INF/spring/org.springframework.boot.autoconfigure.AutoConfiguration.imports. If you are using a custom packaging, make sure that file is correct."); return configurations; }

spring.factories 自动配置的核心文件

自动配置真正实现是从classpath中搜寻所有的META-INF/spring.factories配置文件 ，并将其中对应的 org.springframework.boot.autoconfigure. 包下的配置项，通过反射实例化为对应标注了 @Configuration的JavaConfig形式的IOC容器配置类 ， 然后将这些都汇总成为一个实例并加载到IOC容器中

结论：

SpringBoot在启动的时候从类路径下的META-INF/spring.factories中获取EnableAutoConfiguration指定的值【不一定生效，判断条件：只要导入对应的starter，就有对应的启动器，自动装配就会生效】

将这些值作为自动配置类导入容器 ， 自动配置类就生效 ， 帮我们进行自动配置工作；

整个JavaEE的整体解决方案和自动配置都在springboot-autoconfigure的jar包中；

它会给容器中导入非常多的自动配置类 （xxxAutoConfiguration）, 就是给容器中导入这个场景需要的所有组件 ， 并配置好这些组件 ；

有了自动配置类 ， 免去了我们手动编写配置注入功能组件等的工作；

3.SpringApplication.run

SpringApplication这个类

主要做了以下四件事情：

1、推断应用的类型是普通的项目还是Web项目

2、查找并加载所有可用初始化器 ， 设置到initializers属性中

3、找出所有的应用程序监听器，设置到listeners属性中

4、推断并设置main方法的定义类，找到运行的主类

run方法流程分析

三、配置文件

SpringBoot使用一个全局的配置文件 ， 配置文件名称是固定的

• application.properties
• • 语法结构 ：key=value
• application.yml
• • 语法结构 ：key：空格 value

**配置文件的作用 ：**修改SpringBoot自动配置的默认值，因为SpringBoot在底层都给我们自动配置好了；

YAML 说明：语法要求严格！

1、空格不能省略

2、以缩进来控制层级关系，只要是左边对齐的一列数据都是同一个层级的。

3、属性和值的大小写都是十分敏感的。

注意：

• “ ” 双引号，不会转义字符串里面的特殊字符 ， 特殊字符会作为本身想表示的意思； 比如 ：name: “chen\\n kai” 输出 ：chen换行 kai
• ‘’ 单引号，会转义特殊字符 ， 特殊字符最终会变成和普通字符一样输出 比如 ：name: ‘chen\\n kai’ 输出 ：chen\\n kai

application.yaml : server: port: 8081 #普通的key-value #properties的方式: #name=ckl name: ckl #properties的方式:对象 #student.name = ckl #student.age = 3 #对象 student: name: ckl age: 3 #行内写法： #students: {name: kalen,age: 24} #数组 pets: - cat - dog - pig #行内写法： #pets: [cat,dog,pig] 实体类： import org.springframework.boot.context.properties.ConfigurationProperties; @Component//注册bean @ConfigurationProperties(perfix="person") public class Person { private String name; private Integer age; private Boolean happy; private Date birth; private Map<String,Object> maps; private List<Object> lists; private Dog dog; }

可以直接給实体类赋值 , application.yaml:

#通过yaml配置进行赋值 person: name: ckl age: 24 happy: false birth: 2022/05/28 maps: {k1: v1,k2: v2} lists: - cods - music - girl dog: name: 旺财 age: 3

测试：

@SpringBootTest class Springboot02ApplicationTests { @Autowired private Dog dog; @Autowired private Person person; @Test void contextLoads() { System.out.println(person); } } @ConfigurationProperties的作用：

将配置文件中配置的每一个属性的值，映射到这个组件中；

告诉SpringBoot将这个类中的所有属性和配置文件中相关的配置进行绑定

参数 perfix = “person” ：将配置文件中的person下面的所有属性一一对应

只有这个组件是容器中的组件，才能使用容器提供的@ConfigurationProperties功能

数据校验JSR303

添加依赖

<dependency> <groupId>javax.validation</groupId> <artifactId>validation-api</artifactId> </dependency>

引入注解，然后就可以使用校验注解了

@Validated //数据校验 public class Person { @Email(message="错误提示") //必须是邮箱格式，不然报错 private String name; }

常见参数

@NotNull(message="名字不能为空") private String userName; @Max(value=120,message="年龄最大不能查过120") private int age; @Email(message="邮箱格式错误") private String email; 空检查 @Null 验证对象是否为null @NotNull 验证对象是否不为null, 无法查检长度为0的字符串 @NotBlank 检查约束字符串是不是Null还有被Trim的长度是否大于0,只对字符串,且会去掉前后空格. @NotEmpty 检查约束元素是否为NULL或者是EMPTY. Booelan检查 @AssertTrue 验证 Boolean 对象是否为 true @AssertFalse 验证 Boolean 对象是否为 false 长度检查 @Size(min=, max=) 验证对象（Array,Collection,Map,String）长度是否在给定的范围之内 @Length(min=, max=) string is between min and max included. 日期检查 @Past 验证 Date 和 Calendar 对象是否在当前时间之前 @Future 验证 Date 和 Calendar 对象是否在当前时间之后 @Pattern 验证 String 对象是否符合正则表达式的规则 .......等等 除此以外，我们还可以自定义一些数据校验规则

源码位置：

多环境切换

profile是Spring对不同环境提供不同配置功能的支持，可以通过激活不同的环境版本，实现快速切换环境；

我们在主配置文件编写的时候，文件名可以是 application-{profile}.properties/yml , 用来指定多个环境版本；

例如：

application-test.properties 代表测试环境配置

application-dev.properties 代表开发环境配置

但是Springboot并不会直接启动这些配置文件，它默认使用application.properties主配置文件；

我们需要通过一个配置来选择需要激活的环境：

#比如在配置文件中指定使用dev环境，我们可以通过设置不同的端口号进行测试； #我们启动SpringBoot，就可以看到已经切换到dev下的配置了； spring.profiles.active=dev

yaml的多文档块

server: port: 8081 #选择要激活那个环境块 spring: profiles: active: prod --- server: port: 8083 spring: profiles: dev #配置环境的名称 --- server: port: 8084 spring: profiles: prod #配置环境的名称 注意：如果yml和properties同时都配置了端口，并且没有激活其他环境 ， 默认会使用properties配置文件的！

springboot 启动会扫描以下位置的application.properties或者application.yml文件作为Spring boot的默认配置文件：

• 优先级1：项目路径下的config文件夹配置文件
• 优先级2：项目路径下配置文件
• 优先级3：资源路径下的config文件夹配置文件
• 优先级4：资源路径下配置文件

优先级由高到底，高优先级的配置会覆盖低优先级的配置；

四、web开发 1.静态资源导入

在SpringBoot中可以我们可以使用以下方式处理静态资源(查看源码可知)

• webjars [localhost:8080/webjars/]
• public , static , /** resources [localhost:8080/]

优先级：resources > static > public

首页定制：

在WebMvcAutoConfiguration.class中关于首页的代码

@Bean public WelcomePageHandlerMapping welcomePageHandlerMapping(ApplicationContext applicationContext, FormattingConversionService mvcConversionService, ResourceUrlProvider mvcResourceUrlProvider) { WelcomePageHandlerMapping welcomePageHandlerMapping = new WelcomePageHandlerMapping(new TemplateAvailabilityProviders(applicationContext), applicationContext, this.getWelcomePage(), this.mvcProperties.getStaticPathPattern()); welcomePageHandlerMapping.setInterceptors(this.getInterceptors(mvcConversionService, mvcResourceUrlProvider)); welcomePageHandlerMapping.setCorsConfigurations(this.getCorsConfigurations()); return welcomePageHandlerMapping; }

只需要在静态资源文件夹中新建index.html就可以作为首页输出

但在templates目录下的所有页面，只能通过controller跳转

2.模板引擎

thymeleaf

官网：www.thymeleaf

Github主页：github/thymeleaf/thymeleaf

引入依赖：

<!-- thymeleaf,基于3.x--> <dependency> <groupId>org.thymeleaf</groupId> <artifactId>thymeleaf-spring5</artifactId> </dependency> <dependency> <groupId>org.thymeleaf.extras</groupId> <artifactId>thymeleaf-extras-java8time</artifactId> </dependency> 结论：只要使用thymeleaf，只需要导入依赖就可。我们将html页面放入thymeleaf目录下即可 1.在html中引入头文件 <html xmlns:th="www.thymeleaf"> 2.获取参数

想要获取controller传递的参数

@RequestMapping("/test") public String index(Model model){ model.addAttribute("msg","hello,spring boot"); return "test"; }

然后在html页面中用 th:

<!--所有的html元素，都可以被thymeleaf替换接管， th:元素名--> <h2 th:text="${msg}"></h2>

语法：

<div th:utext="${msg}"></div><!-- 转义--> <div th:text="${msg}"></div> @RequestMapping("/test") public String index(Model model){ model.addAttribute("msg","<h1>hello,spring boot</h1>"); return "test"; } <h3 th:each="user:${users}" th:text="${user}"></h3> 或者另一种写法 <h3 th:each="user:${users}">[[${user}]]</h3> @RequestMapping("/test") public String index(Model model){ model.addAttribute("users", Arrays.asList("ckl","123")); return "test"; } 3.Spring MVC配置

官方文档：

docs.spring.io/spring-boot/docs/2.1.6.RELEASE/reference/html/boot-features-developing-web-applications.html#boot-features-spring-mvc

//如果我们要扩展spring mvc官方建议： @Configuration public class MyMvcConfig implements WebMvcConfigurer { //视图跳转 @Override public void addViewControllers(ViewControllerRegistry registry) { //localhost:8080/ckl 可以访问到test registry.addViewController("/ckl").setViewName("test"); } } 五、员工管理系统 1.POJO层 部门表： @Data @NoArgsConstructor @AllArgsConstructor public class Department { private Integer id; private String departmentName; } 员工表： @Data @AllArgsConstructor @NoArgsConstructor public class Employee { private Integer id; private String lastName; private String email; private Integer gender;//0：女 , 1:男 private Department department; private Date birth; } 2.dao层 DepartmentDao.java import com.ckl.pojo.Department; import org.springframework.stereotype.Repository; import java.util.Collection; import java.util.HashMap; import java.util.Map; @Repository//表示被spring托管 public class DepartmentDao { //模拟数据库中的数据 private static Map<Integer,Department> departments = null; static{ departments = new HashMap<Integer,Department>(); //创建一个部门表 departments.put(101,new Department(101,"教学部")); departments.put(102,new Department(102,"市场部")); departments.put(103,new Department(103,"教研部")); departments.put(104,new Department(104,"运营部")); departments.put(105,new Department(105,"后勤部")); } //获得所有部门信 public Collection<Department> getDepartments(){ return departments.values(); } //通过id得到部门 public Department getDepartmentById(Integer id){ return departments.get(id); } } EmployeeDao.java import com.ckl.pojo.Department; import com.ckl.pojo.Employee; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Repository; import java.util.Collection; import java.util.Date; import java.util.HashMap; import java.util.Map; @Repository public class EmployeeDao { //模拟数据库数据 //模拟数据库中的数据 private static Map<Integer,Employee> employees = null; //员工有所属的部门 外表 @Autowired private DepartmentDao departmentDao; static{ employees = new HashMap<Integer,Employee>(); employees.put(101,new Employee(001,"张三","kalen@163",1,new Department(1001,"教学部"),new Date())); employees.put(102,new Employee(002,"李四","123@163",1,new Department(1002,"市场部"),new Date())); employees.put(103,new Employee(003,"王五","as@163",0,new Department(1003,"教研部"),new Date())); employees.put(104,new Employee(004,"赵六","fasf@163",1,new Department(1004,"运营部"),new Date())); employees.put(105,new Employee(005,"田七","sxcv@163",1,new Department(1005,"后勤部"),new Date())); employees.put(106,new Employee(005,"三八","gyu@163",1,new Department(1002, "市场部"),new Date())); } //主键自增 private static Integer intId = 107; //增加一个员工 public void save(Employee employee){ if(employee.getId() == null){ employee.setId(intId++);//自增 } employee.setDepartment(departmentDao.getDepartmentById(employee.getDepartment().getId())); employees.put(employee.getId(),employee);//主键 , 员工信 } //查询全部员工 public Collection<Employee> getAll(){ return employees.values(); } //通过id查询员工 public Employee getEmployeeById(Integer id){ return employees.get(id); } //通过id删除员工 public void deleteEmployee(Integer id){ employees.remove(id); } }

thymeleaf官方文档：

www.thymeleaf/doc/tutorials/3.0/usingthymeleaf.html#appending-and-prepending

3.首页实现

编写controller类

IndexController.java package com.ckl.controller; import org.springframework.stereotype.Controller; @Controller public class IndexController { //在config类中实现addViewControllers方法就不需要controller了 /*@RequestMapping({"/","/index.html"})//数组形式用{}，访问这两个路径都能进入这个方法 public String index(){ return "index"; }*/ }

或者编写MyMvcConfig类

MyMvcConfig.java import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.ViewControllerRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; @Configuration //@EnableWebMvc public class MyMvcConfig implements WebMvcConfigurer { @Override public void addViewControllers(ViewControllerRegistry registry) { //这里注册一个controller，走到index；那么就不需要Controller类了 //那么这样就需要去掉注解@EnableWebMvc registry.addViewController("/").setViewName("index"); registry.addViewController("/index.html").setViewName("index"); } }

然后将静态资源修改为支持thymeleaf的样子

连接格式：@{}

application.properties #关闭模板引擎的缓存 spring.thymeleaf.cache=false 注意：

1.所有页面的静态资源都需要thymeleaf接管 @{}

2.页面国际化

4.页面国际化

1.在resource目录下新建一个目录 i18n

创建login.properties配置文件，然后创建login_zh_CN.properties配置文件

之后，两个文件就会自动合并：

之后就可以右键创建 其他语言类的配置文件

之后在application.properties中

#配置文件放置的真实位置 spring.messages.basename=i18n.login

之后在具体页面中修改

index.html， 格式：#{} <form class="form-signin" action="dashboard.html"> ... <h1 class="h3 mb-3 font-weight-normal" th:text="#{login.tip}" >Please sign in</h1> <input type="text" class="form-control" th:placeholder="#{login.username}" required="" autofocus=""> <input type="password" class="form-control" th:placeholder="#{login.password}" required="" > <div class="checkbox mb-3"> <label> <input type="checkbox" value="remember-me" >[[#{login.remember}]] </label> </div> <button class="btn btn-lg btn-primary btn-block" type="submit" >[[#{login.btn}]]</button> <p class="mt-5 mb-3 text-muted">© 2017-2018</p> <a class="btn btn-sm">中文</a> <a class="btn btn-sm">English</a> </form>

实现页面中英文转换

新建MyLoacleResolver类去实现LoacleResolver类

<!-- 创建连接--> <a class="btn btn-sm" th:href="@{/index.html(l=zh_CN)}">中文</a> <a class="btn btn-sm" th:href="@{/index.html(l=en_US)}">English</a> MyLoacleResolve.java: import org.springframework.web.servlet.LocaleResolver; import org.thymeleaf.util.StringUtils; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.util.Locale; public class MyLoacleResolver implements LocaleResolver { //解析请求 @Override public Locale resolveLocale(HttpServletRequest request) { String language = request.getParameter("l");//获取请求中的参数连接 Locale locale = Locale.getDefault();//如果没有就使用默认 if(!StringUtils.isEmpty(language)){ //如果请求的连接携带了区域化的参数 "en_US" String[] split = language.split("_");//字符串分解 Locale locale1 = new Locale(split[0], split[1]);//国家，地区 } return null; } @Override public void setLocale(HttpServletRequest request, HttpServletResponse response, Locale locale) { } }

然后在MyMVCConfig.java中注入Bean

//自定义国际化组件 @Bean public LocaleResolver localeResolver(){ return new MyLoacleResolver(); } 注意：

1.需要配置i18n文件

2.如果需要在项目中进行按钮自动切花，需要自定义一个组件 LocaleResolve

3.将组件配置大spring容器中：@Bean

4.#{}

5.登录功能实现 1.修改from表单action属性，添加name属性，index.html： <form class="form-signin" th:action="@{/user/login}"> ... <!-- msg为空就不显示--> <p style="color: red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p> <input type="text" name="username" class="form-control" th:placeholder="#{login.username}" required="" autofocus=""> ... <input type="password" name="password" class="form-control" th:placeholder="#{login.password}" required="" > </form> LoginController.java @Controller public class LoginController { //@RequestParam("参数名") 接收参数；防止两边参数名不一样接收不到 @RequestMapping("/user/login") public String login(@RequestParam("username") String username , @RequestParam("password") String password, Model model){//Model 用来回传数据 //具体业务：验证账户密码... if(!StringUtils.isEmpty(username) && "123456".equals(password)) return "dashboard"; else{ model.addAttribute("msg","用户名或者密码错误");//告诉用户登录失败 return "index"; } } }

此时点击登录按钮跳转之后 URL：localhost:8080/user/login?username=123&password=123456

要将其隐藏需要在MyMvcConfig.java中添加映射：

registry.addViewController("/main.html").setViewName("dashboard"); @Configuration //@EnableWebMvc public class MyMvcConfig implements WebMvcConfigurer { @Override//添加映射 public void addViewControllers(ViewControllerRegistry registry) { //这里注册一个controller，走到index；那么就不需要Controller类了 //那么这样就需要去掉注解@EnableWebMvc registry.addViewController("/").setViewName("index"); registry.addViewController("/index.html").setViewName("index"); registry.addViewController("/main.html").setViewName("dashboard"); }

此时URL：localhost:8080/main.html

但是此时就算不登录跳转，直接通过URL也可以进入首页，所以我们需要拦截器进行拦截：

6.登录拦截器

创建拦截器类：LoginHandlerInterceptor.java实现HandlerInterceptor接口然后实现其方法：

public class LoginHandlerInterceptor implements HandlerInterceptor { @Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) { //登录成功之后，有用户的Session request.getSession().getAttribute("loginUser"); return false; } }

然后在LoginController.java中添加上Session

@Controller public class LoginController { @RequestMapping("/user/login") public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception{ //登录成功之后，有用户的Session Object loginUser = request.getSession().getAttribute("loginUser"); if(loginUser == null){ //没有登录 request.setAttribute("msg","没有权限，请先登录"); request.getRequestDispatcher("/index.html").forward(request,response); return false; } return true; } }

然后将拦截器添加Bean，在MyMvcConfig.java中。注意静态资源过滤

@Configuration public class MyMvcConfig implements WebMvcConfigurer { @Override public void addInterceptors(InterceptorRegistry registry) { registry.addInterceptor(new LoginHandlerInterceptor()).addPathPatterns("/**") .excludePathPatterns("/index.html","/","/user/login","/css/*","/js/**","/img/**");// /** ：全部拦截; excludePathPatterns():这些不拦截 } }

然后在dashboard.html中，吧用户名修改

[[${session.loginUser}]] 7.展示员工列表

在dashboard.html页面中，添加跳转

<li class="nav-item"> <a class="nav-link" th:href="@{/emps}"> 员工管理<!-- --> </a> </li>

创建EmployeeController.java

@Controller public class EmployeeController { @Autowired EmployeeDao employeeDao; @RequestMapping("/emps") public String list(Model model){ Collection<Employee> employees = employeeDao.getAll(); model.addAttribute("emps",employees); return "emp/list"; } }

在templates目录下创建目录emps，将list.html移入emps，【写代码时，将页面进行分类】

此时，可以通过th:fragment=“sidebar"将首页的侧边栏目，用th:insert=”~{dashboard::topbar}"与list页面结合.

然后在thymeleaf目录下创建commons目录，将顶部栏与侧边栏部分提取放入Commons.html中

1.提取公共页面 1.th:fragment="sidebar" 2.th:replace="~{commons/commons::topbar}" 3.如果要传递参数，可以直接使用()传参，接收判断即可 dashboard.html <!DOCTYPE html> <!-- saved from url=(0052)getbootstrap/docs/4.0/examples/dashboard/ --> <html lang="en" xmlns:th="www.thymeleaf"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <title>Dashboard Template for Bootstrap</title> <!-- Bootstrap core CSS --> <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"> <!-- Custom styles for this template --> <link th:href="@{/css/dashboard.css}" rel="stylesheet"> <style type="text/css"> /* Chart.js */ @-webkit-keyframes chartjs-render-animation { from { opacity: 0.99 } to { opacity: 1 } } @keyframes chartjs-render-animation { from { opacity: 0.99 } to { opacity: 1 } } .chartjs-render-monitor { -webkit-animation: chartjs-render-animation 0.001s; animation: chartjs-render-animation 0.001s; } </style> </head> <body> <div th:replace="~{commons/commons::topbar}"></div> <div class="container-fluid"> <div class="row"> <div th:replace="~{commons/commons::sidebar(active='main.html')}"></div> <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4"> <div class="chartjs-size-monitor" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;"> <div class="chartjs-size-monitor-expand" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;"> <div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div> </div> <div class="chartjs-size-monitor-shrink" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;"> <div style="position:absolute;width:200%;height:200%;left:0; top:0"></div> </div> </div> <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom"> <h1 class="h2">Dashboard</h1> <div class="btn-toolbar mb-2 mb-md-0"> <div class="btn-group mr-2"> <button class="btn btn-sm btn-outline-secondary">Share</button> <button class="btn btn-sm btn-outline-secondary">Export</button> </div> <button class="btn btn-sm btn-outline-secondary dropdown-toggle"> <svg xmlns="www.w3/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg> This week </button> </div> </div> <canvas class="my-4 chartjs-render-monitor" id="myChart" width="1076" height="454" style="display: block; width: 1076px; height: 454px;"></canvas> </main> </div> </div> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script type="text/javascript" src="@{/js/jquery-3.2.1.slim.min.js}" ></script> <script type="text/javascript" src="@{/js/popper.min.js}" ></script> <script type="text/javascript" src="@{/js/bootstrap.min.js}" ></script> <!-- Icons --> <script type="text/javascript" src="@{/js/feather.min.js}" ></script> <script> feather.replace() </script> <!-- Graphs --> <script type="text/javascript" src="@{/js/Chart.min.js}" ></script> <script> var ctx = document.getElementById("myChart"); var myChart = new Chart(ctx, { type: 'line', data: { labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], datasets: [{ data: [15339, 21345, 18483, 24003, 23489, 24092, 12034], lineTension: 0, backgroundColor: 'transparent', borderColor: '#007bff', borderWidth: 4, pointBackgroundColor: '#007bff' }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero: false } }] }, legend: { display: false, } } }); </script> </body> </html> commons.html <!DOCTYPE html> <html lang="en" xmlns:th="www.thymeleaf"> <!--头部导航栏--> <nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0" th:fragment="topbar"> <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="getbootstrap/docs/4.0/examples/dashboard/#">[[${session.loginUser}]]</a> <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search"> <ul class="navbar-nav px-3"> <li class="nav-item text-nowrap"> <a class="nav-link" href="getbootstrap/docs/4.0/examples/dashboard/#">注销</a> </li> </ul> </nav> <!--侧边栏--> <nav class="col-md-2 d-none d-md-block bg-light sidebar" th:fragment="sidebar"> <div class="sidebar-sticky"> <ul class="nav flex-column"> <li class="nav-item"> <a th:class="${active=='main.html'?'nav-link active':'nav-link'}" th:href="@{/index.html}"> <svg xmlns="www.w3/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"> <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path> <polyline points="9 22 9 12 15 12 15 22"></polyline> </svg> 首页 <span class="sr-only">(current)</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="getbootstrap/docs/4.0/examples/dashboard/#"> <svg xmlns="www.w3/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file"> <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path> <polyline points="13 2 13 9 20 9"></polyline> </svg> Orders </a> </li> <li class="nav-item"> <a class="nav-link" href="getbootstrap/docs/4.0/examples/dashboard/#"> <svg xmlns="www.w3/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shopping-cart"> <circle cx="9" cy="21" r="1"></circle> <circle cx="20" cy="21" r="1"></circle> <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path> </svg> Products </a> </li> <li class="nav-item"> <a th:class="${active=='list.html'?'nav-link active':'nav-link'}" th:href="@{/emps}"> 员工管理 </a> </li> <li class="nav-item"> <a class="nav-link" href="getbootstrap/docs/4.0/examples/dashboard/#"> <svg xmlns="www.w3/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bar-chart-2"> <line x1="18" y1="20" x2="18" y2="10"></line> <line x1="12" y1="20" x2="12" y2="4"></line> <line x1="6" y1="20" x2="6" y2="14"></line> </svg> Reports </a> </li> <li class="nav-item"> <a class="nav-link" href="getbootstrap/docs/4.0/examples/dashboard/#"> <svg xmlns="www.w3/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-layers"> <polygon points="12 2 2 7 12 12 22 7 12 2"></polygon> <polyline points="2 17 12 22 22 17"></polyline> <polyline points="2 12 12 17 22 12"></polyline> </svg> Integrations </a> </li> </ul> <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted"> <span>Saved reports</span> <a class="d-flex align-items-center text-muted" href="getbootstrap/docs/4.0/examples/dashboard/#"> <svg xmlns="www.w3/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg> </a> </h6> <ul class="nav flex-column mb-2"> <li class="nav-item"> <a class="nav-link" href="getbootstrap/docs/4.0/examples/dashboard/#"> <svg xmlns="www.w3/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"> <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path> <polyline points="14 2 14 8 20 8"></polyline> <line x1="16" y1="13" x2="8" y2="13"></line> <line x1="16" y1="17" x2="8" y2="17"></line> <polyline points="10 9 9 9 8 9"></polyline> </svg> Current month </a> </li> <li class="nav-item"> <a class="nav-link" href="getbootstrap/docs/4.0/examples/dashboard/#"> <svg xmlns="www.w3/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"> <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path> <polyline points="14 2 14 8 20 8"></polyline> <line x1="16" y1="13" x2="8" y2="13"></line> <line x1="16" y1="17" x2="8" y2="17"></line> <polyline points="10 9 9 9 8 9"></polyline> </svg> Last quarter </a> </li> <li class="nav-item"> <a class="nav-link" href="getbootstrap/docs/4.0/examples/dashboard/#"> <svg xmlns="www.w3/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"> <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path> <polyline points="14 2 14 8 20 8"></polyline> <line x1="16" y1="13" x2="8" y2="13"></line> <line x1="16" y1="17" x2="8" y2="17"></line> <polyline points="10 9 9 9 8 9"></polyline> </svg> Social engagement </a> </li> <li class="nav-item"> <a class="nav-link" href="getbootstrap/docs/4.0/examples/dashboard/#"> <svg xmlns="www.w3/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"> <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path> <polyline points="14 2 14 8 20 8"></polyline> <line x1="16" y1="13" x2="8" y2="13"></line> <line x1="16" y1="17" x2="8" y2="17"></line> <polyline points="10 9 9 9 8 9"></polyline> </svg> Year-end sale </a> </li> </ul> </div> </nav> </html> list.html: <!DOCTYPE html> <!-- saved from url=(0052)getbootstrap/docs/4.0/examples/dashboard/ --> <html lang="en" xmlns:th="www.thymeleaf"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <title>Dashboard Template for Bootstrap</title> <!-- Bootstrap core CSS --> <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"> <!-- Custom styles for this template --> <link th:href="@{/css/dashboard.css}" rel="stylesheet"> <style type="text/css"> /* Chart.js */ @-webkit-keyframes chartjs-render-animation { from { opacity: 0.99 } to { opacity: 1 } } @keyframes chartjs-render-animation { from { opacity: 0.99 } to { opacity: 1 } } .chartjs-render-monitor { -webkit-animation: chartjs-render-animation 0.001s; animation: chartjs-render-animation 0.001s; } </style> </head> <body> <div th:replace="~{commons/commons::topbar}"></div> <div class="container-fluid"> <div class="row"> <div th:replace="~{commons/commons::sidebar(active='list.html')}"></div> <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4"> <h2>Section title</h2> <div class="table-responsive"> <table class="table table-striped table-sm"> <thead> <tr> <th>id</th> <th>lastNme</th> <th>email</th> <th>gender</th> <th>department</th> <th>birth</th> <th>操作</th> </tr> </thead> <tbody> <tr th:each="emp:${emps}"> <td th:text="${emp.getId()}"></td> <td th:text="${emp.getLastName()}"></td> <td th:text="${emp.getEmail()}"></td> <td th:text="${emp.getGender()}"></td> <td th:text="${emp.getDepartment().getDepartmentName()}"></td> <td th:text="${emp.getBirth()}"></td> <td> <button class="btn btn-sm btn-primary">编辑</button> <button class="btn btn-sm btn-danger">删除</button> </td> </tr> </tbody> </table> </div> </main> </div> </div> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script type="text/javascript" src="@{/js/jquery-3.2.1.slim.min.js}"></script> <script type="text/javascript" src="@{/js/popper.min.js}"></script> <script type="text/javascript" src="@{/js/bootstrap.min.js}"></script> <!-- Icons --> <script type="text/javascript" src="@{/js/feather.min.js}"></script> <script> feather.replace() </script> <!-- Graphs --> <script type="text/javascript" src="@{/js/Chart.min.js}"></script> <script> var ctx = document.getElementById("myChart"); var myChart = new Chart(ctx, { type: 'line', data: { labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], datasets: [{ data: [15339, 21345, 18483, 24003, 23489, 24092, 12034], lineTension: 0, backgroundColor: 'transparent', borderColor: '#007bff', borderWidth: 4, pointBackgroundColor: '#007bff' }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero: false } }] }, legend: { display: false, } } }); </script> </body> </html> 8.添加员工 1.按钮提交 2.跳转页面 3.添加成功，返回首页

list.html: restfull风格

<h2> <!--get请求 --> <a class="btn btn-sm btn-success" th:href="@{/emp}">添加员工</a> </h2> EmployeeController.java @PostMapping("/emp") public String addEmp(Employee employee){ //添加操作 System.out.println(employee); employeeDao.save(employee);//保存员工信 //forward() return "redirect:/emps"; }

在emp目录下新建add.html页面,[复用list.html页面，添加form表单]

<form th:action="@{/emp}" method="post"><!-- 表单时post请求--> <div class="form-group"> <label>LastName</label> <input type="text" name="lastName" class="form-control" placeholder="kalen"> </div> <div class="form-group"> <label>Email</label> <input type="email" name="email" class="form-control" placeholder="kalen12138@163"> </div> <div class="form-group"> <input type="radio" class="form-check-input" name="gender" value="1"> <label class="form-check-label">男</label> </div> <div class="form-group"> <input type="radio" class="form-check-input" name="gender" value="0"> <label class="form-check-label">女</label> </div> <div class="form-group"> <label>department</label> <!--我们在controller接收的是一个Employee , 所以我们需要提交的是其中的一个属性--> <select class="form-control" name="department.id" > <option th:each="dept:${departments}" th:text="${dept.getDepartmentName()}" th:value="${dept.getId()}"></option> </select> <!-- 默认的日期格式是yyyy/mm/dd--> </div> <div class="form-group"> <label>Birth</label> <input type="text" name="birth" class="form-control" placeholder="1998"> </div> <button type="submit" class="btn btn-primary">添加</button> </form> 9.修改员工信

在emp目录下新建页面update.html

(复用add.html)

<form th:action="@{/emp}" method="post"><!-- 表单时post请求--> <div class="form-group"> <label>LastName</label> <input type="text" name="lastName" class="form-control" placeholder="kalen"> </div> <div class="form-group"> <label>Email</label> <input type="email" name="email" class="form-control" placeholder="kalen12138@163"> </div> <div class="form-group"> <input type="radio" class="form-check-input" name="gender" value="1"> <label class="form-check-label">男</label> </div> <div class="form-group"> <input type="radio" class="form-check-input" name="gender" value="0"> <label class="form-check-label">女</label> </div> <div class="form-group"> <label>department</label> <!--我们在controller接收的是一个Employee , 所以我们需要提交的是其中的一个属性--> <select class="form-control" name="department.id" > <option th:each="dept:${departments}" th:text="${dept.getDepartmentName()}" th:value="${dept.getId()}"></option> </select> </div> <div class="form-group"> <label>Birth</label> <input type="text" name="birth" class="form-control" placeholder="1998"> <!-- 默认的日期格式是yyyy/mm/dd--> </div> <button type="submit" class="btn btn-primary">添加</button> </form> list.html： <td> <a class="btn btn-sm btn-primary" th:href="@{emp/}+${emp.getId()}">编辑</a> <a class="btn btn-sm btn-danger">删除</a> </td> EmployeeController.java //跳转员工的修改页面 @GetMapping("/emp/{id}") public String toUpdateEmp(@PathVariable("id") Integer id,Model model){ //查询原来的信 Employee employeeById = employeeDao.getEmployeeById(id); model.addAttribute("emp",employeeById); //查出所有部门信 Collection<Department> departments = departmentDao.getDepartments(); model.addAttribute("departments",departments); return "emp/update"; } //员工信修改 @PostMapping("/updateEmp") public String updateEmp(Employee employee){ employeeDao.save(employee); return "redirect:/emps"; } 10.删除 list.html: <td> <a class="btn btn-sm btn-primary" th:href="@{/emp/}+${emp.getId()}">编辑</a> <a class="btn btn-sm btn-danger" th:href="@{/delEmp/}+${emp.getId()}">删除</a> </td> EmployeeController.java //员工信删除 @GetMapping("/delEmp/{id}") public String deleteEmp(@PathVariable("id") Integer id){ employeeDao.deleteEmployee(id); return "redirect:/emps"; }

CRUD搞定

11.404处理

在thymeleaf目录下新建error目录，在error目录下放404.html，就会自动应用成功

12.注销 commons.html: <li class="nav-item text-nowrap"> <a class="nav-link" th:href="@{/user/loginout}">注销</a> </li> LoginController.java @RequestMapping("/user/loginout") public String signOut(){ session.invalidate();//session销毁,这样注销之后，从url访问首页就会被拦截 return "index"; } SpringBoot开发过程总结：

编写开发文档，建立数据库，pom.xml依赖导入

1.编写pojo层（对应数据库表），dao层（业务逻辑实现）

2.编写controller（实现具体业务逻辑，并完成页面间的跳转）

3.编写config层（相当于之前的Bean.xml，比如：拦截器，视图解析器，国际化组件）

4.thymeleaf资加载配置修改（提取公共页面等）

5.实现具体页面功能等。

本文标签： 框架基础SpringBoot