SpringBoot（四）SpringBootWeb开发（国际化员工信息管理系统）

2023-12-24 08:57:10

一：导入模板引擎

在pom.xml文件中导入Thymeleaf依赖：
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
Thymeleaf的介绍、具体功能、拥有哪些方法、怎么接管前端可以参考官方文档
https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#using-texts

二：开发注意
建立 Spring Initializr 项目，参考以前发布的文档

这个项目会自动生成 resources 文件夹

在这个文件夹下存在 static、templates 两个文件夹

我们所有的静态资源都要放在 static 包下，例：css、js (JavaScript)、img (图片)、fonts (字体)等静态资源，因为调取静态资源时，SpringBoot自动以static为父级，直接到它下面寻找对应的静态资源，引入路径：../css/xxx.css

网页( .html)文件放在 templates 文件夹下，因为使用了Thymeleaf接管前端，SpringBoot会自动到 templates 中寻找对应的网页
配置properties文件
#配置文件的真实位置
spring:
  messages:
    basename: i18n.login
#关闭模板引擎的缓存
  thymeleaf:
    cache: false
  mvc:
    format:
      date: yyyy-MM-dd
国际化文件位置、关闭缓存、自定义时间日期输入与显示格式
查看静态资源：

查看添加的webjars包的源码：http://localhost:8080/webjars/

查看添加到static下的静态资源：http://localhost:8080/img/xxx.img

扩展：

我们只能在static目录下放静态资源吗？不，可以放在其他地方，我们可以进到源码里看，看它支持那些文件夹，对路径的定义是什么样的，怎么创建文件夹才会被识别到，优先级的关系是什么样的。（优先级：resources>static(默认)>public）

三：项目开发

注意：所有页面的静态资源都需要使用thymeleaf进行接管！

（一）准备

html文件放在 templates 文件夹下
所有静态资源（js、css、img等）放在static下

（二）首页实现

1. 在 templates 下新建 index.html 文件

index.html：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <link rel="stylesheet" href="/webjars/bootstrap/4.1.0/css/bootstrap.min.css">
</head>
<body>
<div style="width: 10%; position: absolute;top: 30%;left: 45%">
    <form th:action="@{/user/login}">
        <p style="color: red" th:if="${not #strings.isEmpty(msg)}" th:text="${msg}"></p>
        <a th:text="#{login.user}">用户名:</a>：
        <input type="text" name="username">
        <a th:text="#{login.passWord}">密码:</a>
        <input type="password" name="password" >
        <button type="submit" th:text="#{login.enter}" style="width:100px;height:40px;">
            登录
        </button>
    </form>
    <a th:href="@{/index.html(a='zh_CN')}">中文</a>
    <a th:href="@{/index.html(a='en_US')}">英文</a>
</div>
</body>
</html>

2. 实现网页跳转，有两种方法

(1) controller层实现（不推荐）

@Controller
public class MyWebController{
    @RequestMapping("/index")
    public String index(){
        return "index";
    }
}

(2)与DemoApplication同级目录下新建config包，自定义MyWebMvcConfig继承WebMvcConfigurer，重写addViewControllers方法

@Configuration
public class MyWebMvcConfic implements WebMvcConfigurer {
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        //变量名称.addViewController("地址信息").setViewName("跳转的页面");      
        registry.addViewController("/").setViewName("index");
        //设置多个路径  
        registry.addViewController("/index.html").setViewName("index");
        registry.addViewController("/main.html").setViewName("dashboard");
    }

}

（三）国际化(添加与否纯凭个人喜好与公司要求)

1. resources包下新建i18n包，包中新建文件如图所示：

#login内为默认显示
login.tip=你好

#en_US为英语
login.tip=hello

#zh_CN为中文
login.tip=你好

2. 配置文件中配置属性如下：

spring:
  messages:
    basename: i18n.login

3. config包下新建MyLocalResolver.class，重写resolveLocale方法、setLocale方法

package com.demo.config;

import org.springframework.context.annotation.Configuration;
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;

@Configuration
public class MyLocalResolver implements LocaleResolver {
    //国际化
    @Override
    public Locale resolveLocale(HttpServletRequest request) {
        //获取请求中的语言参数
        String language = request.getParameter("a");
        //如果参数没有就使用系统默认
        Locale locale = Locale.getDefault();
        if (!StringUtils.isEmpty(language)){
            String[] split= language.split("_");
            locale = new Locale(split[0],split[1]);
        }
        return locale;
    }
    @Override
    public void setLocale(HttpServletRequest request, HttpServletResponse response, Locale locale) { }
}

4. 将重写后的configration配置到springboot成为Bean组件，在MyWebMvcConfig下配置

@Configuration
public class MyWebMvcConfic implements WebMvcConfigurer {
    //自定义国际化组件
    @Bean
    public LocaleResolver localeResolver(){
        return new MyLocalResolver();
    }
}

5. 在index页面添加如下代码，即可实现中英文切换

6. 如果想实现其他国家的语言切换，可以添加对应语言的login_xx_XX.properties，这个格式是固定的，xx_XX为语言种类

7. 注意：需要配置i18n文件，自定义组件LocalResolver，将组件配置到SpringBoot中

（四）实现登录功能+拦截器

1.登录功能

(1) 定义index登录页面，，添加账户名、密码输入框，添加提交按钮

<div style="width: 10%; position: absolute;top: 30%;left: 45%">
    <form th:action="@{/user/login}">
        <p style="color: red" th:if="${not #strings.isEmpty(msg)}" th:text="${msg}"></p>
        <a th:text="#{login.user}">用户名:</a>：
        <input type="text" name="username">
        <a th:text="#{login.passWord}">密码:</a>
        <input type="password" name="password" >
        <button type="submit" th:text="#{login.enter}" style="width:100px;height:40px;">
            登录
        </button>
    </form>
    <a th:href="@{/index.html(a='zh_CN')}">中文</a>
    <a th:href="@{/index.html(a='en_US')}">英文</a>
</div>

(2) 在MyWebMvcConfig中重写拦截器方法

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

(3) 对用户登录的信息进行验证

1. 添加LoginController

2. 实现登录验证

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

        //具体业务
        if (!StringUtils.isEmpty(username) && "123".equals(password)){
            session.setAttribute("loginUser",username);
            return "redirect:/main.html";
        }else {
            model.addAttribute("msg","登录失败");
            return "index";
        }
    }

(4) 添加拦截器目的

对用户登录的session信息进行验证

　　防止浏览器端绕过登录，直接进入到应用，或者session超时后，返回到登录页面

(5) 点击登录跳转到主页面dashboard.html页面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>dashboard</title>
    <link rel="stylesheet" href="/webjars/bootstrap/4.1.0/css/bootstrap.min.css">
</head>
<body>
<p>欢迎[[${session.loginUser}]]</p>
<a th:href="@{/index.html}">首页</a>
<a th:href="@{/emps}">员工管理</a>
<a th:href="@{/user/logout}">注销</a>
</body>
</html>

(6) MyWebMvcConfic实现跳转

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

}

（五）员工列表CRUD

一：查询

(1)伪造数据库员工与部门信息

1. 与DemoApplication同级目录新建dao与pojo包

2. 在dao包下新建DepartmentDao、EmployeeDao两个类

3. 在pojo包下新建Department、Employee两个类

代码如下

DepartmentDao：

package com.demo.dao;

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

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

@Repository
//部门表操作
public class DepartmentDao {

    //模拟数据库数据
    private static Map<Integer, Department> departments = null;
    static {
        departments = new HashMap<Integer, Department>();//创建一个部门表

        departments.put(1,new Department(1,"教学部"));
        departments.put(2,new Department(2,"教研部"));
        departments.put(3,new Department(3,"科学部"));
        departments.put(4,new Department(4,"党委"));
        departments.put(5,new Department(5,"团委"));

    }

    //获得所有部门信息
    public Collection<Department> getDepartments(){
        return departments.values();
    }
    //通过id得到部门
    public Department getDepartmentById(Integer id){
        return departments.get(id);
    }

}

EmployeeDao：

package com.demo.dao;

import com.demo.pojo.Department;
import com.demo.pojo.Employee;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;

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

@Repository
//员工表操作
public class EmployeeDao {
    //模拟数据库数据
    private static HashMap<Integer, Employee> employees = null;
    //员工有所属的部门，部门表为外表
    @Autowired
    private DepartmentDao departmentDao;

    static {
        //创建一个员工表
        employees = new HashMap<Integer,Employee>();
        employees.put(1,new Employee(1,"董文杰1","1181101901@qq.com",1,new Department(1,"教学部")));
        employees.put(2,new Employee(2,"董文杰2","1181101902@qq.com",2,new Department(2,"教研部")));
        employees.put(3,new Employee(3,"董文杰3","1181101903@qq.com",1,new Department(3,"科学部")));
        employees.put(4,new Employee(4,"董文杰4","1181101904@qq.com",1,new Department(4,"党委")));
        employees.put(5,new Employee(5,"董文杰5","1181101905@qq.com",2,new Department(5,"团委")));
    }

    //id递增
    public static Integer initId = 6;
    //增加员工
    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 delete(Integer id){
        employees.remove(id);
    }
}

Department：

package com.demo.pojo;

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

//伪造数据库
//部门表
@Data
@AllArgsConstructor//有参构造
@NoArgsConstructor//无参构造
public class Department {
    private Integer id;
    private String departmentName;
}

Employee：

package com.demo.pojo;

import lombok.Data;
import lombok.NoArgsConstructor;

import java.util.Date;

@Data
@NoArgsConstructor
public class Employee {
    private Integer id;
    private String name;
    private String email;
    private Integer gender;//1男，2女
    private Department department;
    private Date birth;

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

(2) 在templates包下新建emp包，在emp包下新建list.html文件

list.html：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/webjars/bootstrap/4.1.0/css/bootstrap.min.css">
    <title>list</title>
</head>
<body>
<table class="table table-bordered table-hover">
    <a class="btn btn-sm btn-success" th:href="@{/emp}">添加员工</a>
    <thead>
        <tr>
            <th>id</th>
            <th>name</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.getName()}"></td>
            <td th:text="${emp.getEmail()}"></td>
            <td th:text="${emp.getGender()==1?'男':'女'}"></td>
            <td th:text="${emp.getDepartment().getDepartmentName()}"></td>
            <td th:text="${#dates.format(emp.getBirth(),'yyyy.MM.dd HH:mm')}"></td>
            <td>
                <a th:href="@{'/emp/'+${emp.getId()}}"><button class="btn btn-sm btn-primary">编辑</button></a>
                <a th:href="@{'/delemp/'+${emp.getId()}}"><button class="btn btn-sm btn-danger">删除</button></a>
            </td>
        </tr>
    </tbody>
</table>
</body>
</html>

(3) 前往controller层新建EmployeeController控制类

EmployeeController：

@Autowired
    EmployeeDao emploeeDao;
    @Autowired
    DepartmentDao departmentDao;
    @RequestMapping("/emps")
    public String list(Model model){
        Collection<Employee> employees = emploeeDao.getall();
        model.addAttribute("emps",employees);
        return "emp/list";
    }

二：添加

在查询列表list页面添加新增按钮

(1) emp包下新建add.html

add.html：

<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>add</title>
    <link rel="stylesheet" href="/webjars/bootstrap/4.1.0/css/bootstrap.min.css">
</head>
<body>
<form class="form-horizontal" th:action="@{/emp}" method="post" style="position: absolute;left: 5%;width: 90%">
    <div class="form-group">
        <label for="name" class="col-sm-2 control-label">Name</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" name="name" id="name" placeholder="name">
        </div>
    </div>

    <div class="form-group">
        <label for="email" class="col-sm-2 control-label">Email</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" name="email" id="email" placeholder="email">
        </div>
    </div>

    <div class="form-group">
        <label for="birth" class="col-sm-2 control-label">Birth</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" name="birth" id="birth" placeholder="birth">
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label">Gender</label><br/>
        <div class="form-check form-check-inline">
            <input type="radio" class="form-check-input" name="gender" value="1">
            <label class="form-check-label">男</label>
        </div>
        <div class="form-check form-check-inline">
            <input type="radio" class="form-check-input" name="gender" value="2">
            <label class="form-check-label">女</label>
        </div>
    </div>

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

    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">添加</button>
        </div>
    </div>
</form>
</body>
</html>

(2) 点击新增按钮，在EmployeeController实现页面跳转

@GetMapping("/emp")
    public String toAddPage(Model model){
        //查询部门信息
        Collection<Department> departments = departmentDao.getDepartments();
        model.addAttribute("departments",departments);
        return "/emp/add";
    }

(3) 填写新增员工信息后点击提交，controller层EmployeeController实现添加操作

EmployeeController：

@PostMapping("/emp")
    public String addEmp(Employee employee){
        //添加的操作   forward
        //调用底层业务方法保存员工信息
        emploeeDao.save(employee);
        return "redirect:/emps";
    }

注意：跳转时都是"/emp"，为什么会分成两个方法，因为注解不一样，PostMapping处理method为post的请求，而Get处理普通请求；

三：修改

在员工信息后添加修改按钮

(1) emp包下新建update.html

update.html：

<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>update</title>
  <link rel="stylesheet" href="/webjars/bootstrap/4.1.0/css/bootstrap.min.css">
</head>
<body>
<form class="form-horizontal" th:action="@{/updateEmp}" method="post" style="position: absolute;left: 5%;width: 90%">
  <input type="hidden" name="id" th:value="${emp.getId()}">
  <div class="form-group">
    <label for="name" class="col-sm-2 control-label">Name</label>
    <div class="col-sm-10">
      <input th:value="${emp.getName()}" type="text" class="form-control" name="name" id="name" placeholder="name">
    </div>
  </div>

  <div class="form-group">
    <label for="email" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input th:value="${emp.getEmail()}" type="text" class="form-control" name="email" id="email" placeholder="email">
    </div>
  </div>

  <div class="form-group">
    <label for="birth" class="col-sm-2 control-label">Birth</label>
    <div class="col-sm-10">
      <input th:value="${#dates.format(emp.getBirth(),'yyyy-MM-dd HH:mm')}" type="text" class="form-control" name="birth" id="birth" placeholder="birth">
    </div>
  </div>

  <div class="form-group">
    <label class="col-sm-2 control-label">Gender</label><br/>
    <div class="form-check form-check-inline">
      <input th:checked="${emp.getGender()==1}" type="radio" class="form-check-input" name="gender" value="1">
      <label class="form-check-label">男</label>
    </div>
    <div class="form-check form-check-inline">
      <input th:checked="${emp.getGender()==2}" type="radio" class="form-check-input" name="gender" value="2">
      <label class="form-check-label">女</label>
    </div>
  </div>

  <div class="form-group">
    <label class="col-sm-2 control-label">Department</label>
    <!--我们在controller接收的是一个Employee，所以我们需要提交的是其中的一个属性-->
    <select class="form-control" name="department.id">
      <option th:selected="${dept.getId()==emp.getDepartment().getId()}" th:each="dept:${departments}"
              th:text="${dept.getDepartmentName()}" th:value="${dept.getId()}">教学部</option>
    </select>
  </div>

  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">确认修改</button>
    </div>
  </div>
</form>
</body>
</html>

(2) 点击修改按钮，在EmployeeController实现页面跳转

@GetMapping("/emp/{id}")
    public String toUpdateEmp(@PathVariable("id") Integer id, Model model){
        Employee employee = emploeeDao.getEmployeeById(id);
        model.addAttribute("emp",employee);
        //查询部门信息
        Collection<Department> departments = departmentDao.getDepartments();
        model.addAttribute("departments",departments);
        return "/emp/update";
    }

(3) 修改员工信息后点击提交，controller层EmployeeController实现修改操作

EmployeeController：

//员工信息修改
    @RequestMapping("/updateEmp")
    public String updateEmp(Employee employee){
        emploeeDao.save(employee);
        return "redirect:/emps";
    }

三：删除

在员工信息后添加删除按钮

(1) 点击删除按钮，在EmployeeController实现功能

//删除员工
    @GetMapping("/delemp/{id}")
    public String delEmp(@PathVariable("id") Integer id){
        emploeeDao.delete(id);
        return "redirect:/emps";
    }

注意：删除与添加和修改不一样，删除直接依据当前员工id查询即可删除。