SpringBoot简易员工管理系统
这里是一个简单的员工管理系统，实现了员工的增删改查，项目的完整讲解视频
请跳转至狂神老师的课程查看https://www.bilibili.com/video/av75233634?p=20
一、准备工作——pojo层
首先我们先编辑pojo实体类层，这里面包含部门和员工两个类.
package com.proj.pojo;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Department {
private Integer id;
private String name;
}
部门拥有部门ID,名字两个属性.
package com.proj.pojo;
import com.proj.pojo.Department;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import java.util.Date;
@Data
@NoArgsConstructor
public class Employee {
private Integer id;
private String lastname;
private Integer gender;
private String email;
private Department department;
private Date date;
public Employee(Integer id, String lastname, Integer gender, String email, Department department) {
this.id = id;
this.lastname = lastname;
this.gender = gender;
this.email = email;
this.department = department;
this.date = new Date();
}
}
员工类中包含 id，名字，性别，邮件，部门，日期几个属性
其中的性别使用1代表男性，0代表女性。
这里我们使用lombok框架的@AllArgsConstructor，@NoArgsConstructor自动生成有参和无参的构造方法，在上面添加@Data注解自动生成getter setter toString的方法.员工的日期属性我们在调用有参构造时使用当前日期。
二、准备工作——Dao层
这里Dao层我们来写一些关于员工增删改查的逻辑方法.
这里我们还是有两个类，一个是DepartmentDao，另一个是EmployeeDao，分别处理部门和员工。
package com.proj.dao;
import com.proj.pojo.Department;
import org.springframework.stereotype.Repository;
import java.util.Collection;
import java.util.HashMap;
import java.util.Map;
//@Repository
@Repository
public class DepartmentDao {
private static Map<Integer, Department> departmentMap = null;
static {
departmentMap = new HashMap<Integer, Department>();
departmentMap.put(101,new Department(101,"教学部"));
departmentMap.put(102,new Department(102,"市场部"));
departmentMap.put(103,new Department(103,"后勤部"));
departmentMap.put(104,new Department(104,"技术部"));
departmentMap.put(105,new Department(105,"小卖部"));
}
public Collection<Department> getDepartment(){
return departmentMap.values();
}
public Department getDepartmentById(Integer id){
return departmentMap.get(id);
}
}
这里使用@Repository注解标注其为Dao层,定义一个map注入部门的编号以及名称，getDepartment方法返回所有department的集合，getDepartmentById方法使用id（键）查询相应的部门。
package com.proj.dao;
import com.proj.pojo.Department;
import com.proj.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;
@Repository
public class EmployeeDao {
private static Map<Integer, Employee> employeeMap = null;
@Autowired
private DepartmentDao departmentDao;
static {
employeeMap = new HashMap<Integer, Employee>();
employeeMap.put(1001,new Employee(1001,"AA",1,"aa@a.com",new Department(101,"教学部")));
employeeMap.put(1002,new Employee(1002,"BB",0,"ab@a.com",new Department(102,"市场部")));
employeeMap.put(1003,new Employee(1003,"CC",1,"ac@a.com",new Department(103,"后勤部")));
employeeMap.put(1004,new Employee(1004,"DD",0,"ad@a.com",new Department(104,"技术部")));
employeeMap.put(1005,new Employee(1005,"EE",1,"ae@a.com",new Department(105,"小卖部")));
}
private static Integer Init = 1006;//定义新的初始编号
public void AddEmployee(Employee employee){
if(employee.getId()==null){
employee.setId(Init++);
}
employee.setDepartment(departmentDao.getDepartmentById(employee.getDepartment().getId()));
}
public Collection<Employee> getAll(){
return employeeMap.values();
}
public Employee searchEmployees(Integer id){
return employeeMap.get(id);
}
public void Del(Integer id){
employeeMap.remove(id);
}
}
在employeeDao层我们一样也是通过map管理数据，定义并给map赋值，又定义了一个DepartmentDao对象，通过@Autowired注解进行自动装配赋值，把我们之前DepartmentDao类写的对象装配到其中。
之后分别写增删改查的方法，在增方法中，我们通过Init属性自增进行id进行赋值，部门的赋值通过employee传来的部门id对相关部门进行查找然后赋值.
三、首页的实现
这里我们使用网上现成的模板进行编写，模板的下载地址：https://www.lanzous.com/i9a364h.
我们先把下好的模板放到resource资源目录下的templates资源目录下，将css js等样式文件放到static目录下。
这里各位先不要管commons等目录，这是我们之后要用到的。
我们首先编写controller，首先创建一个indexController类
package com.proj.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class IndexController {
@RequestMapping({"/","/index.html"})
public String string(){
return "index";
}
}
写一个requestMapping，如果我们得到用户的/或者/index请求页面就返回到index页面。我们这里index是一个登录页面.
这里我们还需要扩展一下我们MVC中的内容。
@Configuration
public class MyMvcConfig implements WebMvcConfigurer {
@Override
public void addViewControllers(ViewControllerRegistry registry) {
registry.addViewController("/").setViewName("index");
registry.addViewController("/index").setViewName("index");
registry.addViewController("/main.html").setViewName("dashboard");
}
}
通过设置addViewController让/和/index自动跳转到index主页中，让main.html跳转到dashiboard页面。
并且我们要使用模板引擎进行资源的引入.在HTML标签中导入模板引擎xmlns:th=“http://www.thymeleaf.org”，将各个页面的href属性改为th:href="@{}"的格式.
<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
这样我们的首页就可以实现啦！
四、国际化
在网站的编写中，我们经常要切换中英文，这样我们就要实现页面的国际化.
首先我们要统一编码。
在idea中统一设置为utf8编码。
之后我们在resource目录下同时创建login.properties，login_en_US.properties，login_zh_CN.properties，系统会自动识别我们的properties文件
我们把创建一个文件夹i18n，将其放到i18n中。
之后我们统一编写login.properties和login_zh_CN.properties文件的配置
login.btn=登录
login.password=密码
login.remember=记住我
login.tip=请登录
login.username=用户名
login_en_US.properties使用英语
login.btn=Sign in
login.password=Password
login.remember=Remember me
login.tip=Please sign in
login.username=Username
下面就是进行按钮点击逻辑的编写了。
在Spring中有一个国际化的Locale （区域信息对象）；里面有一个叫做LocaleResolver （获取区域信息对象）的解析器，我们要定义一个自己的区域信息对象。3
首先我们先修改一下前端中英文切换按钮的链接
在后面定义一个在index后面添加一个l，用于我们的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>
我们编写一个MyLocaleResolver类，他需要实现LocaleResolver接口
package com.proj.config;
import org.springframework.web.servlet.LocaleResolver;
import org.thymeleaf.util.StringUtils;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.Locale;
public class MyLocaleResolver implements LocaleResolver
{
@Override
public Locale resolveLocale(HttpServletRequest httpServletRequest) {
String language = httpServletRequest.getParameter("l");//获取到l
Locale locale = Locale.getDefault();//初始化locale并设置默认值
if(!StringUtils.isEmpty(language)){//判断是否为空
String[] split = language.split("_");//对字符串进行切割
locale = new Locale(split[0],split[1]);
}
return locale;
}
@Override
public void setLocale(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Locale locale) {
}
}
通过MyLocaleResolver就可以得到一个地区的对象.包含我们所要进行切换语言的参数.
为了让我们的区域化信息能够生效，我们需要再配置一下这个组件！在我们自己的MvcConofig下添加bean；
@Bean
public LocaleResolver localeResolver(){
return new MyLocaleResolver();
}
最后我们进行前端的修改即可.使用messege取值
#｛｝方式取出我们之前写好的loginproperties中的值。
在点击按钮切换语言的时候，idea会自动识别并且调用我们需要的相应语言，产生locale对象进行相关property的调用，是不是非常智能呢？
下面是英文版
五、登录+拦截器的设置
首先我们先要实现登录功能。
<form class="form-signin" th:action="@{/login}" >
我们需要一个写一个action属性并且要把表单里面所有属性设置name，便于后台controller接收
<input type="text" name="username" class="form-control" th:placeholder="{login.username}" required="" autofocus="">
编写一个Logincontroller，这里我们不指定用户名，设置123456为默认密码。
package com.proj.controller;
import org.springframework.boot.web.servlet.server.Session;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import javax.servlet.http.HttpSession;
@Controller
public class LoginController {
@RequestMapping("/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";
}
}
}
如果用户名密码输入正确，我们传username给main.html，这里main.html在之前我们设置过是我们的dashboard界面。
如果输入错误，传递msg，提示用户名密码输入错误。并且回到index界面。
页面存在缓存，所以我们需要禁用模板引擎的缓存，在我们properties中设置。
spring.thymeleaf.cache=false
在登录页面添加一个P标签，如果用户输入用户名密码错误，则显示msg信息。
<!--判断是否显示，使用if, ${}可以使用工具类，可以看thymeleaf的中文文档-->
<p style="color: red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>
之后我们的登录页面就写完啦！！！
但是还有一个非常关键的问题。我不用登陆也可以访问我们管理页面啊！直接地址栏敲链接就完了呗！
所以为了避免这种问题，我们要写一个拦截器。
package com.proj.config;
import org.springframework.web.servlet.HandlerInterceptor;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class LoginHandlerInterceptor implements HandlerInterceptor {
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
Object user = request.getSession().getAttribute("loginUser");//找我们登录界面的loginUser属性
if(user ==null){
request.setAttribute("msg","没有权限，请先登录");
request.getRequestDispatcher("/index.html").forward(request,response);//保留参数跳转到index.html
return false;
}
else {
return true;
}
}
}
之后我们将其注册到Mvc中
public void addInterceptors(InterceptorRegistry registry) {
registry.addInterceptor(new LoginHandlerInterceptor()) .addPathPatterns("/**").excludePathPatterns("/index.html","/","/login","/asserts/**");
}
我们然后在后台主页顶部导航栏，获取用户登录的信息
<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">[[${session.loginUser}]]</a>
我们编写完拦截器之后再直接访问就不行了！
六、显示员工信息
我们首先将管理系统的页面里面的链接和文字修改一下。
<a class="nav-link" href="#" th:href="@{/emps }">
员工管理
</a>
编写相应的controller,将所有员工的信息传给前端。
@Controller
public class EmployeeController {
@Autowired
EmployeeDao employeeDao;
@RequestMapping("/emps")
public String string(Model model){
Collection<Employee> employees = employeeDao.getAll();
model.addAttribute("emps",employees);
return "emp/list";
}
}
我们这里可以将所有页面全都重复的顶部栏和侧边栏抽取出来，进行代码复用。
为了重用更清晰，我们建立一个commons文件夹，专门存放公共页面；
要使用th:fragment 定义模板名，然后使用 th:insert 插入模板名。
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0" th:fragment="topbar" >
<!--后台主页显示登录用户的信息-->
<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">[[${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页面中去引入，可以删掉原来的nav。
<!--引入抽取的topbar-->
<!--模板名 ： 会使用thymeleaf的前后缀配置规则进行解析
使用~{模板::标签名}-->
<div th:insert="~{dashboard::topbar}"></div>
我们在a标签中加一个判断，使用class改变标签的值；
<a class="nav-link active" th:class="${activeUrl=='main.html'?'nav-link active':'nav-link'}" href="#" th:href="@{/main.html}">
之后修改对应的请求链接
<div th:replace="~{commons/bar::sitebar(activeUrl='main.html')}"></div>
<div th:replace="~{commons/bar::sitebar(activeUrl='emps')}"></div>
上面的操作就是为了使点击的部分高亮所采取的操作，将传入的activeUrl进行判断并修改样式.
之后我们在list中使用我们在EmployeeController中传回的emps遍历查询员工即可。
<!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:insert="~{commons/common::topbar}"></div>
<div class="container-fluid">
<div class="row">
<div th:insert="~{commons/common::sidebar(activeUrl='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>
<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().getName()}"></td>
<!--<td th:text="${emp.birth}"></td>-->
<!--使用时间格式化工具-->
<td th:text="${#dates.format(emp.getDate(),'yyyy-MM-dd HH:mm')}"></td>
<!--操作-->
<td>
<a class="btn btn-sm btn-primary" th:href="@{/emp/}+${emp.id}">编辑</a>
<a class="btn btn-sm btn-danger" th:href="@{/delemp/}+${emp.id}">删除</a>
</td>
</tr>
</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="asserts/js/jquery-3.2.1.slim.min.js"></script>
<script type="text/javascript" src="asserts/js/popper.min.js"></script>
<script type="text/javascript" src="asserts/js/bootstrap.min.js"></script>
<!-- Icons -->
<script type="text/javascript" src="asserts/js/feather.min.js"></script>
<script>
feather.replace()
</script>
<!-- Graphs -->
<script type="text/javascript" src="asserts/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>
之后我们就要开始写员工信息的增删改页面啦！
七、员工增加
首先我们现在list上面写一个添加员工的标签。
<h2><a class="btn btn-sm btn-success" th:href="@{/emp}">添加员工</a> </h2>
并且传回/emp，并在EmployeeController中编写相应controller，传回所有部门的信息，加上我们之前传回去的所有员工信息供前端使用。
package com.proj.controller;
import com.proj.dao.DepartmentDao;
import com.proj.dao.EmployeeDao;
import com.proj.pojo.Department;
import com.proj.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.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import java.util.Collection;
@Controller
public class EmployeeController {
@Autowired
EmployeeDao employeeDao;
@RequestMapping("/emps")
public String string(Model model){
Collection<Employee> employees = employeeDao.getAll();
model.addAttribute("emps",employees);
return "emp/list";
}
@Autowired
DepartmentDao departmentDao;
@GetMapping("/emp")
public String toAddPage(Model model){
Collection<Department> departments =departmentDao.getDepartment();
model.addAttribute("ndepartment",departments);
return "emp/addPage";
}
@PostMapping("/emp")
public String addEmp(Employee employee){
System.out.println(employee);
employeeDao.AddEmployee(employee);
return "redirect:/emps";
}
}
这里我们创建一个addList页面
<form>
<div class="form-group">
<label>LastName</label>
<input type="text" class="form-control" placeholder="kuangshen">
</div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" placeholder="24736743@qq.com">
</div>
<div class="form-group">
<label>Gender</label><br/>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" value="1">
<label class="form-check-label">男</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" value="0">
<label class="form-check-label">女</label>
</div>
</div>
<div class="form-group">
<label>department</label>
<select class="form-control">
<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="kuangstudy">
</div>
<button type="submit" class="btn btn-primary">添加</button>
</form>
我们修改下前端将下拉列表中的选项，将其改为部门的名字。
<select class="form-control" name="department.id">
<option th:each="department:${ndepartment}" th:text="${department.name}" th:value="${department.id}">1</option>
</select>
之后我们重启调试下。
发现显示没有问题。
我们修改下表单的提交地址和方式
<form th:action="@{/emp}" method="post">
随后我们从前端接收传回来的表单，并调用添加方法，添加完之后重定向到员工信息页面。
注意，这里我们前端的的参数name属性要和属性名一致！
@PostMapping("/emp")
public String addEmp(Employee employee){
System.out.println(employee);
employeeDao.AddEmployee(employee);
return "redirect:/emps";
}
这样就OK啦！！！
八、员工修改
这里与我们员工添加非常相似，我们要两步走。
- 点击修改按钮，去到编辑页面，我们可以直接使用添加员工的页面实现
- 显示原数据，修改完毕后跳回列表页面！
首先修改下跳转链接位置
<a class="btn btn-sm btn-primary" th:href="@{/emp/}+${emp.id}">编辑</a>
编写对应controller
@GetMapping("/emp/{id}")
public String toUpdateEmp(@PathVariable("id") Integer id, Model model){
Employee employee = employeeDao.searchEmployees(id);
model.addAttribute("emp",employee);
Collection<Department> departmentCollection = departmentDao.getDepartment();
model.addAttribute("departments",departmentCollection);
return "emp/updatePage";
}
将对应员工信息与部门信息传回前端.
我们需要在这里将add页面复制一份，改为update页面；需要修改页面，将我们后台查询数据回显，并在其中进行一下日期的格式化，并且修改下表单提交的地址。
<form th:action="@{/updateEmp}" method="post">
最终代码如下。
<!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:insert="~{commons/common::topbar}"></div>
<div class="container-fluid">
<div class="row">
<div th:insert="~{commons/common::sidebar(activeUrl='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>
<div>
<form th:action="@{/updateEmp}" method="post">
<input name="id" type="hidden" class="form-control" th:value="${emp.id}">
<div class="form-group">
<label>LastName</label>
<input type="text" name="lastname" class="form-control" th:value="${emp.getLastname()}">
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" class="form-control" th:value="${emp.getEmail()}">
</div>
<div class="form-group">
<label>Gender</label><br/>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" value="1" th:checked="${emp.gender==1}">
<label class="form-check-label">男</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" value="0" th:checked="${emp.gender==0}">
<label class="form-check-label">女</label>
</div>
</div>
<div class="form-group">
<label>department</label>
<select class="form-control" name="department.id">
<option th:each="department:${departments}" th:text="${department.name}" th:value="${department.id}">1</option>
</select>
</div>
<div class="form-group">
<label>Birth</label>
<input type="text" name="date" class="form-control" placeholder="2017/01/01" th:value="${#dates.format(emp.getDate(),'yyyy/MM/dd')}">
</div>
<button type="submit" class="btn btn-primary">添加</button>
</form>
</div>
</main>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="asserts/js/jquery-3.2.1.slim.min.js"></script>
<script type="text/javascript" src="asserts/js/popper.min.js"></script>
<script type="text/javascript" src="asserts/js/bootstrap.min.js"></script>
<!-- Icons -->
<script type="text/javascript" src="asserts/js/feather.min.js"></script>
<script>
feather.replace()
</script>
<!-- Graphs -->
<script type="text/javascript" src="asserts/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>
编写对应的controller即可
@PostMapping("/updateEmp")
public String updateEmp(Employee employee){
employeeDao.AddEmployee(employee);
return "redirect:/emps";
}
九、员工删除以及账号注销
list页面，编写提交地址
<a class="btn btn-sm btn-danger" th:href="@{/delEmp/}+${emp.id}">删除</a>
编写controller
@RequestMapping("/delemp/{id}")
public String delEmp(@PathVariable("id") Integer id){
employeeDao.Del(id);
return "redirect:/emps";
}
即可完成删除操作。
添加一个注销的a标签
<a class="nav-link" href="#" th:href="@{/loginOut}">Sign out</a>
编写对应controller
@GetMapping("/loginOut")
public String loginOut(HttpSession session){
session.invalidate();
return "redirect:/index.html";
}
编写对应的controller即可
@PostMapping("/updateEmp")
public String updateEmp(Employee employee){
employeeDao.AddEmployee(employee);
return "redirect:/emps";
}
九、员工删除以及账号注销
list页面，编写提交地址
<a class="btn btn-sm btn-danger" th:href="@{/delEmp/}+${emp.id}">删除</a>
编写controller
@RequestMapping("/delemp/{id}")
public String delEmp(@PathVariable("id") Integer id){
employeeDao.Del(id);
return "redirect:/emps";
}
即可完成删除操作。
添加一个注销的a标签
<a class="nav-link" href="#" th:href="@{/loginOut}">Sign out</a>
编写对应controller
@GetMapping("/loginOut")
public String loginOut(HttpSession session){
session.invalidate();
return "redirect:/index.html";
}
784
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
