6、基于SpringBoot的员工管理系统
6.1、环境搭建
1、新建一个SpringBoot项目
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1ZvhfN1p-1659437649451)(C:\Users\行走的面包树\AppData\Roaming\Typora\typora-user-images\image-20220717163253863.png)]](https://img-blog.csdnimg.cn/2bb0d9e70d26495a8591384d180b0897.png)
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HcnzePQ8-1659437649452)(C:\Users\行走的面包树\AppData\Roaming\Typora\typora-user-images\image-20220717163433177.png)]](https://img-blog.csdnimg.cn/bb4cd1e9e1474ba696a1beb0cfce4462.png)
选择配件时勾选SpringWeb和Thymeleaf
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F2g6Xrg0-1659437649453)(C:\Users\行走的面包树\AppData\Roaming\Typora\typora-user-images\image-20220717163501879.png)]](https://img-blog.csdnimg.cn/fab5e9cf17644ca68b7cc226a1d9b365.png)
点击next，然后finish创建完成即可
2、导入静态资源
免费获取静态资源：获取链接在B站狂神SpringBoot视频下评论区
首先创建不存在的静态资源目录public和resources
将html静态资源放置templates目录下
将asserts目录下的css、img、js等静态资源放置static目录下
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-isWJllsh-1659437649453)(C:\Users\行走的面包树\AppData\Roaming\Typora\typora-user-images\image-20220717164121947.png)]](https://img-blog.csdnimg.cn/35f67ca3192645c88e3cd8950b98361c.png)
3、模拟数据库
- 首先补全项目目录
-
在pojo包下新建部门Department和员工Employee两个实体类(导入lombok依赖)
<dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <version>1.18.22</version> </dependency>//部门表 @Data @AllArgsConstructor @NoArgsConstructor public class Department { private Integer id; private String departmentName; }//员工表 @Data @NoArgsConstructor public class Employee { private Integer id; private String lastName; private String email; private Integer gender; private Department department; private Date birth; 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(); } } -
在dao包下新建部门DepartmentDao和员工EmployeeDao的数据库类，模拟初始数据和基本方法
@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 getDepartmentById(Integer id){ return departments.get(id); }@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(1001,"AA","A213567352@qq.com",0,new Department(1001,"教学部"))); employees.put(102,new Employee(1002,"BB","B213567352@qq.com",1,new Department(1002,"市场部"))); employees.put(103,new Employee(1003,"CC","C213567352@qq.com",0,new Department(1003,"教研部"))); employees.put(104,new Employee(1004,"DD","D213567352@qq.com",1,new Department(1004,"运营部"))); employees.put(105,new Employee(1005,"EE","E213567352@qq.com",1,new Department(1005,"后勤部"))); } // 增加一个员工 // 主键自增 private static Integer initID=1006; public void save(Employee employee){ if(employee.getId()==null){ employee.setId(initID++); } employee.setDepartment(departmentDao.getDepartmentById(employee.getDepartment().getId())); employees.put(employee.getId(),employee); } // 查询全部员工信息 public Collection<Employee> getAll(){ return employees.values(); } // 通过id查询员工 public Employee getEmplyeeById(Integer id){ return employees.get(id); } // 删除员工通过id public void delete(Integer id){ employees.remove(id); } }
6.2、首页实现
-
在主程序同级目录下新建
config包用来存放自己的配置类 -
在其中新建一个自己的配置类
MyMvcConfig，进行视图跳转@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"); } } -
我们启动主程序访问测试一下，访问
localhost:8080/或者locahost:8080/index.html
出现以下页面则成功
-
上述测试可以看到页面有图片没有加载出来，且没有css和js的样式，这就是因为我们
html页面中静态资源引入的语法出了问题，在SpringBoot中，推荐使用Thymeleaf作为模板引擎，我们将其中的语法改为Thymeleaf，所有页面的静态资源都需要使用其接管,其中我们在配置文件中关闭他的默认缓存机制# 开启模板缓存（默认值： true ） spring.thymeleaf.cache=false -
注意所有html都需要引入
Thymeleaf命名空间xmlns:th="http://www.thymeleaf.org" -
然后修改所有页面静态资源的引入，使用
@{...}链接表达式例如
index.html中：注意：第一个
/代表项目的classpath，也就是这里的resources目录![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LGIvIzQV-1659437649454)(C:\Users\行走的面包树\AppData\Roaming\Typora\typora-user-images\image-20220717165842282.png)]](https://img-blog.csdnimg.cn/5a5963ad72b040a789cb63fc6207cb09.png)
-
其他页面亦是如此，再次测试访问，正确显示页面
6.3、页面国际化
1、统一properties编码
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ioKWN4ux-1659437649454)(C:\Users\行走的面包树\AppData\Roaming\Typora\typora-user-images\image-20220717170609999.png)]](https://img-blog.csdnimg.cn/89f20acd798744b388db3087518a602c.png)
2、编写i18n国际化资源文件
在resources目录下新建一个i18n包，其中放置国际化相关的配置
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aEsJdnGb-1659437649455)(C:\Users\行走的面包树\AppData\Roaming\Typora\typora-user-images\image-20220717171035836.png)]](https://img-blog.csdnimg.cn/3a8232ae0f804222aa96c5190724150a.png)
其中新建三个配置文件，用来配置语言：
login.properties：无语言配置时候生效login_en_US.properties：英文生效login_zh_CN.properties：中文生效
命名方式是下划线的组合：文件名_语言_国家.properties；
以此方式命名，IDEA会帮我们识别这是个国际化配置包，自动绑定在一起转换成如下的模式：
绑定在一起后，我们想要添加更过语言配置，只需要在大的资源包右键添加到该绑定配置文件即可
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5attJEC9-1659437649455)(C:\Users\行走的面包树\AppData\Roaming\Typora\typora-user-images\image-20220717171224113.png)]](https://img-blog.csdnimg.cn/0f699af454064906a894c8d5e61f5bc1.png)
此时只需要输入区域名即可创建成功，比如输入en_US，就会自动识别
然后打开英文或者中文语言的配置文件，点击Resource Bundle进入可视化编辑页面
进入到可视化编辑页面后，点击加号，添加属性，首先新建一个login.tip代表首页中的提示
然后对该提示分别做三种情况的语言配置，在三个对应的输入框输入即可（注意：IDEA2020.1可能无法保存，建议直接在配置文件中编写）
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l2cCUzpS-1659437649456)(C:\Users\行走的面包树\AppData\Roaming\Typora\typora-user-images\image-20220717171541177.png)]](https://img-blog.csdnimg.cn/3fc7d915c0aa490eb8f331f7b66bcc68.png)
然后打开三个配置文件的查看其中的文本内容，可以看到已经做好了全部的配置
#login.properties
login.tip=请登录
login.password=密码
login.remember=记住我
login.btn=登录
login.username=用户名
login_en_US.properties
login.tip=Please sign in
login.password=password
login.remember=remember me
login.btn=login
login.username=username
login_zh_CN.properties
login.tip=请登录
login.password=密码
login.remember=记住我
login.btn=登录
login.username=用户名
3、配置国际化资源文件名称
在Spring程序中，国际化主要是通过ResourceBundleMessageSource这个类来实现的
Spring Boot通过MessageSourceAutoConfiguration为我们自动配置好了管理国际化资源文件的组件
我们在IDEA中查看以下MessageSourceAutoConfiguration类
@Configuration(proxyBeanMethods = false)
@ConditionalOnMissingBean(name = AbstractApplicationContext.MESSAGE_SOURCE_BEAN_NAME, search = SearchStrategy.CURRENT)
@AutoConfigureOrder(Ordered.HIGHEST_PRECEDENCE)
@Conditional(ResourceBundleCondition.class)
@EnableConfigurationProperties
public class MessageSourceAutoConfiguration {
private static final Resource[] NO_RESOURCES = {};
@Bean
@ConfigurationProperties(prefix = "spring.messages")
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;
}
//......
}
主要了解messageSource()这个方法：
public MessageSource messageSource(MessageSourceProperties properties);
可以看到，它的参数为MessageSourceProperties对象，我们看看这个类
public class MessageSourceProperties {
/**
* Comma-separated list of basenames (essentially a fully-qualified classpath
* location), each following the ResourceBundle convention with relaxed support for
* slash based locations. If it doesn't contain a package qualifier (such as
* "org.mypackage"), it will be resolved from the classpath root.
*/
private String basename = "messages";
/**
* Message bundles encoding.
*/
private Charset encoding = StandardCharsets.UTF_8;
类中首先声明了一个属性basename,默认值为messages;
我们翻译其注释：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jefIOa8r-1659437649456)(C:\Users\行走的面包树\AppData\Roaming\Typora\typora-user-images\image-20220717172551194.png)]](https://img-blog.csdnimg.cn/829cbd23e2b3456aab3efdda469d55e9.png)
- 逗号分隔的基名列表(本质上是完全限定的类路径位置)
- 每个都遵循ResourceBundle约定，并轻松支持于斜杠的位置
- 如果不包含包限定符(例如"org.mypackage"),它将从类路径根目录中解析
意思是：
如果你不在springboot配置文件中指定以.分隔开的国际化资源文件名称的话
- 它默认会去类路径下找messages.properties作为国际化资源文件
- 这里我们自定义了国际化资源文件，因此我们需要在SpringBoot配置文件application.properties中加入以下配置指定我们配置文件的名称
spring.messages.basename=i18n.login
其中i18n是存放资源的文件夹名，login是资源文件的基本名称。
4、首页获取显示国际化值
利用#{...} 消息表达式，去首页index.html获取国际化的值
重启项目，访问首页，可以发现已经自动识别为中文
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4X1R5xlq-1659437649457)(C:\Users\行走的面包树\AppData\Roaming\Typora\typora-user-images\image-20220717173143887.png)]](https://img-blog.csdnimg.cn/78ca6e621bc542649f872e7f8791595c.png)
5、 配置国际化组件实现中英文切换
-
添加中英文切换标签链接
上述实现了登录首页显示为中文，我们在
index.html页面中可以看到两个标签<a class="btn btn-sm">中文</a> <a class="btn btn-sm">English</a>也就对应着视图中的
那么我们怎么通过这两个标签实现中英文切换呢?
首先在这两个标签上加上跳转链接并带上相应的参数
<!--这里传入参数不需要使用?使用key=value--> <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> -
自定义地区解析器组件
怎么实现我们自定义的地区解析器呢？我们首先来分析一波源码
在Spring中有关于国际化的两个类：
Locale：代表地区，每一个Locale对象都代表了一个特定的地理、政治和文化地区LocaleResolver：地区解析器
首先搜索
WebMvcAutoConfiguration，可以在其中找到关于一个方法localeResolver()@Bean @ConditionalOnMissingBean @ConditionalOnProperty(prefix = "spring.mvc", name = "locale") public LocaleResolver localeResolver() { //如果用户配置了,则使用用户配置好的 if (this.mvcProperties.getLocaleResolver() == WebMvcProperties.LocaleResolver.FIXED) { return new FixedLocaleResolver(this.mvcProperties.getLocale()); } //用户没有配置,则使用默认的 AcceptHeaderLocaleResolver localeResolver = new AcceptHeaderLocaleResolver(); localeResolver.setDefaultLocale(this.mvcProperties.getLocale()); return localeResolver; }该方法就是获取
LocaleResolver地区对象解析器：- 如果用户配置了则使用用户配置的地区解析器；
- 如果用户没有配置，则使用默认的地区解析器
我们可以看到默认地区解析器的是
AcceptHeaderLocaleResolver对象，我们点入该类查看源码
可以发现它继承了LocaleResolver接口，实现了地区解析
因此我们想要实现上述自定义的国际化资源生效，只需要编写一个自己的地区解析器，继承LocaleResolver接口，重写其方法即可
我们在config包下新建MyLocaleResolver，作为自己的国际化地区解析器
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qXZutru9-1659437649459)(C:\Users\行走的面包树\AppData\Roaming\Typora\typora-user-images\image-20220717173755540.png)]](https://img-blog.csdnimg.cn/669b313cc43548c48265a42a54d54b4f.png)
我们在index.html中，编写了对应的请求跳转
-
如果点击中文按钮，则跳转到
/index.html(l='zh_CN')页面 -
如果点击English按钮，则跳转到
/index.html(l='en_US')页面
因此我们自定义的地区解析器MyLocaleResolver中，需要处理这两个带参数的链接请求
@Configuration
public class MyLocaleResolver implements LocaleResolver {
// 解析请求
@Override
public Locale resolveLocale(HttpServletRequest request) {
// 获取请求中的语言参数
String languge = request.getParameter("l");
Locale locale = Locale.getDefault();
if(!StringUtils.isEmpty(languge)){
// zh_CN
String[] split = languge.split("_");
locale = new Locale(split[0], split[1]);
}
return locale;
}
//
@Override
public void setLocale(HttpServletRequest request, HttpServletResponse response, Locale locale) {
}
}
为了让我们的区域化信息能够生效，我们需要再配置一下这个组件！在自己的MvcConofig配置类下添加bean；
//自定义的国际化组件生效
@Bean
public LocaleResolver localeResolver() {
return new MyLocaleResolver();
}
我们重启项目，来访问一下，发现点击按钮可以实现成功切换！
点击中文按钮，跳转到http://localhost:8080/index.html?l=zh_CN，显示为中文
点击English按钮，跳转到http://localhost:8080/index.html?l=en_US，显示为英文
6.4、登录功能的实现
登录，也就是当我们点击登录按钮的时候，会进入一个页面，这里进入dashboard页面
因此我们首先在index.html中的表单编写一个提交地址/user/login，并给名称和密码输入框添加name属性为了后面的传参
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f4tAkXvC-1659437649466)(C:\Users\行走的面包树\AppData\Roaming\Typora\typora-user-images\image-20220717174412947.png)]](https://img-blog.csdnimg.cn/527c9d4e4bf940698c99c7c1e81da206.png)
然后编写对应的controller
在主程序同级目录下新建controller包，在其中新建类loginController，处理登录请求
@Controller
public class LoginController {
@RequestMapping("/user/login")
public String login(@RequestParam("username") String username,
@RequestParam("password") String password,
Model model, HttpSession session){
// 具体的业务
if(!StringUtils.isEmpty(username) && "123456".equals(password)){
session.setAttribute("loginUser",username);
return "redirect:/main.html";
}else{
// 告诉用户，登录失败
model.addAttribute("msg","用户名或者密码错误");
return "index";
}
}
}
然后我们在index.html首页中加一个标签用来显示controller返回的错误信息
<p style="color: red" th:text="${msg}"></p>
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-o7NEC4lq-1659437649467)(C:\Users\行走的面包树\AppData\Roaming\Typora\typora-user-images\image-20220717174646749.png)]](https://img-blog.csdnimg.cn/013e84de66ee4840ba7b9d1b4c407252.png)
我们再测试一下，启动主程序，访问localhost:8080
如果我们输入正确的用户名和密码
则重新跳转到dashboard页面，浏览器url为http://localhost:8080/user/login?username=admin&password=123456
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DuPhUPXp-1659437649468)(C:\Users\行走的面包树\AppData\Roaming\Typora\typora-user-images\image-20220717174803565.png)]](https://img-blog.csdnimg.cn/f400db13bd1744629b016975b26f0179.png)
随便输入错误的用户名12，输入错误的密码12
浏览器url为http://localhost:8080/user/login?username=12&password=123456，页面上附有错误提示信息
到此我们的登录功能实现完毕，但是有一个很大的问题，浏览器的url暴露了用户的用户名和密码，这在实际开发中可是重大的漏洞，泄露了用户信息，因此我们需要编写一个映射
我们在自定义的配置类MyMvcConfig中加一句代码
registry.addViewController("/main.html").setViewName("dashboard");
也就是访问/main.html页面就跳转到dashboard页面
然后我们稍稍修改一下LoginController，当登录成功时重定向到main.html页面，也就跳转到了dashboard页面
@Controller
public class LoginController {
@RequestMapping("/user/login")
public String login(@RequestParam("username") String username,
@RequestParam("password") String password,
Model model, HttpSession session){
// 具体的业务
if(!StringUtils.isEmpty(username) && "123456".equals(password)){
session.setAttribute("loginUser",username);
return "redirect:/main.html";
}else{
// 告诉用户，登录失败
model.addAttribute("msg","用户名或者密码错误");
return "index";
}
}
}
我们再次重启测试，输入正确的用户名和密码登陆成功后，浏览器不再携带泄露信息
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hCsEMHGs-1659437649468)(C:\Users\行走的面包树\AppData\Roaming\Typora\typora-user-images\image-20220717175334748.png)]](https://img-blog.csdnimg.cn/54fe883da1f84b7096643b30e2daf2df.png)
但是这又出现了新的问题，无论登不登陆，我们访问localhost/main.html都会跳转到dashboard的页面，这就引入了接下来的拦截器
6.5、登录拦截器
为了解决上述遗留的问题，我们需要自定义一个拦截器；
在config目录下，新建一个登录拦截器类LoginHandlerInterceptor
用户登录成功后，后台会得到用户信息；如果没有登录，则不会有任何的用户信息；
我们就可以利用这一点通过拦截器进行拦截：
当用户登录时将用户信息存入session中，访问页面时首先判断session中有没有用户的信息
如果没有，拦截器进行拦截；
如果有，拦截器放行
因此我们首先在LoginController中当用户登录成功后，存入用户信息到session中
@Controller
public class LoginController {
@RequestMapping("/user/login")
public String login(@RequestParam("username") String username,
@RequestParam("password") String password,
Model model, HttpSession session){
// 具体的业务
if(!StringUtils.isEmpty(username) && "123456".equals(password)){
session.setAttribute("loginUser",username);
return "redirect:/main.html";
}else{
// 告诉用户，登录失败
model.addAttribute("msg","用户名或者密码错误");
return "index";
}
}
然后再在实现自定义的登录拦截器，继承HandlerInterceptor接口
-
其中获取存入的session进行判断，如果不为空，则放行；
-
如果为空，则返回错误消息，并且返回到首页，不放行。
public class LoginHandlerInterceptor implements HandlerInterceptor { @Override 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; }else{ return true; } } }
-
然后配置到bean中注册，在
MyMvcConfig配置类中，重写关于拦截器的方法，添加我们自定义的拦截器，注意屏蔽静态资源及主页以及相关请求的拦截@Override public void addInterceptors(InterceptorRegistry registry) { registry.addInterceptor(new LoginHandlerInterceptor()) .addPathPatterns("/**") .excludePathPatterns("/index.html","/","/user/login","/css/**","/js/**","/img/**"); } -
然后重启主程序进行测试，直接访问
http://localhost:8080/main.html
提示权限不够，请先登录，我们登录一下
进入到dashboard页面
如果我们再直接重新访问http://localhost:8080/main.html，也可以直接直接进入到dashboard页面，这是因为session里面存入了用户的信息，拦截器放行通过![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JpXerfUj-1659437649469)(C:\Users\行走的面包树\AppData\Roaming\Typora\typora-user-images\image-20220717180150518.png)]](https://img-blog.csdnimg.cn/015d76869a64464689d1cfab40edfad5.png)
6.6、展示员工信息——查
1、实现Customers视图跳转
目标：点击dashboard.html页面中的Customers展示跳转到list.html页面显示所有员工信息
因此，我们首先给dashboard.html页面中Customers部分标签添加href属性，实现点击该标签请求/emps路径跳转到list.html展示所有的员工信息
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vEMXlwhd-1659437649469)(C:\Users\行走的面包树\AppData\Roaming\Typora\typora-user-images\image-20220717180700493.png)]](https://img-blog.csdnimg.cn/1db09ab021024a86bd196c32bb0926db.png)
同样修改list.html对应该的代码为上述代码
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xd0yCdaS-1659437649470)(C:\Users\行走的面包树\AppData\Roaming\Typora\typora-user-images\image-20220717180740560.png)]](https://img-blog.csdnimg.cn/02d79a326de94746bd0299807bbfc211.png)
我们在templates目录下新建一个包emp，用来放所有关于员工信息的页面，我们将list.html页面移入该包中
然后编写请求对应的controller，处理/emps请求，在controller包下，新建一个EmployeeController类
@Controller
public class EmployeeController {
// 正常情况下，调用业务层
// 这里我们没有写业务层和数据库 直接调用dao
@Autowired
EmployeeDao employeeDao;
@RequestMapping("/emps")
public String list(Model model){
Collection<Employee> employees = employeeDao.getAll();
model.addAttribute("emps",employees);
return "emp/list";
}
}
然后我们重启主程序进行测试，登录到dashboard页面，再点击Customers，成功跳转到/emps
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z7PYG4be-1659437649470)(C:\Users\行走的面包树\AppData\Roaming\Typora\typora-user-images\image-20220717180900762.png)]](https://img-blog.csdnimg.cn/ca4c41f28c9d4fc6938f11c3b445527a.png)
但是有些问题：
a、我们点击了Customers后，它应该处于高亮状态，但是这里点击后还是普通的样子，高亮还是在Dashboard
b、list.html和dashboard.html页面的侧边栏和顶部栏是相同的，可以抽取出来
2、提取页面公共部分
在templates目录下新建一个commons包，其中新建commons.html用来放置公共页面代码
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HrhYeBSZ-1659437649471)(C:\Users\行走的面包树\AppData\Roaming\Typora\typora-user-images\image-20220717181041289.png)]](https://img-blog.csdnimg.cn/dde41bb30d1143bc8b4bcb8bbb93aa59.png)
利用th:fragment标签抽取公共部分（顶部导航栏和侧边栏）
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--顶部导航栏,利用th:fragment提取出来,命名为topbar-->
<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/#">Sign out</a>
</li>
</ul>
</nav>
<!--侧边栏,利用th:fragment提取出来,命名为sidebar-->
<nav class="col-md-2 d-none d-md-block bg-light sidebar" th:fragment="siderbar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" 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-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>
Dashboard <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 class="nav-link" th:href="@{/emps}">
<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>
</html>
然后删除dashboard.html和list.html中顶部导航栏和侧边栏的代码
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v1sqanXH-1659437649471)(C:\Users\行走的面包树\AppData\Roaming\Typora\typora-user-images\image-20220717181254998.png)]](https://img-blog.csdnimg.cn/ee8b7fa67cc8463ca72e6ec09be09462.png)
我们再次重启主程序测试一下，登陆成功后，可以看到已经没有了顶部导航栏和侧边栏
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bDn3KSQt-1659437649472)(C:\Users\行走的面包树\AppData\Roaming\Typora\typora-user-images\image-20220717181357985.png)]](https://img-blog.csdnimg.cn/8932810fd51847178a337c0fe748ed37.png)
这是因为我们删除了公共部分，还没有引入，我们分别在dashboard.html和list.html删除的部分插入提取出来的公共部分topbar和sidebar
<!--顶部导航栏-->
<div th:replace="~{commons/commons::topbar}" }></div>
<!--侧边栏-->
<div th:replace="~{commons/commons::siderbar}"></div>
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H8RLz0es-1659437649472)(C:\Users\行走的面包树\AppData\Roaming\Typora\typora-user-images\image-20220717181531418.png)]](https://img-blog.csdnimg.cn/19c3f620e89747d9b6f588e7a71a5568.png)
再次重启主程序进行测试，登陆成功后，成功看到侧边栏和顶部栏，代表我们插入成功
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qi4X5aaJ-1659437649472)(C:\Users\行走的面包树\AppData\Roaming\Typora\typora-user-images\image-20220717181558351.png)]](https://img-blog.csdnimg.cn/0f93ae48faaa4759ad498da8f09eee41.png)
3、点击高亮处理
在页面中，使高亮的代码是class="nav-link active"属性
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WthZJwnh-1659437649473)(C:\Users\行走的面包树\AppData\Roaming\Typora\typora-user-images\image-20220717181632050.png)]](https://img-blog.csdnimg.cn/8f2b3e8707be4783bcfe744db63e18ba.png)
我们可以传递参数判断点击了哪个标签实现相应的高亮
首先在dashboard.html的侧边栏标签传递参数active为dashboard.html
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EHQNjmPs-1659437649473)(C:\Users\行走的面包树\AppData\Roaming\Typora\typora-user-images\image-20220717181711956.png)]](https://img-blog.csdnimg.cn/a963834a3ae6411c97a608533107ef75.png)
<!--侧边栏-->
<div th:replace="~{commons/commons::siderbar(active='dashboard.html')}"></div>
同样在list.html的侧边栏标签传递参数active为list.html
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GHmNV3z3-1659437649473)(C:\Users\行走的面包树\AppData\Roaming\Typora\typora-user-images\image-20220717181805213.png)]](https://img-blog.csdnimg.cn/12d3db0413234a7485f7bbf2f72eb1bb.png)
<!--侧边栏-->
<div th:replace="~{commons/commons::siderbar(active='list.html')}"></div>
然后我们在公共页面commons.html相应标签部分利用thymeleaf接收参数active，利用三元运算符判断决定是否高亮
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yBektiZi-1659437649474)(C:\Users\行走的面包树\AppData\Roaming\Typora\typora-user-images\image-20220717181911161.png)]](https://img-blog.csdnimg.cn/8cb6bfa96f2b4247b4feeb10fbce3333.png)
再次重启主程序测试，登录成功后，首先Dashboard高亮，再点击Customers，Customers高亮，成功
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7jzo43p0-1659437649474)(C:\Users\行走的面包树\AppData\Roaming\Typora\typora-user-images\image-20220717182009239.png)]](https://img-blog.csdnimg.cn/8b3193f898a74e00b810fd2f987d8ee9.png)
4、显示员工信息
修改list.html页面，显示我们自己的数据值
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CPmQKooC-1659437649475)(C:\Users\行走的面包树\AppData\Roaming\Typora\typora-user-images\image-20220717182044384.png)]](https://img-blog.csdnimg.cn/147d555c9b7d4d49ac61ad1d18121427.png)
修改完成后，重启主程序，登录完成后查看所有员工信息，成功显示
接下来修改一下性别的显示和date的显示，并添加编辑和删除两个标签，为后续做准备
<div class="container-fluid">
<div class="row">
<div th:replace="~{commons/commons::siderbar(active='list.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="@{/emp}">添加员工</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.getId()}"></td>
<td th:text="${emp.getLastName()}"></td>
<td th:text="${emp.getEmail()}"></td>
<td th:text="${emp.getGender()==0?'女':'男'}"></td>
<td th:text="${emp.department.getDepartmentName()}"></td>
<td th:text="${#dates.format(emp.getBirth(),'yyyy-MM-dd HH:mm:ss')}"></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>
再次重启主程序测试，成功
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U6SFHcp8-1659437649475)(C:\Users\行走的面包树\AppData\Roaming\Typora\typora-user-images\image-20220717182415202.png)]](https://img-blog.csdnimg.cn/a6ce4e1286a844f49ecfa772ad4363f9.png)
6.7、增删改员工实现——CRUD
-
因为在做项目时没有及时保存截图的信息，声明参考了CSDN的Baret-H的博客，链接如下(74条消息) 狂神Spring Boot 员工管理系统 超详细完整实现教程（小白轻松上手~）_Baret-H的博客-CSDN博客_springboot狂神所以在这里不再详细的介绍整个流程，附上项目代码，详情请参考以上链接！
-
项目结构参考
-
EmployeeController
@Controller public class EmployeeController { // 正常情况下，调用业务层 // 这里我们没有写业务层和数据库 直接调用dao @Autowired EmployeeDao employeeDao; @Autowired DepartmentDao departmentDao; @RequestMapping("/emps") public String list(Model model){ Collection<Employee> employees = employeeDao.getAll(); model.addAttribute("emps",employees); return "emp/list"; } @GetMapping("/emp") public String toAddpage(Model model){ // 查出所有部门的信息 Collection<Department> departments = departmentDao.getDepartments(); model.addAttribute("departments",departments); return "emp/add"; } @PostMapping("/emp") public String addEmp(Employee employee){ System.out.println(employee); // 调用业务 保存员工信息 employeeDao.save(employee); //添加的操作 return "redirect:/emps"; } // 跳转修改页面 @GetMapping("/emp/{id}") public String toUpdateEmp(@PathVariable("id") Integer id,Model model){ // 查出原来的数据 Employee employee = employeeDao.getEmplyeeById(id); model.addAttribute("emp",employee); // 查出所有部门的信息 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"; } // 删除员工 @GetMapping("/delemp/{id}") public String deleteEmp(@PathVariable("id")int id ){ employeeDao.delete(id); return "redirect:/emps"; } } -
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" th:href="@{/user/logout}">注销</a> </li> </ul> </nav> <!--侧边栏--> <nav class="col-md-2 d-none d-md-block bg-light sidebar" th:fragment="siderbar"> <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> 订单管理 </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> 产品管理 </a> </li> <li class="nav-item"> <a th:class="${active=='list.html'?'nav-link active':'nav-link'}" th:href="@{/emps}"> <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> 员工管理 </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> 新闻报道 </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> 一体化 </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> -
add.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::siderbar(active='list.html')}"></div> <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4"> <form th:action="@{/emp}" method="post"> <div class="form-group"> <label>LastName</label> <input type="text" class="form-control" name="lastName" placeholder="kuangshen"> </div> <div class="form-group"> <label>Email</label> <input type="email" class="form-control"name="email" placeholder="1176244270@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.getDepartmentName()}" th:value="${dept.getId()}"></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> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <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> <!-- Icons --> <script type="text/javascript" src="asserts/js/feather.min.js"></script> <script> feather.replace() </script> <!-- Graphs --> <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> -
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::siderbar(active='list.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="@{/emp}">添加员工</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.getId()}"></td> <td th:text="${emp.getLastName()}"></td> <td th:text="${emp.getEmail()}"></td> <td th:text="${emp.getGender()==0?'女':'男'}"></td> <td th:text="${emp.department.getDepartmentName()}"></td> <td th:text="${#dates.format(emp.getBirth(),'yyyy-MM-dd HH:mm:ss')}"></td> <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> </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="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> <!-- Icons --> <script type="text/javascript" src="asserts/js/feather.min.js"></script> <script> feather.replace() </script> <!-- Graphs --> <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> -
update.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::siderbar(active='list.html')}"></div> <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4"> <form th:action="@{/updateEmp}" method="post"> <input type="hidden" name="id" th:value="${emp.getId()}"> <div class="form-group"> <label>LastName</label> <input type="text" th:value="${emp.getLastName()}" class="form-control" name="lastName" placeholder="kuangshen"> </div> <div class="form-group"> <label>Email</label> <input type="email" th:value="${emp.getEmail()}" class="form-control" name="email" placeholder="1176244270@qq.com"> </div> <div class="form-group"> <label>Gender</label><br> <div class="form-check form-check-inline"> <input th:checked="${emp.getGender()==1}" 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 th:checked="${emp.getGender()==0}" 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:selected="${dept.getId()==emp.getDepartment().getId()}" th:each="dept:${departments}" th:text="${dept.getDepartmentName()}" th:value="${dept.getId()}"></option> </select> </div> <div class="form-group"> <label>Birth</label> <input th:value="${#dates.format(emp.getBirth(),'yyyy-MM-dd HH:mm:ss')}" type="text" name="birth" class="form-control" placeholder="kuangstudy"> </div> <button type="submit" class="btn btn-primary">修改</button> </form> </main> </div> </div> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <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> <!-- Icons --> <script type="text/javascript" src="asserts/js/feather.min.js"></script> <script> feather.replace() </script> <!-- Graphs --> <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> -
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> <!--顶部导航栏--> <div th:replace="~{commons/commons::topbar}"></div> <div class="container-fluid"> <div class="row"> <!--侧边栏--> <!--传递参数给组件--> <div th:replace="~{commons/commons::siderbar(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" th:src="@{/js/jquery-3.2.1.slim.min.js}" ></script> <script type="text/javascript" th:src="@{/js/popper.min.js}" ></script> <script type="text/javascript" th:src="@{/js/bootstrap.min.js}" ></script> <!-- Icons --> <script type="text/javascript" th:src="@{/js/feather.min.js}" ></script> <script> feather.replace() </script> <!-- Graphs --> <script type="text/javascript" th: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> -
index.html
<!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> <!-- Bootstrap core CSS --> <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"> <!-- Custom styles for this template --> <link th:href="@{/css/signin.css}" rel="stylesheet"> </head> <body class="text-center"> <form class="form-signin" th:action="@{/user/login}"> <img class="mb-4" th:src="@{/img/bootstrap-solid.svg}" alt="" width="72" height="72"> <h1 class="h3 mb-3 font-weight-normal" th:text="#{login.tip}">Please sign in</h1> <!--消息回显 如果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=""> <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" 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>
6.8、错误页面404定制
错误页面404定制：只需要在templates目录下新建一个error包，然后将404.html放入其中，报错SpringBoot就会自动找到这个页面
6.9、注销操作
在我们提取出来的公共commons页面，顶部导航栏处中的标签添加href属性，实现点击发起请求/user/logout
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SEY29WuH-1659437649476)(C:\Users\行走的面包树\AppData\Roaming\Typora\typora-user-images\image-20220729113740991.png)]](https://img-blog.csdnimg.cn/0a83aac3a5df4333a22d5d9323855678.png)
然后编写对应的controller，处理点击注销标签的请求，在LoginController中编写对应的方法，清除session，并重定向到首页
// 注销
@RequestMapping("/user/logout")
public String logout(HttpSession session){
session.invalidate();
return "redirect:/index.html";
}
2974
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
