SpringBoot+Thymleaf+通用Mapper实现员工管理系统

2024-04-05 07:58:30

相关的包结构：（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');

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">
                &lt;!&ndash; 每行的宽度 col height 高度 cautious! 每个th有自己的默认宽度一定多加 &ndash;&gt;
                <col width="80px">
                <col width="80px">
                <col width="80px">
                <col width="80px">
                <col width="80px">
                <col width="80px">
                <h2 class="ui ">员工管理系统</h2>
                &lt;!&ndash;超链接可以设置成button &ndash;&gt;

                <thead th:bgcolor="yellow">
                <a class="ui big green button" th:href="@{/toAdd}" style="color: green;size: 40px;
            background: yellow;float: left"  >添加员工</a>

                &lt;!&ndash;       Semantic-ui前端&ndash;&gt;
                <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>
                &lt;!&ndash;thymeleaf模板引擎获取员工的数据&ndash;&gt;
                <tbody>
                <tr th:each="emp:${employ1}">
                    <td th:text="${emp.getId()}" ></td>

                    <td th:text="${emp.getLastName()}"></td>
                    <td th:text="${emp.getEmail()}"></td>
                    &lt;!&ndash;            断断男女，可以进行相关的赋值&ndash;&gt;
                    <td th:text="${emp.getGender()=='0'?'女':'男'}"></td>
                    <td th:text="${emp.getDepartment()}"></td>
                    &lt;!&ndash;            #date.formate thymleafe自带的&ndash;&gt;
                    <td th:text="${#dates.format(emp.getBirth(),'yyyy-MM-dd HH:mm:ss')}"></td>
                    <td>
                        &lt;!&ndash;                这里虽然披红，但是没有异常  注意路径不要写错 @{/emp/}+${emp.getId()}&ndash;&gt;
                        <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="上一页"/>

&lt;!&ndash;        <%&#45;&#45;         pageNum和page.pages是源码中写死的   &#45;&#45;%>&ndash;&gt;
        当前页${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>
                        &lt;!&ndash;在Controller层里面接收的是一个departmentid,所以这里是department.id&ndash;&gt;
                        <select class="form-control" name="department.id">
                            <option>请选择</option>
                            &lt;!&ndash;                        获取查询到的departments&ndash;&gt;
                            &lt;!&ndash;    <option  th:each="dept:${departments}" th:text="${dept.departmentName}" th:value="${dept.id}">1</option>&ndash;&gt;

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

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

                    &lt;!&ndash;                msg的值为空则不显示 #strings.isEmpty 是thymeleaf自带的&ndash;&gt;
                    <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>

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

成功完成，制作不易，对你有帮助的话请点赞！！！！

码农公寓

相关文章