- 相关的包结构:(Thymeleaf规定:注意一下必须在Resources下面创建一个Template这样的目录,下面加入.html)
Sql文件:
/*
Navicat MySQL Data Transfer
Source Server : ssm
Source Server Version : 50733
Source Host : localhost:3306
Source Database : employeesystem
Target Server Type : MYSQL
Target Server Version : 50733
File Encoding : 65001
Date: 2021-06-20 23:50:47
*/
SET FOREIGN_KEY_CHECKS=0;
-- ----------------------------
-- Table structure for `tb_department`
-- ----------------------------
DROP TABLE IF EXISTS `tb_department`;
CREATE TABLE `tb_department` (
`department_id` int(11) NOT NULL AUTO_INCREMENT,
`department_name` varchar(15) NOT NULL,
PRIMARY KEY (`department_id`)
) ENGINE=InnoDB AUTO_INCREMENT=8 DEFAULT CHARSET=utf8mb4;
-- ----------------------------
-- Records of tb_department
-- ----------------------------
INSERT INTO `tb_department` VALUES ('1', '开发部');
INSERT INTO `tb_department` VALUES ('2', '心理部');
INSERT INTO `tb_department` VALUES ('3', '综治部');
INSERT INTO `tb_department` VALUES ('4', '研发部');
INSERT INTO `tb_department` VALUES ('5', '教育部');
INSERT INTO `tb_department` VALUES ('6', 'HR');
INSERT INTO `tb_department` VALUES ('7', 'CEO');
-- ----------------------------
-- Table structure for `tb_employee`
-- ----------------------------
DROP TABLE IF EXISTS `tb_employee`;
CREATE TABLE `tb_employee` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`last_name` varchar(255) DEFAULT NULL,
`email` varchar(255) DEFAULT NULL,
`gender` int(2) NOT NULL,
`department_name` varchar(11) DEFAULT NULL,
`birth` date DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=44 DEFAULT CHARSET=utf8mb4;
-- ----------------------------
-- Records of tb_employee
-- ----------------------------
INSERT INTO `tb_employee` VALUES ('5', 'Good', '188@qq.com', '1', '心理部', '2021-06-24');
INSERT INTO `tb_employee` VALUES ('6', '张三', 'zhn@glcom', '0', '心理部', '2020-05-12');
INSERT INTO `tb_employee` VALUES ('7', '王五', 'wanwu@com', '0', 'CEO', '2020-05-15');
INSERT INTO `tb_employee` VALUES ('8', '王伟', 'gwei@g.com', '1', 'CEO', '2020-05-08');
INSERT INTO `tb_employee` VALUES ('9', '李伟', 'lii@gma.com', '1', '销售部', '2020-05-18');
INSERT INTO `tb_employee` VALUES ('33', 'GoodJob', '2282240015@qq.com', '1', '心理部门', '2021-11-11');
INSERT INTO `tb_employee` VALUES ('41', '张三', '2282240015@qq.com', '1', '心理部门', '2018-11-01');
INSERT INTO `tb_employee` VALUES ('42', '李四', '2282240015@qq.com', '0', '教育部门', '2018-11-01');
INSERT INTO `tb_employee` VALUES ('43', 'houzhicong', '2282240015@qq.com', '1', 'CEO', '2020-09-01');
-- ----------------------------
-- Table structure for `tb_employee_copy`
-- ----------------------------
DROP TABLE IF EXISTS `tb_employee_copy`;
CREATE TABLE `tb_employee_copy` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`last_name` varchar(255) DEFAULT NULL,
`email` varchar(255) DEFAULT NULL,
`gender` int(2) NOT NULL,
`department_name` varchar(11) DEFAULT NULL,
`birth` date DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=28 DEFAULT CHARSET=utf8mb4;
-- ----------------------------
-- Records of tb_employee_copy
-- ----------------------------
INSERT INTO `tb_employee_copy` VALUES ('1', 'jian', '228224@qq.com', '0', '研发部', '2021-06-16');
INSERT INTO `tb_employee_copy` VALUES ('2', '侯治聪', '121452@qq.com', '1', '研发部', '2021-06-29');
INSERT INTO `tb_employee_copy` VALUES ('3', 'tom', '131452@qq.cm', '1', '研发部', '2021-06-14');
INSERT INTO `tb_employee_copy` VALUES ('4', 'JACK', '5201314@qq.com', '1', '研发部', '2021-06-23');
INSERT INTO `tb_employee_copy` VALUES ('5', 'Good', '188@qq.com', '1', '心理部', '2021-06-24');
INSERT INTO `tb_employee_copy` VALUES ('6', '张三', 'zhn@glcom', '0', '综治部', '2020-05-12');
INSERT INTO `tb_employee_copy` VALUES ('7', '王五', 'wanwu@.com', '0', 'HR', '2020-05-15');
INSERT INTO `tb_employee_copy` VALUES ('8', '王伟', 'gwei@g.com', '1', 'CEO', '2020-05-08');
INSERT INTO `tb_employee_copy` VALUES ('9', '李伟', 'lii@gma.com', '1', '销售部', '2020-05-18');
INSERT INTO `tb_employee_copy` VALUES ('10', '田七', 'tiqi@foxml.com', '0', '研发部', '2020-05-14');
INSERT INTO `tb_employee_copy` VALUES ('12', '李伟', 'liwei@gmail.com', '1', '教育部', '2020-05-18');
-- ----------------------------
-- Table structure for `tb_user`
-- ----------------------------
DROP TABLE IF EXISTS `tb_user`;
CREATE TABLE `tb_user` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`username` varchar(100) NOT NULL,
`password` varchar(100) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=17 DEFAULT CHARSET=utf8mb4;
-- ----------------------------
-- Records of tb_user
-- ----------------------------
INSERT INTO `tb_user` VALUES ('3', '1', '22');
INSERT INTO `tb_user` VALUES ('7', '丁雪建', 'dingxuejian');
INSERT INTO `tb_user` VALUES ('8', '11dingxuejian', 'hou');
application.yml:
server:
port: 8888
# 通过这个可以进行访问静态资源路径的改变,需要在根目录上加上/hou
# servlet:
# context-path: /hou
spring:
mybatis:
type-aliases-package: com.zjj.pojo
mapper-locations: classpath:mapper/*.xml
# 驼峰命名
configuration:
map-underscore-to-camel-case: true
mvc:
view:
suffix: .html
prefix: classpath:/templates/
format:
date: yyyy-MM-dd
# 关闭模板引擎的缓存
thymeleaf:
cache: false
# 国际化文件放的位置
messages:
basename: i18n.login
datasource:
url: jdbc:mysql://localhost:3306/employeesystem?characterEncoding=utf-8&useSSL=false&serverTimezone=UTC&rewriteBatchedStatements=true
username: root
password: roothouzhicong
# 这里需要加上mysql的驱动
driver-class-name: com.mysql.jdbc.Driver
# 通过这个进行日期格式的配置 ,一但配置成功只可以使用该格式的日期
#
EmployeeController:
package com.hou.controller;
import com.hou.pojo.Employee;
import com.hou.service.EmployeeService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import java.util.List;
@Controller
public class EmployeeController {
@Autowired
private EmployeeService employeeService;
@RequestMapping("/emp")
public String list(Model model){
// Collection<Employee> employees = emploeeDao.getAll();
List<Employee> employees1 = employeeService.queryAllEmployee();
// System.out.println(employees1);
model.addAttribute("employ1",employees1);
// model.addAttribute("emps",employees);
return "emp/list";
}
@GetMapping("/toAdd")
public String toAddPage(Model model,Integer id){
//查出员工的部门信息,进行下拉菜单的回显
/* Collection<Department> departments = departmentDao.getDepartments();
model.addAttribute("departments",departments);*/
return "emp/add";
}
@PostMapping("add")
public String add(Employee employee, Integer gender, String lastName,Model model){
if (gender==null||lastName==null||lastName==" "){
model.addAttribute("msg","请按照正确的格式进行输入!");
return "emp/add";
}
// System.out.println("save---->" + employee);
employeeService.insertEmployee(employee);
// emploeeDao.save(employee);
return "redirect:/emp";
}
@GetMapping("/emp/{id}")
public String updateEmp(@PathVariable("id")Integer id,Model model){
/*
// 查出数据
Employee emploee = emploeeDao.getEmploeeById(id);
model.addAttribute("emp",emploee);
// 查询所有的部门信息进行回显
Collection<Department> departments=departmentDao.getDepartments();
model.addAttribute("departments",departments);
*/
Employee employee = employeeService.queryByEmploeeId(id);
model.addAttribute("emp",employee);
return "emp/update";
}
@PostMapping("update")
public String update(Employee employee){
// emploeeDao.save(employee);
// employeeService.insertEmployee(employee);
return "redirect:/emp";
}
@GetMapping("/delemp/{id}")
public String deleEmp(@PathVariable("id")Integer id){
// 查出数据
// emploeeDao.deleteById(id);
employeeService.deleteEmployeeById(id);
return "redirect:/emp";
}
// 实现分页查询
/*@GetMapping("listpage")
public String pageList(Integer page, Integer pageSize,Model model){
employeeService.selectEmploeeListPage(page,pageSize);
if (page==null){
page=1;
}
if (pageSize==null){
pageSize=3;
}
PageInfo<Employee> pageList=employeeService.selectEmploeeListPage(page, pageSize);
model.addAttribute("page",pageList);
return "emp/list";
}*/
}
LoginController:
package com.hou.controller;
import com.hou.pojo.User;
import com.hou.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.*;
import javax.jws.WebParam;
import javax.servlet.http.HttpSession;
import java.util.List;
@Controller
//@RequestMapping("user")
public class LoginController {
@Autowired
private UserService userService;
@GetMapping("/loginTo")
public String loginTo(){
return "/login.html";
}
@RequestMapping("user/login")
// @ReponsBody需要注释掉否则会 msg取不到值
public String login(User user,@RequestParam("username")String username,
@RequestParam("password") String password,
Model model, HttpSession session){
// 设置session
session.setAttribute("loginUser", username);
List<User> users = userService.queryByUserNameAndPassword(user);
// model进行回显数据
if(user!=null){
// 登录到时管理页面
return "redirect:/emp";
}else{
model.addAttribute("msg","你的输入有误");
}
return "login";
}
@RequestMapping("/user/logout")
public String logout(){
return "/login.html";
}
@RequestMapping("login")
public String login(){
return "/login.html";
}
// 添置到注册页面进行
@RequestMapping("register")
public String register(){
return "/register.html";
}
@RequestMapping("register/judge")
public String register(User user, String username, String password, Model model, HttpSession session){
System.out.println(username + password);
if(username==null&&username==""&&password==null&&password==""){
model.addAttribute("msg","你的密码或者用户名不可以为空");
//重新返回到注册页面
return "/register.html";
}else {
// 插入用户
userService.addUser(user);
return "/login.html";
}
}
@RequestMapping("userlist")
public String userList(String username,String password,Model model){
List<User> users = userService.queryAllUser(password, username);
model.addAttribute("users",users);
return "user/userList";
}
@RequestMapping("/delUser/{username}")
public String deletUser(@PathVariable("username") String username){
userService.delteUserByUsername(username);
return "user/userList";
}
// 添加用户
@RequestMapping("toAddUser")
public String toAddUser(){
return "user/addUser";
}
@RequestMapping("adduser")
public String addUser(User user){
userService.addUser(user);
return "userlist";
}
}
EmployeeMapper:
package com.hou.mapper;
import com.hou.pojo.Employee;
import tk.mybatis.mapper.common.Mapper;
import java.util.List;
public interface EmployeeMapper extends Mapper<Employee> {
// public Employee queryBEmployeeId(Integer id);
}
UserDao:
package com.hou.mapper;
import com.hou.pojo.User;
import org.springframework.stereotype.Repository;
import tk.mybatis.mapper.common.Mapper;
@Repository
public interface UserDao extends Mapper<User> {
}
Department:
package com.hou.pojo;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;
@Data
@AllArgsConstructor
@NoArgsConstructor
@Table(name = "tb_department")
public class Department {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Integer departmentId;
private String departmentName;
}
Employee:
package com.hou.pojo;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import org.springframework.format.annotation.DateTimeFormat;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;
import java.util.Date;
@Data
@AllArgsConstructor
@NoArgsConstructor
@Table(name = "tb_employee")
public class Employee {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Integer id;
private String lastName;
private String email;
private Integer gender;//0: 女 1:男
private String departmentName;
@DateTimeFormat(pattern = "yyyy-MM-dd")
private Date birth;
}
User:
package com.hou.pojo;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;
//import javax.persistence.Table;
@Data
@AllArgsConstructor
@NoArgsConstructor
@Table(name = "tb_user")
public class User {
@Id //生成id的策略自增
@GeneratedValue(strategy = GenerationType.IDENTITY)
// 这两个注解是等效的,可以随便选择一个
// @KeySql(useGeneratedKeys = true)
// private Integer id;
private String username;
private String password;
}
EmployeeService:
package com.hou.service;
import com.hou.pojo.Employee;
import java.util.List;
public interface EmployeeService {
public List<Employee> queryAllEmployee();
public Employee queryByEmploeeId(Integer id);
public int insertEmployee(Employee employee);
/*
public void updateEmployee(Employee employee);
*/
public int deleteEmployeeById(Integer id);
}
EmployeeServiceimpl:
package com.hou.service.impl;
import com.hou.mapper.EmployeeMapper;
import com.hou.pojo.Employee;
import com.hou.service.EmployeeService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import java.util.List;
@Service
@Transactional
public class EmploeeServiceimpl implements EmployeeService {
@Autowired
EmployeeMapper employeeDao;
@Override
public List<Employee> queryAllEmployee() {
List<Employee> employees =employeeDao.selectAll();
System.out.println(employees);
return employees;
}
@Override
public Employee queryByEmploeeId(Integer id) {
return employeeDao.selectByPrimaryKey(id);
}
@Override
public int insertEmployee(Employee employee) {
return employeeDao.insert(employee);
}
@Override
public int deleteEmployeeById(Integer id) {
return employeeDao.deleteByPrimaryKey(id);
}
/*public static void main(String[] args) {
System.out.println(new EmploeeServiceimpl().queryAllEmployee());
}*/
}
UserServiceimpl
package com.hou.service.impl;
import com.hou.mapper.UserMapper;
import com.hou.pojo.User;
import com.hou.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class UserServiceimpl implements UserService {
@Autowired
UserMapper userMapper;
@Override
public boolean addUser(User user) {
return false;
}
@Override
public int deleteByUserId(Integer id) {
return userMapper.deleteByPrimaryKey(id);
}
@Override
public List<User> queryAllUser() {
return userMapper.selectAll();
}
@Override
public int delteUserByUsername(String username) {
return 0;
}
}
EmployeeService:
package com.hou.service;
import com.hou.pojo.Employee;
import java.util.List;
public interface EmployeeService {
public List<Employee> queryAllEmployee();
public Employee queryByEmploeeId(Integer id);
public int insertEmployee(Employee employee);
public int updateEmploee(Employee employee);
/*
public void updateEmployee(Employee employee);
*/
public int deleteEmployeeById(Integer id);
}
UserService:
package com.hou.service;
import com.hou.pojo.User;
import java.util.List;
public interface UserService {
public List<User> queryAllUser();
public boolean addUser(User user);
public int deleteByUserId(Integer id);
public int delteUserByUsername(String username);
}
Application.java:
package com.hou;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.ComponentScan;
import tk.mybatis.spring.annotation.MapperScan;
//注意要导入的包的名字 tk.mybatis.spring.annotation.MapperScan;
@SpringBootApplication
@MapperScan(basePackages = "com.hou.mapper")
//注意这个是mybatis的
//@MapperScan(basePackages = "com.hou.mapper")
public class Springboot03WebApplication {
public static void main(String[] args) {
SpringApplication.run(Springboot03WebApplication.class, args);
}
}
员工展示列表页面list.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
<body>
<div class="ui container">
<a href="userlist" class="ui massive basic teal circular center aligned button"> 进入用户管理系统</a>
<!--
<center>
<table width="50%" heigh="40%" border="1px solid black" cellspacing="0" align="center">
<!– 每行的宽度 col height 高度 cautious! 每个th有自己的默认宽度一定多加 –>
<col width="80px">
<col width="80px">
<col width="80px">
<col width="80px">
<col width="80px">
<col width="80px">
<h2 class="ui ">员工管理系统</h2>
<!–超链接可以设置成button –>
<thead th:bgcolor="yellow">
<a class="ui big green button" th:href="@{/toAdd}" style="color: green;size: 40px;
background: yellow;float: left" >添加员工</a>
<!– Semantic-ui前端–>
<div class="ui icon inverter circle input">
<input type="text" placeholder="Search..." size="100" height="160">
<i class="inverted circular search link icon"></i>
</div>
<a th:href="@{/user/logout}" class="ui max red button" style="float: right">
<i class="user icon"></i>注销</a>
<tr>
<td>id</td>
<td>lastName</td>
<td>email</td>
<td>gender</td>
<td>department</td>
<td>birth</td>
</tr>
</thead>
<!–thymeleaf模板引擎获取员工的数据–>
<tbody>
<tr th:each="emp:${employ1}">
<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>
<!– #date.formate thymleafe自带的–>
<td th:text="${#dates.format(emp.getBirth(),'yyyy-MM-dd HH:mm:ss')}"></td>
<td>
<!– 这里虽然披红,但是没有异常 注意路径不要写错 @{/emp/}+${emp.getId()}–>
<a class="ui max green button" th:href="@{/emp/}+${emp.getId()}" >更新 <a/>
<a class="ui max red button"style="color: red" th:href="@{/delemp/}+${emp.getId()}">删除</a>
</td>
</tr>
</tbody>
</table>
</center>-->
<center>
<!-- Semantic-UI表格-->
<table class="ui compact celled definition table">
<h2 class="ui teal header ">员工管理系统</h2>
<a class="ui big green circular button" th:href="@{/toAdd}" style="color: green;size: 40px;
background: yellow;float: left" >添加员工</a>
<!-- Semantic-ui前端-->
<!---->
<tr colspan="3">
<!-- <input type="text" id="filtertxt">-->
</tr>
<!---->
<thead class="full-width">
<!-- 这一块和下面的jQuery实现检索功能 -->
<div class="ui inverter input">
<input type="text" id="filtertxt" placeholder="Search..." size="100" height="160">
<input type="button" class="ui basic teal circular button" id="ss" value="搜索" style="margin-left: 50px;"/>
</div>
<!-- -->
<a th:href="@{/user/logout}" class="ui max red button" style="float: right">
<i class="user icon"></i>注销</a>
<tr>
<th>编号</th>
<th>姓名</th>
<th>邮箱</th>
<th>性别</th>
<th>部门</th>
<th>日期</th>
</tr>
</thead>
<tbody>
<tr th:each="emp:${employ1}">
<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.getDepartmentName()}"></td>
<!-- #date.formate thymleafe自带的-->
<td th:text="${#dates.format(emp.getBirth(),'yyyy-MM-dd HH:mm:ss')}"></td>
<td>
<!-- 这里虽然披红,但是没有异常 注意路径不要写错 @{/emp/}+${emp.getId()}-->
<a class="ui max green button" th:href="@{/emp/}+${emp.getId()}" >更新 <a/>
<a class="ui max circular red button"style="color: red" th:href="@{/delemp/}+${emp.getId()}"><span style="color: black!important;">删除</span></a>
</td>
</tr>
</tbody>
<tfoot class="full-width">
<tr>
<th></th>
<th colspan="4">
<div class="ui right floated small primary labeled icon button">
<i class="user icon"></i> Add User
</div>
<div class="ui small button">
Approve
</div>
<div class="ui small disabled button">
Approve All
</div>
</th>
</tr>
</tfoot>
</table>
<div class="ui buttons">
<button class="ui green basic button">首页</button>
<button class="ui red basic button">上一页</button>
<button class="ui blue basic button">下一页</button>
</div>
<!-- <input type="ui basic teal button" οnclick="toFirst()" value="首页"/>
<input type="button" οnclick="onPre()" value="上一页"/>
<!– <%-- pageNum和page.pages是源码中写死的 --%>–>
当前页${page.pageNum}|${page.pages}总页数
<input type="ui basic teal button" οnclick="toNext()" value="下一页"/>
<input type="ui basic teal button" οnclick="toLast()" value="尾页"/>
每页显示 <input type="text" size="2" id="pageNo" value="${page.pageSize}"/>条数
-->
</center>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<!--分页功能的实现-->
<script>
function toFirst(){
//通过js进行获取id选择器
var pageSize=document.getElementById("pageNo").value;
location.href="listpage?currentPage=${page.firstPage}&pageSize="+pageSize;
}
function toPre(){
var pageSize=document.getElementById("pageNo").value;
location.href="listpage?currentPage=${page.prePage}&pageSize="+pageSize;
}
function toNext(){
var pageSize=document.getElementById("pageNo").value;
// 下一页
location.href="listpage?currentPage=${page.nextPage}&pageSize="+pageSize;
}
function toLast(){
var pageSize=document.getElementById("pageNo").value;
location.href="listpage?currentPage=${page.pageSize}&pageSize="+pageSize;
}
</script>
<!---->
<!--实现检索功能 Jquery-->
<script type="text/javascript">
$(function(){
$('#ss').click(function(){
var sstxt=$('#filtertxt').val();
$("table tbody tr")
.hide()
.filter(":contains('"+sstxt+"')")
.show();
})
})
</script>
</body>
</html>
update.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>Dashboard Template for Bootstrap</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
</head>
<body>
<center>
<div class="ui container">
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
<h2 class="ui basic teal header">更新员工信息</h2>
<form th:action="@{/update}" method="post">
<!-- -->
<!-- semantic-ui的基础代码-->
<!-- <label class="ui basic teal label">员工名字</label>
<div class="ui fluid input">
<input name="lastName" type="text" placeholder="username">
</div>-->
<!-- -->
<!-- 接收到的值用value type="hidden"则不可以进行修改-->
<!-- th:value不可以重复-->
<label class="ui basic teal label">员工编号</label>
<div class="ui fluid input">
<input name="id" th:value="${emp.getId()}" type="text" class="form-control" id="" readonly >
</div>
<label class="ui basic teal label">姓名</label>
<div class="ui fluid input">
<input name="lastName" th:value="${emp.getLastName()}" type="text" class="form-control" id="InputName" >
</div>
<label class="ui basic teal lable">邮箱</label>
<div class="ui fluid input">
<input name="email" type="email" th:value="${emp.getEmail()}" class="form-control" id="InputEmail1" >
</div>
<label class="ui basic teal label">性别</label>
<input class="form-check-input" type="radio" name="gender" th:checked="${emp.getGender()==1}" value="1">
<label class="form-check-label">男</label>
<input class="form-check-input" type="radio" name="gender" th:checked="${emp.getGender()==0}" value="0">
<label class="form-check-label">女</label>
<div class="form-group">
<label class="ui basic teal label">部门</label>
<!--提交的是部门的ID-->
<!-- <select class="form-control" name="department.departmentName">
<option th:selected="${dept.departmentId == emp.department}" th:each="dept:${employ1}"
th:text="${dept.departmentName}" th:value="${dept.departmentId}">1
</option>
</select>-->
<div class="ui fluid input">
<input name="departmentName" th:value="${emp.getDepartmentName()}" >
</div>
</div>
<label class="ui basic teal label">入职日期</label>
<div class="ui fluid input">
<input name="birth" type="text" th:value="${#dates.format(emp.getBirth(),'yyyy-MM-dd HH:mm:ss')}" class="form-control" id="dateFormat" autocomplete="off">
</div>
<input type="submit" class="ui circular basic teal button" value="提交"></input>
</form>
</main>
</div>
</div>
</center>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
</body>
</html>
add.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>Dashboard Template for Bootstrap</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
</head>
<body>
<center>
<div class="ui container">
<div class="ui attached segment">
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
<h2 class="ui teal header ">添加员工信息</h2>
<form th:action="@{/add}" method="post">
<!-- -->
<p style="color: red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>
<label class="ui basic teal label">员工名字</label>
<div class="ui fluid input">
<input name="lastName" type="text" placeholder="username">
</div>
<!-- -->
<label class="ui basic teal label">员工邮箱</label>
<div class="ui fluid input">
<input name="email" type="text" placeholder="Email">
</div>
<!-- -->
<div >
<label class="ui basic teal label">性别</label>
<!-- 1为男 0:女-->
<input type="radio" name="gender" value="1">
<label class="form-check-label">男</label>
<input class="form-check-input" type="radio" name="gender" value="0">
<label class="form-check-label">女</label>
</div>
<!-- -->
<label class="ui basic teal label">员工部门</label>
<div class="ui fluid input">
<!--department.departmentName-->
<input name="departmentName" type="departmentName" th:placeholder="输入员工的部门">
</div>
<!-- -->
<!--<div class="form-group">
<label>部门</label>
<!–在Controller层里面接收的是一个departmentid,所以这里是department.id–>
<select class="form-control" name="department.id">
<option>请选择</option>
<!– 获取查询到的departments–>
<!– <option th:each="dept:${departments}" th:text="${dept.departmentName}" th:value="${dept.id}">1</option>–>
</select>
</div>-->
<label class="ui basic teal label">员工入职日期</label>
<div class="ui fluid input">
<input name="birth" type="text" placeholder="输入员工入职日期">
</div>
<!--cicular-->
<input type="submit" class="ui circular positive button" value="提交"></input>
</form>
</main>
</div>
</div>
</center>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
</body>
</body>
</html>
login.html:
<!DOCTYPE xmlns:th="http://www.thymeleaf.org" >
<html xmlns:th="http://www.thymeleaf.org">
<title>登录页面</title>
<style>
input{
border: 0;
border-bottom: 1px solid #000000;
outline:none;
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
<body>
<div class="ui container vertical center" style="margin-top: 300px">
<center>
<form th:action="@{/user/login}" method="post">
<table width="50%" height="40%">
<!-- <tr>
<td> </td>
<!– msg的值为空则不显示 #strings.isEmpty 是thymeleaf自带的–>
<p style="color: red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>
<td>[[#{login.username}]]<input type="text" name="username" th:placeholder="#{login.username}"> </td>
</tr>
<tr>
<td> </td>
<td>[[#{login.password}]]<input type="password" name="password" th:placeholder="#{login.password}" ></td>
<tr><input type="checkbox" name="remeberme" th:text="#{login.remeber}">Remeber me</tr>
</tr >-->
<!-- th:fragment="side" 进行相关的抽取 th:insert="{~{相关的请求::sidebar} 和th:replace="~{}效果一样 "-->
<!--可以通过()进行传递相关的参数
th:class="${()}"-->
<!-- <tr>
<td></td>
<td> <button name="btn" th:value="#{login.btn}" >[[#{login.btn}]]</button></td>
<td><a href="register.html"></a> </td>
<td><a th:href="@{/login.html(lan='zh_CN')}">中文</a> </td>
<td><a class="" th:href="@{/login.html(lan='en_US')}" >English</a> </td>
</tr>
<tr>-->
<div class="ui placeholder segment">
<h2 class="ui teal header ">员工管理系统</h2>
<p style="color: red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>
<div class="ui two column very relaxed stackable grid">
<div class="column">
<div class="ui form" >
<div class="field">
<label>Username</label>
<div class="ui left icon input">
<input type="text" name="username" th:placeholder="#{login.username}" placeholder="Username">
<i class="user icon"></i>
</div>
</div>
<div class="field">
<label>Password</label>
<div class="ui left icon input">
<input type="password" name="password" placeholder="password">
<i class="lock icon"></i>
</div>
</div>
<input type="submit" name="btn" th:value="#{login.btn}" class="ui blue submit button"></input>
</div>
</div>
<div class="middle aligned column">
<div class="ui big button">
<i class="signup icon"></i>
<a th:href="@{/register}">注册</a>
</div>
</div>
</div>
<div class="ui vertical divider">
Or
</div>
</div>
</tr>
</table>
</form>
</center>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
</body>
</html>
register.html
<!DOCTYPE xmlns:th="http://www.thymeleaf.org">
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
</head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
<body>
<div class="ui container" style="margin-top: 300px">
<center>
<div class="ui placeholder segment">
<h1>注册页面</h1>
<form action="/register/judge" method="post">
<table>
<p style="color: red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>
<div class="column">
<div class="ui form" >
<div class="field">
<label>Username</label>
<div class="ui left icon input">
<input type="text" name="username" th:placeholder="#{login.username}" placeholder="Username">
<i class="user icon"></i>
</div>
</div>
<div class="field">
<label>Password</label>
<div class="ui left icon input">
<input type="password" name="password" placeholder="password">
<i class="lock icon"></i>
</div>
</div>
</div>
<tr>
<td>角色</td>
<td><input type="radio" name="isadmin" value="1">管理员
<input type="radio" name="isadmin" value="2" checked>普通用户</td>
</tr>
<tr>
<td><input type="submit" value="注册" class="ui basic teal circular button"></td>
<td><a th:href="@{loginTo}" class="ui basic teal circular button">返回</a></td>
</tr>
</table>
</form>
</div>
</center>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
</body>
</html>
成功完成,制作不易,对你有帮助的话请点赞!!!!