SpringBoot学习(三)-员工管理系统开发（重在理解）

注：此为笔者学习狂神说SpringBoot的笔记，其中包含个人的笔记和理解，仅做学习笔记之用，更多详细资讯请出门左拐B站：狂神说!!!
本文是基于狂神老师SpringBoot教程中的员工管理系统从0到1的实践和理解。该系统应用SpringBoot、SpringMVC、Mybatis、thymeleaf模板引擎的等框架，方便读者理解网站搭建流程和注意点。本文重在理解，建议和代码结合理解，并实践。

员工管理系统

1、准备工作

去bookstarap 模板中下载

在这里插入图片描述

导入页面

在这里插入图片描述

资源放在static上面

在这里插入图片描述

创建实体类

在这里插入图片描述

导入依赖 lombok 会使@data：会将属性用到的方法：set、get、tostring，有参和无参构造方法自动装配

在这里插入图片描述

创建模拟数据库

在这里插入图片描述

加上注解@Repository

在这里插入图片描述

将有参构造的注解@删除，由于时间一般情况下，都是默认配置的，所以自己配的话，可以通过有参函数中，new Date（）赋给时间属性，否则，不删掉有参构造（有Date属性）的注解，将会导致赋值时，难办。

在这里插入图片描述

引用类型Department要加上 new ，因为加载资源的方式，是先静态static，再到@Autowired的资源的

在这里插入图片描述

添加数据库的基本操作

在这里插入图片描述

2、首页实现

不建议在 controller 这里配置，最好去 config 中的springmvc扩展配置中配置，但是css静态资源加载不进来。

在这里插入图片描述

注：如果有几个项目有网站的，若没关，都会占用8080端口的，导致项目的网站运行不出来，可以改一下端口；或移除其他项目。
如下，效果一样，但是css静态资源加载不进来。

在这里插入图片描述

所以需要把下载过来的模板修改为 Thymeleaf模板引擎所支持的格式结构，对照Thymeleaf的支持文档（去官网下载）

在这里插入图片描述

1）修改登录界面

修改加载的格式，让静态资源css可以被加载进来

在这里插入图片描述

更改测试的时候，可以关闭Thymeleaf的模板缓存
修改完，记得开启模板引擎的缓存，不然跑不起来

在这里插入图片描述

清理浏览器的缓存

在这里插入图片描述

主要是修改静态资源的链接，在前面加 th：然后会发现资源的图标恢复

在这里插入图片描述

2）修改404页面

在这里插入图片描述

不用改在线链接，只改本地的

在这里插入图片描述

3）修改dashboard页面

在这里插入图片描述

4）修改list页面

在这里插入图片描述

用了 @ 符号的的好处： @ 之后的（/）相当于万能目录classpath，可以万能匹配不管项目的http链接怎么变，都能加载到静态资源
配置了sever.servlet.context-path= 后， 8080会失效的

在这里插入图片描述

结论：
1.首页配置:注意点，所有页面的静态资源都需要使用thymeleaf接管;

3、页面国际化

1）准备国际化的东西

创建 i18n 文件夹（国际化的缩写）

在这里插入图片描述

手动添加配置文件

在这里插入图片描述

idea的可视化视图：可以映射到配置文件

在这里插入图片描述

要去看源码，我们自己正常配置的，理解SpringBoot怎么识别国际化的

在这里插入图片描述

赋值的

在这里插入图片描述

通过源码找到SpringBoot自动装配的默认配置信息，这样自己才知道，自己要配多少，才有用

在这里插入图片描述

2）修改全局配置文件

在配置文件中配置国际化，让国际化生效

在这里插入图片描述

国际化消息的格式标签：去查Thymeleaf文档

在这里插入图片描述

先修改一个，看#{}格式是否生效，别一下子全部改完

在这里插入图片描述

修改不成功

在这里插入图片描述

修改一下：

在这里插入图片描述

理解赋的值放里面和外面的区别：一般像按钮、选择框等控件放外面才生效，一般的基本信息赋值放里面就可以了，基本用 th:text ,其余看语境。

3）实现点击按钮 *改变国际化的信息

在这里插入图片描述

去看官方文档，知道自己该配置什么东西

在这里插入图片描述

找到MessageCodeResolver

在这里插入图片描述

查找AcceptHeaderLocalContextResolver类

在这里插入图片描述

又去找一下RequestMappingHandlerMapping类

在这里插入图片描述

找到了localeResolver类，理解里面的要求，为我们用户自配找到依据
什么什么default就是默认的！！！！！！！

在这里插入图片描述

@ConditionalOnMissingBean：生效的话，会让bean失效，按照这里的意思，就是说，如果有用户自定义配置，就会让SpringBoot自动装配的bean失效。

找到AcceptHeaderLocaleResolver类去看看

在这里插入图片描述

得知这个类继承了LocaleResolver地区解调器接口，

在这里插入图片描述

实现自己的LocaleResolver国际化解析器==实现地区解调器接口

依据：

在这里插入图片描述

具体操作：
一点击按钮， l 就会把消息传到后端

在这里插入图片描述

解析请求

在这里插入图片描述

在配置类中，注册国际化组件的@bean到SpringBoot中

在这里插入图片描述

修改：

在这里插入图片描述

default打开页面默认的语言界面，由于浏览器默认一开始就是中文的，所以语法出错，也会返回中文

结果：

在这里插入图片描述

结论：

在这里插入图片描述

4、登录功能实现

1）测试跳转功能

修改index.html页面

在这里插入图片描述

创建Logincontroller类，注：先测试一下能否正常跳转页面，写一步，测一步

在这里插入图片描述

2）前端传输数据到后端，并验证登录

修改index.html页面

在这里插入图片描述

后端获取数据。注：有@ResponseBody就跳不了视图，想要跳视图，把它去掉

在这里插入图片描述

修改后，登录成功，但是登陆失败后，没有提示

在这里插入图片描述

3）登陆失败信息回传

修改index页面，让回传信息msg，有地方放和显示
去网页审查元素，定位一下，可以在那放回传的提示信息

在这里插入图片描述

定位标签
去Thymeleaf.pdf里，找判断参数是否为空的方法
修改一下index页面，isEmpty（msg）：msg是否为空，不为空，返回 false，not+false=true，显示文本。

在这里插入图片描述

4）登陆成功之后，URL有问题

思路

访问那个页面，能映射过来就好了

在这里插入图片描述

在管理映射路径的类里修改，此程序在 MyMvcConfig 中

在这里插入图片描述

修改LoginController，登录验证成功后，添加：redirct：/ 让页面跳转，更像网页跳转的情况,一个接一个。

在这里插入图片描述

问题：无论登不登录，都能进后台页面，所以要配置拦截器！！！！！！！！！！

5）登录拦截器

创建自定义拦截器LoginHandlerInterceptor 继承 HandlerInterceptor拦截器接口

在这里插入图片描述

登录成功后，用户名自定义设置显示

在这里插入图片描述

登录成功后，获得了参数 loginUser ，返回true，随便切换都行

在这里插入图片描述

在用户自定义配置的类MyMvcConfig里面，声明这个拦截器方法（并不需要注册成一个bean，声明就好）

在这里插入图片描述

修改Dashboard的元素Company name

在这里插入图片描述

修改dashboard页面

在这里插入图片描述

效果：用同一个浏览器会有缓存，也可以直接访问的，所以清理浏览器缓存或者关掉浏览器，或者换一个浏览器。

在这里插入图片描述

过程：

继承接口→添加参数并设置username→拦截器条件构造→声明拦截器与拦截链接

5、展示员工列表

1）自己的员工查询页面

登录功能已经实现，接下来修改前端员工的的列表展示，点员工管理，然后跳到自己的员工查询页面

修改dashboard页面，去掉多余的效果标签（CSS）

在这里插入图片描述

复制一份list.html到emp中，以便区分

在这里插入图片描述

新建EmployController类，用来跳转页面，并设置数据

在这里插入图片描述

实现页面的一连串跳转

在这里插入图片描述

修改list.html页面，让点击了员工管理跳转到list页面

在这里插入图片描述

实现点击 list页面的跳转循环

在这里插入图片描述

2）抽取界面元素Fragments的 insert标签

主界面和从界面的界面元素相同的话，抽取相同的界面元素

在这里插入图片描述

commons页面路径，main页面路径下的哪一个位置

在这里插入图片描述

抽取侧边栏，它可以作为一个组件，插入到其他页面

在这里插入图片描述

插入 list页面中，注意格式

在这里插入图片描述

插入后效果是一样的

在这里插入图片描述

删掉list的顶部栏，也使用插入的

在这里插入图片描述

修改dashboard页面的顶部导航栏，使用 th:fragment=""定义可引用的部分

在这里插入图片描述

将dashboard页面的顶部导航栏作为控件，插入到list页面，效果和自定义的一样

在这里插入图片描述

3）替换界面元素的Fragment的 replace标签，可以理解为引用

引用的话，就可以，传递参数

新建一个 commons界面（不显示，作为工具页面），作为公共界面，用来replace，并实现改一个地方，其它地方同时生效

在这里插入图片描述

修改公共页面commons，将首页点击设为 main.html ,跳转到登陆成功后的第一个页面

在这里插入图片描述

修改dashboard和list页面，实现代码的复用，都

在这里插入图片描述

效果：

在这里插入图片描述

4）设置点击的光标

在这里插入图片描述

在dashboard和list页面发送光标参数main.html

在这里插入图片描述

在commons中接收光标参数main.html，并设置条件语句判断，有接收到，则亮，没有接收到，则不亮

在这里插入图片描述

效果：

在这里插入图片描述

可以理解为引用，然后传参数

在这里插入图片描述

5）list显示员工的信息

在这里插入图片描述

td：加粗、居中

添加操作

在这里插入图片描述

springboot内部嵌入了一些CSS样式，所有只要指定类，就可以自动使用类选择器，来修饰按钮
显示出现问题，修改就好

在这里插入图片描述

显示信息过程：

添加表格表项→添加dao取出的数据（注意中间参数）→添加管理操作（注意CSS样式）→修改信息的格式（查表）

6、添加员工实现

1）按钮提交

步骤如下：

在这里插入图片描述

添加添加按钮，添加超链接

在这里插入图片描述

点击后的请求是get请求

2）设置链接的跳转

添加add页面

复制一份list.html，命名为add.html，只需修改表单部分即可

在这里插入图片描述

表单添加的位置

在这里插入图片描述

3）找表单样式

找表单样式，去bookstrap找

在这里插入图片描述

找自己喜欢的表单，改就好了

在这里插入图片描述

表单形式

在这里插入图片描述

4）修改表单的内容

先复制一份 list.html 到 add.html 中
添加各自的name属性（没有name，无法提交），并对应实体类的属性

在这里插入图片描述

name和value：name一定要对应实体类的信息，否则后续操作，会报错，数据传输错误

5）获取数据

利用dao，获取departments的所有部门数据

在这里插入图片描述

model传递参数，内容就是：所有部门的数据，传入页面当中去

修改下拉列表的部门数据

在这里插入图片描述

6）表单链接的特殊用法post

同一个链接的不同的用法，区分开来，方便接收后，功能的实现
Post接收，专门用于接收表单的链接

在这里插入图片描述

先保证逻辑是对的，然后再往下，写代码，逻辑不能错
注意：redirect的使用格式： redirect:/emps，别用中文输入法输入。
区分forward和redirect：去找thymeleaf的源码中的视图解析器

在这里插入图片描述

理解视图解析器里面的内容

在这里插入图片描述

7）保存员工信息

保存员工信息，并显示在页面上

在这里插入图片描述

处理错误

在这里插入图片描述

8）遇到问题

在这里插入图片描述

绑定数据失败，验证employee失败了

在这里插入图片描述

9）格式问题

springboot自动配置了 dd/mm/yyyy

在这里插入图片描述

格式错了！！！

找源码，看底层，默认的

在这里插入图片描述

找默认配置信息的另一种方法：从application.properties中找

在这里插入图片描述

所以，自定义的格式会报错，因为程序采取默认的格式，这是springboot自动装配的原因

自定义的时间格式：需要在application.properties配置

在这里插入图片描述

注意点

在这里插入图片描述

我们接收的是一个对象：employee，只需要提交一个属性：id
save（）方法保存一个指定id的employee
总结：设置按钮，添加超链接→在controller中设置链接跳转链接→修改表单内容th→在controller中利用引用类型dao，来获取数据，设置传输参数→设置表单跳转链接→保存信息→处理格式问题