• （狂神）员工管理系统项目

    目录

    ⭐最终代码

    一、引入static静态资源

     ⚪引入lombok依赖

    二、创建实体类

    1.department

    2.employee

    三、创建Dao层（模拟数据）

    1.DepartmentDao  

    2.EmployeeDao

    四、访问首页

    方式一：

    方式二：

    ⚪在application.properties中关闭模板引擎的缓存 

    😵注意！

    五、页面国际化（中英文切换）

    1.安装插件，实现可视化配置

    2.配置文件的真实位置

    3.在html代码中进行使用 

    4.最终效果

    ⚪总结

    1.我们如果需要在项目中进行按钮自动切换，需要自定义一个LocalResolver

    2.记得将写的组件配置到spring容器中（加上@Bean）  

    六、登录功能

    1.创建控制层

    2.在index.html中引入

    七、登录拦截器

    八、展示员工列表

    1.提取公共页面

    2.控制层

    3.列表循环展示

    九、添加功能

    1.提交按钮

    2.跳转到添加页面

    ①控制层

    ②add页面

    3.添加成功

    ⚪时间日期格式化

    4.返回首页

    十、修改功能

    1.修改页面

    2.跳转&控制层

    3. 最终效果

    十一、删除功能

    1.删除

    2.控制层

    3.最终效果 

    ⚪注销

    ⭐最终代码

    （狂神）员工管理系统项目（SpringBoot）-Java文档类资源-CSDN文库

    一、引入static静态资源

    狂神SpringBoot静态资源文件_RONG LU.的博客-CSDN博客_狂神springboot静态资源

     ⚪引入lombok依赖

    1. <dependency>
    2.     <groupId>org.projectlombokgroupId>
    3.     <artifactId>lombokartifactId>
    4. dependency>

    二、创建实体类

    1.department

    1. //部门表
    2. @Data
    3. @AllArgsConstructor
    4. @NoArgsConstructor
    5. public class Department {
    6.     private Integer id;
    7.     private String departmentName;
    8. }

    2.employee

    1. @Data
    2. @AllArgsConstructor //有参构造
    3. @NoArgsConstructor  //无参构造
    4. public class Employee {
    5.     private Integer id;
    6.     private String lastName;
    7.     private String email;
    8.     private Integer gender;//0：女 1：男
    9.  
    10.     private Department department;
    11.     private Date birth;
    12.  
    13.     public Employee(Integer id, String lastName, String email, Integer gender, Department department) {
    14.         this.id = id;
    15.         this.lastName = lastName;
    16.         this.email = email;
    17.         this.gender = gender;
    18.         this.department = department;
    19.         //默认创建日期
    20.         this.birth = new Date();
    21.     }
    22. }

    三、创建Dao层（模拟数据）

    1.DepartmentDao  

    1. //部门dao
    2. @Repository
    3. public class DepartmentDao {
    4.     //模拟数据库中的数据
    5.     private static Map departments = null;
    6.  
    7.     static {
    8.         //创建一个部门表
    9.         departments = new HashMap();
    10.         departments.put(101,new Department(101,"前端"));
    11.         departments.put(102,new Department(102,"后台"));
    12.         departments.put(103,new Department(103,"测试"));
    13.         departments.put(104,new Department(104,"运维"));
    14.         departments.put(105,new Department(105,"项目经理"));
    15.     }
    16.  
    17.     //获得所有部门信息
    18.     public Collection getDepartments(){
    19.         return departments.values();
    20.     }
    21.  
    22.     //通过id得到部门
    23.     public Department getDepartmentById(Integer id){
    24.         return departments.get(id);
    25.     }
    26. }

    2.EmployeeDao

    1. @Repository
    2. public class EmployeeDao {
    3.     //模拟数据库中的数据
    4.     private static Map employees = null;
    5.     //员工有所属部门
    6.     @Autowired
    7.     private DepartmentDao departmentDao;
    8.     static{
    9.         employees = new HashMap();
    10.         employees.put(1001,new Employee(1001,"aa","741852963@qq.com",1,new Department(101,"前端")));
    11.         employees.put(1002,new Employee(1002,"bb","963852741@qq.com",0,new Department(102,"后台")));
    12.         employees.put(1003,new Employee(1003,"cc","123685748@qq.com",1,new Department(103,"测试")));
    13.         employees.put(1004,new Employee(1004,"dd","987321654@qq.com",0,new Department(104,"运维")));
    14.         employees.put(1005,new Employee(1005,"ee","951753852@qq.com",1,new Department(105,"项目经理")));
    15.     }
    16.     //主键自增
    17.     private static Integer initId = 1006;
    18.     //增加一个员工
    19.     public void save(Employee employee){
    20.         if (employee.getId() == null){
    21.             employee.setId(initId++);
    22.         }
    23.         employee.setDepartment(departmentDao.getDepartmentById(employee.getDepartment().getId()));
    24.  
    25.         employees.put(employee.getId(),employee);
    26.     }
    27.     
    28.     //查询全部员工信息
    29.     public Collection getAll(){
    30.         return employees.values();
    31.     }
    32.     
    33.     //通过id查询员工
    34.     public Employee getEmployeeById(Integer id){
    35.         return employees.get(id);
    36.     }
    37.     
    38.     //删除员工
    39.     public void delete(Integer id){
    40.         employees.remove(id);
    41.     }
    42. }

    四、访问首页

    方式一：

    1. @Controller
    2. public class IndexController {
    3.     @RequestMapping({"/","/index.html"})
    4.     public String index(){
    5.         return "index";
    6.     }
    7. }

    方式二：

    1. @Configuration
    2. public class MyMvcConfig implements WebMvcConfigurer {
    3.     @Override
    4.     public void addViewControllers(ViewControllerRegistry registry) {
    5.         registry.addViewController("/").setViewName("index");
    6.         registry.addViewController("/index.html").setViewName("index");
    7.     }
    8. }

    ⚪在application.properties中关闭模板引擎的缓存 

    1. #关闭模板引擎的缓存
    2. spring.thymeleaf.cache=false

    😵注意！

    所有页面的静态资源都需要使用thymeleaf接管  @{}         

    五、页面国际化（中英文切换）

    1.安装插件，实现可视化配置

    此时properties文件中的内容：

    2.配置文件的真实位置

    3.在html代码中进行使用 

    4.最终效果

    ⚪总结

    1.我们如果需要在项目中进行按钮自动切换，需要自定义一个LocalResolver

    1. public class MyLocalResolver implements LocaleResolver {
    2.  
    3.     //解析请求
    4.     @Override
    5.     public Locale resolveLocale(HttpServletRequest request) {
    6.         //获取请求中的语言参数
    7.         String language = request.getParameter("l");
    8.  
    9.         // 如果没有就使用默认的
    10.         Locale locale = Locale.getDefault();
    11.  
    12.         //如果请求的链接携带了地区化的参数
    13.         if (!StringUtils.isEmpty(language)){
    14.             //zh_CN
    15.             String[] split = language.split("_");
    16.             //国家、地区
    17.             locale = new Locale(split[0], split[1]);
    18.         }
    19.         return locale;
    20.     }
    21.  
    22.     @Override
    23.     public void setLocale(HttpServletRequest request, HttpServletResponse response, Locale locale) {
    24.  
    25.     }
    26. }

    2.记得将写的组件配置到spring容器中（加上@Bean）  

    1. @Configuration
    2. public class MyMvcConfig implements WebMvcConfigurer {
    3.     @Override
    4.     public void addViewControllers(ViewControllerRegistry registry) {
    5.         registry.addViewController("/").setViewName("index");
    6.         registry.addViewController("/index.html").setViewName("index");
    7.     }
    8.  
    9.     //自定义的国际化组件生效
    10.     @Bean
    11.     public LocaleResolver localeResolver(){
    12.         return new MyLocalResolver();
    13.     }
    14. }

    六、登录功能

    1.创建控制层

    1. @Controller
    2. public class LoginController {
    3.     @RequestMapping("/user/login")
    4.     public String login(
    5.             @RequestParam("username") String username,
    6.             @RequestParam("password") String password,
    7.             Model model){
    8.         //具体的业务
    9.         if(!StringUtils.isEmpty(username) && "123456".equals(password)){
    10.             return "redirect:/main.html";
    11.         }else {
    12.             //登陆失败
    13.             model.addAttribute("msg","用户名或密码错误");
    14.             return "index";
    15.         }
    16.     }
    17. }

    2.在index.html中引入

    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. 	<head>
    4. 		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    5. 		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    6. 		<meta name="description" content="">
    7. 		<meta name="author" content="">
    8. 		<title>Signin Template for Bootstraptitle>
    9. 		
    10. 		<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    11. 		
    12. 		<link th:href="@{/css/signin.css}" rel="stylesheet">
    13. 	head>
    14.  
    15. 	<body class="text-center">
    16. 		<form class="form-signin" th:action="@{/user/login}">
    17. 			<img class="mb-4" th:src="@{/img/bootstrap-solid.svg}" alt="" width="72" height="72">
    18. 			<h1 class="h3 mb-3 font-weight-normal" th:text="#{login.tip}">Please sign inh1>
    19. 			<label class="sr-only" th:text="#{login.username}">Usernamelabel>
    20.  
    21. 			
    22. 			<P style="color: red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}">P>
    23.  
    24. 			<input type="text" name="username" class="form-control" th:placeholder="#{login.username}" required="" autofocus="">
    25. 			<label class="sr-only" th:text="#{login.password}">Passwordlabel>
    26. 			<input type="password" name="password" class="form-control" th:placeholder="#{login.password}" required="">
    27. 			<div class="checkbox mb-3">
    28. 				<label>
    29.           <input type="checkbox" value="remember-me" th:text="#{login.remember}">
    30.         label>
    31. 			div>
    32. 			<button class="btn btn-lg btn-primary btn-block" type="submit" th:text="#{login.btn}">Sign inbutton>
    33. 			<p class="mt-5 mb-3 text-muted">© 2022-2023p>
    34. 			<a class="btn btn-sm" th:href="@{/index.html(l='zh_CN')}">中文a>
    35. 			<a class="btn btn-sm" th:href="@{/index.html(l='en_US')}">Englisha>
    36. 		form>
    37. 	body>
    38. html>

      

    七、登录拦截器

    1. public class LoginHandlerInterceptor implements HandlerInterceptor {
    2.     @Override
    3.     public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
    4.         //登录成功之后，应该有用户的session
    5.         Object loginUser = request.getSession().getAttribute("loginUser");
    6.         if (loginUser == null){
    7.             //没有登录
    8.             request.setAttribute("msg","没有权限，请先登录！");
    9.             request.getRequestDispatcher("/index.html").forward(request,response);
    10.             return false;
    11.         }else {
    12.             return true;
    13.         }
    14.     }
    15. }

    在控制层中添加session 

    1. @Configuration
    2. public class MyMvcConfig implements WebMvcConfigurer {
    3.     @Override
    4.     public void addViewControllers(ViewControllerRegistry registry) {
    5.         registry.addViewController("/").setViewName("index");
    6.         registry.addViewController("/index.html").setViewName("index");
    7.         registry.addViewController("/main.html").setViewName("dashboard");
    8.     }
    9.  
    10.     //自定义的国际化组件生效
    11.     @Bean
    12.     public LocaleResolver localeResolver(){
    13.         return new MyLocalResolver();
    14.     }
    15.  
    16.     @Override
    17.     public void addInterceptors(InterceptorRegistry registry) {
    18.         registry.addInterceptor(new LoginHandlerInterceptor())
    19.                 .addPathPatterns("/**")
    20.                 .excludePathPatterns("/index.html","/","/user/login","/css/*","/js/**","/img/**");
    21. //                .excludePathPatterns("/index.html","/","/user/login","/static/**");
    22.     }
    23. }

    八、展示员工列表

    1.提取公共页面

    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    4. <nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0" th:fragment="topbar">
    5.     <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#" th:text="${session.loginUser}">a>
    6.     <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
    7.     <ul class="navbar-nav px-3">
    8.         <li class="nav-item text-nowrap">
    9.             <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">注销a>
    10.         li>
    11.     ul>
    12. nav>
    15. <nav class="col-md-2 d-none d-md-block bg-light sidebar" th:fragment="sidebar">
    16.     <div class="sidebar-sticky">
    17.         <ul class="nav flex-column">
    18.             <li class="nav-item">
    19.                         <a th:class="${active=='main.html'?'nav-link active':'nav-link'}" th:href="@{/index.html}">
    20.                             <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">
    21.                                 <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z">path>
    22.                         <polyline points="9 22 9 12 15 12 15 22">polyline>
    23.                     svg>
    24.                     首页 <span class="sr-only">(current)span>
    25.                 a>
    26.             li>
    27.             <li class="nav-item">
    28.                 <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
    29.                     <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">
    30.                         <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z">path>
    31.                         <polyline points="13 2 13 9 20 9">polyline>
    32.                     svg>
    33.                     Orders
    34.                 a>
    35.             li>
    36.             <li class="nav-item">
    37.                 <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
    38.                     <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">
    39.                         <circle cx="9" cy="21" r="1">circle>
    40.                         <circle cx="20" cy="21" r="1">circle>
    41.                         <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6">path>
    42.                     svg>
    43.                     Products
    44.                 a>
    45.             li>
    46.             <li class="nav-item">
    47.                 <a th:class="${active=='list.html'?'nav-link active':'nav-link'}" th:href="@{/emps}">
    48.                     员工管理
    49.                 a>
    50.             li>
    51.             <li class="nav-item">
    52.                 <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
    53.                     <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">
    54.                         <line x1="18" y1="20" x2="18" y2="10">line>
    55.                         <line x1="12" y1="20" x2="12" y2="4">line>
    56.                         <line x1="6" y1="20" x2="6" y2="14">line>
    57.                     svg>
    58.                     Reports
    59.                 a>
    60.             li>
    61.             <li class="nav-item">
    62.                 <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
    63.                     <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">
    64.                         <polygon points="12 2 2 7 12 12 22 7 12 2">polygon>
    65.                         <polyline points="2 17 12 22 22 17">polyline>
    66.                         <polyline points="2 12 12 17 22 12">polyline>
    67.                     svg>
    68.                     Integrations
    69.                 a>
    70.             li>
    71.         ul>
    72.  
    73.         <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
    74.             <span>Saved reportsspan>
    75.             <a class="d-flex align-items-center text-muted" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
    76.                 <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>
    77.             a>
    78.         h6>
    79.         <ul class="nav flex-column mb-2">
    80.             <li class="nav-item">
    81.                 <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
    82.                     <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">
    83.                         <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z">path>
    84.                         <polyline points="14 2 14 8 20 8">polyline>
    85.                         <line x1="16" y1="13" x2="8" y2="13">line>
    86.                         <line x1="16" y1="17" x2="8" y2="17">line>
    87.                         <polyline points="10 9 9 9 8 9">polyline>
    88.                     svg>
    89.                     Current month
    90.                 a>
    91.             li>
    92.             <li class="nav-item">
    93.                 <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
    94.                     <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">
    95.                         <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z">path>
    96.                         <polyline points="14 2 14 8 20 8">polyline>
    97.                         <line x1="16" y1="13" x2="8" y2="13">line>
    98.                         <line x1="16" y1="17" x2="8" y2="17">line>
    99.                         <polyline points="10 9 9 9 8 9">polyline>
    100.                     svg>
    101.                     Last quarter
    102.                 a>
    103.             li>
    104.             <li class="nav-item">
    105.                 <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
    106.                     <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">
    107.                         <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z">path>
    108.                         <polyline points="14 2 14 8 20 8">polyline>
    109.                         <line x1="16" y1="13" x2="8" y2="13">line>
    110.                         <line x1="16" y1="17" x2="8" y2="17">line>
    111.                         <polyline points="10 9 9 9 8 9">polyline>
    112.                     svg>
    113.                     Social engagement
    114.                 a>
    115.             li>
    116.             <li class="nav-item">
    117.                 <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
    118.                     <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">
    119.                         <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z">path>
    120.                         <polyline points="14 2 14 8 20 8">polyline>
    121.                         <line x1="16" y1="13" x2="8" y2="13">line>
    122.                         <line x1="16" y1="17" x2="8" y2="17">line>
    123.                         <polyline points="10 9 9 9 8 9">polyline>
    124.                     svg>
    125.                     Year-end sale
    126.                 a>
    127.             li>
    128.         ul>
    129.     div>
    130. nav>
    131. html>

    2.控制层

    1. @Controller
    2. public class EmployeeController {
    3.     //查询所有的员工
    4.     @Autowired
    5.     EmployeeDao employeeDao;
    6.  
    7.     @RequestMapping("/emps")
    8.     public String list(Model model){
    9.         Collection employees = employeeDao.getAll();
    10.         model.addAttribute("emps",employees);
    11.         return "emp/list";
    12.     }
    13. }

     使用（）传递参数，完成接收判断

    3.列表循环展示

    1. html>
    3. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    4.  
    5. 	<head>
    6. 		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    7. 		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    8. 		<meta name="description" content="">
    9. 		<meta name="author" content="">
    10.  
    11. 		<title>Dashboard Template for Bootstraptitle>
    12. 		
    13. 		<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    14.  
    15. 		
    16. 		<link th:href="@{/css/dashboard.css}" rel="stylesheet">
    17. 		<style type="text/css">
    18. 			/* Chart.js */
    19. 			
    20. 			@-webkit-keyframes chartjs-render-animation {
    21. 				from {
    22. 					opacity: 0.99
    23. 				}
    24. 				to {
    25. 					opacity: 1
    26. 				}
    27. 			}
    28. 			
    29. 			@keyframes chartjs-render-animation {
    30. 				from {
    31. 					opacity: 0.99
    32. 				}
    33. 				to {
    34. 					opacity: 1
    35. 				}
    36. 			}
    37. 			
    38. 			.chartjs-render-monitor {
    39. 				-webkit-animation: chartjs-render-animation 0.001s;
    40. 				animation: chartjs-render-animation 0.001s;
    41. 			}
    42. 		style>
    43. 	head>
    44.  
    45. 	<body>
    46. 	<div th:replace="~{commons/commons::topbar}">div>
    47.  
    48. 		<div class="container-fluid">
    49. 			<div class="row">
    50. 				<div th:replace="~{commons/commons::sidebar(active='list.html')}">div>
    51.  
    52. 				<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
    53. 					<h2>Section titleh2>
    54. 					<div class="table-responsive">
    55. 						<table class="table table-striped table-sm">
    56. 							<thead>
    57. 								<tr>
    58. 									<th>idth>
    59. 									<th>lastNameth>
    60. 									<th>emailth>
    61. 									<th>genderth>
    62. 									<th>departmentth>
    63. 									<th>birthth>
    64. 									<th>操作th>
    65. 								tr>
    66. 							thead>
    67. 							<tbody>
    68. 							    <tr th:each="emp:${emps}">
    69. 									<td th:text="${emp.getId()}">td>
    70. 									<td th:text="${emp.getLastName()}">td>
    71. 									<td th:text="${emp.getEmail()}">td>
    72. 									<td th:text="${emp.getGender()==0?'女':'男'}">td>
    73. 									<td th:text="${emp.department.getDepartmentName()}">td>
    74. 									<td th:text="${#dates.format(emp.getBirth(),'yyyy-MM-dd HH:mm:ss')}">td>
    75. 									<td>
    76. 										<button class="btn btn-sm btn-primary">编辑button>
    77. 										<button class="btn btn-sm btn-danger">删除button>
    78. 									td>
    79. 								tr>
    80. 							tbody>
    81. 						table>
    82. 					div>
    83. 				main>
    84. 			div>
    85. 		div>
    86.  
    87. 		
    88. 		
    89. 		<script type="text/javascript" src="asserts/js/jquery-3.2.1.slim.min.js">script>
    90. 		<script type="text/javascript" src="asserts/js/popper.min.js">script>
    91. 		<script type="text/javascript" src="asserts/js/bootstrap.min.js">script>
    92.  
    93. 		
    94. 		<script type="text/javascript" src="asserts/js/feather.min.js">script>
    95. 		<script>
    96. 			feather.replace()
    97. 		script>
    98.  
    99. 		
    100. 		<script type="text/javascript" src="asserts/js/Chart.min.js">script>
    101. 		<script>
    102. 			var ctx = document.getElementById("myChart");
    103. 			var myChart = new Chart(ctx, {
    104. 				type: 'line',
    105. 				data: {
    106. 					labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
    107. 					datasets: [{
    108. 						data: [15339, 21345, 18483, 24003, 23489, 24092, 12034],
    109. 						lineTension: 0,
    110. 						backgroundColor: 'transparent',
    111. 						borderColor: '#007bff',
    112. 						borderWidth: 4,
    113. 						pointBackgroundColor: '#007bff'
    114. 					}]
    115. 				},
    116. 				options: {
    117. 					scales: {
    118. 						yAxes: [{
    119. 							ticks: {
    120. 								beginAtZero: false
    121. 							}
    122. 						}]
    123. 					},
    124. 					legend: {
    125. 						display: false,
    126. 					}
    127. 				}
    128. 			});
    129. 		script>
    130.  
    131. 	body>
    132.  
    133. html>

    九、添加功能

    1.提交按钮

    2.跳转到添加页面

    ①控制层

    1. @GetMapping("/emp")
    2. public String toAddPage(Model model){
    3.     //查询所有部门的信息
    4.     Collection departments = departmentDao.getDepartments();
    5.     model.addAttribute("departments",departments);
    6.     return "emp/add";
    7. }
    8. @PostMapping("/emp")
    9. public String addEmp(Employee employee){
    10.     //添加操作,调用底层业务方法
    11.     employeeDao.save(employee);
    12.     return "redirect:/emps";
    13. }

    ②add页面

    1. html>
    3. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    4.  
    5. 	<head>
    6. 		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    7. 		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    8. 		<meta name="description" content="">
    9. 		<meta name="author" content="">
    10.  
    11. 		<title>Dashboard Template for Bootstraptitle>
    12. 		
    13. 		<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    14.  
    15. 		
    16. 		<link th:href="@{/css/dashboard.css}" rel="stylesheet">
    17. 		<style type="text/css">
    18. 			/* Chart.js */
    19. 			
    20. 			@-webkit-keyframes chartjs-render-animation {
    21. 				from {
    22. 					opacity: 0.99
    23. 				}
    24. 				to {
    25. 					opacity: 1
    26. 				}
    27. 			}
    28. 			
    29. 			@keyframes chartjs-render-animation {
    30. 				from {
    31. 					opacity: 0.99
    32. 				}
    33. 				to {
    34. 					opacity: 1
    35. 				}
    36. 			}
    37. 			
    38. 			.chartjs-render-monitor {
    39. 				-webkit-animation: chartjs-render-animation 0.001s;
    40. 				animation: chartjs-render-animation 0.001s;
    41. 			}
    42. 		style>
    43. 	head>
    44.  
    45. 	<body>
    46. 	<div th:replace="~{commons/commons::topbar}">div>
    47. 		<div class="container-fluid">
    48. 			<div class="row">
    49. 				<div th:replace="~{commons/commons::sidebar(active='list.html')}">div>
    50.  
    51. 				<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
    52. 					<form th:action="@{/emp}" method="post">
    53. 						<div class="form-group">
    54. 							<label>LastNamelabel>
    55. 							<input type="text" name="lastName" class="form-control" placeholder="海绵宝宝">
    56. 						div>
    57. 						<div class="form-group">
    58. 							<label>Emaillabel>
    59. 							<input type="email" name="email" class="form-control" placeholder="1234567890@qq.com">
    60. 						div>
    61. 						<div class="form-group">
    62. 							<label>Genderlabel><br>
    63. 							<div class="form-check form-check-inline">
    64. 								<input class="form-check-input" type="radio" name="gender" value="1">
    65. 								<label class="form-check-label">男label>
    66. 							div>
    67. 							<div class="form-check form-check-inline">
    68. 								<input class="form-check-input" type="radio" name="gender" value="0">
    69. 								<label class="form-check-label">女label>
    70. 							div>
    71. 						div>
    72. 						
    73. 						<div class="form-group">
    74. 							<label>departmentlabel>
    75. 							<select class="form-control" name="department.id">
    76. 								
    77. 								<option th:each="dept:${departments}"
    78. 										th:text="${dept.getDepartmentName()}"
    79. 										th:value="${dept.getId()}">option>
    80. 							select>
    81. 						div>
    82. 						<div class="form-group">
    83. 							<label>Birthlabel>
    84. 							<input type="text" name="birth" class="form-control" placeholder="yyyy-MM-dd">
    85. 						div>
    86. 						<button type="submit" class="btn btn-primary">添加button>
    87. 					form>
    88. 				main>
    89. 			div>
    90. 		div>
    91.  
    92. 		
    93. 		
    94. 		<script type="text/javascript" src="asserts/js/jquery-3.2.1.slim.min.js">script>
    95. 		<script type="text/javascript" src="asserts/js/popper.min.js">script>
    96. 		<script type="text/javascript" src="asserts/js/bootstrap.min.js">script>
    97.  
    98. 		
    99. 		<script type="text/javascript" src="asserts/js/feather.min.js">script>
    100. 		<script>
    101. 			feather.replace()
    102. 		script>
    103.  
    104. 		
    105. 		<script type="text/javascript" src="asserts/js/Chart.min.js">script>
    106. 		<script>
    107. 			var ctx = document.getElementById("myChart");
    108. 			var myChart = new Chart(ctx, {
    109. 				type: 'line',
    110. 				data: {
    111. 					labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
    112. 					datasets: [{
    113. 						data: [15339, 21345, 18483, 24003, 23489, 24092, 12034],
    114. 						lineTension: 0,
    115. 						backgroundColor: 'transparent',
    116. 						borderColor: '#007bff',
    117. 						borderWidth: 4,
    118. 						pointBackgroundColor: '#007bff'
    119. 					}]
    120. 				},
    121. 				options: {
    122. 					scales: {
    123. 						yAxes: [{
    124. 							ticks: {
    125. 								beginAtZero: false
    126. 							}
    127. 						}]
    128. 					},
    129. 					legend: {
    130. 						display: false,
    131. 					}
    132. 				}
    133. 			});
    134. 		script>
    135.  
    136. 	body>
    137.  
    138. html>

    3.添加成功

    根据ThymeleafViewResolver中定义的forward和redirect规则，添加员工信息时不能使用forward！

    1.     @Override
    2.     protected View createView(final String viewName, final Locale locale) throws Exception {
    3.         // First possible call to check "viewNames": before processing redirects and forwards
    4.         if (!this.alwaysProcessRedirectAndForward && !canHandle(viewName, locale)) {
    5.             vrlogger.trace("[THYMELEAF] View \"{}\" cannot be handled by ThymeleafViewResolver. Passing on to the next resolver in the chain.", viewName);
    6.             return null;
    7.         }
    8.         // Process redirects (HTTP redirects)
    9.         if (viewName.startsWith(REDIRECT_URL_PREFIX)) {
    10.             vrlogger.trace("[THYMELEAF] View \"{}\" is a redirect, and will not be handled directly by ThymeleafViewResolver.", viewName);
    11.             final String redirectUrl = viewName.substring(REDIRECT_URL_PREFIX.length(), viewName.length());
    12.             final RedirectView view = new RedirectView(redirectUrl, isRedirectContextRelative(), isRedirectHttp10Compatible());
    13.             return (View) getApplicationContext().getAutowireCapableBeanFactory().initializeBean(view, REDIRECT_URL_PREFIX);
    14.         }
    15.         // Process forwards (to JSP resources)
    16.         if (viewName.startsWith(FORWARD_URL_PREFIX)) {
    17.             // The "forward:" prefix will actually create a Servlet/JSP view, and that's precisely its aim per the Spring
    18.             // documentation. See http://docs.spring.io/spring-framework/docs/4.2.4.RELEASE/spring-framework-reference/html/mvc.html#mvc-redirecting-forward-prefix
    19.             vrlogger.trace("[THYMELEAF] View \"{}\" is a forward, and will not be handled directly by ThymeleafViewResolver.", viewName);
    20.             final String forwardUrl = viewName.substring(FORWARD_URL_PREFIX.length(), viewName.length());
    21.             return new InternalResourceView(forwardUrl);
    22.         }
    23.         // Second possible call to check "viewNames": after processing redirects and forwards
    24.         if (this.alwaysProcessRedirectAndForward && !canHandle(viewName, locale)) {
    25.             vrlogger.trace("[THYMELEAF] View \"{}\" cannot be handled by ThymeleafViewResolver. Passing on to the next resolver in the chain.", viewName);
    26.             return null;
    27.         }
    28.         vrlogger.trace("[THYMELEAF] View {} will be handled by ThymeleafViewResolver and a " +
    29.                         "{} instance will be created for it", viewName, getViewClass().getSimpleName());
    30.         return loadView(viewName, locale);
    31.     }

    ⚪时间日期格式化

             

    4.返回首页

    十、修改功能

    1.修改页面

    1. html>
    3. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    4.  
    5. 	<head>
    6. 		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    7. 		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    8. 		<meta name="description" content="">
    9. 		<meta name="author" content="">
    10.  
    11. 		<title>Dashboard Template for Bootstraptitle>
    12. 		
    13. 		<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    14.  
    15. 		
    16. 		<link th:href="@{/css/dashboard.css}" rel="stylesheet">
    17. 		<style type="text/css">
    18. 			/* Chart.js */
    19. 			
    20. 			@-webkit-keyframes chartjs-render-animation {
    21. 				from {
    22. 					opacity: 0.99
    23. 				}
    24. 				to {
    25. 					opacity: 1
    26. 				}
    27. 			}
    28. 			
    29. 			@keyframes chartjs-render-animation {
    30. 				from {
    31. 					opacity: 0.99
    32. 				}
    33. 				to {
    34. 					opacity: 1
    35. 				}
    36. 			}
    37. 			
    38. 			.chartjs-render-monitor {
    39. 				-webkit-animation: chartjs-render-animation 0.001s;
    40. 				animation: chartjs-render-animation 0.001s;
    41. 			}
    42. 		style>
    43. 	head>
    44.  
    45. 	<body>
    46. 	<div th:replace="~{commons/commons::topbar}">div>
    47. 		<div class="container-fluid">
    48. 			<div class="row">
    49. 				<div th:replace="~{commons/commons::sidebar(active='list.html')}">div>
    50.  
    51. 				<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
    52. 					<form th:action="@{/updateEmp}" method="post">
    53. 						<input type="hidden" name="id" th:value="${emp.getId()}">
    54. 						<div class="form-group">
    55. 							<label>LastNamelabel>
    56. 							<input th:value="${emp.getLastName()}" type="text" name="lastName" class="form-control" placeholder="海绵宝宝">
    57. 						div>
    58. 						<div class="form-group">
    59. 							<label>Emaillabel>
    60. 							<input th:value="${emp.getEmail()}" type="email" name="email" class="form-control" placeholder="1234567890@qq.com">
    61. 						div>
    62. 						<div class="form-group">
    63. 							<label>Genderlabel><br>
    64. 							<div class="form-check form-check-inline">
    65. 								<input th:checked="${emp.getGender()==1}" class="form-check-input" type="radio" name="gender" value="1">
    66. 								<label class="form-check-label">男label>
    67. 							div>
    68. 							<div class="form-check form-check-inline">
    69. 								<input th:checked="${emp.getGender()==0}" class="form-check-input" type="radio" name="gender" value="0">
    70. 								<label class="form-check-label">女label>
    71. 							div>
    72. 						div>
    73. 						
    74. 						<div class="form-group">
    75. 							<label>departmentlabel>
    76. 							<select class="form-control" name="department.id">
    77. 								
    78. 								<option th:selected="${dept.getId()==emp.getDepartment().getId()}"
    79. 										th:each="dept:${departments}"
    80. 										th:text="${dept.getDepartmentName()}"
    81. 										th:value="${dept.getId()}">option>
    82. 							select>
    83. 						div>
    84. 						<div class="form-group">
    85. 							<label>Birthlabel>
    86. 							<input th:value="${#dates.format(emp.getBirth(),'yyy-MM-dd HH:mm')}" type="text" name="birth" class="form-control" placeholder="yyyy-MM-dd">
    87. 						div>
    88. 						<button type="submit" class="btn btn-primary">修改button>
    89. 					form>
    90. 				main>
    91. 			div>
    92. 		div>
    93.  
    94. 		
    95. 		
    96. 		<script type="text/javascript" src="asserts/js/jquery-3.2.1.slim.min.js">script>
    97. 		<script type="text/javascript" src="asserts/js/popper.min.js">script>
    98. 		<script type="text/javascript" src="asserts/js/bootstrap.min.js">script>
    99.  
    100. 		
    101. 		<script type="text/javascript" src="asserts/js/feather.min.js">script>
    102. 		<script>
    103. 			feather.replace()
    104. 		script>
    105.  
    106. 		
    107. 		<script type="text/javascript" src="asserts/js/Chart.min.js">script>
    108. 		<script>
    109. 			var ctx = document.getElementById("myChart");
    110. 			var myChart = new Chart(ctx, {
    111. 				type: 'line',
    112. 				data: {
    113. 					labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
    114. 					datasets: [{
    115. 						data: [15339, 21345, 18483, 24003, 23489, 24092, 12034],
    116. 						lineTension: 0,
    117. 						backgroundColor: 'transparent',
    118. 						borderColor: '#007bff',
    119. 						borderWidth: 4,
    120. 						pointBackgroundColor: '#007bff'
    121. 					}]
    122. 				},
    123. 				options: {
    124. 					scales: {
    125. 						yAxes: [{
    126. 							ticks: {
    127. 								beginAtZero: false
    128. 							}
    129. 						}]
    130. 					},
    131. 					legend: {
    132. 						display: false,
    133. 					}
    134. 				}
    135. 			});
    136. 		script>
    137.  
    138. 	body>
    139.  
    140. html>

    2.跳转&控制层

    <a class="btn btn-sm btn-primary" th:href="@{/emp/}+${emp.getId()}">编辑a>
    1. //跳转至修改页面
    2. @GetMapping("/emp/{id}")
    3. public String toUpdateEmp(@PathVariable("id") Integer id,Model model){
    4.     //查询要修改的数据
    5.     Employee employee = employeeDao.getEmployeeById(id);
    6.     model.addAttribute("emp",employee);
    7.     System.out.println(employee);
    8.     //查出所有部门的信息
    9.     Collection departments = departmentDao.getDepartments();
    10.     model.addAttribute("departments",departments);
    11.     return "emp/update";
    12. }
    13. @PostMapping("/updateEmp")
    14. public String updateEmp(Employee employee){
    15.     employeeDao.save(employee);
    16.     return "redirect:/emps";
    17. }

    3. 最终效果

    点击修改即可保存修改的信息

     

    十一、删除功能

    1.删除

    <a class="btn btn-sm btn-danger" th:href="@{/delemp/}+${emp.getId()}">删除a>

    2.控制层

    1. @GetMapping("/delemp/{id}")
    2. public String deleteEmp(@PathVariable("id") Integer id){
    3.     employeeDao.delete(id);
    4.     return "redirect:/emps";
    5. }

    3.最终效果 

    点击删除

    ⚪注销

    <a class="nav-link" th:href="@{/user/logout}">注销a>

    控制层 

    1. @RequestMapping("/user/logout")
    2. public String logout(HttpSession session){
    3.     session.invalidate();
    4.     return "redirect:/index.html";
    5. }

     

  • 相关阅读:
    ISP代理是什么？双ISP是什么意思？
    C++内存分类
    1444_TC275 DataSheet阅读笔记5_部分管脚功能的梳理
    c++ using用法之一
    22.0 Pycharm中编写js代码
    uniapp实现移动端的视频图片轮播组件
    Vue中使用Echarts封装为公用组件（简单复制粘贴）
    iPhone 15 或将换成 USB-C 接口？网友：Lightning 已经落后了
    数组：
    储油罐北斗监测方案
  • 原文地址：https://blog.csdn.net/m0_52982868/article/details/126538134