Spring学习记录 Day10（用Spring Boot进行Web开发）

Myth丶恋晨 2021-10-19 00:44 216阅读 0赞

### 文章目录 ###

*  Day 10
 *  简介
 *  静态资源映射规则
 *   *  回顾
     *  引入资源
     *  映射规则
     *  webjars
     *  引入静态资源
     *  欢迎页
     *  图标
 *  模板引擎
 *  Spring MVC自动配置
 *   *  前言
     *  官方文档
     *  ContentNegotiatingViewResolver
     *  viewResolvers
 *  格式化转换器
 *  修改Spring Boot的默认配置
 *   *  方式一：手动修改
     *   *  原理
         *  扩展使用Spring MVC
         *  总结
     *  方式二：全面接管
     *   *  全面接管Spring MVC
         *  测试
         *  原理
     *  总结
 *  页面国际化
 *   *  1、编写国际化配置文件，抽取页面需要显示的国际化页面消息
     *   *  1.1 设置编码
         *  1.2 编写相关配置文件
         *  1.3 编写配置
     *  2、理解SpringBoot对国际化的自动配置
     *  3、去页面获取国际化的值
     *  4、中英文切换
     *   *  4.1 探究原理
     *  4.2 代码编写
 *  登录
 *  拦截器
 *  CRUD操作
 *   *  1.编写pojo层
     *  2.编写dao层
     *  3.编写control层
     *  4.编写前端页面

# Day 10 #

2019年8月13日。  
这是我学习Spring的第十天。  
这一天，我学到了以下的知识。

# 简介 #

事实上，SpringBoot的东西用起来非常简单，因为SpringBoot最大的特点就是**自动装配**

使用SpringBoot的步骤一般如下：

1.  创建一个SpringBoot应用，选择我们需要的模块，SpringBoot就会默认将我们的需要的模块自动配置好
2.  手动在配置文件中配置部分配置项目就可以运行起来了
3.  专注编写业务代码，不需要考虑以前那样一大堆的配置了

**要熟悉掌握开发，之前学习的自动配置的原理一定要搞明白！**

比如：

*  SpringBoot到底帮我们配置了什么？
 *  我们能不能修改？
 *  我们能修改哪些配置？
 *  我们能不能扩展？

Spring相关的配置信息如下：

*  向容器中自动配置组件 ： \*\*\* Autoconfiguration
 *  自动配置类，封装配置文件的内容：\*\*\*Properties

# 静态资源映射规则 #

## 回顾 ##

首先，搭建一个普通的SpringBoot项目，回顾一下之前的HelloWorld程序：https://blog.csdn.net/qq\_41151659/article/details/98751902

## 引入资源 ##

现在想要引入我们小实验的测试资源，而我们的项目中有许多的静态资源，比如，**css，js**等文件，这个SpringBoot怎么处理呢？

以前，如果我们的项目是一个web应用，我们的main下会有一个webapp，我们以前都是将所有的页面导在这里面的。

但是，我们现在的pom呢，打包方式是为jar的方式，那么通过这种方式，SpringBoot能不能来给我们写页面呢？当然是可以的，但是SpringBoot对于静态资源放置的位置，是有规定的！

## 映射规则 ##

首先，我们先来聊聊这个静态资源映射规则；

在SpringBoot中，SpringMVC的web配置都在WebMvcAutoConfiguration 这个配置里面，我们可以去看看WebMvcAutoConfigurationAdapter中有很多配置方法；

比如：分析源码中的addResourceHandlers，代码如下：

public void addResourceHandlers(ResourceHandlerRegistry registry) { 
                if (!this.resourceProperties.isAddMappings()) { 
                    logger.debug("Default resource handling disabled");
                } else { 
                    Duration cachePeriod = this.resourceProperties.getCache().getPeriod();
                    CacheControl cacheControl = this.resourceProperties.getCache().getCachecontrol().toHttpCacheControl();
                    if (!registry.hasMappingForPattern("/webjars/**")) { 
                        this.customizeResourceHandlerRegistration(registry.addResourceHandler(new String[]{ "/webjars/**"}).addResourceLocations(new String[]{ "classpath:/META-INF/resources/webjars/"}).setCachePeriod(this.getSeconds(cachePeriod)).setCacheControl(cacheControl));
                    }
    
                    String staticPathPattern = this.mvcProperties.getStaticPathPattern();
                    if (!registry.hasMappingForPattern(staticPathPattern)) { 
                        this.customizeResourceHandlerRegistration(registry.addResourceHandler(new String[]{ staticPathPattern}).addResourceLocations(getResourceLocations(this.resourceProperties.getStaticLocations())).setCachePeriod(this.getSeconds(cachePeriod)).setCacheControl(cacheControl));
                    }
    
                }
            }

阅读这段源代码，可以发现：**所有的 /webjars/\*\* ， 都需要去 classpath:/META-INF/resources/webjars/找对应的资源，那什么是webjars呢？**

## webjars ##

**webjars**本质就是**以jar包的方式引入我们的静态资源** ， 我们以前x需要要导入一个静态资源文件，现在直接导入即可。使用SpringBoot需要使用webjars，我们可以去搜索一下：https://www.webjars.org/

例如：要使用jQuery，我们只要要引入jQuery对应版本的pom依赖即可！【导入完毕，最好查看webjars目录结构，并访问Jquery.js文件，检查是否导入完整】，jQuery导入依赖的代码如下：

<dependency>
                <groupId>org.webjars</groupId>
                <artifactId>jquery</artifactId>
                <version>3.3.1</version>
            </dependency>

查看目录结构：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70]  
访问：只要是静态资源，SpringBoot就会去对应的路径寻找资源，我们这里就可以访问 ：http://localhost:8080/webjars/jquery/3.3.1/jquery.js ，如图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 1]

## 引入静态资源 ##

那在项目中，我们要是想使用自己的静态资源该怎么导入呢？我们接着往下看。  
继续阅读源码，可以去找staticPathPattern发现第二种映射规则 ： /\*\* , 访问当前的项目任意资源，它就会去找 resourceProperties 这个类，可以点进去看一下，代码如下：

@ConfigurationProperties(
        prefix = "spring.resources",
        ignoreUnknownFields = false
    )
    public class ResourceProperties { 
        private static final String[] CLASSPATH_RESOURCE_LOCATIONS = new String[]{ "classpath:/META-INF/resources/", "classpath:/resources/", "classpath:/static/", "classpath:/public/"};

在ResourceProperties中，可以设置和我们静态资源有关的参数，`this.staticLocations = CLASSPATH_RESOURCE_LOCATIONS;` 这里面指向了它会去寻找资源的文件夹；即上面数组的内容。再向下看一个方法；它还会在根路径下去寻找资源，代码如下：

private String[] appendSlashIfNecessary(String[] staticLocations) { 
            String[] normalized = new String[staticLocations.length];
    
            for(int i = 0; i < staticLocations.length; ++i) { 
                String location = staticLocations[i];
                normalized[i] = location.endsWith("/") ? location : location + "/";
            }
    
            return normalized;
        }

所以得出结论：

*  “classpath:/META-INF/resources/”,
 *  “classpath:/resources/”,
 *  “classpath:/static/”,
 *  “classpath:/public/”,
 *  “/” ：当前项目的根目录

于是，我们可以在resources根目录下新建对应的文件夹，在文件夹中都可以存放相应的静态文件  
假设我们访问 localhost:8080/1.js, 它就会去这些文件夹中寻找对应的静态资源文件（1.js）；

## 欢迎页 ##

静态资源文件夹说完后，继续看源码！可以看到一个欢迎页的映射，也就是项目的首页，代码如下：

@Bean
            public WelcomePageHandlerMapping welcomePageHandlerMapping(ApplicationContext applicationContext) { 
                return new WelcomePageHandlerMapping(new TemplateAvailabilityProviders(applicationContext), applicationContext, this.getWelcomePage(), this.mvcProperties.getStaticPathPattern());
            }

继续往下看，代码如下：

private Optional<Resource> getWelcomePage() { 
                String[] locations = getResourceLocations(this.resourceProperties.getStaticLocations());
                return Arrays.stream(locations).map(this::getIndexHtml).filter(this::isReadable).findFirst();
            }
    
            private Resource getIndexHtml(String location) { 
                return this.resourceLoader.getResource(location + "index.html");
            }

我们可以看到，欢迎页，也就是静态资源文件夹下的所有index.html页面；被 /\*\* 所映射。  
假设访问 localhost:8080/ ，就可以找静态资源文件夹下的 index.html

## 图标 ##

继续向下阅读源码，可以看到一个好玩的功能：那就是配置我们自定义的图标，代码如下：

@Configuration
            @ConditionalOnProperty(
                value = { "spring.mvc.favicon.enabled"},
                matchIfMissing = true
            )
            public static class FaviconConfiguration implements ResourceLoaderAware { 
                private final ResourceProperties resourceProperties;
                private ResourceLoader resourceLoader;
    
                public FaviconConfiguration(ResourceProperties resourceProperties) { 
                    this.resourceProperties = resourceProperties;
                }
    
                public void setResourceLoader(ResourceLoader resourceLoader) { 
                    this.resourceLoader = resourceLoader;
                }
    
                @Bean
                public SimpleUrlHandlerMapping faviconHandlerMapping() { 
                    SimpleUrlHandlerMapping mapping = new SimpleUrlHandlerMapping();
                    mapping.setOrder(-2147483647);
                    mapping.setUrlMap(Collections.singletonMap("**/favicon.ico", this.faviconRequestHandler()));
                    return mapping;
                }
    
                @Bean
                public ResourceHttpRequestHandler faviconRequestHandler() { 
                    ResourceHttpRequestHandler requestHandler = new ResourceHttpRequestHandler();
                    requestHandler.setLocations(this.resolveFaviconLocations());
                    return requestHandler;
                }
    
                private List<Resource> resolveFaviconLocations() { 
                    String[] staticLocations = WebMvcAutoConfiguration.WebMvcAutoConfigurationAdapter.getResourceLocations(this.resourceProperties.getStaticLocations());
                    List<Resource> locations = new ArrayList(staticLocations.length + 1);
                    Stream var10000 = Arrays.stream(staticLocations);
                    ResourceLoader var10001 = this.resourceLoader;
                    this.resourceLoader.getClass();
                    var10000.map(var10001::getResource).forEach(locations::add);
                    locations.add(new ClassPathResource("/"));
                    return Collections.unmodifiableList(locations);
                }
            }

从代码中可以看出：`"**/favicon.ico"` ， 就是项目的图标定义的格式！  
我们可以在项目的静态资源文件夹中放一个图标进去，然后在配置文件中关闭SpringBoot默认的图标，代码如下：

#关闭默认图标
    spring.mvc.favicon.enabled=false

接下来，**清除浏览器缓存**！刷新网页，就会发现图标已经变成自己设定的了！

当然，我们也可以自己通过配置文件来指定一下，哪些文件夹是需要我们放静态资源文件的，在application.properties中配置，代码如下：

spring.resources.static-locations=classpath:/staics/,classpath:/staics/

但是，**一旦自己定义了静态文件夹的路径，原来的就都会失效了！** 这点请格外注意。

# 模板引擎 #

前端交给我们的页面，是html页面。如果像我们以前开发，就需要把html页面转成jsp页面，jsp的好处就是当我们查出一些数据转发到JSP页面以后，可以用jsp轻松实现数据的显示，以及交互等。jsp支持非常强大的功能，**包括能写Java代码**，但是呢，我们现在这种情况，Spring Boot这个项目首先**是以jar的方式，不是war**。第二，我们用的还是**嵌入式的Tomcat**，所以，**它现在默认是不支持jsp的。**

因为不支持jsp，如果我们直接使用纯静态页面的方式，那会给我们的开发带来非常大的麻烦。为了解决这个问题，Spring Boot推荐你可以来使用**模板引擎**。

事实上，**jsp就是一个模板引擎**，还有以前用的比较多的freemarker，包括Spring Boot给我们推荐的**Thymeleaf**，模板引擎有非常多，但再多的模板引擎，它们的思想都是一样的，如图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 2]  
**模板引擎**的作用就是帮助我们来写一个页面模板。比如有些值呢，是动态的，我们就可以写一些表达式。而这些值，从哪来呢，我们先组装一些数据，然后把这些数据找到，并把这个模板和这个数据交给**模板引擎**。模板引擎按照这个数据帮你把这表达式解析、填充到指定的位置，然后把这个数据最终生成一个我们想要的内容给我们写出去，这就是我们这个模板引擎，不管是jsp还是其他模板引擎，都是这个思想。然而，不同的模板引擎之间，语法还是会存在一些不同。这里主要来介绍一下SpringBoot给我们推荐的Thymeleaf模板引擎，这个模板引擎，是一个高级语言的模板引擎，它的这个语法更简单，而且功能更强大。

关于Thymeleaf入门，可参考此篇博客：https://blog.csdn.net/qq\_41151659/article/details/99479522 ，这里不再赘述。

# Spring MVC自动配置 #

## 前言 ##

进行测试前，我们还需要知道一个东西，就是Spring Boot对Spring MVC还做了哪些配置，包括如何扩展，如何定制。我们只有把这些都搞清楚了，在之后使用才会更加得心应手。

## 官方文档 ##

官方文档地址：https://docs.spring.io/spring-boot/docs/2.1.6.RELEASE/reference/html/boot-features-developing-web-applications.html

首先来阅读一段官方文档：

> 29.1.1 Spring MVC Auto-configuration Spring Boot provides auto-configuration for Spring MVC that works well with most  
> applications.
> 
> The auto-configuration adds the following features on top of Spring’s  
> defaults:
> 
> //包含视图解析器 Inclusion of ContentNegotiatingViewResolver and  
> BeanNameViewResolver beans. //支持静态资源文件夹的路径，以及webjars Support for  
> serving static resources, including support for WebJars (covered later  
> in this document)).  
> //自动注册了Converter：【转换器，这就是我们网页提交数据到后台自动封装成为对象的东西，比如把18字符串自动转换为int类型】  
> //Formatter：【格式化器，比如页面给我们了一个2019-8-10，它会给我们自动格式化为Date对象】 Automatic  
> registration of Converter, GenericConverter, and Formatter beans.  
> //HttpMessageConverters：SpringMVC用来转换Http请求和响应的的，比如我们要把一个User对象转换为JSON字符串，可以去看官网文档解释；  
> Support for HttpMessageConverters (covered later in this document).  
> //定义错误代码生成规则的 Automatic registration of MessageCodesResolver (covered  
> later in this document). //首页定制 Static index.html support. //图标定制  
> Custom Favicon support (covered later in this document).  
> //初始化数据绑定器：帮我们把请求数据绑定到JavaBean中！ Automatic use of a  
> ConfigurableWebBindingInitializer bean (covered later in this  
> document).
> 
> If you want to keep Spring Boot MVC features and you want to add  
> additional MVC configuration (interceptors, formatters, view  
> controllers, and other features), you can add your own @Configuration  
> class of type WebMvcConfigurer but without @EnableWebMvc. If you wish  
> to provide custom instances of RequestMappingHandlerMapping,  
> RequestMappingHandlerAdapter, or ExceptionHandlerExceptionResolver,  
> you can declare a WebMvcRegistrationsAdapter instance to provide such  
> components.
> 
> If you want to take complete control of Spring MVC, you can add your  
> own @Configuration annotated with @EnableWebMvc.

通过该篇文档，我们可以得知：Spring Boot已经帮我们自动配置好了Spring MVC，但是自动配置了什么东西呢？

## ContentNegotiatingViewResolver ##

经过探究，我们可以得知：Spring Boot自动配置了ViewResolver，也就是Spring MVC的视图解析器：即根据方法的返回值取得视图对象（View），然后由视图对象决定如何渲染（转发，重定向）。  
去看看这里的源码：找到 WebMvcAutoConfiguration ， 然后搜索ContentNegotiatingViewResolver，并寻找如下方法，代码如下：

@Bean //我们在这里确实看到已经给容器中注册了一个bean
            @ConditionalOnBean({ ViewResolver.class})
            @ConditionalOnMissingBean(
                name = { "viewResolver"},
                value = { ContentNegotiatingViewResolver.class}
            )
            public ContentNegotiatingViewResolver viewResolver(BeanFactory beanFactory) { 
                ContentNegotiatingViewResolver resolver = new ContentNegotiatingViewResolver();
                resolver.setContentNegotiationManager((ContentNegotiationManager)beanFactory.getBean(ContentNegotiationManager.class));
                resolver.setOrder(-2147483648);
                return resolver;
            }

找到相应的解析视图的代码，代码如下：

@Nullable
        public View resolveViewName(String viewName, Locale locale) throws Exception { 
            RequestAttributes attrs = RequestContextHolder.getRequestAttributes();
            Assert.state(attrs instanceof ServletRequestAttributes, "No current ServletRequestAttributes");
            List<MediaType> requestedMediaTypes = this.getMediaTypes(((ServletRequestAttributes)attrs).getRequest());
            if (requestedMediaTypes != null) { 
                //获取候选的视图对象
                List<View> candidateViews = this.getCandidateViews(viewName, locale, requestedMediaTypes);
                //选择一个最适合的视图对象，然后把这个对象返回
                View bestView = this.getBestView(candidateViews, requestedMediaTypes, attrs);
                if (bestView != null) { 
                    return bestView;
                }
            }
    
            String mediaTypeInfo = this.logger.isDebugEnabled() && requestedMediaTypes != null ? " given " + requestedMediaTypes.toString() : "";
            if (this.useNotAcceptableStatusCode) { 
                if (this.logger.isDebugEnabled()) { 
                    this.logger.debug("Using 406 NOT_ACCEPTABLE" + mediaTypeInfo);
                }
    
                return NOT_ACCEPTABLE_VIEW;
            } else { 
                this.logger.debug("View remains unresolved" + mediaTypeInfo);
                return null;
            }
        }

@Nullable：即传入的参数可为null  
从这段代码中，我们可以看出：在getCandidateViews中，看到它是把所有的视图解析器拿来，进行while循环，挨个解析！

Iterator var5 = this.viewResolvers.iterator();

所以可以得出结论：**ContentNegotiatingViewResolver 这个视图解析器就是用来组合所有的视图解析器的**

## viewResolvers ##

再去研究下组合逻辑，可以看到有个属性viewResolvers，看看它是在哪里进行赋值的，代码如下：

protected void initServletContext(ServletContext servletContext) { 
            //这里它是从beanFactory工具中获取容器中的所有视图解析器，ViewRescolver.class ， 把所有的视图解析器来组合的
            Collection<ViewResolver> matchingBeans = BeanFactoryUtils.beansOfTypeIncludingAncestors(this.obtainApplicationContext(), ViewResolver.class).values();
            ViewResolver viewResolver;
            if (this.viewResolvers == null) { 
                this.viewResolvers = new ArrayList(matchingBeans.size());

既然它是在容器中去找视图解析器，我们是否可以猜想：可以去实现**定制**了呢？

也就是说，我们可以自己给容器中去添加一个视图解析器；这个类就会帮我们自动的将它组合进来；

我们可以去实现一下：在主程序中去写一个视图解析器，代码如下：

@Bean //放到bean中
        public ViewResolver myViewResolver(){ 
            return new MyViewResolver();
        }
    
        //我们写一个静态内部类，视图解析器就需要实现ViewResolver接口
        private static class MyViewResolver implements ViewResolver{ 
            @Override
            public View resolveViewName(String s, Locale locale) throws Exception { 
                return null;
            }
        }

但是，在运行之后，怎么判断我们自己写的视图解析器有没有起作用呢？  
现在给dispatcherServlet中的 doDispatch方法加个断点进行调试一下，因为所有的请求都会走到这个方法中，如图所示：  
![在这里插入图片描述][20190813233319675.png]  
启动我们的项目，然后随便访问一个页面，看一下Debug信息；

找到this，如图所示：

![在这里插入图片描述][2019081323334760.png]

找到视图解析器，可以看到我们定义的东西就在这里了，如图所示：  
![在这里插入图片描述][20190813233400533.png]

所以说，如果想要使用自己定制化的东西，只需要给容器中添加这个组件就好，剩下的事情Spring Boot就会帮我们完成

# 格式化转换器 #

从源码中，找到格式化转换器，代码如下：

@Bean
            public FormattingConversionService mvcConversionService() { 
                //拿到配置文件中的格式化规则
                WebConversionService conversionService = new WebConversionService(this.mvcProperties.getDateFormat());
                this.addFormatters(conversionService);
                return conversionService;
            }

继续点进去，代码如下：

public String getDateFormat() { 
            return this.dateFormat;
        }

可以看到，在Properties文件中，可以进行自动配置它！如果注册了自己的格式化方式，就会注册到Bean中，否则不会注册

也就是说，我们可以在配置文件中配置日期格式化的规则，如图所示：  
![在这里插入图片描述][20190813233929688.png]  
![在这里插入图片描述][20190813233941960.png]

# 修改Spring Boot的默认配置 #

## 方式一：手动修改 ##

### 原理 ###

如此多的自动配置，原理都是一样的。通过这个WebMVC的自动配置原理分析，让我们需要学会一种学习方式：通过源码探究，得出结论。因为这个结论一定是属于自己的，而且一通百通。

Spring Boot的底层，大量用到了这些设计细节思想，所以，没事需要多阅读源码，得出结论！

Spring Boot在自动配置很多组件的时候，先看容器中有没有用户自己配置的（如果用户自己配置@bean），如果有就使用用户配置的，如果没有就使用自动配置的；如果有些组件可以存在多个，比如视图解析器，就将用户配置的和自己默认的组合起来！

### 扩展使用Spring MVC ###

首先阅读一段官网文档：

> If you want to keep Spring Boot MVC features and you want to add  
> additional MVC configuration (interceptors, formatters, view  
> controllers, and other features), you can add your own @Configuration  
> class of type WebMvcConfigurer but without @EnableWebMvc. If you wish  
> to provide custom instances of RequestMappingHandlerMapping,  
> RequestMappingHandlerAdapter, or ExceptionHandlerExceptionResolver,  
> you can declare a WebMvcRegistrationsAdapter instance to provide such  
> components.

阅读完这段源码，我们需要做的就是编写一个@Configuration注解类，并且类型要为WebMvcConfigurer，还不能标注@EnableWebMvc注解：因为我们要自己写一个；

新建一个config包，在该包中写一个类MyMvcConfig，代码如下：

import org.springframework.context.annotation.Configuration;
    import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
    
    //应为类型要求为WebMvcConfigurer，所以我们实现其接口
    //可以使用自定义类扩展MVC的功能
    @Configuration
    public class MyMvcConfig implements WebMvcConfigurer { 
    
        @Override
        public void addViewControllers(ViewControllerRegistry registry) { 
            //浏览器发送/kuang ， 就会跳转到success页面；
            registry.addViewController("/kuang").setViewName("success");
        }
    }

去浏览器访问一下，可以查看结果，如图所示：  
![在这里插入图片描述][20190813235250860.png]  
由图可知，**确实也跳转过来了！所以说，要想扩展Spring MVC，官方就推荐我们这么去使用，既保留Spring Boot所有的自动配置，也能使用我们扩展的配置！**

### 总结 ###

1.  WebMvcAutoConfiguration 是 SpringMVC的自动配置类，里面有一个类WebMvcAutoConfigurationAdapter
2.  这个类上有一个注解，在做其他自动配置时会导入：`@Import({WebMvcAutoConfiguration.EnableWebMvcConfiguration.class})`
3.  点进EnableWebMvcConfiguration这个类看一下，它继承了一个父类：DelegatingWebMvcConfiguration，这个父类中有这样一段代码，代码如下：

private final WebMvcConfigurerComposite configurers = new WebMvcConfigurerComposite();
    
    　　 //从容器中获取所有的webmvcConfigurer
        @Autowired(required = false)
        public void setConfigurers(List<WebMvcConfigurer> configurers) { 
            if (!CollectionUtils.isEmpty(configurers)) { 
                this.configurers.addWebMvcConfigurers(configurers);
            }
    
        }

1.  可以在上面的类中去寻找一个刚才设置的viewController当做参考，代码如下：
    
        this.configurers.addViewControllers(registry);
    
    点进去看一下，代码如下：

public void addViewControllers(ViewControllerRegistry registry) { 
            Iterator var2 = this.delegates.iterator();
    
            while(var2.hasNext()) { 
                //将所有的WebMvcConfigurer相关配置来一起调用！包括我们自己配置的和Spring给我们配置的
                WebMvcConfigurer delegate = (WebMvcConfigurer)var2.next();
                delegate.addViewControllers(registry);
            }
    
        }

1.  得出**结论**：所有的WebMvcConfiguration都会被作用，不止Spring自身的配置类，我们定义的配置类也会被调用；

## 方式二：全面接管 ##

### 全面接管Spring MVC ###

阅读一段官方文档：

> If you want to take complete control of Spring MVC, you can add your  
> own @Configuration annotated with @EnableWebMvc.

全面接管，即：Spring Boot对Spring MVC的自动配置不需要了，所有的配置都由我们自己去配置，只需要在我们的配置类中要加一个`@EnableWebMvc`即可  
如果我们全面接管了Spring MVC了，之前Spring Boot配置的静态资源映射一定会无效，可以去测试一下；

### 测试 ###

1.  不加注解之前，访问首页，如图所示：  
    ![在这里插入图片描述][20190814000157532.png]
2.  给配置类加上注解：`@EnableWebMvc`，访问首页，如图所示：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 3]

**总结**：发现所有的SpringMVC自动配置都失效了！回归到了最初的样子；

### 原理 ###

思考问题？为什么加了一个注解，自动配置就失效了！  
这里需要查看源码，才能知道其中的原理

1.  这里发现它是导入了一个类，可以继续进去看，代码如下：

@Import({ DelegatingWebMvcConfiguration.class})
    public @interface EnableWebMvc { 
    }

1.  它继承了一个父类，代码如下：

public class DelegatingWebMvcConfiguration extends WebMvcConfigurationSupport { 
    }

1.  来回顾一下Webmvc自动配置类，代码如下：

@Configuration
    @ConditionalOnWebApplication(
        type = Type.SERVLET
    )
    @ConditionalOnClass({ Servlet.class, DispatcherServlet.class, WebMvcConfigurer.class})
    //这个注解的意思就是：容器中没有这个组件的时候，这个自动配置类才生效
    @ConditionalOnMissingBean({ WebMvcConfigurationSupport.class})
    @AutoConfigureOrder(-2147483638)
    @AutoConfigureAfter({ DispatcherServletAutoConfiguration.class, TaskExecutionAutoConfiguration.class, ValidationAutoConfiguration.class})
    public class WebMvcAutoConfiguration { 
    }

1.  **总结**：`@EnableWebMvc`将WebMvcConfigurationSupport组件导入进来了；而导入的WebMvcConfigurationSupport只是SpringMVC最基本的功能！

**当然，在SpringBoot中会有非常多的\*\*\*Configurer帮助我们进行扩展配置，只要看见了这个，就应该多留心注意**

## 总结 ##

平常开发中，推荐使用方式一，而不是使用方式二

# 页面国际化 #

## 1、编写国际化配置文件，抽取页面需要显示的国际化页面消息 ##

### 1.1 设置编码 ###

先在IDEA中统一设置properties的编码，如图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 4]

### 1.2 编写相关配置文件 ###

1.  在resources资源文件下新建一个i18n目录，建立一个login.propetries文件，还有一个login\_zh\_CN.properties，这时会发现IDEA自动识别了我们要做国际化操作，并且在外层新增了一个文件夹，如图所示：  
    ![在这里插入图片描述][20190815141319340.png]
2.  再在这上面去新建一个文件，如图所示：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 5]
3.  弹出如下页面，可以添加一个英文版本的，如图所示：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 6]
4.  文件建立完毕后，目录结构如图所示：  
    ![在这里插入图片描述][20190815141635296.png]

### 1.3 编写配置 ###

1.  接下来，就来编写配置，首先可以看到idea下面有另外一个视图，如图所示：  
    ![在这里插入图片描述][2019081514172870.png]
2.  在该视图中，点击 + 号就可以直接添加属性了；这里新建一个login.tip，可以看到边上有三个文件框可以输入，如图所示：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 7]
3.  输入相应的内容，如图所示：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 8]
4.  根据以上的步骤，依次添加页面中的其他页面内容即可，如图所示：  
    ![在这里插入图片描述][20190815141949554.png]
5.  查看相应的配置文件，代码如下：
    
    1.  login.properties：
    
        login.btn=登录
        login.password=密码
        login.remember=记住我
        login.tip=请登录
        login.username=用户名
    
    1.  login\_en\_US.properties：
    
        login.btn=Sign in
        login.password=Password
        login.remember=Remember me
        login.tip=Please sign in
        login.username=Username
    
    1.  login\_zh\_CN.properties
    
        login.btn=登录
        login.password=密码
        login.remember=记住我
        login.tip=请登录
        login.username=用户名

## 2、理解SpringBoot对国际化的自动配置 ##

这里又涉及到一个类： MessageSourceAutoConfiguration ，其中有一个方法，可以发现SpringBoot已经自动配置好了管理我们国际化资源文件的组件 ResourceBundleMessageSource；代码如下：

public class MessageSourceAutoConfiguration { 
        private static final Resource[] NO_RESOURCES = new Resource[0];
    
        public MessageSourceAutoConfiguration() { 
        }
    
        @Bean
        @ConfigurationProperties(prefix = "spring.messages") //我们的配置文件可以直接放在类路径下叫： messages.properties， 就可以进行国际化操作了
        public MessageSourceProperties messageSourceProperties() { 
            return new MessageSourceProperties();
        }
    
        @Bean
        public MessageSource messageSource(MessageSourceProperties properties) { 
            ResourceBundleMessageSource messageSource = new ResourceBundleMessageSource();
            if (StringUtils.hasText(properties.getBasename())) { 
    　　　　　　　　//设置国际化文件的基础名（去掉语言国家代码的）
                messageSource.setBasenames(StringUtils.commaDelimitedListToStringArray(StringUtils.trimAllWhitespace(properties.getBasename())));
            }
    
            if (properties.getEncoding() != null) { 
                messageSource.setDefaultEncoding(properties.getEncoding().name());
            }
    
            messageSource.setFallbackToSystemLocale(properties.isFallbackToSystemLocale());
            Duration cacheDuration = properties.getCacheDuration();
            if (cacheDuration != null) { 
                messageSource.setCacheMillis(cacheDuration.toMillis());
            }
    
            messageSource.setAlwaysUseMessageFormat(properties.isAlwaysUseMessageFormat());
            messageSource.setUseCodeAsDefaultMessage(properties.isUseCodeAsDefaultMessage());
            return messageSource;
        }
    }

因为将配置文件放在了i18n目录下，所以要去application.properties中配置这个路径，代码如下：

spring.messages.basename=i18n.login

## 3、去页面获取国际化的值 ##

去查看Thymeleaf的文档，找到message取值操作为： `#{...}`。  
于是以此来修改前端页面，IDEA中有智能提示，代码如下：

<!DOCTYPE html>
    <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>Signin Template for Bootstrap</title>
    		
    		<link href="asserts/css/bootstrap.min.css" rel="stylesheet" th:href="@{/asserts/css/bootstrap.min.css}">
    		
    		<link href="asserts/css/signin.css" rel="stylesheet" th:href="@{/asserts/css/signin.css}">
    	</head>
    
    	<body class="text-center">
    		<form class="form-signin" action="dashboard.html">
    			<img class="mb-4" src="asserts/img/bootstrap-solid.svg" th:src="@{/asserts/img/bootstrap-solid.svg}" alt="" width="72" height="72">
    			<h1 class="h3 mb-3 font-weight-normal" th:text="#{login.tip}"></h1>
    			<label class="sr-only" ></label>
    			<input type="text" class="form-control" placeholder="Username" th:placeholder="#{login.username}" required="" autofocus="">
    			<label class="sr-only" ></label>
    			<input type="password" class="form-control" placeholder="Password" th:placeholder="#{login.password}" required="">
    			<div class="checkbox mb-3">
    				<label>
              <input type="checkbox" value="remember-me" th:text="#{login.remember}">
            </label>
    			</div>
    			<button class="btn btn-lg btn-primary btn-block" type="submit" th:text="#{login.btn}">Sign in</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>
    
    	</body>
    
    </html>

可以去打开项目，访问这个页面，发现页面已经自动识别成了中文的，如图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 9]

## 4、中英文切换 ##

### 4.1 探究原理 ###

在Spring中有一个国际化的Locale （区域信息对象）；里面有一个叫做LocaleResolver （获取区域信息对象）的解析器；  
去查看一下webmvc自动配置文件，可以看到Spring Boot的默认配置，代码如下：

@Bean
            @ConditionalOnMissingBean
            @ConditionalOnProperty(
                prefix = "spring.mvc",
                name = { "locale"}
            )
            public LocaleResolver localeResolver() { 
                //容器中没有就自己配，有的话就用用户配置的
                if (this.mvcProperties.getLocaleResolver() == org.springframework.boot.autoconfigure.web.servlet.WebMvcProperties.LocaleResolver.FIXED) { 
                    return new FixedLocaleResolver(this.mvcProperties.getLocale());
                } else { 
                    AcceptHeaderLocaleResolver localeResolver = new AcceptHeaderLocaleResolver();
                    localeResolver.setDefaultLocale(this.mvcProperties.getLocale());
                    return localeResolver;
                }
            }

除此之外，AcceptHeaderLocaleResolver 这个类中有一个方法，代码如下：

public Locale resolveLocale(HttpServletRequest request) { 
            Locale defaultLocale = this.getDefaultLocale();
            //默认的就是根据请求头带来的区域信息获取Locale进行国际化
            if (defaultLocale != null && request.getHeader("Accept-Language") == null) { 
                return defaultLocale;
            } else { 
                Locale requestLocale = request.getLocale();
                List<Locale> supportedLocales = this.getSupportedLocales();
                if (!supportedLocales.isEmpty() && !supportedLocales.contains(requestLocale)) { 
                    Locale supportedLocale = this.findSupportedLocale(request, supportedLocales);
                    if (supportedLocale != null) { 
                        return supportedLocale;
                    } else { 
                        return defaultLocale != null ? defaultLocale : requestLocale;
                    }
                } else { 
                    return requestLocale;
                }
            }
        }

## 4.2 代码编写 ##

假如现在想点击链接让我们的国际化资源生效，就需要让我们自己编写的locale生效！

也就是说，我们需要自己写一个自己的LocaleResolver，然后在链接上携带区域信息，即可实现页面的中英文切换。

修改一下前端页面的跳转连接，代码如下：

<!DOCTYPE html>
    <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>Signin Template for Bootstrap</title>
    		
    		<link href="asserts/css/bootstrap.min.css" rel="stylesheet" th:href="@{/asserts/css/bootstrap.min.css}">
    		
    		<link href="asserts/css/signin.css" rel="stylesheet" th:href="@{/asserts/css/signin.css}">
    	</head>
    
    	<body class="text-center">
    		<form class="form-signin" action="dashboard.html">
    			<img class="mb-4" src="asserts/img/bootstrap-solid.svg" th:src="@{/asserts/img/bootstrap-solid.svg}" alt="" width="72" height="72">
    			<h1 class="h3 mb-3 font-weight-normal" th:text="#{login.tip}"></h1>
    			<label class="sr-only" ></label>
    			<input type="text" class="form-control" placeholder="Username" th:placeholder="#{login.username}" required="" autofocus="">
    			<label class="sr-only" ></label>
    			<input type="password" class="form-control" placeholder="Password" th:placeholder="#{login.password}" required="">
    			<div class="checkbox mb-3">
    				<label>
              <input type="checkbox" value="remember-me" th:text="#{login.remember}">
            </label>
    			</div>
    			<button class="btn btn-lg btn-primary btn-block" type="submit" th:text="#{login.btn}">Sign in</button>
    			<p class="mt-5 mb-3 text-muted">© 2017-2018</p>
    			
    			<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>
    		</form>
    
    	</body>
    
    </html>

再去编写一个处理的组件类，代码如下：

import org.springframework.util.StringUtils;
    import org.springframework.web.servlet.LocaleResolver;
    
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.util.Locale;
    
    //可以在链接上携带区域信息
    public class MyLocaleResolver implements LocaleResolver { 
    
        //解析请求
        @Override
        public Locale resolveLocale(HttpServletRequest request) { 
    
            String language = request.getParameter("l");
            Locale locale = Locale.getDefault(); //如果没有获取到就使用系统默认的
            //如果请求链接不为空
            if (!StringUtils.isEmpty(language)){ 
                //分割请求参数
                String[] split = language.split("_");
                //国家，地区
                locale = new Locale(split[0],split[1]);
            }
            return locale;
        }
    
        @Override
        public void setLocale(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Locale locale) { 
    
        }
    }

为了让区域化信息能够生效，还需要再配置一下这个组件！在自己的MvcConofig下添加bean，代码如下：

import com.example.demo.compoent.MyLocaleResolver;
    import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.servlet.LocaleResolver;
    import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
    
    @Configuration
    public class MyMvcConfig implements WebMvcConfigurer { 
    
        @Override
        public void addViewControllers(ViewControllerRegistry registry) { 
            registry.addViewController("/").setViewName("index");
            registry.addViewController("/index.html").setViewName("index");
        }
    
        @Bean
        public LocaleResolver localeResolver(){ 
            return new MyLocaleResolver();
        }
    }

重启项目，访问一下，发现点击按钮可以实现成功切换，如图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 10]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 11]

# 登录 #

这里就先不连接数据库了，输入任意用户名都可以登录成功！  
先说一个之前没有提到的问题：**templates**下的页面只能通过Controller跳转实现，而**static**下的页面是能直接被外界访问的。

1.  我们把登录页面的表单提交地址写一个controller，代码如下：

<form class="form-signin" action="dashboard.html" th:action="@{/user/login}" method="post">
    //这里面的所有表单标签都需要加上一个name属性，对应pojo类里的字段名
    </form>

1.  去编写对应的controller，代码如下：

import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.util.StringUtils;
    import org.springframework.web.bind.annotation.PostMapping;
    import org.springframework.web.bind.annotation.RequestParam;
    
    @Controller
    public class LoginController { 
    
        //@RequestMapping(value = "/user/login",method = RequestMethod.POST)
        @PostMapping("/user/login")
        public String login(@RequestParam("username") String username,
                            @RequestParam("password") String password,
                            Model model){ 
    
            if (!StringUtils.isEmpty(username) && "123456".equals(password)){ 
                //登录成功！
                return "dashboard";
            }else { 
                //登录失败！存放错误信息
                model.addAttribute("msg","用户名密码错误");
                return "index";
            }
    
        }
    
    }

1.  因为Spring Boot的默认配置中会让页面存在缓存，所以需要在配置文件中禁用模板引擎的缓存，代码如下：

spring.thymeleaf.cache=false

1.  启动项目，如果模板出现500错误，参考处理连接：https://blog.csdn.net/fengzyf/article/details/83341479 ，如图所示：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 12]
2.  登录成功，发现静态资源的导出有问题，导致网页样式没有出现，这时候需要在样式标签里使用`th:href`属性声明全局样式，代码如下：

<link href="asserts/css/bootstrap.min.css" rel="stylesheet" th:href="@{/asserts/css/bootstrap.min.css}">
    		
    		<link href="asserts/css/signin.css" rel="stylesheet" th:href="@{/asserts/css/signin.css}">

1.  登录失败时，需要让后台信息输出到前端，可以在首页标题下面加上判断，代码如下：

<p style="color: red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>

1.  重启项目，输入错误的密码，会弹出相应的提示，如图所示：  
    ![在这里插入图片描述][20190816154833922.png]
2.  **登录成功后，由于是转发，链接不变，我们需要重定向到首页！** 在MyMvcConfig中再添加一个视图控制映射，代码如下：

@Configuration
    public class MyMvcConfig implements WebMvcConfigurer { 
    
        @Override
        public void addViewControllers(ViewControllerRegistry registry) { 
        registry.addViewController("/main.html").setViewName("dashboard");
        }
    
        // 扩展国际化组件
        @Bean
        public LocaleResolver localeResolver(){ 
            return new MyLocaleResolver();
        }
    }

1.  将Controller的返回改为重定向，解决了静态资源未成功导入的问题，如图所示：

//登录成功！防止表单重复提交，我们重定向
    return "redirect:/main.html";

# 拦截器 #

登录功能完成后，我们可以发现即使登录不成功，也可以进入到其他的后台页面中查看  
这时候，就需要使用拦截器了

1.  自定义一个拦截器，如图所示：

import org.springframework.web.servlet.HandlerInterceptor;
    
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    public class LoginHandlerInterceptor implements HandlerInterceptor { 
        //目标方法执行之前
        @Override
        public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { 
            Object user = request.getSession().getAttribute("loginUser");
            if (user == null){ //未登录，返回登录页面
                request.setAttribute("msg","没有权限，请先登录");
                request.getRequestDispatcher("/index.html").forward(request,response);
                return false;
            }else { 
                //登录，放行
                return true;
            }
        }
    }

1.  将拦截器注册到Spring MVC的配置类中，代码如下：

@Configuration
    public class MyMvcConfig implements WebMvcConfigurer { 
    
        @Override
        public void addViewControllers(ViewControllerRegistry registry) { 
            registry.addViewController("/").setViewName("index");
            registry.addViewController("/index.html").setViewName("index");
            registry.addViewController("/main.html").setViewName("dashboard");
        }
    
        // 扩展国际化组件
        @Bean
        public LocaleResolver localeResolver(){ 
            return new MyLocaleResolver();
        }
    
        // 注册拦截器
    
        @Override
        public void addInterceptors(InterceptorRegistry registry) { 
            // 1.添加拦截器 registry.addInterceptor(new LoginHandlerInterceptor());
            // 2.处理拦截哪些东西 addPathPatterns("/**")
            // 3. 排除哪些请求
            registry.addInterceptor(new LoginHandlerInterceptor())
                    .addPathPatterns("/**").excludePathPatterns("/index.html","/","/user/login","/asserts/**");
        }
    }

1.  在后台主页中，可以显示用户登录的信息，代码如下：

[[${session.loginUser}]]

# CRUD操作 #

**要求 ： 需要使用 Restful风格实现我们的crud操作！**

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

看看一些具体的要求，就是我们小实验的架构；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 14]

## 1.编写pojo层 ##

1.  Department

package com.example.demo.pojo;
    
    public class Department { 
    
        private Integer id;
        private String departmentName;
    
        public Department() { 
        }
    
        public Department(Integer id, String departmentName) { 
            this.id = id;
            this.departmentName = departmentName;
        }
    
        public Integer getId() { 
            return id;
        }
    
        public void setId(Integer id) { 
            this.id = id;
        }
    
        public String getDepartmentName() { 
            return departmentName;
        }
    
        public void setDepartmentName(String departmentName) { 
            this.departmentName = departmentName;
        }
    
        @Override
        public String toString() { 
            return "Department{" +
                    "id=" + id +
                    ", departmentName='" + departmentName + '\'' +
                    '}';
        }
    }

1.  Employee

package com.example.demo.pojo;
    
    import java.util.Date;
    
    public class Employee { 
    
    
        private Integer id;
        private String lastName;
    
        private String email;
        //1 male, 0 female
        private Integer gender;
        private Department department; //部门
        private Date birth; //生日
    
        public Employee() { 
        }
    
        public Employee(Integer id, String lastName, String email, Integer gender, Department department) { 
            this.id = id;
            this.lastName = lastName;
            this.email = email;
            this.gender = gender;
            this.department = department;
            this.birth = new Date();
        }
    
        public Employee(Integer id, String lastName, String email, Integer gender, Department department,Date birth) { 
            this.id = id;
            this.lastName = lastName;
            this.email = email;
            this.gender = gender;
            this.department = department;
            this.birth = birth;
        }
    
        public Integer getId() { 
            return id;
        }
    
        public void setId(Integer id) { 
            this.id = id;
        }
    
        public String getLastName() { 
            return lastName;
        }
    
        public void setLastName(String lastName) { 
            this.lastName = lastName;
        }
    
        public String getEmail() { 
            return email;
        }
    
        public void setEmail(String email) { 
            this.email = email;
        }
    
        public Integer getGender() { 
            return gender;
        }
    
        public void setGender(Integer gender) { 
            this.gender = gender;
        }
    
        public Department getDepartment() { 
            return department;
        }
    
        public void setDepartment(Department department) { 
            this.department = department;
        }
    
        public Date getBirth() { 
            return birth;
        }
    
        public void setBirth(Date birth) { 
            this.birth = birth;
        }
    
        @Override
        public String toString() { 
            return "Employee{" +
                    "id=" + id +
                    ", lastName='" + lastName + '\'' +
                    ", email='" + email + '\'' +
                    ", gender=" + gender +
                    ", department=" + department +
                    ", birth=" + birth +
                    '}';
        }
    }

## 2.编写dao层 ##

1.  DepartmentDao

package com.example.demo.dao;
    
    import com.example.demo.pojo.Department;
    import org.springframework.stereotype.Repository;
    
    import java.util.Collection;
    import java.util.HashMap;
    import java.util.Map;
    
    @Repository
    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 getDepartment(int id){ 
           return departments.get(id);
        }
    
    }

1.  EmployeeDao

package com.example.demo.dao;
    
    import com.example.demo.pojo.Department;
    import com.example.demo.pojo.Employee;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.context.annotation.Bean;
    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;
    
        //默认数据,需要DepartmentDao
        static{ 
            employees = new HashMap<Integer,Employee>();
    
            employees.put(1001,new Employee(1001,"小明","xiaoming@qq.com",1,new Department(101,"教学部"),new Date()));
            employees.put(1002,new Employee(1002,"小张","xiaozhang@qq.com",1,new Department(102,"教研部"),new Date()));
            employees.put(1003,new Employee(1003,"小李","xiaoli@qq.com",0,new Department(103,"市场部"),new Date()));
            employees.put(1004,new Employee(1004,"小红","xiaohong@qq.com",1,new Department(104,"人事部"),new Date()));
            employees.put(1005,new Employee(1005,"小猪","xiaozhu@qq.com",0,new Department(105,"后勤部"),new Date()));
    
        }
    
        //保存员工
        private static Integer initID = 1006;
        public void save(Employee employee){ 
            if (employee.getId()== null){ 
                employee.setId(initID++);
            }
            employee.setDepartment(departmentDao.getDepartment(employee.getDepartment().getId()));
            employees.put(employee.getId(),employee);
        }
    
        //查询所有员工！
        public Collection<Employee> getAll(){ 
             return employees.values();
        }
    
        //根据id查询员工
        public Employee get(Integer id){ 
            return employees.get(id);
        }
    
        //删除一个员工
        public void delete(Integer id){ 
            employees.remove(id);
        }
    
    }

## 3.编写control层 ##

package com.example.demo.controller;
    
    import com.example.demo.dao.DepartmentDao;
    import com.example.demo.dao.EmployeeDao;
    import com.example.demo.pojo.Department;
    import com.example.demo.pojo.Employee;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.PathVariable;
    import org.springframework.web.bind.annotation.PostMapping;
    import org.springframework.web.bind.annotation.RequestMapping;
    
    import java.util.Collection;
    
    @Controller
    public class EmpController { 
    
        @Autowired
        EmployeeDao employeeDao;
    
        @Autowired
        DepartmentDao departmentDao;
    
        // 查询所有员工
        @RequestMapping("/emplist")
        public String emplist(Model model){ 
            Collection<Employee> employees = employeeDao.getAll();
            model.addAttribute("emps",employees);
            return "emp/list";
        }
    
        // toAddPage
        @RequestMapping("/toAddPage")
        public String toAddPage(Model model){ 
            Collection<Department> departments = departmentDao.getDepartments();
            model.addAttribute("departments",departments);
            return "emp/add";
        }
    
        //addEmp
        @RequestMapping("/addEmp")
        public String addEmp(Employee employee){ 
            System.out.println("测试信息：" + employee);
            //保存到数据库中
            employeeDao.save(employee);
            // 回到员工列表
            return "emp/list";
        }
    
        // 跳转到修改页面
        @RequestMapping("/update/{id}")
        public String update(@PathVariable("id") Integer id,Model model){ 
            System.out.println("测试信息：修改的员工ID为" + id);
            // 根据id查询用户数据
            Employee employee = employeeDao.get(id);
            model.addAttribute("emp",employee);
            Collection<Department> departments = departmentDao.getDepartments();
            model.addAttribute("dept",departments);
            return "emp/update";
        }
    
        // 修改页面
        @PostMapping("/updateEmp")
        public String updateEmp(Employee employee){ 
            employeeDao.save(employee);
            return "emp/list";
        }
    
        // 删除员工
        @GetMapping("/delete/{id}")
        public String deleteEmp(@PathVariable("id") Integer id){ 
            employeeDao.delete(id);
            return "emp/list";
        }
    }

## 4.编写前端页面 ##

1.  公共部分bar

<!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    
    <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/#">Company name</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/#" th:href="@{/user/loginOut}">注销</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 class="nav-link active" href="#" th:class="${activeUrl=='main.html'?'nav-link active':'nav-link'}" th:href="@{/main.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/#" th:href="@{/emplist}" th:class="${activeUrl=='emps.html'?'nav-link active':'nav-link'}">
                        <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>
                        员工管理
                    </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-users">
                            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                            <circle cx="9" cy="7" r="4"></circle>
                            <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                            <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                        </svg>
                        Customers
                    </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>
    
    </body>
    </html>

1.  首页index

<!DOCTYPE html>
    <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>Signin Template for Bootstrap</title>
    		
    		<link href="asserts/css/bootstrap.min.css" rel="stylesheet" th:href="@{/asserts/css/bootstrap.min.css}">
    		
    		<link href="asserts/css/signin.css" rel="stylesheet" th:href="@{/asserts/css/signin.css}">
    	</head>
    
    	<body class="text-center">
    		<form class="form-signin" action="dashboard.html" th:action="@{/user/login}" method="post">
    			<img class="mb-4" src="asserts/img/bootstrap-solid.svg" th:src="@{/asserts/img/bootstrap-solid.svg}" alt="" width="72" height="72">
    			<h1 class="h3 mb-3 font-weight-normal" th:text="#{login.tip}"></h1>
    
    			
    			<p style="color: red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>
    
    
    
    			<label class="sr-only" ></label>
    			<input type="text" class="form-control" name="username" placeholder="Username" th:placeholder="#{login.username}" required="" autofocus="">
    			<label class="sr-only" ></label>
    			<input type="password" class="form-control" name="password" placeholder="Password" th:placeholder="#{login.password}" required="">
    			<div class="checkbox mb-3">
    				<label>
              <input type="checkbox" value="remember-me" th:text="#{login.remember}">
            </label>
    			</div>
    			<button class="btn btn-lg btn-primary btn-block" type="submit" th:text="#{login.btn}">Sign in</button>
    			<p class="mt-5 mb-3 text-muted">© 2017-2018</p>
    			
    			<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>
    		</form>
    
    	</body>
    
    </html>

1.  查询页面list

<!DOCTYPE html>
    
    <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>员工列表</title>
    		
    		<link href="asserts/css/bootstrap.min.css" rel="stylesheet" th:href="@{/asserts/css/bootstrap.min.css}">
    
    		
    		<link href="asserts/css/dashboard.css" rel="stylesheet" th:href="@{/asserts/css/dashboard.css}">
    		<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:insert="~{commons/bar::topbar}"></div>
    
    		<div class="container-fluid">
    			<div class="row">
    				
                    <div th:insert="~{commons/bar::sidebar(activeUrl='emps.html')}"></div>
    
    				<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
    					<h2>
    						<a class="btn btn-sm btn-success" th:href="@{/toAddPage}">增加员工</a>
    					</h2>
    					<div class="table-responsive">
    						<table class="table table-striped table-sm">
    							<thead>
    								<tr>
    									<th>id</th>
    									<th>lastName</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.id}"></td>
    									<td th:text="${emp.lastName}"></td>
    									<td th:text="${emp.email}"></td>
    									
    									<td th:text="${emp.gender==0?'女':'男'}"></td>
    									
    									<td th:text="${emp.department.departmentName}"></td>
    									
    									<td th:text="${#dates.format(emp.birth,'yyyy-MM-dd HH:mm')}"></td>
    									<td>
    										
    										
    										<a class="btn-sm btn-primary" th:href="@{/update/}+${emp.id}">编辑</a>
    										<a class="btn-sm btn-danger" th:href="@{/delete/}+${emp.id}">删除</a>
    									</td>
    								</tr>
    							</tbody>
    						</table>
    					</div>
    				</main>
    			</div>
    		</div>
    
    		
    		
    		<script type="text/javascript" src="asserts/js/jquery-3.2.1.slim.min.js"></script>
    		<script type="text/javascript" src="asserts/js/popper.min.js"></script>
    		<script type="text/javascript" src="asserts/js/bootstrap.min.js"></script>
    
    		
    		<script type="text/javascript" src="asserts/js/feather.min.js"></script>
    		<script> feather.replace() </script>
    
    		
    		<script type="text/javascript" src="asserts/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>

1.  添加页面add

<!DOCTYPE html>
    
    <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>员工列表</title>
    		
    		<link href="asserts/css/bootstrap.min.css" rel="stylesheet" th:href="@{/asserts/css/bootstrap.min.css}">
    
    		
    		<link href="asserts/css/dashboard.css" rel="stylesheet" th:href="@{/asserts/css/dashboard.css}">
    		<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:insert="~{commons/bar::topbar}"></div>
    
    		<div class="container-fluid">
    			<div class="row">
    				
                    <div th:insert="~{commons/bar::sidebar(activeUrl='emps.html')}"></div>
    
    				<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
    					<h2>新增员工</h2>
    					
    					<form th:action="@{/addEmp}">
    						<div class="form-group">
    							<label>LastName</label>
    							<input type="text" name="lastName" class="form-control" placeholder="kuangshen">
    						</div>
    						<div class="form-group">
    							<label>Email</label>
    							<input type="email" name="email" class="form-control" placeholder="24736743@qq.com">
    						</div>
    						<div class="form-group">
    							<label>Gender</label><br/>
    							<div class="form-check form-check-inline">
    								<input class="form-check-input" type="radio" name="gender" value="1">
    								<label class="form-check-label">男</label>
    							</div>
    							<div class="form-check form-check-inline">
    								<input class="form-check-input" type="radio" name="gender" value="0">
    								<label class="form-check-label">女</label>
    							</div>
    						</div>
    						<div class="form-group">
    							<label>department</label>
    							<select class="form-control" name="department.id">
    								<option th:each="dept:${departments}" th:text="${dept.departmentName}" th:value="${dept.id}"></option>
    							</select>
    						</div>
    						<div class="form-group">
    							<label>Birth</label>
    							<input type="text" name="birth" class="form-control" placeholder="kuangstudy">
    						</div>
    						<button type="submit" class="btn btn-primary">添加</button>
    					</form>
    				</main>
    			</div>
    		</div>
    
    		
    		
    		<script type="text/javascript" src="asserts/js/jquery-3.2.1.slim.min.js"></script>
    		<script type="text/javascript" src="asserts/js/popper.min.js"></script>
    		<script type="text/javascript" src="asserts/js/bootstrap.min.js"></script>
    
    		
    		<script type="text/javascript" src="asserts/js/feather.min.js"></script>
    		<script> feather.replace() </script>
    
    		
    		<script type="text/javascript" src="asserts/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>

1.  修改页面update

<!DOCTYPE html>
    
    <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>员工列表</title>
    		
    		<link href="asserts/css/bootstrap.min.css" rel="stylesheet" th:href="@{/asserts/css/bootstrap.min.css}">
    
    		
    		<link href="asserts/css/dashboard.css" rel="stylesheet" th:href="@{/asserts/css/dashboard.css}">
    		<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:insert="~{commons/bar::topbar}"></div>
    
    		<div class="container-fluid">
    			<div class="row">
    				
                    <div th:insert="~{commons/bar::sidebar(activeUrl='emps.html')}"></div>
    
    				<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
    					<h2>修改员工信息</h2>
    					
    					<form th:action="@{/updateEmp}" method="post">
    						
    
    						<div class="form-group">
    							<label>LastName</label>
    							<input type="hidden" name="id" th:value="${emp.id}">
    							<input type="text" name="lastName" class="form-control" placeholder="kuangshen" th:value="${emp.lastName}">
    						</div>
    						<div class="form-group">
    							<label>Email</label>
    							<input type="email" name="email" class="form-control" placeholder="24736743@qq.com" th:value="${emp.email}">
    						</div>
    						<div class="form-group">
    							<label>Gender</label><br/>
    							<div class="form-check form-check-inline">
    								<input class="form-check-input" type="radio" name="gender" value="1" th:checked="${emp.gender==1}">
    								<label class="form-check-label">男</label>
    							</div>
    							<div class="form-check form-check-inline">
    								<input class="form-check-input" type="radio" name="gender" value="0" th:checked="${emp.gender==0}">
    								<label class="form-check-label">女</label>
    							</div>
    						</div>
    						<div class="form-group">
    							<label>department</label>
    							<select class="form-control" name="department.id">
    								<option th:each="dept:${dept}" th:selected="${dept.id==emp.department.id}" th:text="${dept.departmentName}" th:value="${dept.id}"></option>
    							</select>
    						</div>
    						<div class="form-group">
    							<label>Birth</label>
    							<input type="text" name="birth" class="form-control" placeholder="kuangstudy" th:value="${emp.birth}">
    						</div>
    						<button type="submit" class="btn btn-primary">修改</button>
    					</form>
    				</main>
    			</div>
    		</div>
    
    		
    		
    		<script type="text/javascript" src="asserts/js/jquery-3.2.1.slim.min.js"></script>
    		<script type="text/javascript" src="asserts/js/popper.min.js"></script>
    		<script type="text/javascript" src="asserts/js/bootstrap.min.js"></script>
    
    		
    		<script type="text/javascript" src="asserts/js/feather.min.js"></script>
    		<script> feather.replace() </script>
    
    		
    		<script type="text/javascript" src="asserts/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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70]: /images/20211018/9460d8bbdd8b43c6b557d503de3b593a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 1]: /images/20211018/0882be16be6c48d9a2de13852838bace.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 2]: /images/20211018/16dacb1786164df4a13d9496031ea9c3.png
[20190813233319675.png]: /images/20211018/1ab44253ced94541a066c91e15861cab.png
[2019081323334760.png]: /images/20211018/36c77797d5bb448396de178e2ac434e3.png
[20190813233400533.png]: /images/20211018/1421cd2e8b7842648a793bd1749a0fe1.png
[20190813233929688.png]: /images/20211018/692424326ec84485a13cd005ba433173.png
[20190813233941960.png]: /images/20211018/52eaf08824c441fb9f88615994066ebd.png
[20190813235250860.png]: /images/20211018/9600082a20b5417c97565b1dba3c8c1e.png
[20190814000157532.png]: /images/20211018/8771e53222454181900daba33c34a7fd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 3]: /images/20211018/f22d4b27510c4476865519dd7e6d4f04.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 4]: /images/20211018/ee96f9ac50424a7c921c632941be4117.png
[20190815141319340.png]: /images/20211018/16b6b42605e447d69720f094d69d1249.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 5]: /images/20211018/999ff66d81714503a8f776ad515f42fb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 6]: /images/20211018/b6d20aa0a64c4b0fbc6efe1fb010732a.png
[20190815141635296.png]: /images/20211018/82dae9b0d50246acbfe27d41ac69c690.png
[2019081514172870.png]: /images/20211018/27837ec011c64cb7b5f88b9665bf42ca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 7]: /images/20211018/6d1bae6f672e4391b21336ed09e4bcc8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 8]: /images/20211018/360dc679a221432b8564f19e3924fecb.png
[20190815141949554.png]: /images/20211018/61992bae242941cb87e85c56ed2850a0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 9]: /images/20211018/231f18083d0c46d488614ce91c984bf5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 10]: /images/20211018/b7ac57fe75c9429d87ba305643418328.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 11]: /images/20211018/7e05807b15504c5e96c09eae1373848d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 12]: /images/20211018/26b788dd55be4f2cbf17e034e164a422.png
[20190816154833922.png]: /images/20211018/4515d18c959d474b8d066e94d0cb6af2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 13]: /images/20211018/ac036cc7e2684038a7cc766a429e5020.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 14]: /images/20211018/27b2dd73c45e41e585c22bb0ceeb7f6f.png