[Java知识库]SpringBoot Web开发，员工管理系统为例

SpringBoot Web 开发

• 导入静态资源
• 首页
• jsp，模板引擎 Thymeleaf
• 装配扩展SpringMVC
• 增删改查
• 拦截器
• 国际化

静态资源

新建一个项目后 首先测试Controoller 是否可用

总结:

1. 在springboot,我们可以使用以下方式处理静态资源
   • webjars localhost:8080/webjars/
   • public, static, resources，/** localhost:8080/
2. 优先级: resources>static (默认) >public

定制首页

观察源码可知，首页为 index.html

这三个文件夹均可放 index.html

不过一般放在 static

通过controller跳转至首页

1. 配置Thymeleaf

   <!--        themeleaf,基于3.x开发-->
           <dependency>
               <groupId>org.thymeleaf</groupId>
               <artifactId>thymeleaf-spring5</artifactId>
           </dependency>
           <dependency>
               <groupId>org.thymeleaf.extras</groupId>
               <artifactId>thymeleaf-extras-java8time</artifactId>
           </dependency>
   

2. html文件存放

   

3. 编写Controller代码

   

thymeleaf语法

• html 端语法

  在html页面加上 xmlns:th=“http://www.thymeleaf.org”

  

  • thymeleaf 转义与否

    

  • 遍历数组里的值

    

扩展spring MC

package com.kuang.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.View;
import org.springframework.web.servlet.ViewResolver;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

import java.util.Locale;

//如果，你想diy一些定制化的功能，只要写这个组件，
// 然后将它交给springboot，springboot就会帮我们自动装配！

//扩展springmvc       dispatcherservlet
@Configuration
public class MyMvcConfig implements WebMvcConfigurer {

    //ViewResolver 实现了视图解析器接口的类，我们就可以把它看做视图解析器
    @Bean
    public ViewResolver myViewResolver(){
        return new MyViewResolver();
    }

    //自己定义了一个视图解析器 MyViewResolver
    public static class MyViewResolver implements ViewResolver{
        @Override
        public View resolveViewName(String s, Locale locale) throws Exception {
            return null;
        }
    }
}

视图跳转操作

package com.kuang.config;

import org.springframework.context.annotation.Configuration;

import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

//如果我们要扩展 MVC ，官方建议我们这样做
@Configuration
public class MyMvcConfig implements WebMvcConfigurer {

    //视图跳转  输入 kuang 跳转至 test 界面
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/kuang").setViewName("test");
    }
}

员工管理系统

1. 去搜索 bootstrap 模板 下载前端模板

   html文件放在templates下面，css等文件放在static下面

   

2. 新建 pojo 包，在pom.xml 添加 lombok依赖

   <!--        lombok-->
   <dependency>
       <groupId>org.projectlombok</groupId>
       <artifactId>lombok</artifactId>
   </dependency>
   

3. 在pojo新建实体类 Department、Employee

   package com.kuang.pojo;
   
   import lombok.AllArgsConstructor;
   import lombok.Data;
   import lombok.NoArgsConstructor;
   
   @Data   //get、 set、 toString
   @AllArgsConstructor //有参构造
   @NoArgsConstructor  //无参构造
   public class Department {
   
       private Integer id;
       private String departmentName;
   
   }
   

   package com.kuang.pojo;
   
   
   import lombok.AllArgsConstructor;
   import lombok.Data;
   import lombok.NoArgsConstructor;
   
   import java.util.Date;
   
   //员工表
   @Data
   @AllArgsConstructor
   @NoArgsConstructor
   public class Employee {
       private Integer id;
       private String lastName;
       private String email;
       private Integer gender;     //0为女，1为男
       private Department department;
       private Date birth;         //是util包下的，其他包会报错
   }
   
   

4. 新建对实体类的操作 Dao层，DepartmentDao，EmployeeDao

   package com.kuang.dao;
   
   import com.kuang.pojo.Department;
   import org.springframework.stereotype.Repository;
   
   import java.util.Collection;
   import java.util.HashMap;
   import java.util.Map;
   
   //部门dao
   @Repository
   public class DepartmentDao {
   
       //模拟数据库中的数据
   
       //新建一个Map键值对 departments，键为 integer 值为 department
       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);
       }
   }
   

   package com.kuang.dao;
   
   import com.kuang.pojo.Department;
   import com.kuang.pojo.Employee;
   import org.springframework.beans.factory.annotation.Autowired;
   import org.springframework.stereotype.Repository;
   
   import java.util.Collection;
   import java.util.HashMap;
   import java.util.Map;
   
   //员工操作 Dao
   @Repository
   public class EmployeeDao {
   
       //模拟数据
   
       //新建一个Map键值对 departments，键为 integer 值为 department
       private static Map<Integer, Employee> employees = null;
   
       //员工有所属的部门 外表
       @Autowired
       private DepartmentDao departmentDao;
   
       static{     //static 优先加载
           employees = new HashMap<Integer, Employee>();   //创建一个部门表
   
           employees.put(1001,new Employee(1001,"AA","1803291168@qq.com",1,new Department(101,"教学部")));
           employees.put(1002,new Employee(1002,"AA","1803291168@qq.com",1,new Department(102,"市场部")));
           employees.put(1003,new Employee(1003,"AA","1803291168@qq.com",1,new Department(103,"教研部")));
           employees.put(1004,new Employee(1004,"AA","1803291168@qq.com",1,new Department(104,"运营部")));
           employees.put(1005,new Employee(1005,"AA","1803291168@qq.com",1,new Department(105,"后勤部")));
       }
   
       //主键自增！
       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 getEmployeeById(Integer id){
           return employees.get(id);
       }
   
       //删除员工
       public void deleteEmployeeById(Integer id){
           employees.remove(id);
       }
   }
   

5. 跳转页面的两种配法

   1. 在controller层配置

      

      package com.kuang.controller;
      
      import org.springframework.stereotype.Controller;
      import org.springframework.web.bind.annotation.RequestMapping;
      
      @Controller
      public class IndexController {
      
          @RequestMapping({"/","/index.html"})
          public String index(){
              return "index";
          }
      }
      
      

   2. 在config层配置，重载视图管理方法

      

      package com.kuang.config;
      
      import org.springframework.context.annotation.Configuration;
      
      import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
      import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
      
      @Configuration
      public class MyMvcConfig implements WebMvcConfigurer {
      
          @Override
          public void addViewControllers(ViewControllerRegistry registry) {
      
              //重载 视图控制层
              // 用户输入 ‘/’  则自动跳转去 ‘index’
              registry.addViewController("/").setViewName("index");
              registry.addViewController("/index").setViewName("index");
          }
      }
      
      

html 支持thymeleaf

• <html lang="en" xmlns:th="http://www.thymeleaf.org">
  

  

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

  

  静态资源 href 等，要写成 thymeleaf 的格式，方便被thymeleaf托管； th: + @{ }

  ==注意：==在线链接不能改，只需改本地链接，链接图片、CSS等

国际化

1. IDEA变成utf-8

   

2. 配置i18n文件

   

   新建文件夹 i18n ，然后新建文件 login.properties、login_en_US.properties、login_zh_CN.properties 三个文件

   然后写变量名和值

   

   在 yaml中配置

   

3. 在html文件里 替换文本

   

   一般用 方式1 th: + #{} 的形式，若不行就用 方式2

4. 需要自定义一个组件LocaleResover

   • 前端加上链接消息

     

   • 接管配置

     

     代码为

     package com.kuang.config;
     
     import org.springframework.web.servlet.LocaleResolver;
     import org.thymeleaf.util.StringUtils;
     
     import javax.servlet.http.HttpServletRequest;
     import javax.servlet.http.HttpServletResponse;
     import java.util.Locale;
     
     
     public class MyLocaleResolver implements LocaleResolver {
         //解析请求
         @Override
         public Locale resolveLocale(HttpServletRequest httpServletRequest) {
             //获取前端页面请求中的语言参数，变量为 l
             String language = httpServletRequest.getParameter("l");
     
             Locale locale = Locale.getDefault();    //如果前端链接没有传值就使用默认的
     
             //如果请求的链接携带了国际化参数
             if(!StringUtils.isEmpty(language)){
                 //zh_CN
                 String[] split = language.split("_");
     
                 //Locale的参数为  语言代码 ，国家地区
                 locale = new Locale(split[0], split[1]);
             }
     
             return locale;
         }
     
         @Override
         public void setLocale(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Locale locale) {
     
         }
     }
     
     

5. 记得将自己写的组件配置到spring容器@Bean

   

   全部代码为

   package com.kuang.config;
   
   import org.springframework.context.annotation.Bean;
   import org.springframework.context.annotation.Configuration;
   
   import org.springframework.web.servlet.LocaleResolver;
   import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
   import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
   
   @Configuration
   public class MyMvcConfig implements WebMvcConfigurer {
   
       @Override
       public void addViewControllers(ViewControllerRegistry registry) {
   
           //重载 视图控制层
           // 用户输入 ‘/’  则自动跳转去 ‘index’
           registry.addViewController("/").setViewName("index");
           registry.addViewController("/index.html").setViewName("index");
       }
   
       //自定义的国际化组件就生效了
       @Bean
       public LocaleResolver localeResolver(){
           return new MyLocaleResolver();
       }
   }
   
   

员工登录

1. 前端页面添加 th:action

   

   发送请求 /user/login

2. 新增 LoginController ，添加注解 @RequestMapping("/user/login") 获取前端的 请求 th:action="@{/user/login}" ；

   在前端页面的 input框中 添加name属性，用户输入的内容就和前端的 username 绑定；

   

   在后端 用注解 @RequestParam("username") String username ，将前端的 username 和 后端的变量 username 绑定；

3. 登录判断成功则跳转至相应页面，

   在这里，登录成功就重定向到 main.html

   

   需要在 MyMvcConfig里面配置映射，因为我们没有 main.html 这个文件，所以将其映射到 dashboard

   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JH0qQDlP-1629031010627)(C:\Users\Administrator\Desktop\Spring Boot\SpringBootWeb开发.assets\image-20210814110734699.png)]

   下面的文件才是我们有的

   

   整个MyMvcConfig代码

   package com.kuang.config;
   
   import org.springframework.context.annotation.Bean;
   import org.springframework.context.annotation.Configuration;
   
   import org.springframework.web.servlet.LocaleResolver;
   import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
   import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
   
   @Configuration
   public class MyMvcConfig implements WebMvcConfigurer {
   
       @Override
       public void addViewControllers(ViewControllerRegistry registry) {
   
           //重载 视图控制层
           // 用户输入 ‘/’  则自动跳转去 ‘index’
           registry.addViewController("/").setViewName("index");
           registry.addViewController("/index.html").setViewName("index");
           registry.addViewController("/main.html").setViewName("dashboard");
   
       }
   
       //自定义的国际化组件就生效了
       @Bean
       public LocaleResolver localeResolver(){
           return new MyLocaleResolver();
       }
   }
   
   

4. 登录失败，绑定一个msg消息，用于回显提示

   

   在前端添加代码，显示这个msg信息

   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FSzdzn38-1629031010631)(C:\Users\Administrator\Desktop\Spring Boot\SpringBootWeb开发.assets\image-20210814111312413.png)]

   <!-- 如果msg值不为空，则显示 msg，if用 $ ，表达式用 #-->
   <p style="color: red" th:text="${msg}" th:if="${! #strings.isEmpty(msg)}"></p>
   

5. 整个LoginController 代码

   package com.kuang.controller;
   
   import org.springframework.stereotype.Controller;
   
   import org.springframework.ui.Model;
   import org.springframework.web.bind.annotation.RequestMapping;
   import org.springframework.web.bind.annotation.RequestParam;
   import org.thymeleaf.util.StringUtils;
   
   //登录控制
   @Controller
   public class LoginController {
   
       @RequestMapping("/user/login")  //接收index.html传过来的 ‘/user/login’ 请求
       //@ResponseBody       //生成一个页面，内容为 return的字符串 ，不会跳转到视图
       public String login(@RequestParam("username") String username , //@RequestParam 注解的参数来自前端中的 name属性
                           @RequestParam("password") String password ,
                           Model model) {
   
           //具体的业务
   
           //用户名不为空 且 密码为123456则登录成功
           if (!StringUtils.isEmpty(username) && password.equals("123456")) {  //登录成功
   
               return "redirect:/main.html";   //重定向到 main.html 需要在 MyMvcConfig 里设置映射
   
               //return "dashboard";   //直接跳转去 dashboard 页面
           } else {    //登录失败
   
               model.addAttribute("msg", "用户名或密码错误");  //model 用于前端消息回显
   
               return "index";
           }
       }
   }
   
   

登录拦截器

1. 新建一个 登录拦截器 LoginHandlerInterceptor ，其继承 HandlerInterceptor 。

   

   ? 对应的java代码

   package com.kuang.config;
   
   import org.springframework.web.servlet.HandlerInterceptor;
   
   import javax.servlet.http.HttpServletRequest;
   import javax.servlet.http.HttpServletResponse;
   
   public class LoginHandlerInterceptor implements HandlerInterceptor {
   
       //该拦截器需要重载1个方法
   
       @Override
       public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
   
           //登录成功后，应该有用户的session
           Object loginUser = request.getSession().getAttribute("loginUser");
   
           if(loginUser == null){  //没有登录
               //设置 msg 用于前端消息回显
               request.setAttribute("msg","请先登录");
   
               //重定向到 index.html 界面；该写法 就是传统的 JSP 写法
               request.getRequestDispatcher("/index.html").forward(request,response);
   
               //不放行
               return false;
   
           }else { //登录
               return true;
           }
   
       }
   
   
   }
   
   

2. 在MyMvcConfig里添加拦截器

   

   //添加拦截器
       @Override
       public void addInterceptors(InterceptorRegistry registry) {
   
           registry.addInterceptor(new LoginHandlerInterceptor())
                   .addPathPatterns("/**")     //拦截所有静态资源
                   .excludePathPatterns("/index.html","/","/user/login","/css/**","/js/**","/img/**");  //除了这几个不拦截
   
       }
   
   

员工列表展示

提取公共页面

1. 新建 commons文件夹 及 commons.html 文件

   

2. 将其他页面，比如 list.html 和 dashboard.html 中公共的代码抽取出来，放到 commons.html 中，要在第一个标签里加上th:fragment="topBar"

   

   然后在需要 引入的页面中添加 th:replace="~{commons/commons::topBar}" 代码，这样就能引入 公共页面的代码，完成代码复用

   

   完整的 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/#" th:text="${session.loginUser}">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/#">注销</a>
           </li>
       </ul>
   </nav>
   
   <!--侧边栏-->
   <nav class="col-md-2 d-none d-md-block bg-light sidebar" th:fragment="sideBar">
   
       <div class="sidebar-sticky">
           <ul class="nav flex-column">
               <li class="nav-item">
                   <a 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>
                       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 th:class="${active=='list.html'?'nav-link active':'nav-link'}" th:href="@{/emps}">
                       <circle cx="9" cy="7" r="4"></circle>
   
                       </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>
                       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>
   

标签高亮

1. 在commons.html中，添加下述代码

注:${} 是用来写java表达式的

然后在 list.html 中添加参数

在 main.html 中，也添加参数

可实现选中高亮

员工列表显示

• 后端：

  新增一个 EmployeeController

  

  完整代码：

  package com.kuang.controller;
  
  import com.kuang.dao.EmployeeDao;
  import com.kuang.pojo.Employee;
  import org.springframework.beans.factory.annotation.Autowired;
  import org.springframework.stereotype.Controller;
  import org.springframework.ui.Model;
  import org.springframework.web.bind.annotation.RequestMapping;
  
  import java.util.Collection;
  
  @Controller
  public class EmployeeController {
  
      //引入另外的java类 都得写该注释
      @Autowired
      EmployeeDao employeeDao;
  
      //获取前端的 /emps 请求
      @RequestMapping("/emps")
      public String list(Model model){
          Collection<Employee> employees = employeeDao.getAll();
  
          //将 employees 数据绑定至 emps 用于前端显示
          model.addAttribute("emps",employees);
          
          //前端请求响应到 emp/list.html 中
          return "emp/list";
      }
  }
  
  

• 前端：在 emp/list.html 中引入数据

  

  前端表格代码

<table class="table table-striped table-sm">
    <thead>
        <tr>
            <th>id</th>
            <th>lastName</th>
            <th>email</th>
            <th>gender</th>
            <th>departmentId</th>
            <th>departmentName</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()==1?'男':'女'}"></td>
            <td th:text="${emp.getDepartment().getId()}"></td>
            <td th:text="${emp.getDepartment().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>

添加员工

1. 新建add.html 将公共部分的导航栏和侧边栏写进去

   在前端写一个form表单

   

   <form th:action="@{/emp}" method="post">
       <div class="form-group">
           <label>LastName</label>
   
           <!--							注意 此处的 name="lastName" 必须与后台pojo保持一致 -->
           <input type="text" name="lastName" class="form-control" placeholder="chenhao">
       </div>
       <div class="form-group">
           <label>Email</label>
           <!--							注意 此处的 name="email" 必须与后台pojo保持一致 -->
           <input type="email" name="email" class="form-control" placeholder="1803291168@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">
               <!--								下面的下拉框中，th:text 是显示的文本，th:value 才是提交的值-->
               <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="chenhaostudy">
       </div>
       <button type="submit" class="btn btn-primary">添加</button>
   </form>
   

2. 在EmployeeController 里面添加 post请求

   

   //post 请求 与前端 emp 对应
   @PostMapping("/emp")
   public String addEmp(Employee employee){
       //添加的操作
       System.out.println("save=>"+employee);
   
       //调用dao层方法 保存员工信息
       employeeDao.save(employee);
   
       //重定向到 emps 
       return "redirect:/emps";
   }