SpringBoot08:员工管理系统

员工管理系统

首页配置：
1. 注意点，所有页面的静态资源都需要有thymeleaf接管；
2. url: @{}
页面国际化
1. 我们需要配置i18n文件
2. 我们如果需要在项目中进行按钮自动切换，我们需要自定义一个组件localeResolver
3. 记得将自己的组件配置到spring容器 @Bean
4. {}
登录+拦截器
增删改查
提取公共页面
1. th:fragment="sidebar"
2. <div th:replace="~{Commons/commons::navbar}"></div>
  1. 如果要传递参数，可以用()传参，接受判断即可
3. 列表循环展示
添加员工
1. 按钮提交
2. 跳转到添加页面
3. 添加员工成功
4. 返回首页
404

准备工作

1、将静态资源导入

2、搭建数据库

pojo Department

package com.sen.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

//部门表
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Department {

    private Integer id;
    private String departmentName;
}

Emplyee

package com.sen.pojo;


import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.util.Date;

//员工表
@Data
@NoArgsConstructor
public class Emplyee {

    private Integer id;
    private String LastName;
    private String email;
    private Integer gender; //0:女 1：男


    private Department department;
    private Date birth;

    public Emplyee(Integer id, String lastName, String email, Integer gender, Department department) {
        this.id = id;
        LastName = lastName;
        this.email = email;
        this.gender = gender;
        this.department = department;
        //默认创建日期
        this.birth = new Date();
    }
}

dao层

package com.sen.mapper;

import com.sen.pojo.Department;
import org.springframework.stereotype.Repository;

import java.util.Collection;
import java.util.HashMap;
import java.util.Map;

//部门mapper
@Repository
public class DepartmentMapper {

    //模拟数据库中的数据
    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.sen.mapper;

import com.sen.pojo.Department;
import com.sen.pojo.Emplyee;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;

import java.util.Collection;
import java.util.HashMap;
import java.util.Map;

//员工mapper
@Repository
public class EmployeeMapper {

    //模拟数据库中的数据
    private static Map<Integer, Emplyee> emplyees = null;
    //员工有所属的部门
    @Autowired
    private DepartmentMapper departmentMapper;

    static {
        emplyees = new HashMap<Integer, Emplyee>();//创建一个部门表

        emplyees.put(1001,new Emplyee(1001,"AA","1768275805@qq.com",1,new Department(101,"教学部")));
        emplyees.put(1002,new Emplyee(1002,"BB","1768275806@qq.com",0,new Department(102,"市场部")));
        emplyees.put(1003,new Emplyee(1003,"CC","1768275807@qq.com",1,new Department(103,"教研部")));
        emplyees.put(1004,new Emplyee(1004,"DD","1768275808@qq.com",0,new Department(104,"运营部")));
        emplyees.put(1005,new Emplyee(1005,"EE","1768275809@qq.com",1,new Department(105,"后勤部")));
    }

    //主键自增
    private static Integer initId = 1006;
    //增加一个员工
    public void save(Emplyee emplyee){
        if (emplyee.getId() == null){
            emplyee.setId(initId++);
        }
        emplyee.setDepartment(departmentMapper.getDepartmentById(emplyee.getDepartment().getId()));
        emplyees.put(emplyee.getId(),emplyee);
    }

    //查询全部员工信息
    public Collection<Emplyee> getAll(){
        return emplyees.values();
    }

    //通过id查询员工
    public Emplyee getEmployeeById(Integer id){
        return emplyees.get(id);
    }

    //通过id删除员工
    public Emplyee deleteEmployeeById(Integer id){
        return emplyees.remove(id);
    }
}

没有service层，之后再优化

首页配置：

方式一：在controller层配置indexController【不推荐】

@Controller
public class IndexController {

    //这里用{}传递两个参数
    @RequestMapping({"/","/index.html"})
    public String index(){
        return "index";
    }
}

方式二：扩展springmvc,

package com.sen.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) {
        registry.addViewController("/").setViewName("index");
        registry.addViewController("/index.html").setViewName("index");
    }
}

测试

thymeleaf接管

配置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" action="dashboard.html">
            <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>
            <label class="sr-only" >Username</label>
            <input type="text" class="form-control" th:placeholder="#{login.username}" required="" autofocus="">
            <label class="sr-only" >Password</label>
            <input type="password" class="form-control" th:placeholder="#{login.password}" required="">
            <div class="checkbox mb-3">
                <label>
          <input type="checkbox" > [[#{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}">中文</a>
            <a class="btn btn-sm">English</a>
        </form>

    </body>

</html>

有可能bootstrap不生效就试试关闭thymeleaf缓存

#关闭thymeleaf缓存
spring.thymeleaf.cache=false

如果配置了

#应用的上下文路径,也可以称为项目路径,是构成url地址的一部分。
server.servlet.context-path=/sen

项目路径更改为localhost:8080/sen/

页面国际化

有的时候，我们的网站会去涉及中英文甚至多语言的切换，这时候我们就需要学习国际化了！

准备工作

先在IDEA中统一设置properties的编码问题！

编写国际化配置文件，抽取页面需要显示的国际化页面消息。我们可以去登录页面查看一下，哪些内容我们需要编写国际化的配置！

配置文件编写

1、我们在resources资源文件下新建一个i18n目录，存放国际化配置文件

2、建立一个login.properties文件，还有一个login_zh_CN.properties；发现IDEA自动识别了我们要做国际化操作；文件夹变了！

3、我们可以在这上面去新建一个文件；

弹出如下页面：我们再添加一个英文的；

这样就快捷多了！

4、接下来，我们就来编写配置，我们可以看到idea下面有另外一个视图；

这个视图我们点击 + 号就可以直接添加属性了；我们新建一个login.tip，可以看到边上有三个文件框可以输入

然后依次添加其他页面内容即可！

然后去查看我们的配置文件；

login.btn=登录
login.password=密码
login.remember=记住我
login.tip=请登录
login.username=用户名

英文：

login.btn=Sign in
login.password=Password
login.remember=Remember me
login.tip=Please sign in
login.username=Username

中文：

login.btn=登录
login.password=密码
login.remember=记住我
login.tip=请登录
login.username=用户名

OK，配置文件步骤搞定！

配置文件生效探究

我们去看一下SpringBoot对国际化的自动配置！这里又涉及到一个类：MessageSourceAutoConfiguration

[这个在spring官方文档 https://docs.spring.io/spring-boot/docs/2.2.5.RELEASE/reference/htmlsingle/#using-boot-disabling-specific-auto-configuration 全局搜索international可以找到]

里面有一个方法，这里发现SpringBoot已经自动配置好了管理我们国际化资源文件的组件 ResourceBundleMessageSource；

// 获取 properties 传递过来的值进行判断
@Bean
public MessageSource messageSource(MessageSourceProperties properties) {
    ResourceBundleMessageSource messageSource = new ResourceBundleMessageSource();
    if (StringUtils.hasText(properties.getBasename())) {
        // 设置国际化文件的基础名（去掉语言国家代码的）
        messageSource.setBasenames(
            StringUtils.commaDelimitedListToStringArray(
                                       StringUtils.trimAllWhitespace(properties.getBasename())));
    }
    if (properties.getEncoding() != null) {
        messageSource.setDefaultEncoding(properties.getEncoding().name());
    }
    messageSource.setFallbackToSystemLocale(properties.isFallbackToSystemLocale());
    Duration cacheDuration = properties.getCacheDuration();
    if (cacheDuration != null) {
        messageSource.setCacheMillis(cacheDuration.toMillis());
    }
    messageSource.setAlwaysUseMessageFormat(properties.isAlwaysUseMessageFormat());
    messageSource.setUseCodeAsDefaultMessage(properties.isUseCodeAsDefaultMessage());
    return messageSource;
}

我们真实的情况是放在了i18n目录下，所以我们要去application.properties配置这个messages的路径；

spring.messages.basename=i18n.login

配置页面国际化值

去页面获取国际化的值，查看Thymeleaf的文档，找到message取值操作为：#{...}。我们去页面测试下：

IDEA还有提示，非常智能的！

我们可以去启动项目，访问一下，发现已经自动识别为中文的了！

但是我们想要更好！可以根据按钮自动切换中文英文！

配置国际化解析

在Spring中有一个国际化的Locale （区域信息对象）；里面有一个叫做LocaleResolver （获取区域信息对象）的解析器！

我们去我们webmvc自动配置文件，寻找一下！看到SpringBoot默认配置：

@Bean
@ConditionalOnMissingBean(
    name = {"localeResolver"}
)
public LocaleResolver localeResolver() {
        // 容器中没有就自己配，有的话就用用户配置的
    if (this.webProperties.getLocaleResolver() == org.springframework.boot.autoconfigure.web.WebProperties.LocaleResolver.FIXED) {
        return new FixedLocaleResolver(this.webProperties.getLocale());
    } else if (this.mvcProperties.getLocaleResolver() == org.springframework.boot.autoconfigure.web.servlet.WebMvcProperties.LocaleResolver.FIXED) {
        return new FixedLocaleResolver(this.mvcProperties.getLocale());
    } else {
        // 接收头国际化分解
        AcceptHeaderLocaleResolver localeResolver = new AcceptHeaderLocaleResolver();
        Locale locale = this.webProperties.getLocale() != null ? this.webProperties.getLocale() : this.mvcProperties.getLocale();
        localeResolver.setDefaultLocale(locale);
        return localeResolver;
    }
}

AcceptHeaderLocaleResolver 这个类中有一个方法

public Locale resolveLocale(HttpServletRequest request) {
    Locale defaultLocale = this.getDefaultLocale();
    // 默认的就是根据请求头带来的区域信息获取Locale进行国际化
    if (defaultLocale != null && request.getHeader("Accept-Language") == null) {
        return defaultLocale;
    } else {
        Locale requestLocale = request.getLocale();
        List<Locale> supportedLocales = this.getSupportedLocales();
        if (!supportedLocales.isEmpty() && !supportedLocales.contains(requestLocale)) {
            Locale supportedLocale = this.findSupportedLocale(request, supportedLocales);
            if (supportedLocale != null) {
                return supportedLocale;
            } else {
                return defaultLocale != null ? defaultLocale : requestLocale;
            }
        } else {
            return requestLocale;
        }
    }
}

那假如我们现在想点击链接让我们的国际化资源生效，就需要让我们自己的Locale生效！

我们去自己写一个自己的LocaleResolver，可以在链接上携带区域信息！

修改一下前端页面的跳转连接：

<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>

我们去写一个处理的组件类！MyLocalResolver

package com.sen.config;


import org.springframework.lang.Nullable;
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 MyLocalResolver implements LocaleResolver {
    @Nullable
    private Locale defaultLocale;

    public void setDefaultLocale(@Nullable Locale defaultLocale) {
        this.defaultLocale = defaultLocale;
    }


    @Nullable
    public Locale getDefaultLocale() {
        return this.defaultLocale;
    }
    //解析请求
    @Override
    public Locale resolveLocale(HttpServletRequest request) {
        //获取请求中的语言参数
        String language = request.getParameter("l");
        Locale defaultLocale = this.getDefaultLocale(); //如果没有就使用默认的
        //如果请求的链接不为空，携带了国际化参数
        if (!StringUtils.isEmpty(language)){
            //zh_CN 字符串分割
            String[] split = language.split("_");
            //国家、地区
            Locale locale = new Locale(split[0],split[1]);
            return locale;
        }

        return defaultLocale;
    }

    @Override
    public void setLocale(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Locale locale) {

    }
}

为了让我们的区域化信息能够生效，我们需要再配置一下这个组件！在我们自己的MvcConofig下添加bean；

//自定义的国际化
@Bean
public LocaleResolver localeResolver(){
    return new MyLocalResolver();
}

我们重启项目，来访问一下，发现点击按钮可以实现成功切换！搞定收工！

登录功能实现

1、修改index.html

添加登录动作

<form class="form-signin" th:action="@{/user/login}">

给username和password添加name

<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="">

2、我们去写一个处理的组件类！LoginController

@Controller
public class LoginController {

    @RequestMapping("/user/login")
    public String login(
            @RequestParam("username") String username,
            @RequestParam("password") String password,
            Model model){

        //具体业务
        if(!StringUtils.isEmpty(username) && "123456".equals(password)){
            return "dashboard";
        }else {
            //告诉用户，你登陆失败了
            model.addAttribute("msg","用户名或者密码错误！");
            return "index";
        }
    }
}

3、测试

登录成功

登录失败

这里登录失败回到index页面，没有其他提示，我们这里加个提示

    <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>

在MyMvcConfig增加映射

    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/").setViewName("index");
        registry.addViewController("/index.html").setViewName("index");
        registry.addViewController("/main.html").setViewName("dashboard");
    }

http://localhost:8080/sen/main.html 也可以访问dashboard

登录成功之后，我们应该重定向到dashboard，修改LoginController

@Controller
public class LoginController {

    @RequestMapping("/user/login")
    public String login(
            @RequestParam("username") String username,
            @RequestParam("password") String password,
            Model model){

        //具体业务
        if(!StringUtils.isEmpty(username) && "123456".equals(password)){
            return "redirect:/main.html";
        }else {
            //告诉用户，你登陆失败了
            model.addAttribute("msg","用户名或者密码错误！");
            return "index";
        }
    }
}

这里有个问题，我们无论登录与否，我们都可以访问dashboard，这个是不该的，那怎么办呢？

加入拦截器！

登录拦截器

1、我们增加一个配置的拦截器！LoginHandlerInterceptor

@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";
        }
    }
}

2、登录成功后，往httpRequest增加username属性

@Controller
public class LoginController {

    @RequestMapping("/user/login")
    public String login(
            @RequestParam("username") String username,
            @RequestParam("password") String password,
            Model model, HttpServletRequest request){

        //具体业务
        if(!StringUtils.isEmpty(username) && "123456".equals(password)){
            //往httpRequest增加username属性
            request.setAttribute("loginUser",username);
            return "redirect:/main.html";
        }else {
            //告诉用户，你登陆失败了
            model.addAttribute("msg","用户名或者密码错误！");
            return "index";
        }
    }
}

3、在MyMvcConfig 往bean中注册拦截器

//自定义的拦截器生效

@Override
public void addInterceptors(InterceptorRegistry registry) {
    registry.addInterceptor(new LoginHandlerInterceptor())
        .addPathPatterns("/**")
        .excludePathPatterns("/index.html","/","/user/login");
}

4、测试 http://localhost:8080/sen/main.html

发现我们的静态资源被拦截了，修改配置

@Override
public void addInterceptors(InterceptorRegistry registry) {
    registry.addInterceptor(new LoginHandlerInterceptor())
        .addPathPatterns("/**")
        .excludePathPatterns("/index.html","/","/user/login","/css/*","/img/*","/js/*");
}

再看效果

想让登录成功后，dashboard页面的Company name变成我们的用户名

修改dashboard.html

    <body>
        <nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0">
            <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">[[${session.loginUser}]]</a>

测试

增删改查

1、修改html文件

dashboard.html

<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>
        员工管理
    </a>
</li>

list.html

<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-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>

2、我们去写一个处理的组件类EmployeeController

package com.sen.controller;

import com.sen.mapper.EmployeeMapper;
import com.sen.pojo.Emplyee;
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 {

    @Autowired
    EmployeeMapper employeeMapper;

    //查询所有员工
    @RequestMapping("/emps")
    public String list(Model model){
        Collection<Emplyee> emplyees = employeeMapper.getAll();
        model.addAttribute("emps",emplyees);
        return "emp/list";
    }
}

3、测试

[图片上传失败...(image-8f0116-1615942201409)]

确实跳转过来了，可是没有高亮，体验不好

list dashboard里面有大量重复的代码，我们可以利用thymeleaf（Fragments）抽取出来，代码复用

dashboard.html

<div class="container-fluid">
    <div class="row">
        <!--侧边栏-->
        <nav class="col-md-2 d-none d-md-block bg-light sidebar" th:fragment="sidebar">

list

<div class="container-fluid">
    <div class="row">
        <!--侧边栏-->
        <div th:insert="~{dashboard::sidebar}"></div>

同理，将顶部也代码复用

dashboard.html

<!--顶部导航栏-->
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0" th:fragment="navbar">
    <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" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">Sign out</a>
        </li>
    </ul>
</nav>

list

<!--顶部导航栏-->
<div th:insert="~{dashboard::navbar}"></div>

代码复用plus

在templates下建立代码公共区

list dashboard引用

<body>
    <!--顶部导航栏-->
    <div th:replace="~{Commons/commons::navbar}"></div>

    <div class="container-fluid">
        <div class="row">
            <!--侧边栏-->
            <div th:replace="~{Commons/commons::sidebar}"></div>

解决侧边栏，高亮问题

可以看到

<li class="nav-item">
    <a class="nav-link active" th:href="@{/main.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>

<a class="nav-link active" active是控制高亮的，我们想办法让它随着点击添加高亮

dashboard.xml，传递参数active='main.html'

<div class="container-fluid">
    <div class="row">
        <!--侧边栏-->
        <div th:replace="~{Commons/commons::sidebar(active='main.html')}"></div>

list.xml，传递参数active='list.html'

<div class="container-fluid">
    <div class="row">
        <!--侧边栏-->
        <div th:replace="~{Commons/commons::sidebar(active='list.html')}"></div>

commons.xml接受参数,th:class="${active== 'main.html'?'nav-link active': 'nav-link'}"

测试

查列表循环展示

修改list.xml

<div class="container-fluid">
    <div class="row">
        <!--侧边栏-->
        <div th:replace="~{Commons/commons::sidebar(active='list.html')}"></div>

        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
            <h2>Section title</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>
                        </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()}"></td>
                            <td th:text="${emp.getDepartment()}"></td>
                            <td th:text="${emp.getBirth()}"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </main>
    </div>
</div>

增加编辑、删除按钮、修改gender显示，0：女，1：男

<td>
    <button class="btn btn-sm btn-primary">编辑</button>
    <button class="btn btn-sm btn-danger">删除</button>
</td>

<td th:text="${emp.getGender()==0?'女':'男'}"></td>
<td th:text="${#dates.format(emp.getBirth(), 'dd/MM/yyyy HH:mm:ss')}"></td>

最终页面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::navbar}"></div>

        <div class="container-fluid">
            <div class="row">
                <!--侧边栏-->
                <div th:replace="~{Commons/commons::sidebar(active='list.html')}"></div>

                <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
                    <h2>Section title</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.getDepartment()}"></td>
                                    <td th:text="${#dates.format(emp.getBirth(), 'dd/MM/yyyy 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>

        <!-- Bootstrap core JavaScript
================================================== -->
        <!-- Placed at the end of the document so the pages load faster -->
        <script type="text/javascript" src="@{/js/jquery-3.2.1.slim.min.js"></script>
        <script type="text/javascript" src="@{/js/popper.min.js"></script>
        <script type="text/javascript" src="@{/js/bootstrap.min.js"></script>

        <!-- Icons -->
        <script type="text/javascript" src="@{/js/feather.min.js"></script>
        <script>
            feather.replace()
        </script>

        <!-- Graphs -->
        <script type="text/javascript" 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>

增添加员工实现

按钮提交

<div class="container-fluid">
    <div class="row">
        <!--侧边栏-->
        <div th:replace="~{Commons/commons::sidebar(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>

添加add页面，复制list，添加表单

<form>
    <div class="form-group">
        <label >LastName</label>
        <input type="text" name="LastName" class="form-control"  placeholder="ergou">
    </div>
    <div class="form-group">
        <label >Email</label>
        <input type="email" name="email" class="form-control" id="exampleInputPassword1" placeholder="12345678@qq.com">
    </div>
    <div class="form-group">
        <label >Gender</label><br>
        <label class="radio-inline">
            <input type="radio"  name="gender" value="1"> 男
        </label>
        <label class="radio-inline">
            <input type="radio"  name="gender" value="0"> 女
        </label>
    </div>
    <div class="form-group">
        <label >department</label>
        <select class="form-control" name="department">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>
    </div>
    <div class="form-group">
        <label >Birth</label>
        <input type="text" class="form-control"  placeholder="ergou" name="birth">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

修改下拉框显示部门信息

<div class="form-group">
    <label >department</label>
    <!--我们在controller接受的是一个Employee，所有我们需要提交的是其中的一个属性！-->
    <select class="form-control" name="department.id">
        <option th:each="department : ${departments}" th:text="${department.getDepartmentName()}" th:value="${department.getId()}"></option>
    </select>
</div>

说明th:text 显示部门信息，th:value 保存部门id，我们提交保存的是部门id

给表单添加action

<form th:action="@{/emp}" method="post">

增加一个controller处理

//添加一个员工
@PostMapping("/emp")
public String addEmp(Emplyee emplyee){
System.out.println(emplyee);
//调用底层业务方法保存员工信息
employeeMapper.save(emplyee);
return "redirect:/emps";
}

日期格式修改

我们可以通过

#设置日期格式
spring.mvc.format.date=yyyy-MM-dd

改修改员工信息

1、修改list.html

<a class="btn btn-sm btn-primary" th:href="@{/emp/}+${emp.getId()}">编辑</a>

2、增加controller

//去员工修改页面
@GetMapping("/emp/{id}")
public String toUpdateEmp(@PathVariable("id") Integer id, Model model){
        //查出原来数据
        Emplyee employee = employeeMapper.getEmployeeById(id);
        Collection<Department> departments = departmentMapper.getDepartments();
        model.addAttribute("departments",departments);
        model.addAttribute("emp",employee);
        return "emp/update";
}

3、编写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::navbar}"></div>

        <div class="container-fluid">
            <div class="row">
                <!--侧边栏-->
                <div th:replace="~{Commons/commons::sidebar(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">
                        <div class="form-group">
                            <label >LastName</label>
                            <input th:value="${emp.getLastName()}" type="text" name="LastName" class="form-control"  placeholder="ergou">
                        </div>
                        <div class="form-group">
                            <label >Email</label>
                            <input th:value="${emp.getEmail()}" type="email" name="email" class="form-control"  placeholder="12345678@qq.com">
                        </div>
                        <div class="form-group">
                            <label >Gender</label><br>
                            <label class="radio-inline">
                                <input type="radio"  name="gender" value="1" th:checked="${emp.getGender()}==1"> 男
                            </label>
                            <label class="radio-inline">
                                <input type="radio"  name="gender" value="0" th:checked="${emp.getGender()}==0"> 女
                            </label>
                        </div>
                        <div class="form-group">
                            <label >department</label>
                            <!--我们在controller接受的是一个Employee，所有我们需要提交的是其中的一个属性！-->
                            <select class="form-control" name="department.id">
                                <option th:each="department : ${departments}" th:text="${department.getDepartmentName()}" th:value="${department.getId()}"></option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label >Birth</label>
                            <!--这里在${}里面 emp.getBirth()直接使用-->
                            <input th:value="${#dates.format(emp.getBirth(),'yyyy-MM-dd HH:mm')}" type="text" class="form-control"  name="birth">
                        </div>
                        <button type="submit" class="btn btn-default">修改</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="@{/js/jquery-3.2.1.slim.min.js"></script>
        <script type="text/javascript" src="@{/js/popper.min.js"></script>
        <script type="text/javascript" src="@{/js/bootstrap.min.js"></script>

        <!-- Icons -->
        <script type="text/javascript" src="@{/js/feather.min.js"></script>
        <script>
            feather.replace()
        </script>

        <!-- Graphs -->
        <script type="text/javascript" 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>

4、编写修改成功contoller

//修改成功
@PostMapping("/updateEmp")
public String UpdateEmp(Emplyee emplyee){
employeeMapper.save(emplyee);
return "redirect:/emps";
}

这里我们底层是自增的，所有无所修改成功与否，都会新加数据，是因为我们修改页面提交的employee没有id

故，我们添加隐藏域加上id

<input type="hidden" th:value="${emp.getId()}">

删删除员工

list.html

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

controller层

//删除员工
@GetMapping("/delemp/{id}")
public String deletEmp(@PathVariable("id") Integer id){
    //调用底层业务方法保存员工信息
    employeeMapper.deleteEmployeeById(id);
    return "redirect:/emps";
}

404页面

在templates下面建404，将404.html放在里面即可

小结

前端：

后台模板：别人写好的，我们拿来改成自己需要的后台模板bootstrap x-admin
前端框架：组件：知识能够通过前端框架自己手动组合拼接一个网站页面（index\about\blog\post(提交blog)\user）！Bootstrap,Layui,semantic-ui
- 栅格系统
- 导航栏
- 侧边栏
- 表单

如何让快速开发一个网站？

前端搞定：页面长什么样子：数据
设计数据库（数据库设计难点！）
前端让他能够自动运行，独立化工程

数据接口如何对接：json;对象 all in one
前后端联调测试！

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,053评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,527评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,779评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,685评论 1赞 276
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,699评论 5赞 366
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,609评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,989评论 3赞 396
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,654评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,890评论 1赞 298
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,634评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,716评论 1赞 330
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,394评论 4赞 319
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,976评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,950评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,191评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 44,849评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,458评论 2赞 342

SpringBoot08:员工管理系统

员工管理系统

{}

准备工作

首页配置：

thymeleaf接管

页面国际化

准备工作

配置文件编写

配置文件生效探究

配置页面国际化值

配置国际化解析

登录功能实现

登录拦截器

增删改查

查 列表循环展示

增 添加员工实现

改 修改员工信息

删 删除员工

小结

推荐阅读更多精彩内容

查列表循环展示

增添加员工实现

改修改员工信息

删删除员工