一、SpringBoot
开源，轻量级开发框架
为了解决企业级应用开发的复杂性而创建的，简化开发
如何简化开发的
- 基于POJO的轻量级和最小侵入性编程
- 通过IOC，依赖注入和面向接口实现松耦合
- 基于切面AOP和管理进行声明式编程
- 通过切面和模板减少样式代码
创建项目
Spring官方提供了非常方便的工具让我们快速构建应用
Spring Initializr：https://start.spring.io/
项目创建方式一：
使用Spring Initializr 的 Web页面创建项目
1、打开 https://start.spring.io/
2、填写项目信息
3、点击”Generate Project“按钮生成项目；下载此项目
4、解压项目包，并用IDEA以Maven项目导入，一路下一步即可，直到项目导入完毕。
5、如果是第一次使用，可能速度会比较慢，包比较多、需要耐心等待一切就绪。
项目创建方式二：
使用 IDEA 直接创建项目
1、创建一个新项目
2、选择spring initalizr ， 可以看到默认就是去官网的快速构建工具那里实现
3、填写项目信息
4、选择初始化的组件（初学勾选 Web 即可）
5、填写项目路径
6、等待项目构建成功
在浏览器输入http://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="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>
<!-- 有一个父项目[远程的]-->
<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图案
在网站上查找复制进行修改
https://www.bootschool.net/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]
https://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
官网：https://www.thymeleaf.org
Github主页：https://github.com/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="http://www.thymeleaf.org">
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配置
官方文档：
https://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) {
//http://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.com",1,new Department(1001,"教学部"),new Date()));
employees.put(102,new Employee(002,"李四","123@163.com",1,new Department(1002,"市场部"),new Date()));
employees.put(103,new Employee(003,"王五","as@163.com",0,new Department(1003,"教研部"),new Date()));
employees.put(104,new Employee(004,"赵六","fasf@163.com",1,new Department(1004,"运营部"),new Date()));
employees.put(105,new Employee(005,"田七","sxcv@163.com",1,new Department(1005,"后勤部"),new Date()));
employees.put(106,new Employee(005,"三八","gyu@163.com",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官方文档：
https://www.thymeleaf.org/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：http://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：http://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)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<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="http://www.w3.org/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="http://www.thymeleaf.org">
<!--头部导航栏-->
<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="http://getbootstrap.com/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="http://getbootstrap.com/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="http://www.w3.org/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="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
<svg xmlns="http://www.w3.org/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="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
<svg xmlns="http://www.w3.org/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="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
<svg xmlns="http://www.w3.org/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="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
<svg xmlns="http://www.w3.org/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="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
<svg xmlns="http://www.w3.org/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="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
<svg xmlns="http://www.w3.org/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="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
<svg xmlns="http://www.w3.org/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="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
<svg xmlns="http://www.w3.org/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="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
<svg xmlns="http://www.w3.org/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)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<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.com">
</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.com">
</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.实现具体页面功能等。
2542
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
