員工管理系統(tǒng)

1. 首頁配置：

   1. 注意點(diǎn)灰伟，所有頁面的靜態(tài)資源都需要有thymeleaf接管；
   2. url: @{}

2. 頁面國際化

   1. 我們需要配置i18n文件
   2. 我們?nèi)绻枰陧?xiàng)目中進(jìn)行按鈕自動(dòng)切換吓揪，我們需要自定義一個(gè)組件localeResolver
   3. 記得將自己的組件配置到spring容器 @Bean

   4. {}

3. 登錄+攔截器

4. 增刪改查

5. 提取公共頁面

   1. th:fragment="sidebar"
   2. <div th:replace="~{Commons/commons::navbar}"></div>
      3. 如果要傳遞參數(shù)，可以用()傳參，接受判斷即可
   3. 列表循環(huán)展示

6. 添加員工

   1. 按鈕提交
   2. 跳轉(zhuǎn)到添加頁面
   3. 添加員工成功
   4. 返回首頁

7. 404

準(zhǔn)備工作

1膳叨、將靜態(tài)資源導(dǎo)入

2、搭建數(shù)據(jù)庫

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;
        //默認(rèn)創(chuàng)建日期
        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 {

    //模擬數(shù)據(jù)庫中的數(shù)據(jù)
    private static Map<Integer, Department> departments = null;

    static {
        departments = new HashMap<Integer, Department>();//創(chuàng)建一個(gè)部門表

        departments.put(101,new Department(101,"教學(xué)部"));
        departments.put(102,new Department(102,"市場(chǎng)部"));
        departments.put(103,new Department(103,"教研部"));
        departments.put(104,new Department(104,"運(yùn)營部"));
        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 {

    //模擬數(shù)據(jù)庫中的數(shù)據(jù)
    private static Map<Integer, Emplyee> emplyees = null;
    //員工有所屬的部門
    @Autowired
    private DepartmentMapper departmentMapper;

    static {
        emplyees = new HashMap<Integer, Emplyee>();//創(chuàng)建一個(gè)部門表

        emplyees.put(1001,new Emplyee(1001,"AA","1768275805@qq.com",1,new Department(101,"教學(xué)部")));
        emplyees.put(1002,new Emplyee(1002,"BB","1768275806@qq.com",0,new Department(102,"市場(chǎng)部")));
        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,"運(yùn)營部")));
        emplyees.put(1005,new Emplyee(1005,"EE","1768275809@qq.com",1,new Department(105,"后勤部")));
    }

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

    //查詢?nèi)繂T工信息
    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層痘系，之后再優(yōu)化

首頁配置：

方式一：在controller層配置indexController【不推薦】

@Controller
public class IndexController {

    //這里用{}傳遞兩個(gè)參數(shù)
    @RequestMapping({"/","/index.html"})
    public String index(){
        return "index";
    }
}

方式二：擴(kuò)展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");
    }
}

測(cè)試

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不生效就試試關(guān)閉thymeleaf緩存

#關(guān)閉thymeleaf緩存
spring.thymeleaf.cache=false

如果配置了

#應(yīng)用的上下文路徑,也可以稱為項(xiàng)目路徑,是構(gòu)成url地址的一部分菲嘴。
server.servlet.context-path=/sen

項(xiàng)目路徑更改為localhost:8080/sen/

頁面國際化

有的時(shí)候，我們的網(wǎng)站會(huì)去涉及中英文甚至多語言的切換汰翠，這時(shí)候我們就需要學(xué)習(xí)國際化了龄坪！

準(zhǔn)備工作

先在IDEA中統(tǒng)一設(shè)置properties的編碼問題！

編寫國際化配置文件复唤，抽取頁面需要顯示的國際化頁面消息健田。我們可以去登錄頁面查看一下，哪些內(nèi)容我們需要編寫國際化的配置佛纫！

配置文件編寫

1抄课、我們?cè)趓esources資源文件下新建一個(gè)i18n目錄唱星，存放國際化配置文件

2、建立一個(gè)login.properties文件跟磨，還有一個(gè)login_zh_CN.properties间聊；發(fā)現(xiàn)IDEA自動(dòng)識(shí)別了我們要做國際化操作；文件夾變了抵拘！

3哎榴、我們可以在這上面去新建一個(gè)文件；

彈出如下頁面：我們?cè)偬砑右粋€(gè)英文的僵蛛；

這樣就快捷多了尚蝌！

4、接下來充尉，我們就來編寫配置飘言，我們可以看到idea下面有另外一個(gè)視圖；

這個(gè)視圖我們點(diǎn)擊 + 號(hào)就可以直接添加屬性了驼侠；我們新建一個(gè)login.tip姿鸿，可以看到邊上有三個(gè)文件框可以輸入

然后依次添加其他頁面內(nèi)容即可！

然后去查看我們的配置文件倒源；

login.properties ：默認(rèn)

login.btn=登錄
login.password=密碼
login.remember=記住我
login.tip=請(qǐng)登錄
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=請(qǐng)登錄
login.username=用戶名

OK苛预，配置文件步驟搞定！

配置文件生效探究

我們?nèi)タ匆幌耂pringBoot對(duì)國際化的自動(dòng)配置笋熬！這里又涉及到一個(gè)類：MessageSourceAutoConfiguration

[這個(gè)在spring官方文檔 https://docs.spring.io/spring-boot/docs/2.2.5.RELEASE/reference/htmlsingle/#using-boot-disabling-specific-auto-configuration 全局搜索international可以找到]

里面有一個(gè)方法热某，這里發(fā)現(xiàn)SpringBoot已經(jīng)自動(dòng)配置好了管理我們國際化資源文件的組件 ResourceBundleMessageSource；

// 獲取 properties 傳遞過來的值進(jìn)行判斷
@Bean
public MessageSource messageSource(MessageSourceProperties properties) {
    ResourceBundleMessageSource messageSource = new ResourceBundleMessageSource();
    if (StringUtils.hasText(properties.getBasename())) {
        // 設(shè)置國際化文件的基礎(chǔ)名（去掉語言國家代碼的）
        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;
}

我們真實(shí) 的情況是放在了i18n目錄下胳螟，所以我們要去application.properties配置這個(gè)messages的路徑昔馋；

spring.messages.basename=i18n.login

配置頁面國際化值

去頁面獲取國際化的值，查看Thymeleaf的文檔糖耸，找到message取值操作為：#{...}秘遏。我們?nèi)ロ撁鏈y(cè)試下：

IDEA還有提示，非常智能的蔬捷！

我們可以去啟動(dòng)項(xiàng)目垄提，訪問一下，發(fā)現(xiàn)已經(jīng)自動(dòng)識(shí)別為中文的了周拐！

但是我們想要更好铡俐！可以根據(jù)按鈕自動(dòng)切換中文英文！

配置國際化解析

在Spring中有一個(gè)國際化的Locale （區(qū)域信息對(duì)象）妥粟；里面有一個(gè)叫做LocaleResolver （獲取區(qū)域信息對(duì)象）的解析器审丘！

我們?nèi)ノ覀僿ebmvc自動(dòng)配置文件，尋找一下勾给！看到SpringBoot默認(rèn)配置：

@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 這個(gè)類中有一個(gè)方法

public Locale resolveLocale(HttpServletRequest request) {
    Locale defaultLocale = this.getDefaultLocale();
    // 默認(rèn)的就是根據(jù)請(qǐng)求頭帶來的區(qū)域信息獲取Locale進(jìn)行國際化
    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;
        }
    }
}

那假如我們現(xiàn)在想點(diǎn)擊鏈接讓我們的國際化資源生效锅知，就需要讓我們自己的Locale生效！

我們?nèi)プ约簩懸粋€(gè)自己的LocaleResolver脓钾，可以在鏈接上攜帶區(qū)域信息售睹！

修改一下前端頁面的跳轉(zhuǎn)連接：

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

我們?nèi)懸粋€(gè)處理的組件類！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;

//可以在鏈接上攜帶區(qū)域信息
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;
    }
    //解析請(qǐng)求
    @Override
    public Locale resolveLocale(HttpServletRequest request) {
        //獲取請(qǐng)求中的語言參數(shù)
        String language = request.getParameter("l");
        Locale defaultLocale = this.getDefaultLocale(); //如果沒有就使用默認(rèn)的
        //如果請(qǐng)求的鏈接不為空可训，攜帶了國際化參數(shù)
        if (!StringUtils.isEmpty(language)){
            //zh_CN 字符串分割
            String[] split = language.split("_");
            //國家昌妹、地區(qū)
            Locale locale = new Locale(split[0],split[1]);
            return locale;
        }

        return defaultLocale;
    }

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

    }
}

為了讓我們的區(qū)域化信息能夠生效，我們需要再配置一下這個(gè)組件握截！在我們自己的MvcConofig下添加bean飞崖；

//自定義的國際化
@Bean
public LocaleResolver localeResolver(){
    return new MyLocalResolver();
}

我們重啟項(xiàng)目，來訪問一下谨胞，發(fā)現(xiàn)點(diǎn)擊按鈕可以實(shí)現(xiàn)成功切換固歪！搞定收工！

登錄功能實(shí)現(xiàn)

1胯努、修改index.html

添加登錄動(dòng)作

<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叶组、我們?nèi)懸粋€(gè)處理的組件類圈暗！LoginController

@Controller
public class LoginController {

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

        //具體業(yè)務(wù)
        if(!StringUtils.isEmpty(username) && "123456".equals(password)){
            return "dashboard";
        }else {
            //告訴用戶冰更，你登陸失敗了
            model.addAttribute("msg","用戶名或者密碼錯(cuò)誤北滥！");
            return "index";
        }
    }
}

3胞四、測(cè)試

登錄成功

登錄失敗

這里登錄失敗回到index頁面恬汁，沒有其他提示，我們這里加個(gè)提示

    <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

登錄成功之后氓侧，我們應(yīng)該重定向到dashboard，修改LoginController

@Controller
public class LoginController {

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

        //具體業(yè)務(wù)
        if(!StringUtils.isEmpty(username) && "123456".equals(password)){
            return "redirect:/main.html";
        }else {
            //告訴用戶导狡，你登陸失敗了
            model.addAttribute("msg","用戶名或者密碼錯(cuò)誤约巷！");
            return "index";
        }
    }
}

這里有個(gè)問題，我們無論登錄與否旱捧，我們都可以訪問dashboard独郎，這個(gè)是不該的，那怎么辦呢枚赡？

加入攔截器氓癌！

登錄攔截器

1、我們?cè)黾右粋€(gè)配置的攔截器贫橙！LoginHandlerInterceptor

@Controller
public class LoginController {

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

        //具體業(yè)務(wù)
        if(!StringUtils.isEmpty(username) && "123456".equals(password)){
            session.setAttribute("loginUser",username);
            return "redirect:/main.html";
        }else {
            //告訴用戶贪婉，你登陸失敗了
            model.addAttribute("msg","用戶名或者密碼錯(cuò)誤！");
            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){

        //具體業(yè)務(wù)
        if(!StringUtils.isEmpty(username) && "123456".equals(password)){
            //往httpRequest增加username屬性
            request.setAttribute("loginUser",username);
            return "redirect:/main.html";
        }else {
            //告訴用戶才顿，你登陸失敗了
            model.addAttribute("msg","用戶名或者密碼錯(cuò)誤！");
            return "index";
        }
    }
}

3尤蒿、在MyMvcConfig 往bean中注冊(cè)攔截器

//自定義的攔截器生效

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

4郑气、測(cè)試 http://localhost:8080/sen/main.html

發(fā)現(xiàn)我們的靜態(tài)資源被攔截了，修改配置

@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" >[[${session.loginUser}]]</a>

測(cè)試

增刪改查

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" >
        <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、我們?nèi)懸粋€(gè)處理的組件類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巩螃、測(cè)試

[圖片上傳失敗...(image-8f0116-1615942201409)]

確實(shí)跳轉(zhuǎn)過來了演怎，可是沒有高亮，體驗(yàn)不好

list dashboard里面有大量重復(fù)的代碼避乏，我們可以利用thymeleaf（Fragments）抽取出來爷耀，代碼復(fù)用

dashboard.html

<div class="container-fluid">
    <div class="row">
        <!--側(cè)邊欄-->
        <nav class="col-md-2 d-none d-md-block bg-light sidebar" th:fragment="sidebar">

list

<div class="container-fluid">
    <div class="row">
        <!--側(cè)邊欄-->
        <div th:insert="~{dashboard::sidebar}"></div>

同理，將頂部也代碼復(fù)用

dashboard.html

<!--頂部導(dǎo)航欄-->
<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" >[[${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" >Sign out</a>
        </li>
    </ul>
</nav>

list

<!--頂部導(dǎo)航欄-->
<div th:insert="~{dashboard::navbar}"></div>

代碼復(fù)用plus

在templates下建立代碼公共區(qū)

list dashboard引用

<body>
    <!--頂部導(dǎo)航欄-->
    <div th:replace="~{Commons/commons::navbar}"></div>

    <div class="container-fluid">
        <div class="row">
            <!--側(cè)邊欄-->
            <div th:replace="~{Commons/commons::sidebar}"></div>

解決側(cè)邊欄拍皮，高亮問題

可以看到

<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是控制高亮的歹叮，我們想辦法讓它隨著點(diǎn)擊添加高亮

dashboard.xml，傳遞參數(shù)active='main.html'

<div class="container-fluid">
    <div class="row">
        <!--側(cè)邊欄-->
        <div th:replace="~{Commons/commons::sidebar(active='main.html')}"></div>

list.xml铆帽，傳遞參數(shù)active='list.html'

<div class="container-fluid">
    <div class="row">
        <!--側(cè)邊欄-->
        <div th:replace="~{Commons/commons::sidebar(active='list.html')}"></div>

commons.xml接受參數(shù),th:class="${active== 'main.html'?'nav-link active': 'nav-link'}"

測(cè)試

查 列表循環(huán)展示

修改list.xml

<div class="container-fluid">
    <div class="row">
        <!--側(cè)邊欄-->
        <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>
        <!--頂部導(dǎo)航欄-->
        <div th:replace="~{Commons/commons::navbar}"></div>

        <div class="container-fluid">
            <div class="row">
                <!--側(cè)邊欄-->
                <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>

增 添加員工實(shí)現(xiàn)

按鈕提交

<div class="container-fluid">
    <div class="row">
        <!--側(cè)邊欄-->
        <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頁面，復(fù)制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>
    <!--我們?cè)赾ontroller接受的是一個(gè)Employee慰技，所有我們需要提交的是其中的一個(gè)屬性！-->
    <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">

增加一個(gè)controller處理

//添加一個(gè)員工
@PostMapping("/emp")
public String addEmp(Emplyee emplyee){
System.out.println(emplyee);
//調(diào)用底層業(yè)務(wù)方法保存員工信息
employeeMapper.save(emplyee);
return "redirect:/emps";
}

日期格式修改

我們可以通過

#設(shè)置日期格式
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){
        //查出原來數(shù)據(jù)
        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>
        <!--頂部導(dǎo)航欄-->
        <div th:replace="~{Commons/commons::navbar}"></div>

        <div class="container-fluid">
            <div class="row">
                <!--側(cè)邊欄-->
                <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>
                            <!--我們?cè)赾ontroller接受的是一個(gè)Employee柒爸，所有我們需要提交的是其中的一個(gè)屬性！-->
                            <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";
}

這里我們底層是自增的揍鸟，所有無所修改成功與否，都會(huì)新加數(shù)據(jù)，是因?yàn)槲覀冃薷捻撁嫣峤坏膃mployee沒有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){
    //調(diào)用底層業(yè)務(wù)方法保存員工信息
    employeeMapper.deleteEmployeeById(id);
    return "redirect:/emps";
}

404頁面

在templates下面建404晰奖，將404.html放在里面即可

小結(jié)

前端：

• 后臺(tái)模板：別人寫好的，我們拿來改成自己需要的 后臺(tái)模板bootstrap x-admin
• 前端框架：組件：知識(shí)能夠通過前端框架自己手動(dòng)組合拼接一個(gè)網(wǎng)站頁面（index\about\blog\post(提交blog)\user）腥泥！Bootstrap,Layui,semantic-ui
  • 柵格系統(tǒng)
  • 導(dǎo)航欄
  • 側(cè)邊欄
  • 表單

如何讓快速開發(fā)一個(gè)網(wǎng)站匾南？

• 前端搞定：頁面長什么樣子：數(shù)據(jù)
• 設(shè)計(jì)數(shù)據(jù)庫（數(shù)據(jù)庫設(shè)計(jì)難點(diǎn)！）
• 前端讓他能夠自動(dòng)運(yùn)行蛔外，獨(dú)立化工程

• 數(shù)據(jù)接口如何對(duì)接：json;對(duì)象 all in one
• 前后端聯(lián)調(diào)測(cè)試蛆楞！