B站学习springboot笔记(3)

最新推荐文章于 2024-07-25 22:33:38 发布
最新推荐文章于 2024-07-25 22:33:38 发布
阅读量247 收藏
点赞数 2
分类专栏： 部分总结笔记 文章标签： spring boot
版权声明：本文为CSDN博主小智RE0-李智青-原创文章,转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MrTumnus/article/details/121012017
版权

学习来源–>B站 传送门–> 【狂神说Java】SpringBoot最新教程IDEA版通俗易懂

这部分整理20p~28p的初始员工管理系统完成(伪造数据库,即并未创建真实存在的数据库);
视频中的springboot版本为2.2.0版本;
本次学习时springboot版本使用–>2.5.6版本;

文章目录

1. 准备工作

首先新建项目;

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

导入静态资源

在这里插入图片描述

css,img,js,这几个文件在bootstrap官网应该可以找到的

在这里插入图片描述

本次的项目不使用数据库,而是伪造数据库;

先去pom.xml下导入thymeleaf以及lombok依赖

<!--使用thymeleaf-->
<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf-spring5</artifactId>
</dependency>
<dependency>
    <groupId>org.thymeleaf.extras</groupId>
    <artifactId>thymeleaf-extras-java8time</artifactId>
</dependency>
<!--lombok依赖-->
<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
</dependency>

若没有安装插件,记得去设置中plugins下载安装Lombok插件,安装后记得要重启IDEA

在这里插入图片描述

在pojo包下创建Department类;作为部门类;

package com.xiaozhi.pojo;

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

/**
 * @author by CSDN@小智RE0
 * @date 2021-10-28 12:59
 * 部门实体类;
 */
//使用lombok注解;生成get,set方法,构造方法,toString()方法.....
@Data
@NoArgsConstructor
@AllArgsConstructor
public class Department {
    //部门ID,名称;
    private Integer id;
    private String departmentName;
}

在pojo包下创建Employee员工类;

package com.xiaozhi.pojo;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.util.Date;

/**
 * @author by CSDN@小智RE0
 * @date 2021-10-28 13:08
 * 员工实体类
 */
@Data
@NoArgsConstructor
public class Employee {
    //员工ID,名称,邮箱,性别;生日
    private Integer id;
    private String lastName;
    private String email;
    private Integer  sex;
    private Date birthday;
    //部门;
    private Department department;
    //构造方法;
    public Employee(Integer id, String lastName, String email, Integer sex, Department department) {
        this.id = id;
        this.lastName = lastName;
        this.email = email;
        this.sex = sex;
        this.department = department;
        this.birthday = new Date();
    }
}

在dao包下创建DepartmentDao; 作为部门持久层;
这里开始先放两个处理;查所有部门以及根据部门ID查询部门;

package com.xiaozhi.dao;

import com.xiaozhi.pojo.Department;

import java.util.Collection;
import java.util.HashMap;
import java.util.Map;
/**
 * @author by CSDN@小智RE0
 * @date 2021-10-28 13:17
 * 部门类持久层;
 */
 @Repository
public class DepartmentDao {
    //模拟数据库;
    private static Map<Integer, Department> departmens=null;

    static {
        //创建部门表;
        departmens= new HashMap<>();
        //添加数据;
        departmens.put(100,new Department(100,"人事部"));
        departmens.put(101,new Department(101,"财务部"));
        departmens.put(102,new Department(102,"研发部"));
        departmens.put(103,new Department(103,"开发部"));
        departmens.put(104,new Department(104,"产品部"));
    }

    //对虚拟数据库进行操作;

    //获取所有的部门信息;
    public Collection<Department> findAllDepartment(){
        return departmens.values();
    }

    //根据ID获取部门;
    public Department findDepartById(Integer id){
        return departmens.get(id);
    }
}

在dao包下创建EmployeeDao类; 作为员工持久层;

package com.xiaozhi.dao;

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

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

/**
 * @author by CSDN@小智RE0
 * @date 2021-10-28 13:17
 * 员工持久层
 */
@Repository
public class EmployeeDao {
    //模拟数据库;
    private static Map<Integer, Employee> employees = null;

    //员工还有对应的部门表;
    @Autowired
    private DepartmentDao departmentDao;

    static {
        //创建数据表;
        employees = new HashMap<>();
        //存放数据;
        employees.put(0,new Employee(0,"xiaozhire0","1236547@qq.com",1,new Department(102,"研发部")));
        employees.put(1,new Employee(1,"阿杰","1236547@qq.com",0,new Department(103,"开发部")));
        employees.put(2,new Employee(2,"大白","asda@qq.com",1,new Department(100,"人事部")));
        employees.put(3,new Employee(3,"村头","1237@qq.com",0,new Department(103,"开发部")));
        employees.put(4,new Employee(4,"杨树","122547@qq.com",0,new Department(102,"研发部")));
        employees.put(5,new Employee(5,"柳树","1326547@qq.com",1,new Department(101,"财务部")));
        employees.put(6,new Employee(6,"苹果树","31236547@qq.com",0,new Department(103,"开发部")));
        employees.put(7,new Employee(7,"面包","112316547@qq.com",1,new Department(103,"开发部")));
        employees.put(8,new Employee(8,"炒面","1231547@qq.com",0,new Department(104,"产品部")));
        employees.put(9,new Employee(9,"大话","1231231547@qq.com",1,new Department(104,"产品部")));
    }

    //做到添加员工时,ID自动递增;
    private static Integer initId =10;

    //添加员工;
    public void  addEmployee(Employee employee){
        //先看这个员工是否有Id;
        if(employee.getId()==null){
            employee.setId(initId++);
        }
        //设置部门;
        employee.setDepartment(departmentDao.findDepartById(employee.getDepartment().getId()));

        //添加到模拟数据表中;
        employees.put(employee.getId(),employee);
    }

    //获取全部员工;
    public Collection<Employee> findAllEmployees(){
        return employees.values();
    }

    //根据员工Id查员工;
    public Employee findEmployeeByEId(Integer id){
        return employees.get(id);
    }

    //根据员工ID删除员工;
    public void deleteEmployee(Integer id){
        employees.remove(id);
    }
}

2.首页实现

在controller包下创建WelcomeController类,控制首页的请求;

package com.xiaozhi.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

/**
 * @author by CSDN@小智RE0
 * @date 2021-10-28 14:10
 * 首页请求处理;
 */
@Controller
public class WelcomeController {
    //到达首页;
    @RequestMapping({"/", "/index.html"})
    public String toIndex(){
        return "index";
    }
}

启动项目;访问http://localhost:8080/时;页面虽然加载,但是css样式表的内容却没内嵌导入;

在这里插入图片描述

实际上,这个首页跳转也可以写在自定义配置的config中;

在WelcomeController类中刚才写的请求处理直接删除掉;

然后在config包下创建MyMvcConfig类,自定义一些mvc的配置;
进行视图跳转;

package com.xiaozhi.config;

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

/**
 * @author by CSDN@小智RE0
 * @date 2021-10-28 12:52
 */
@Configuration
public class MyMvcConfig implements WebMvcConfigurer {
    //添加视图跳转;
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        //跳转首页
        registry.addViewController("/").setViewName("index");
        registry.addViewController("/index.html").setViewName("index");
    }
}

在application.properties下配置关闭模板引擎的缓存;改改虚拟路径;改改端口;

# 关闭模板template的缓存
spring.thymeleaf.cache=false

#更改项目的端口
server.port=5277

#更改项目的虚拟目录;
server.servlet.context-path=/xiaozhire0

OK,对templates模板下的首页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">Please sign in</h1>
			<label class="sr-only">Username</label>
			<input type="text"  name="username" class="form-control" placeholder="Username" required="" autofocus="">
			<label class="sr-only">Password</label>
			<input type="password" name="password" class="form-control" placeholder="Password" required="">
			<div class="checkbox mb-3">
				<label>
          <input type="checkbox" value="remember-me"> Remember me
        </label>
			</div>
			<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
			<p class="mt-5 mb-3 text-muted">© 2017-2018</p>
			<a class="btn btn-sm">中文</a>
			<a class="btn btn-sm">English</a>
		</form>

	</body>

</html>

清除浏览器缓存,访问http://localhost:5277/xiaozhire0/时即可加载到样式;

在这里插入图片描述

OK,把其他几个页面的链接资源导入路径地址也改一改;

3.国际化

也就是说,你做的项目至少有两套语言;比如说中英文切换;

在这里插入图片描述

—>Dubbo官网

–>Dubbo文档

那么,开始吧;首先保证自己的配置文件默认有支持UTF-8;

在这里插入图片描述

确认没问题后;
在resources目录下创建i18n文件夹;注意不要建错路径了哦

在这里插入图片描述

那么,你知道为啥创建的文件夹叫i18n?
国际化–>对应英文internationalization;i和n之间有18个单词;所以简写为i18n

OK,在i18n目录下创建login.properties文件;以及login_zh_CN.properties文件

诶;他们两个合并了;
在这里插入图片描述
那么,你就可以直接右键Resources Bundle'login',来添加文件了在这里插入图片描述
添加en_UsS试试;在这里插入图片描述
诶,自动识别英文;
在这里插入图片描述
生成配置文件
在这里插入图片描述

打开这几个创建的文件在IDEA中点击下面的Resource Bundle;就能做到可视化配置
在这里插入图片描述
比如说;我添加了一个login.tip;这边就自动生成了;在这里插入图片描述
点击左下角的Text,这时已经存在;
在这里插入图片描述
是不是很方便呢
OK,接着回到可视化;默认配置为中文显示;然后编写对应的中英文文件;
在这里插入图片描述
哈哈哈;这个实际上就是键值对配置对应了
切换到几个文件的Text看看;是不是已经自动配置了呢;一次性写了三个配置文件;
在这里插入图片描述
OK,那么继续做其他的中英文配置吧;
OK,首页登录的中英文切换配置基本结束;
在这里插入图片描述

到这里,当然还不能完全做到转换;
在IDEA中;按照Ctrl+Shift+Alt+N,切换到Classes搜索MessageSourceAutoConfiguration类;
在这里插入图片描述
这里有提到MessageSourceProperties配置文件类;Ok,那就去这个类看看
在这里插入图片描述
这里有提到编码为UTF-8
在这里插入图片描述
那么怎么配置国际化呢?
打开application.properties配置文件;添加配置;

#配置读取位置;
spring.messages.basename=i18n.login

根据配置文档的thymeleaf模板引擎表达式提示,需要在跳转链接处使用#{… }
在这里插入图片描述
OK,那就去index.html修改链接吧;设置时有提示.
在这里插入图片描述
OK,剩下的几个也改改;

在这里插入图片描述

这时访问的默认显示就好了;

在这里插入图片描述

OK,这个基础默认显示算是完成了;那么具体还要做到点击下面的中英文时切换对应版本的配置语言;才算真正完成;
全局搜索这个WebMvcAutoConfiguration类;找到其中的静态内部类EnableWebMvcConfiguration;
其中有这个localeResolver()方法;
2.5.6版本在这里插入图片描述

2.2.0版本

在这里插入图片描述

源码这部分和之前的有所不同;
前面判断是否有自己配置的,所有,就走前面自己配置的;
否则根据AcceptHeaderLocaleResolver类进行配置;
在这里插入图片描述
这个类有实现接口LocaleResolver;大概可以理解为,实现这个接口后,实现类就可进行国际化配置功能;

在这里插入图片描述

回到首页index.html;先在index.html添加切换的链接请求;

在这里插入图片描述

然后,去自定义解析实现类试试;
在config包下创建MyLocaleResolver类;

package com.xiaozhi.config;

import org.springframework.web.servlet.LocaleResolver;
import org.thymeleaf.util.StringUtils;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.Locale;

/**
 * @author by CSDN@小智RE0
 * @date 2021-10-28 17:01
 */
//自定义配置国际化类;
public class MyLocaleResolver  implements LocaleResolver {
    //先解析请求;
    @Override
    public Locale resolveLocale(HttpServletRequest request) {
        //获取请求的参数;注意;l这里就是语言的简写;
        String language = request.getParameter("l");
        //获取默认的解析; 也就是保证,若没配置就用默认的;
        Locale locale = Locale.getDefault();

        //判断得到的参数值是不是为空的
        if(!StringUtils.isEmpty(language)){
            //若不未空,就得切割字符串了; 通过 "_"分为国家和地区的两部分数组;
            String[] s = language.split("_");
            locale = new Locale(s[0], s[1]);
        }
        return locale;
    }

    //这里不写,直接空实现;
    @Override
    public void setLocale(HttpServletRequest request, HttpServletResponse response, Locale locale) {

    }
}

当然,还要把自定义的解析器注入到容器中;
在MyMvcConfig类中进行;

package com.xiaozhi.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.LocaleResolver;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * @author by CSDN@小智RE0
 * @date 2021-10-28 12:52
 */
@Configuration
public class MyMvcConfig implements WebMvcConfigurer {
    //添加视图跳转;
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        //跳转首页
        registry.addViewController("/").setViewName("index");
        registry.addViewController("/index.html").setViewName("index");
    }

    //将自定义的国际化组件解析器注入容器;
    @Bean
    public LocaleResolver localeResolver(){
        return new MyLocaleResolver();
    }
}

启动项目主程序,访问首页,点击下面的中文/English即可完成语言切换了;

在这里插入图片描述

4.登录实现

先把index.html下的提交地址请求链接改一下;

在这里插入图片描述

在controller包下创建LoginController类;

package com.xiaozhi.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

/**
 * @author by CSDN@小智RE0
 * @date 2021-10-28 17:37
 */
@Controller
public class LoginController {
    @RequestMapping("/users/login")
    @ResponseBody
    public String toLogin(){
        return "测试可访问--->";
    }
}

先进行测试一下,请求是否有效;
启动项目主程序;填充用户名与密码之后,看看是否可跳转;

在这里插入图片描述

OK,请求跳转可行;继续操作;

注意index.html页面的输入框是否加了name属性;

在这里插入图片描述

修改LoginController里面的处理;

package com.xiaozhi.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.thymeleaf.util.StringUtils;

/**
 * @author by CSDN@小智RE0
 * @date 2021-10-28 17:37
 */
@Controller
public class LoginController {
    @RequestMapping("/users/login")
    public String toLogin(@RequestParam("username")String username,
                          @RequestParam("password")String password,
                          Model model){
        //之前就用的伪造数据库;但是登录用户没做伪造数据;登录用户这里直接判断写死;
        if(!StringUtils.isEmpty(username) && password.equals("qqq")){
            //跳转页面;
            return "redirect:/mian.html";
        }else {
            //失败时提示;
            model.addAttribute("message","密码错误");
            //回到登录页面;
            return "index";
        }
    }
}

在index.html处添加消息回显;登录错误时显示提示;

<p style="color: orangered" th:text="${message}" th:if="${not #strings.isEmpty(message)}"></p>

在这里插入图片描述

可以在MyMvcConfig类中,再添加一个主页面的视图跳转的路径;

registry.addViewController("/mian.html").setViewName("dashboard");

在这里插入图片描述

启动项目;测试登录;
在这里插入图片描述

5.登陆拦截器配置

先在LoginController类中的登录请求处理中;进行添加session会话,登录时将用户的用户名存入session;

package com.xiaozhi.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.thymeleaf.util.StringUtils;
import javax.servlet.http.HttpSession;
/**
 * @author by CSDN@小智RE0
 * @date 2021-10-28 17:37
 */
@Controller
public class LoginController {
    @RequestMapping("/users/login")
    public String toLogin(@RequestParam("username")String username,
                          @RequestParam("password")String password,
                          Model model, HttpSession session){
        //之前就用的伪造数据库;但是登录用户没做伪造数据;登录用户这里直接判断写死;
        if(!StringUtils.isEmpty(username) && password.equals("qqq")){
            //存入session;
            session.setAttribute("user",username);
            //跳转页面;
            return "redirect:/mian.html";
        }else {
            //失败时提示;
            model.addAttribute("message","密码错误");
            //回到登录页面;
            return "index";
        }
    }
}

在config包下创建MyLoginIntercept

package com.xiaozhi.config;

import org.springframework.web.servlet.HandlerInterceptor;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * @author by CSDN@小智RE0
 * @date 2021-10-28 18:17
 * 自定义登录拦截;
 */
public class MyLoginIntercept implements HandlerInterceptor {
    //拦截之前的处理;
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        //登录后,取到用户的会话session;
        String user = (String) request.getSession().getAttribute("user");

        //若不登录,就拦截;
        if(user == null){
            //提示;
            request.setAttribute("message","无权限,请登录");
            //跳转返回首页;
            request.getRequestDispatcher("/index.html").forward(request,response);
            return false;
        }else {
            return true;
        }
    }
}

在MyMvcConfig类中添加配置拦截器的方法;

//配置拦截器;
@Override
public void addInterceptors(InterceptorRegistry registry) {
    //将自定义的拦截器存入; 过滤所有请求,排除指定的请求(登录,首页显示,静态资源...);
    registry.addInterceptor(new MyLoginIntercept()).addPathPatterns("/**")
    .excludePathPatterns("/","/index.html","/users/login",
            "/css/*","/js/*","/img/*");
}

登录进入后还想获取用户名显示;
那么;在dashboard.html中取存入session的参数值即可;

在这里插入图片描述

启动项目,测试效果
直接访问http://localhost:5277/xiaozhire0/mian.html

在这里插入图片描述
登录进入后;有显示用户名;
在这里插入图片描述

6.员工列表的展示

需要取得并显示员工信息;
先在templates模板目录下创建文件夹emp;将list.html存入;
在这里插入图片描述
在dashboard.html中加入跳转的链接;
在这里插入图片描述

list.html页面这里的侧边栏也改变一下;

在这里插入图片描述
list.html的左上角也得有登录的用户名显示

在这里插入图片描述

在controller包下创建EmployeeController;员工的管理请求处理;

package com.xiaozhi.controller;

import com.xiaozhi.dao.EmployeeDao;
import com.xiaozhi.pojo.Employee;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.Collection;
/**
 * @author by CSDN@小智RE0
 * @date 2021-10-28 19:53
 * 员工请求处理
 */
@Controller
public class EmployeeController {
    @Autowired
    EmployeeDao employeeDao;

    @RequestMapping("/employees")
    public String employeeList(Model model){
        //调用方法;
        Collection<Employee> allEmployees =
                employeeDao.findAllEmployees();
        //添加属性;
        model.addAttribute("employees",allEmployees);
        //转到页面;
        return "emp/list";
    }
}

启动项目,登录测试一下;
在这里插入图片描述
点击员工管理显示

在这里插入图片描述

公共部分代码提取:方式(1)

OK;可以注意到dashboard.html和list.html的侧边栏是相同的,想办法得去抽取出公共的部分;
在dashboard.html中进行抽取;
在这里插入图片描述
在list.html中,先删除原来的侧边栏;然后插入提取的公共部分侧边栏
在这里插入图片描述

那么顶部栏当然也可以提取出来;类似于侧边栏的提取过程;
在dashboard.html中提取公共的顶部栏

在这里插入图片描述
在list.html中删掉原来的侧边栏;引入提取的公共部分的侧边栏;

在这里插入图片描述
启动项目;进行测试效果,
OK,提取公共部分代码是可行的;提高了代码的复用;

公共部分代码提取:方式(2)

实际上,提取公共部分的时候;还可以更加简洁一点;
直接把公共部分的代码单独取出来,放到一个文件中;然后让dashboard.html和list.html一起引用;
Ok,在templates模板目录下创建commons文件夹;然后创建commons.html文件

在这里插入图片描述

commons.html

在这里插入图片描述

在dashboard.html中引入抽取的公共部分代码;
在这里插入图片描述
同样地;在list.html中引入公共部分的代码;
在这里插入图片描述

启动项目,测试是否可行;
OK,继续操作

切换侧边栏时,对应的高亮显示

点击员工管理显示时;注意到,它并没有高亮显示;而页面中的是否高亮,是由是否写了这个active决定的;
但是,把侧边栏全部都提取到一块了;要怎么做到点击时的显示呢?

在这里插入图片描述
进行解决:—>
在引用提取公共代码的时候,去试试传递参数;

在dashboard.html中引用公共侧边栏时;

<!--直接引入抽取的公共部分侧边栏-->
<!--这里传递参数 -->
<div th:replace="~{commons/commons::sidebar(active='mian.html')}"></div>

在list.html中引入公共侧边栏时;

<!--将抽取的公共部分侧边栏放入-->
<div th:replace="~{commons/commons::sidebar(active='list.html')}"></div>

在commons.html中;

在这里插入图片描述
启动项目,进行测试使用;
点击员工管理显示时,有高亮显示;

在这里插入图片描述

取得数据进行显示

OK,前面几项的基本完成后,该进行数据显示了.

最终的显示是要放在list.html页面的这部分的;但是数据肯定不能写死,要动态的存取
在这里插入图片描述
OK,进行取值;
在这里插入图片描述

表格的这部分代码

<table class="table table-striped table-sm">
    <thead>
    <tr>
        <th>id</th>
        <th>lastName</th>
        <th>email</th>
        <th>sex</th>
        <th>birthday</th>
        <th>department</th>
    </tr>
    </thead>
    <tbody>
	<!--取出传过来的employees全部员工;遍历一次放入 变量emp-->
    <tr th:each="emp:${employees}">
		<!--分别取值-->
		<td th:text="${emp.getId()}"></td>
		<td th:text="${emp.getLastName()}"></td>
		<td th:text="${emp.getEmail()}"></td>
		<!--注意,性别当时用了数据0和1存储的-->
		<td th:text="${emp.getSex()==1 ?'男':'女'}"></td>
		<td th:text="${emp.getBirthday()}"></td>
		<td th:text="${emp.getDepartment().getDepartmentName()}"></td>
	</tr>
    </tbody>
</table>

启动项目,测试员工显示列表;
在这里插入图片描述

那么,根据这类管理系统来看的话,后期还有进行添加删除,修改…的操作;
那么写个样式;
在这里插入图片描述
启动项目,看看效果
在这里插入图片描述

出生日期的显示格式,可以改一改

<td th:text="${#dates.format(emp.getBirthday(),'yyyy年MM月dd日 HH:mm:ss')}"></td>

启动项目,看看效果;
在这里插入图片描述

7.添加员工的功能

在list.html页面中添加链接;
在这里插入图片描述

启动项目;查看效果;
在这里插入图片描述

在controller包下的EmployeeController中添加 跳转到添加页面的 处理请求的方法;

//装配部门处理;
@Autowired
DepartmentDao departmentDao;
//跳转到添加的页面;Get请求;
@GetMapping("/addemployee")
public String addEmployee(Model model){
    //获取所有的部门;
    Collection<Department> allDepartment = departmentDao.findAllDepartment();
    //传递返回;
    model.addAttribute("allDepartment",allDepartment);
    return "emp/add";
}

还没有添加的页面,去bootstrap网找个添加的表单https://www.bootcss.com/
基本页面和list.html差不多;
但是主要内容;更改为表单
在emp文件夹下创建add.html
在这里插入图片描述

主要表单部分

<!--添加的内容-->
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
    <!--提交的表单 这里是POST提交-->
    <form role="form" th:action="@{/addemployee}" method="post">
        <div class="form-group">
            <label for="name">姓名</label>
            <input type="text" class="form-control" id="name" name="lastName"
                   placeholder="请输入姓名">
        </div>
        <div class="form-group">
            <label for="email">邮箱</label>
            <input type="email" class="form-control" id="email" name="email"
                   placeholder="请输入邮箱">
        </div>
        <div class="form-group">
            <label>性别</label>
            <input type="radio" class="form-check-inline" name="sex" value="1"> 男
            <input type="radio" class="form-check-inline" name="sex" value="0"> 女
        </div>
        <div class="form-group">
            <label for="birthday">生日</label>
            <input type="text" class="form-control" id="birthday" name="birthday" placeholder="请输入生日">
        </div>
        <div class="form-group">
            <label for="depart">部门</label>
            <select class="form-control" id="depart" name="department.id">
                <!--注意提交的是部门的Id-->
                <option th:each="depart:${allDepartment}" th:value="${depart.getId}" th:text="${depart.getDepartmentName()}"></option>
            </select>
        </div>
        <button type="submit" class="btn btn-default">添加</button>
    </form>
</main>

在controller包下的EmployeeController中添加 接收提交表单 处理请求的方法,并且显示到列表;

//提交表单数据;Post请求处理
@PostMapping("/addemployee")
public String addSuccess(Employee employee){
    //调用方法;
    employeeDao.addEmployee(employee);
    //重定向到显示的列表;
    return "redirect:/employees";
}

OK,启动项目,可测试
在这里插入图片描述
提交后,有显示–>
在这里插入图片描述

但是有一点问题,就是日期提交时若是格式为年-月 - 日-的话;就有错误了;
在这里插入图片描述
有错误
在这里插入图片描述

什么问题呢;还记得这个默认配置的格式吧;
在这里插入图片描述
那么就得去application.properties里面配置一下日期格式了;

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

OK,再去启动项目,测试使用;
在这里插入图片描述
添加成功
在这里插入图片描述

8.修改员工的实现

list.html点击修改时跳转链接

在这里插入图片描述

<!--跳转到修改员工-->
<a class="btn btn-sm btn-outline-danger" th:href="@{/update/}+${emp.getId()}">修改</a>

在EmployeeController下添加跳转到修改页面的方法

//跳转到员工的修改页面; 携带有ID
@GetMapping("/update/{id}")
public String toUpdate(@PathVariable("id")Integer id,Model model){
    //根据ID查出员工信息;
    Employee employeeByEId = employeeDao.findEmployeeByEId(id);
    //返回数据;
    model.addAttribute("thisEmployee",employeeByEId);
    //获取所有的部门;
    Collection<Department> allDepartment = departmentDao.findAllDepartment();
    //传递返回;
    model.addAttribute("allDepartment",allDepartment);
    return "emp/update";
}

在emp文件夹下创建update.html;注意这个更新页面打开时,有用户的初始信息;
该页面可复用添加页面,修改主要的表单即可;
在这里插入图片描述

main;主要的表单部分

<!--修改的内容-->
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
    <!--提交的表单 这里是POST提交-->
    <form role="form" th:action="@{/update/do}" method="post">

        <!--员工的ID隐藏起来-->
        <input type="hidden" name="id" th:value="${thisEmployee.getId()}">

        <div class="form-group">
            <label for="name">姓名</label>
            <!--将姓名取得并显示-->
            <input th:value="${thisEmployee.getLastName()}" type="text" class="form-control" id="name" name="lastName"
                   placeholder="请输入姓名"/>
        </div>
        
        <div class="form-group">
            <!--将邮箱取得并显示-->
            <label for="email">邮箱</label>
            <input th:value="${thisEmployee.getEmail()}" type="email" class="form-control" id="email" name="email"
                   placeholder="请输入邮箱"/>
        </div>
        <div class="form-group">
            <label>性别</label>
            <!--选中时先进行判断-->
            <input th:checked="${thisEmployee.getSex()==1}" type="radio" class="form-check-inline" name="sex" value="1"/> 男
            <input th:checked="${thisEmployee.getSex()==0}" type="radio" class="form-check-inline" name="sex" value="0"/> 女
        </div>

        <div class="form-group">
            <label for="birthday">生日</label>
            <!--这里的日期显示要格式化-->
            <input th:value="${#dates.format(thisEmployee.getBirthday(),'yyyy-MM-dd')}" type="text" class="form-control" id="birthday" name="birthday" placeholder="请输入生日"/>
        </div>

        <div class="form-group">
            <label for="depart">部门</label>

            <select class="form-control" id="depart" name="department.id">
                <!--注意提交的是部门的Id-->
                <!--需要自动选中-->
                <option  th:selected="${depart.getId()==thisEmployee.getDepartment().getId()}"
                         th:each="depart:${allDepartment}"
                         th:value="${depart.getId}" th:text="${depart.getDepartmentName()}"></option>
            </select>
        </div>

        <button type="submit" class="btn btn-default">修改</button>
    </form>
</main>

在EmployeeController下添加修改的方法

//进行修改处理;
@PostMapping("/update/do")
public String updateEmployee(Employee employee){
    //调用方法;
    employeeDao.addEmployee(employee);
    //重定向到显示的列表;
    return "redirect:/employees";
}

启动项目,进行测试
比如说,我去修改面包
在这里插入图片描述
它的信息被取到了
在这里插入图片描述

修改:
在这里插入图片描述
Ok,修改成功
在这里插入图片描述

9.删除实现以及404处理

在list.html页面的删除链接处添加请求;

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

在EmployeeController类中添加删除的处理方法

//删除员工处理
@GetMapping("/delete/{id}")
public String deleteEmployee(@PathVariable("id")Integer id){
    //调用方法;
    employeeDao.deleteEmployee(id);
    //重定向到显示的列表;
    return "redirect:/employees";
}

启动项目,测试;删除成功
在这里插入图片描述

OK;关于404问题的页面处理;
在templates模板下创建error文件夹;将404.html页面文件放入
在这里插入图片描述

测试,即可跳转
在这里插入图片描述

页面注销实现
在公共代码文件commons.html的头部导航栏位置;添加请求链接
在这里插入图片描述

在controller包下的LoginController类中进行请求处理;添加方法;

//注销
@RequestMapping("/users/logout")
public String toLogout(){
    //销毁session;
    //回到登录页;
    return "redirect:/index.html";
}

OK,启动项目,测试效果

暂时结束

小智RE0
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
b站狂神SpringBoot员工管理系统源码
04-25
b站狂神SpringBoot员工管理系统源码
学习笔记（狂神SpringBoot全部笔记含--源码--及员工管理系统整合数据库版）
广而不精Zhu小白
12-31 4022
学习笔记（狂神SpringBoot全部笔记及员工管理系统整合数据库版）
SpringBoot笔记
热门推荐
ThinkStu的博客
05-05 31万+
最全SpringBoot笔记
B站学习springboot笔记(2)
从零开始的异世界JAVA学习
10-27 832
学习来源–>B站 传送门–> 【狂神说Java】SpringBoot最新教程IDEA版通俗易懂 文章目录用springboot进行web开发1.1关于静态资源的导入与访问1.2关于首页和图标定制1.3thymeleaf 模板引擎语法1.4 spring MVC的装配1.5 springmvc的扩展 文档–>2.5.6文档 用springboot进行web开发 在之前的学习,大概了解到 其中的自动装配时;xxxAutoConfigurationxx去完成向容器中配置组件, xxxprope
【黑马程序员】SpringBoot2学习笔记
m0_60824353的博客
02-07 1415
黑马程序员springboot 学习笔记 springboot2学习笔记
SpringBoot学习笔记
weixin_52938172的博客
07-04 1402
SpringBoot初学习笔记
狂神 springboot 笔记 同b站课程
05-11
对于初学者，可以通过观看B站的SpringBoot课程，结合笔记进行深入学习。课程可能涵盖上述各个知识点，并提供实践案例，帮助你逐步掌握Spring Boot的使用和开发技巧。同时，不断实践和理解Spring Boot的设计哲学，将...
springboot.zip全套学习资源（对应B站课程）
03-07
B站（哔哩哔哩）是中国的一个知名视频分享平台，上面有许多高质量的编程教学内容，因此这个压缩包很可能是某位讲师或爱好者为了配合B站课程而制作的配套资源。 SpringBoot的学习通常从以下几个方面展开： 1. **...
基于springboot的学生读书笔记共享系统代码
03-30
基于springboot的学生读书笔记共享系统代码 1、学生读书笔记共享系统的技术栈、环境、工具、软件： ① 系统环境:Windows/Mac ② 开发语言：Java ③ 框架：SpringBoot ④ 架构:B/S、MVC ⑤ 开发环境:IDEA、JDK、...
Spring boot 配置文件
2301_79547900的博客
07-25 384
properties使用key=value的形式配置键类型的配置文件，而yml使用的是树形结构来配置yml层级之间使⽤换⾏缩进的⽅式配置，key和value，之间使⽤": "(英⽂冒号)加空格的⽅式设置，并且空格不可省略。properties是早期默认的配置文件格式，其配置存在一定的冗余，使用yml可以很好解决这些问题。yml和properties可以共存，但建议只使用一种，可以降低故障率。
1.Spring Boot 简介(Spring MVC+Mybatis-plus)
m0_61086522的博客
07-23 696
SpringBoot是Spring的子工程(或是spring的脚手架),快速搭建spring项目,自动配置了Spring 应用程序和第三方库（spring+mybaties+web（servlet）+ reids+ 消息中间件）,而且使用很少xml配文件，提高开发效率。一款基于mvc模式、请求驱动、轻量级web框架（封装了Servlet）给予MVC模式请求驱动轻量级web框架封装了Servlet程序。
Spring Boot(八十二)：SpringBoot通过rsa实现API加密
u013938578的博客
07-25 198
项目中使用RSA加密方式对API接口返回的数据加密，让API数据更加安全。别人无法对提供的数据进行破解。Spring Boot接口加密，可以对返回值、参数值通过注解的方式自动加解密。下面开始代码演示。
Spring Boot多租户配置与实现
weixin_53840353的博客
07-25 1119
多租户架构是一种软件架构模式，其中单个应用程序实例为多个租户（客户）提供服务。每个租户的数据和配置都是隔离的，确保不同租户之间的数据安全和隐私。共享数据库，独立数据表：所有租户共享同一个数据库，但每个租户有独立的数据表。共享数据库，共享数据表：所有租户共享同一个数据库和数据表，通过区分租户标识来隔离数据。独立数据库：每个租户有独立的数据库实例。本文将重点介绍共享数据库，共享数据表的多租户实现方式。
Spring Boot集成Spring Batch快速入门Demo
HBLOG
07-20 1123
Spring Batch 是一个轻量级的开源框架，它提供了一种简单的方式来处理大量的数据。它基于Spring框架，提供了一套批处理框架，可以处理各种类型的批处理任务，如ETL、数据导入/导出、报表生成等。Spring Batch提供了一些重要的概念，如Job、Step、ItemReader、ItemProcessor、ItemWriter等，这些概念可以帮助我们构建可重用的批处理应用程序。
在Spring Boot中实现文件上传与管理
微赚淘客开发者博客
07-20 1254
在现代应用程序中，文件上传与管理是一个常见的需求。在 Spring Boot 中，可以非常方便地实现文件上传和管理。本文将详细介绍如何在 Spring Boot 中实现文件上传功能，包括创建上传接口、文件存储、文件访问等方面的内容。通过配置文件上传、创建文件上传、下载、列表和删除接口，我们可以轻松地处理文件操作。这个 HTML 文件提供了一个简单的文件上传表单，用户可以选择文件并提交上传请求。中添加相关的依赖，以支持文件上传功能。接下来，我们创建一个文件上传的控制器，处理文件上传请求。作为文件上传的对象。
【创新未发表】Matlab实现白冠鸡优化算法COOT-Kmean-Transformer-LSTM负荷预测算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
【创新未发表】Matlab实现淘金优化算法GRO-Kmean-Transformer-LSTM负荷预测算法研究.rar
07-29
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
数据结构，顺序表，链表整理
最新发布
07-29
数据结构，顺序表，链表整理
SpringBoot学习笔记：从入门到精通
"springboot课堂笔记，如果觉得好给我留言要教学视频" 在本文中，我们将深入探讨Spring Boot这一流行的Java框架，并基于提供的课堂笔记内容，分析其发展历程、核心概念以及如何进行快速入门。Spring Boot是由...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小智RE0

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值