狂神SpringBoot学习笔记12天-Day 06 基于SpringBoot的员工管理系统
6、基于SpringBoot的员工管理系统
- 写在前面
- 参考CSDN博主Baret-H
- 原文链接(77条消息) 狂神Spring Boot 员工管理系统 超详细完整实现教程(小白轻松上手~)_Baret-H的博客-CSDN博客_狂神说员工管理系统
6.1、环境搭建
1、新建一个SpringBoot项目
选择配件时勾选SpringWeb
和Thymeleaf
点击next
,然后finish
创建完成即可
2、导入静态资源
免费获取静态资源:获取链接在B站狂神SpringBoot视频下评论区
首先创建不存在的静态资源目录public
和resources
将html
静态资源放置templates
目录下
将asserts
目录下的css
、img
、js
等静态资源放置static
目录下
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; //员工由所属的部门@Autowiredprivate 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);}// 删除员工通过idpublic void delete(Integer id){employees.remove(id);} }
6.2、首页实现
在主程序同级目录下新建
config
包用来存放自己的配置类在其中新建一个自己的配置类
MyMvcConfig
,进行视图跳转@Configuration public class MyMvcConfig implements WebMvcConfigurer {@Overridepublic 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
目录其他页面亦是如此,再次测试访问,正确显示页面
6.3、页面国际化
1、统一properties编码
2、编写i18n国际化资源文件
在resources
目录下新建一个i18n
包,其中放置国际化相关的配置
其中新建三个配置文件,用来配置语言:
login.properties
:无语言配置时候生效login_en_US.properties
:英文生效login_zh_CN.properties
:中文生效
命名方式是下划线的组合:文件名_
语言_
国家.properties;
以此方式命名,IDEA会帮我们识别这是个国际化配置包,自动绑定在一起转换成如下的模式:
绑定在一起后,我们想要添加更过语言配置,只需要在大的资源包右键添加到该绑定配置文件即可
此时只需要输入区域名
即可创建成功,比如输入en_US
,就会自动识别
然后打开英文或者中文语言的配置文件,点击Resource Bundle
进入可视化编辑页面
进入到可视化编辑页面后,点击加号,添加属性,首先新建一个login.tip
代表首页中的提示
然后对该提示分别做三种情况的语言配置,在三个对应的输入框输入即可(注意:IDEA2020.1可能无法保存,建议直接在配置文件中编写)
然后打开三个配置文件的查看其中的文本内容,可以看到已经做好了全部的配置
#login.propertieslogin.tip=请登录
login.password=密码
login.remember=记住我
login.btn=登录
login.username=用户名
login_en_US.propertieslogin.tip=Please sign in
login.password=password
login.remember=remember me
login.btn=login
login.username=username
login_zh_CN.propertieslogin.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();}@Beanpublic 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
;
我们翻译其注释:
- 逗号分隔的基名列表(本质上是完全限定的类路径位置)
- 每个都遵循ResourceBundle约定,并轻松支持于斜杠的位置
- 如果不包含包限定符(例如"org.mypackage"),它将从类路径根目录中解析
意思是:
如果你不在springboot配置文件中指定以.分隔开的国际化资源文件名称的话
- 它默认会去类路径下找messages.properties作为国际化资源文件
- 这里我们自定义了国际化资源文件,因此我们需要在SpringBoot配置文件application.properties中加入以下配置指定我们配置文件的名称
spring.messages.basename=i18n.login
其中i18n
是存放资源的文件夹名,login
是资源文件的基本名称。
4、首页获取显示国际化值
利用#{...}
消息表达式,去首页index.html
获取国际化的值
重启项目,访问首页,可以发现已经自动识别为中文
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
,作为自己的国际化地区解析器
我们在index.html
中,编写了对应的请求跳转
如果点击中文按钮,则跳转到
/index.html(l='zh_CN')
页面如果点击English按钮,则跳转到
/index.html(l='en_US')
页面
因此我们自定义的地区解析器MyLocaleResolver
中,需要处理这两个带参数的链接请求
@Configuration
public class MyLocaleResolver implements LocaleResolver {// 解析请求@Overridepublic Locale resolveLocale(HttpServletRequest request) {// 获取请求中的语言参数String languge = request.getParameter("l");Locale locale = Locale.getDefault();if(!StringUtils.isEmpty(languge)){// zh_CNString[] split = languge.split("_");locale = new Locale(split[0], split[1]);}return locale;}//@Overridepublic 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
属性为了后面的传参
然后编写对应的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>
我们再测试一下,启动主程序,访问localhost:8080
如果我们输入正确的用户名和密码
则重新跳转到dashboard
页面,浏览器url为http://localhost:8080/user/login?username=admin&password=123456
随便输入错误的用户名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";}}
}
我们再次重启测试,输入正确的用户名和密码登陆成功后,浏览器不再携带泄露信息
但是这又出现了新的问题,无论登不登陆,我们访问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 {@Overridepublic boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {// 登陆成功之后 有用户的sessionObject 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
配置类中,重写关于拦截器的方法,添加我们自定义的拦截器,注意屏蔽静态资源及主页以及相关请求的拦截@Overridepublic 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里面存入了用户的信息,拦截器放行通过
6.6、展示员工信息——查
1、实现Customers视图跳转
目标:点击dashboard.html
页面中的Customers
展示跳转到list.html
页面显示所有员工信息
因此,我们首先给dashboard.html
页面中Customers
部分标签添加href
属性,实现点击该标签请求/emps
路径跳转到list.html
展示所有的员工信息
同样修改list.html
对应该的代码为上述代码
我们在templates
目录下新建一个包emp
,用来放所有关于员工信息的页面,我们将list.html
页面移入该包中
然后编写请求对应的controller,处理/emps
请求,在controller
包下,新建一个EmployeeController
类
@Controller
public class EmployeeController {// 正常情况下,调用业务层
// 这里我们没有写业务层和数据库 直接调用dao@AutowiredEmployeeDao employeeDao;@RequestMapping("/emps")public String list(Model model){Collection<Employee> employees = employeeDao.getAll();model.addAttribute("emps",employees);return "emp/list";}
}
然后我们重启主程序进行测试,登录到dashboard
页面,再点击Customers
,成功跳转到/emps
但是有些问题:
a、我们点击了Customers
后,它应该处于高亮状态,但是这里点击后还是普通的样子,高亮还是在Dashboard
b、list.html
和dashboard.html
页面的侧边栏和顶部栏是相同的,可以抽取出来
2、提取页面公共部分
在templates
目录下新建一个commons
包,其中新建commons.html
用来放置公共页面代码
利用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/#">Companyname</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
中顶部导航栏和侧边栏的代码
我们再次重启主程序测试一下,登陆成功后,可以看到已经没有了顶部导航栏和侧边栏
这是因为我们删除了公共部分,还没有引入,我们分别在dashboard.html
和list.html
删除的部分插入提取出来的公共部分topbar
和sidebar
<!--顶部导航栏-->
<div th:replace="~{commons/commons::topbar}" }></div>
<!--侧边栏-->
<div th:replace="~{commons/commons::siderbar}"></div>
再次重启主程序进行测试,登陆成功后,成功看到侧边栏和顶部栏,代表我们插入成功
3、点击高亮处理
在页面中,使高亮的代码是class="nav-link active"
属性
我们可以传递参数判断点击了哪个标签实现相应的高亮
首先在dashboard.html
的侧边栏标签传递参数active
为dashboard.html
<!--侧边栏-->
<div th:replace="~{commons/commons::siderbar(active='dashboard.html')}"></div>
同样在list.html
的侧边栏标签传递参数active
为list.html
<!--侧边栏-->
<div th:replace="~{commons/commons::siderbar(active='list.html')}"></div>
然后我们在公共页面commons.html
相应标签部分利用thymeleaf接收参数active
,利用三元运算符判断决定是否高亮
再次重启主程序测试,登录成功后,首先Dashboard
高亮,再点击Customers
,Customers
高亮,成功
4、显示员工信息
修改list.html
页面,显示我们自己的数据值
修改完成后,重启主程序,登录完成后查看所有员工信息,成功显示
接下来修改一下性别的显示和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>
再次重启主程序测试,成功
6.7、增删改员工实现——CRUD
因为在做项目时没有及时保存截图的信息,声明参考了CSDN的Baret-H的博客,链接如下(74条消息) 狂神Spring Boot 员工管理系统 超详细完整实现教程(小白轻松上手~)_Baret-H的博客-CSDN博客_springboot狂神所以在这里不再详细的介绍整个流程,附上项目代码,详情请参考以上链接!
项目结构参考
EmployeeController
@Controller public class EmployeeController {// 正常情况下,调用业务层 // 这里我们没有写业务层和数据库 直接调用dao@AutowiredEmployeeDao employeeDao;@AutowiredDepartmentDao 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
然后编写对应的controller,处理点击注销
标签的请求,在LoginController
中编写对应的方法,清除session,并重定向到首页
// 注销@RequestMapping("/user/logout")public String logout(HttpSession session){session.invalidate();return "redirect:/index.html";}
狂神SpringBoot学习笔记12天-Day 06 基于SpringBoot的员工管理系统相关推荐
- 108页《SpringBoot 学习笔记完整教程》PDF附下载
今天Hydra分享给大家一本108页的<SpringBoot 学习笔记完整教程>,从SpringBoot的基本入门使用,到搭建项目进行代码实战,最终研究底层实现原理,基本涵盖了各个环节,可 ...
- springboot学习笔记:12.解决springboot打成可执行jar在linux上启动慢的问题
springboot学习笔记:12.解决springboot打成可执行jar在linux上启动慢的问题 参考文章: (1)springboot学习笔记:12.解决springboot打成可执行jar在 ...
- SpringBoot(学习笔记)
SpringBoot学习笔记 从今天开始就进入微服务阶段 一些小问题 1.HelloWorld 1.1回顾什么是Spring 1.2什么是SpringBoot 1.3微服务架构 2.第一个Spring ...
- Springboot学习笔记(二)Web开发
前言: 学习B站UP主狂神说视频笔记整理视频链接 狂神笔记链接 上篇笔记链接-Springboot学习笔记(一)快速上手 Web开发 静态资源 在以往的SpringMVC中所有静态资源或者页面应该放在 ...
- SpringBoot 学习笔记
SpringBoot 学习笔记 文章目录 SpringBoot 学习笔记 1. SpringBoot简介 1.1 什么是Spring 1.2 Spring 是如何简化Java开发的 1.3 什么是 S ...
- 【Springboot学习笔记】SpringBoot+Mybatis+Thymeleaf+Layui数据表单从零开始实现按条件模糊分页查询的方法
[Springboot学习笔记]SpringBoot+Mybatis+Thymeleaf+Layui数据表单从零开始实现按条件模糊分页查询的方法 目录 1.搭建环境 1.1直接从网上下载SpringB ...
- SpringBoot学习笔记【part12】Web开发——Thymeleaf模板引擎
SpringBoot 学习笔记 Part12 1. thymeleaf简介 SpringBoot默认不支持 JSP,需要引入第三方模板引擎技术实现页面渲染. Thymeleaf is a modern ...
- SpringBoot学习笔记(3):静态资源处理
SpringBoot学习笔记(3):静态资源处理 在web开发中,静态资源的访问是必不可少的,如:Html.图片.js.css 等资源的访问. Spring Boot 对静态资源访问提供了很好的支持, ...
- springboot学习笔记(五)
一丶注值方式 1.在application.properties文件中注值 首先我们将application.yml中的学生名字和年龄给注释掉,来验证在applic.properties的注值方式. ...
最新文章
- Linux中的In命令
- linux 自动化交互套件 expect 介绍 shell非交互
- vxworks操作系统_【7.10开播】最新自主研发工业操作系统发布会行业top来助阵,邀您共同见证(附报名)...
- softmax实现cifar10分类
- LintCode 1917. 切割剩余金属
- ReportViewer教程(9)-给报表增加页打印日期编号
- idea主题颜色Linux,IntelliJ IDEA更换主题样式分享
- “围棋人机大战”唯一人类的胜利记录将被制作成NFT进行拍卖
- inno setup相关 (二)
- 数据分析中会常犯哪些错误,如何解决? 四
- 桥接模式与路由模式有什么不同
- html 搜索历史记录,使用cookie实现历史搜索记录功能
- WinForm 随手记
- rtx java_如何使用JAVAWEB集成RTX推送消息
- 使用APICloud AVM框架开发预约应用
- Error in file(file, “rt“) : cannot open the connection In addition: Warning message:In file(file, “
- 远控免杀从入门到实践(5)-代码篇-Python
- 2013最新系统 Ghost WIN7+XP 纯净装机纪念珍藏版
- python爬虫实例——session自动登录并爬取相关内容
- JAVA可以编杀毒软件吗??一个菜鸟的疑问