项目总结(二十三)springboot简单员工管理系统

  • 作者:sdau20171754
  • 分类: springboot
  • 发表日期:2020-03-21 10:45:03
  • 阅读:(237)
  • 评论(0)

项目演示

http://guanweihong.ren:8080

大家可以自己注册测试,也可以使用我的测试账号:

用户名:gwh123

密码:123456

项目概述:

一直想学点springboot,因为目前这个技术在工作中应用的比较多。跟着雷丰阳的课程简单学了两个星期,把基础篇简单过了一下,了解了一下springboot工程的基本技术,想着用这些基本技术写一个简单的管理系统,作为一个学习和使用的模板。

项目主要功能如下:

登录模块:完成用户登录,保存用户信息,同时通过拦截器保证只有登录用户才能访问后面的管理页面

注册模块:完成用户注册,这里主要写了一个用bootstrap和js验证表单信息的模板,填写不对的话可以及时提示

员工管理:显示员工列表(分页显示),可以根据电话,姓名模糊查询员工,同时可以添加,修改删除员工,其中部门是外键,点击部门可以显示部门内的全部员工

部门管理:显示全部的部门信息,同时可以添加删除修改部门

项目主要技术:

前端: bootstrap+jquery+css

这里我借用了http://blog.csdn.net/weixin_43774331/article/details/88753956的模板做主页

后端:springboot基础+mybiatis(映射版,注解版,外键映射写法)

          拦截器的配置

         pagehelper分页

        webjars引入资源

        thymeleaf基本语法

项目结构:

项目实现:

1、数据表设计:

user表,employee表,department表,具体设计参照实体类,这里注意department表的id是employee表的外键

2、pom文件

用webjars引入静态资源bootstrap,jquery等,可以方便统一管理(不过我实际项目里采用了直接引入的方式,方便替换样式),注意pagehhelper,themleaf,mybiatis等的引入

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.2.4.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.gzh</groupId>
    <artifactId>crud</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>crud</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.2</version>
        </dependency>
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper</artifactId>
            <version>4.1.6</version>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>bootstrap</artifactId>
            <version>4.4.1-1</version>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>jquery</artifactId>
            <version>3.4.1</version>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>popper.js</artifactId>
            <version>2.0.2</version>
        </dependency>



    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <version>2.2.4.RELEASE</version>
            </plugin>
        </plugins>
    </build>

</project>

 

3、application.properties 可以换成yml文件更有层次,注意mysql8的连接和mybiatis路径的设置

#thymeleaf 配置
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.servlet.content-type=text/html
spring.thymeleaf.cache=false
spring.datasource.username=root
spring.datasource.password=031116
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/springboot?characterEncoding=utf8&useSSL=false&serverTimezone=UTC&rewriteBatchedStatements=true
mybatis.mapper-locations=classpath:mybatis/mapper/*.xml

3、实体类设计:

用户类

package com.gzh.crud.bean;

public class User {
private String username;
private String password;
private String name;
private String email;
private String tel;


    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    public String getTel() {
        return tel;
    }

    public void setTel(String tel) {
        this.tel = tel;
    }

    public User(String username, String password, String name, String email, String tel) {
        this.username = username;
        this.password = password;
        this.name = name;
        this.email = email;
        this.tel = tel;
    }
    public User()
    {

    }
}

员工类: 注意部门属性

package com.gzh.crud.bean;

import org.springframework.stereotype.Component;


public class Employee {
    private int id;
    private String name;
    private Department department;
    private int age;
    private String sex;
    private String tel;

    public Department getDepartment() {
        return department;
    }

    public void setDepartment(Department department) {
        this.department = department;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getAge() {
        return age;
    }

    public String getSex() {
        return sex;
    }

    public String getTel() {
        return tel;
    }




    public void setAge(int age) {
        this.age = age;
    }

    public void setSex(String sex) {
        this.sex = sex;
    }

    public void setTel(String tel) {
        this.tel = tel;
    }



    public Employee() {

    }

    public Employee(int id, String name, Department department, int age, String sex, String tel) {
        this.id = id;
        this.name = name;
        this.department = department;
        this.age = age;
        this.sex = sex;
        this.tel = tel;
    }
}

部门类:

package com.gzh.crud.bean;

import org.springframework.stereotype.Component;


public class Department {

    private int depId;
    private String depName;
    private String depFunction;

    public int getDepId() {
        return depId;
    }

    public void setDepId(int depId) {
        this.depId = depId;
    }

    public String getDepName() {
        return depName;
    }

    public void setDepName(String depName) {
        this.depName = depName;
    }

    public String getDepFunction() {
        return depFunction;
    }

    public void setDepFunction(String depFunction) {
        this.depFunction = depFunction;
    }

    public Department(int depId, String depName, String depFunction) {
        this.depId = depId;
        this.depName = depName;
        this.depFunction = depFunction;
    }

    public Department() {

    }
}

5、paghelper配置类,用@Configuration注入

package com.gzh.crud.config;

import com.github.pagehelper.PageHelper;
import org.springframework.beans.factory.annotation.Configurable;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

import java.util.Properties;
@Configuration
public class PageHelperConfig {
    @Bean
    public PageHelper pageHelper()
    {
        PageHelper pageHelper=new PageHelper();
        Properties properties=new Properties();
        properties.setProperty("offsetAsPageNum", "true");
        properties.setProperty("rowBoundsWithCount", "true");
        properties.setProperty("reasonable", "true");
        pageHelper.setProperties(properties);
        return pageHelper;
    }
}

6、用户登录注册模块设计: 

<1>mapper.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.gzh.crud.mapper.UserMapper">
    <sql id="cols">
        username,
        password,
        name,
        email,
        tel
    </sql>

    <insert id="InsertUser" parameterType="com.gzh.crud.bean.User">
        insert into user
        (<include refid="cols"/>)
        values
        (#{username},#{password},#{name},#{email},#{tel})
    </insert>
    <select id="getUser" parameterType="com.gzh.crud.bean.User" resultType="com.gzh.crud.bean.User">
        select*from user where username=#{username} and password=#{password}
    </select>
    <select id="findUser" parameterType="string" resultType="com.gzh.crud.bean.User">
        select*from user where username=#{username}
    </select>

</mapper>

<2>mapper接口 

package com.gzh.crud.mapper;

import com.gzh.crud.bean.User;
import org.apache.ibatis.annotations.Mapper;

@Mapper
public interface UserMapper {
    User getUser(User user);
    int InsertUser(User user);
    User findUser(String username);
}

 

<3>service接口和具体实现

package com.gzh.crud.service;

import com.gzh.crud.bean.User;

public interface UserService {

    int Register(User user,String passwordAgain);
    User Login(User user);

}
package com.gzh.crud.service;

import com.gzh.crud.bean.User;
import com.gzh.crud.mapper.UserMapper;
import org.springframework.stereotype.Service;

import javax.annotation.Resource;

@Service
public class UserServiceImp implements UserService{
    @Resource
    private UserMapper userMapper;
    @Override
    public int Register(User user,String passwordAgain) {
        User user1 = null;
        user1 = userMapper.findUser(user.getName());
        if (user1 != null)
            return 0;
        else if (!user.getPassword() .equals(passwordAgain)) {
            System.out.println(passwordAgain);
            System.out.println(user.getPassword());
            return 1;
        }
        else {
            userMapper.InsertUser(user);
            return 2;

        }
    }

    @Override
    public User Login(User user) {
        User user1=null;
        user1=userMapper.getUser(user);
        return user1;
    }

}

<4>controller设计

注意登录和注册失败时要携带相应信息跳转回原页面

package com.gzh.crud.controller;

import com.gzh.crud.bean.User;
import com.gzh.crud.mapper.UserMapper;
import com.gzh.crud.service.UserService;
import org.apache.catalina.Session;
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 org.springframework.web.bind.annotation.RequestParam;

import javax.servlet.http.HttpSession;

@Controller
public class UserController {
    @Autowired
    private UserService userService;
    @RequestMapping({"/","login"})
    public String Login()
    {
        return "login";
    }
    @RequestMapping("register")
    public String Register()
    {
        return "register";
    }
    @RequestMapping("loginUser")
    public String loginUser(User user, HttpSession session, Model model)
    {
        User user1=userService.Login(user);
        if(user1!=null)
        {session.setAttribute("user",user);
        return "redirect:main";
        }
        else
        {
            model.addAttribute("msg","用户名或密码错误");
            return "login";
        }
    }
    @RequestMapping("registerUser")
    public String registerUser(User user, @RequestParam(value="passwordAgain")String passwordAgain,Model model) {
        int flag = userService.Register(user, passwordAgain);
        System.out.println(flag);
        if (flag == 0) {
            model.addAttribute("msg", "用户名已被注册");
            return "register";
        }
        else if (flag == 1) {
            model.addAttribute("msg", "两次输入密码不一致");
            return "register";
        }
        else
            model.addAttribute("msg", "注册成功请登录");
            return "login";
        }
    @RequestMapping("LogoutUser")
    public String LogOutUser(Model model,HttpSession session)
    {
        model.addAttribute("msg","您已成功注销");
        session.invalidate();
        return "login";
    }
    }

<5>页面设计:

登录页面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="/bootstrap-3.3.7/css/bootstrap.min.css"/>
    <script th:src="@{/jquery.min.js}"></script>
    <script th:src="@{/bootstrap-3.3.7/js/bootstrap.min.js}"></script>
    <link href="/css/login.css" rel="stylesheet"></link>
</head>
<body>
<div class="panel panel-primary panel1">
    <div class="panel-heading panel-heading1">
        <h3 class="panel-title center-block">登录</h3>
    </div>
    <div class="panel-body">
        <form class="form-horizontal form1" th:action="@{/loginUser}" method="post">
            <fieldset>

                <div class="form-group">
                    <label for="inputPassword" class="col-lg-3 control-label">用户名</label>
                    <div class="col-lg-9">
                        <input type="text" th:name="username"class="form-control" id="inputUsername" placeholder="请输入用户名">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword" class="col-lg-3 control-label">密码</label>
                    <div class="col-lg-9">
                        <input type="password" th:name="password" class="form-control" id="inputPassword" placeholder="请输入密码">

                    </div>
                </div>
                <div class="form-group">
                    <div class="col-lg-10 col-lg-offset-2">
                        <button type="submit" class="btn btn-primary">提交</button>
                        <button type="reset" class="btn btn-default">重置</button>

                    </div>
                </div>
                <p th:text="${msg}" th:if="${not #strings.isEmpty(msg)}" style="color: red"></p>
                <a th:href="@{/register}">没有账号?点此注册</a>
            </fieldset>
        </form>
    </div>
</div>
</body>

</html>

注册页面:注意用jquery完成有关的验证

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" href="/bootstrap-3.3.7/css/bootstrap.min.css"/>
    <script th:src="@{/jquery.min.js}"></script>
    <script th:src="@{/bootstrap-3.3.7/js/bootstrap.min.js}"></script>

    <link href="/css/login.css" rel="stylesheet"></link>
    <script type="text/javascript">
        $(function () {
            //验证失败进行换颜色,和提示
            function isError(obj, html) {
                obj.parent().parent().removeClass("has-success");
                obj.parent().parent().addClass("has-error");
                obj.next().html(html);
            }
            //验证成功
            function isOK(obj) {
                obj.parent().parent().removeClass("has-error");
                obj.parent().parent().addClass("has-success");
                obj.next().html("");
            }
            //验证用户名
            function verifyUserName(obj) {
                var userNameValue = obj.val();
                if(userNameValue==""){
                    isError(obj,"用户名不能为空");
                    return false;
                }else{
                    isOK(obj);
                    return true;
                }

            }
            //验证密码
            function verifyPassword(obj) {
                var passwordValue = obj.val();
                if(passwordValue.length<6){
                    isError(obj,"密码长度不够6位");
                    return false;
                }else{
                    isOK(obj);
                    return true;
                }
            }
            //验证电话号码
            function verifyPhone(obj) {
                var phoneValue = obj.val();
                var re =/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
                if(!re.test(phoneValue)){
                    isError(obj,"电话号码不正确");
                    return false;
                }else{
                    isOK(obj);
                    return true;
                }
            }
            //验证qq邮箱
            function verifyEmail(obj) {
                var emailValue = obj.val();
                var email =  /^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/;
                if(!email.test(emailValue)){
                    isError(obj,"邮箱不正确");
                    return false;
                }else{
                    isOK(obj);
                }
            }
            function verifyPasswordAgain(obj) {
                var passwordAgain = obj.val();
                var password =$("input[name='password']").val();
                if(passwordAgain!=password){
                    isError(obj,"两次输入密码不一致");
                    return false;
                }else{
                    isOK(obj);
                }
            }
            //给它们分别定义失焦事件
            $("input[name='username']").blur(function () {
                verifyUserName($(this));
            })
            $("input[name='password']").blur(function () {
                verifyPassword($(this));
            })
            $("input[name='tel']").blur(function () {
                verifyPhone($(this));
            })
            $("input[name='email']").blur(function () {
                verifyEmail($(this));
            })
            $("input[name='passwordAgain']").blur(function () {
                verifyPasswordAgain($(this));
            })
            //提交方法进行验证
            $("#addUser").submit(function () {
                var userName = verifyUserName($("input[name='username']"));
                var password = verifyPassword($("input[name='password']"));
                var phone = verifyPhone($("input[name='tel']"));
                var email= verifyEmail($("input[name='email']"));
                var passwordAgain=verifyPasswordAgain($("input[name='passwordAgain']"))
                return userName&&password&&phone&&email&&passwordAgain;
            })
        })
    </script>

</head>
<body>
<div class="panel panel-primary panel2">
    <div class="panel-heading panel-heading1">
        <h3 class="panel-title center-block">注册</h3>
    </div>
    <div class="panel-body">
        <form class="form-horizontal form1" th:action="@{/registerUser}" method="post" id="addUser">
            <fieldset>

                <div class="form-group">
                    <label for="inputEmail" class="col-lg-3 control-label">用户名</label>
                    <div class="col-lg-9">
                        <input type="text" th:name="username" name="username" class="form-control" id="inputUser" placeholder="请输入用户名">
                        <span class="help-block"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword" class="col-lg-3 control-label">密码</label>
                    <div class="col-lg-9">
                        <input type="password" th:name="password" name="password" class="form-control" id="inputPassword" placeholder="请输入密码">
                        <span class="help-block"></span>

                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword" class="col-lg-3 control-label">确认密码</label>
                    <div class="col-lg-9">
                        <input type="password" th:name="passwordAgain" name="passwordAgain" class="form-control" id="inputPasswordAgain" placeholder="请再次输入密码">
                        <span class="help-block"></span>

                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword" class="col-lg-3 control-label">姓名</label>
                    <div class="col-lg-9">
                        <input type="text" th:name="name" name="name" class="form-control" id="inputName" placeholder="请输入姓名">
                        <span class="help-block"></span>

                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword" class="col-lg-3 control-label">邮箱</label>
                    <div class="col-lg-9">
                        <input type="email" th:name="email" name="email" class="form-control" id="inputEmail" placeholder="请输入邮箱">
                        <span class="help-block"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword" class="col-lg-3 control-label">电话</label>
                    <div class="col-lg-9">
                        <input type="text" th:name="tel" name="tel" class="form-control" id="inputTel" placeholder="请输入电话">
                        <span class="help-block"></span>

                    </div>
                </div>
                <div class="form-group">
                    <div class="col-lg-10 col-lg-offset-2">
                        <button type="submit" class="btn btn-primary">提交</button>
                        <button type="reset" class="btn btn-default">重置</button>

                    </div>
                </div>

            </fieldset>
        </form>
        <p th:text="${msg}" th:if="${not #strings.isEmpty(msg)}" style="color: red"></p>
    </div>
</div>


</body>
</html>

相关css

.panel1
{
    width:420px;
    height:350px;
    margin: 0 auto;
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
    background-color: dimgrey;
    text-align: center;
}
.panel-heading1
{
    text-align: center;
}
.form1
{
    margin-top:30px;
    margin-right:30px;
}

.panel2
{
    width:600px;
    height:600px;
    margin: 0 auto;
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
    background-color: dimgrey;
    text-align: center;
}

7、拦截器设计:

package com.gzh.crud.interceptor;

import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;

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("user");
        if (user == null) {
            request.setAttribute("msg", "您还没有登录,请先登录!");
            request.getRequestDispatcher("/login").forward(request, response);
            return false;

        }
        return true;
    }
    @Override
    public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {

    }

    @Override
    public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {

    }
}

在配置器中注入,注意要排除不能拦截的路径还有css路径,这里同时还定义了视图的控制器。进行页面的重定向防止表单重复提交 

package com.gzh.crud.config;

import com.gzh.crud.interceptor.LoginHandlerInterceptor;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class MyConfig implements WebMvcConfigurer {
    private static final String[] excludePaths = {"/", "/login", "/login.html", "/loginUser", "/bootstrap-3.3.7/**","/css/**","/image/**","/register","/register.html","/registerUser"};

    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/").setViewName("login");
        registry.addViewController("/login").setViewName("login");
        registry.addViewController("/login.html").setViewName("login");
        registry.addViewController("/index.html").setViewName("main");
    }



    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        //添加不拦截的路径,SpringBoot已经做好了静态资源映射,所以我们不用管
        registry.addInterceptor(new LoginHandlerInterceptor())
                .excludePathPatterns(excludePaths);
    }
}

8、主页设计:

这里我直接借用了http://blog.csdn.net/weixin_43774331/article/details/88753956博主的模板,结合bootstrap进行了个人处理

这里用到了thymeleaf的碎片语法,把公共页面提取出,用在其他页面使用

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <link rel="stylesheet" href="/bootstrap-3.3.7/css/bootstrap.min.css"/>
    <script th:src="@{/jquery.min.js}"></script>
    <script th:src="@{/bootstrap-3.3.7/js/bootstrap.min.js}"></script>
    <link href="/css/side.css" rel="stylesheet"></link>
</head>
<body>
<nav class="navbar navbar-default" th:fragment="nav">
<div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">员工管理系统</a>
        </div>
    <ul class="nav navbar-nav navbar-right">

        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">[[${session.user.username}]] <span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a th:href="@{/LogoutUser}">退出登陆</a></li>

            </ul>
        </li>
    </ul>

    </div>   <!-- .container-fluid -->
</nav>

<!-- 中间主体内容部分 -->
<div class="pageContainer">
    <!-- 左侧导航栏 -->
    <div class="pageSidebar" th:fragment="side">
        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

            <!-- 个人中心 -->
            <div class="panel2">

                <div class="panel-heading" role="tab">
                    <h4 class="panel-title">
                        <a href="#" target="mainFrame">
                            <span class="glyphicon glyphicon-fire"></span>
                            个人中心
                        </a>
                    </h4>
                </div>

            </div>

            <!-- 用户管理 -->
            <div class="padnel panel2">

                <div class="panel-heading" role="tab" id="headingOne">
                    <h4 class="panel-title">
                        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                            <span class="glyphicon glyphicon-user active"></span>
                            员工管理
                            <span class="glyphicon glyphicon-menu-left pull-right"></span>
                        </a>
                    </h4>
                </div>

                <div id="collapseOne" class="collapse panel3" role="tabpanel" aria-labelledby="headingOne">
                    <div class="panel-body">
                        <p>
                            <span class="glyphicon glyphicon-record"></span>
                            <a th:href="@{/listEmp}" th:target="mainFrame">员工列表</a>
                        </p>
                        <p>
                            <span class="glyphicon glyphicon-record"></span>
                            <a th:href="@{/insertEmp}" target="mainFrame">员工添加</a>
                        </p>
                    </div>
                </div>
            </div>

            <!-- 商品管理 -->
            <div class="pannel panel2">

                <div class="panel-heading" role="tab" id="headingTwo">
                    <h4 class="panel-title">
                        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
                            <span class="glyphicon glyphicon-gift"></span>
                            部门管理
                            <span class="glyphicon glyphicon-menu-left pull-right"></span>
                        </a>
                    </h4>
                </div>

                <div id="collapseTwo" class="collapse panel3" role="tabpanel" aria-labelledby="headingTwo">
                    <div class="panel-body">
                        <p>
                            <span class="glyphicon glyphicon-record"></span>
                            <a th:href="@{/listDep}" target="mainFrame">部门列表</a>
                        </p>
                        <p>
                            <span class="glyphicon glyphicon-record"></span>
                            <a th:href="@{/insertDep}" target="mainFrame">添加部门</a>
                        </p>
                    </div>
                </div>
            </div>


        </div>


    </div>


</div>






</body>
</html>

有关css


body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;

    font-family: "Microsoft YaHei", sans-serif;
}

.pageContainer{
    bottom: 0;
    left:0;
    right: 0;
    top: 60px;
    overflow: auto;
    position: absolute;
    width: 100%;
}
.pageSidebar{
    width: 240px;
    height:100%;
    padding-bottom: 30px;
    padding-top: 40px;
    margin-top:0;
    overflow: auto;
    background-color: #222D34;
}
.panel2{
    background-color: #222D32;
    color: #b8c7ce;
    border: none;
    border-radius: 0;
}
.panel2:hover{
    background-color: #1E282C;
    color: #FFF;
}
.panel2 a:hover,.panel2 a:active,.panel2 a:focus{
    text-decoration: none;
}
.panel3{
    background-color: #2C3B41;
    color: #b8c7ce;
}
.panel3 a{
    color: #b8c7ce;
}
.panel3 a:hover{
    color: #b8c7ce;
    color: #FFF;
}
.splitter {
    width: 5px;
    height: 100%;
    bottom: 0;
    left: 240px;
    position: absolute;
    overflow: hidden;
    background-color: #fff;
}
.pageContent{
    height: 100%;
    min-width: 768px;
    left: 246px;
    top: 0;
    right: 0;
    z-index: 3;
    padding-bottom: 30px;
    position: absolute;
}

table{
    background-color: darkgrey;
    margin-top:20px

}
tr
{
    text-align: center;
}
th
{
    text-align: center;
    background-color: #007f5e;
}
.form1
{
    margin-top:20px;
}
.form2
{margin-top:30px;}
.title
{
    margin-top:30px;
    text-align: center;
}

9、部门模块设计:

<1>mapper xml文件

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.gzh.crud.mapper.DepartmentMapper">
    <sql id="cols">
        depId,
        depName,
        depFunction
    </sql>

    <insert id="InsertDep" parameterType="com.gzh.crud.bean.Department" >
        insert into department
        (<include refid="cols"/>)
        values
        (#{depId},#{depName},
        #{depFunction})
    </insert>
    <delete id="delDepartment" parameterType="int">
        delete from department
        where depId=#{depId}
    </delete>

    <update id="updateDepartment" parameterType="com.gzh.crud.bean.Department" >
        update department
        <set>
            <if test="depName!=null">depName=#{depName},</if>
            <if test="depFunction!=null">depFunction=#{depFunction},</if>
        </set>
        where depId = #{depId}
    </update>
    <select id="findAllDeps"  resultType="com.gzh.crud.bean.Department">
        select*from department
    </select>
    <select id="getDepartment" parameterType="int" resultType="com.gzh.crud.bean.Department">
        select*from department where depId=#{depId}
    </select>

</mapper>

<2>mapper接口

package com.gzh.crud.mapper;

import com.gzh.crud.bean.Department;
import org.apache.ibatis.annotations.Mapper;

import java.util.List;
@Mapper
public interface DepartmentMapper{
    int InsertDep(Department department);
    Department getDepartment(int depId);
    List<Department> findAllDeps();
    int delDepartment(int depId);
    int updateDepartment(Department department);
}

<3>service设计:

package com.gzh.crud.service;

import com.gzh.crud.bean.Department;

import java.util.List;

public interface DepService {
    int InsertDep(Department department);
    int delDepartment(int depId);
    Department getDepartment(int depId);
    List<Department> findAllDeps();
    int UpdateDep(Department department);

}
package com.gzh.crud.service;

import com.gzh.crud.bean.Department;
import com.gzh.crud.mapper.DepartmentMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import javax.annotation.Resource;
import java.util.List;
@Service
public class DepServiceImpl implements  DepService{
    @Resource
    private DepartmentMapper departmentMapper;
    @Override
    public int InsertDep(Department department) {
        return departmentMapper.InsertDep(department);
    }

    @Override
    public int delDepartment(int depId) {
        return departmentMapper.delDepartment(depId);
    }

    @Override
    public Department getDepartment(int depId) {
        return departmentMapper.getDepartment(depId);
    }

    @Override
    public List<Department> findAllDeps() {
        return departmentMapper.findAllDeps();
    }

    @Override
    public int UpdateDep(Department department) {
        return departmentMapper.updateDepartment(department);
    }
}

<4>controller设计:

package com.gzh.crud.controller;

import com.gzh.crud.bean.Department;
import com.gzh.crud.service.DepService;
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.List;

@Controller
public class DepartmentController {
    @Autowired
    private DepService depService;

    @RequestMapping("listDep")
    public String ListDep(Model model) throws Exception
    {
        List<Department> departments=depService.findAllDeps();
        model.addAttribute("departments",departments);
        return "listDep";
    }
    @RequestMapping("insertDep")
    public String addDep() throws Exception
    {
        return "insertDep";
    }
   @RequestMapping("addDep")
    public String  InsertDep(Department department) throws Exception
   {
       boolean flag=depService.InsertDep(department)>0;
       return "redirect:listDep";
   }
   @RequestMapping("modifyDep")
    public String modifyDep(int depId,Model model)throws Exception
   {
       Department department=depService.getDepartment(depId);
       model.addAttribute("department",department);
       return "modifyDep";
   }
   @RequestMapping("upDep")
   public String upDep(Department department)throws Exception
   {
       boolean flag=depService.UpdateDep(department)>0;
       return "redirect:listDep";
   }
   @RequestMapping("delDep")
    public String delEmp(int depId)throws Exception
   {
       boolean flag=depService.delDepartment(depId)>0;
       return "redirect:listDep";
   }

}

<5>页面设计:

部门列表

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>部门显示</title>
    <link rel="stylesheet" href="/bootstrap-3.3.7/css/bootstrap.min.css"/>
    <script th:src="@{/jquery.min.js}"></script>
    <script th:src="@{/bootstrap-3.3.7/js/bootstrap.min.js}"></script>
    <link href="/css/side.css" rel="stylesheet"></link>
</head>
<body>
<div th:replace="index :: nav"></div>
<div class="pageContainer">
    <div th:replace="index :: side"></div>
<div class="pageContent">

    <table text-align="center" class="table table-bordered table-hover">

            <tr text-align="center" >
                <th>部门号</th>
                <th>部门名</th>
                <th>部门职责</th>

                <th></th>
                <th></th>
            </tr>
            <tr  align="center" th:each="department: ${departments}">
                <td  th:text="${department.depId}"></td>
                <td><a th:href="@{/empDepartment(depId=${department.depId})}">[[${department.depName}]]</a></td>
                <td  th:text="${department.depFunction}"></td>
                <td ><a class="btn btn-primary" th:href="@{/modifyDep(depId=${department.depId})}">修改</a></td>
                <td><a class="btn btn-success" th:href="@{/delDep(depId=${department.depId})}">刪除</a></td>
            </tr>
        </table>



</div>
</div>
</body>
</html>

添加部门 

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>部门添加</title>
    <link rel="stylesheet" href="/bootstrap-3.3.7/css/bootstrap.min.css"/>
    <script th:src="@{/jquery.min.js}"></script>
    <script th:src="@{/bootstrap-3.3.7/js/bootstrap.min.js}"></script>
    <link href="/css/side.css" rel="stylesheet"></link>
</head>
<body>
<div th:replace="index :: nav"></div>
<div class="pageContainer">
    <div th:replace="index :: side"></div>
    <div class="pageContent">
        <form class="form-horizontal form2" th:action="@{/addDep}" method="post">
            <h4 class="title">添加部门</h4>
            <div class="form-group">
                <label  class="col-sm-2 control-label">部门号</label>
                <div class="col-sm-10">
                    <input type="text" th:name="depId" class="form-control" placeholder="输入部门号">
                </div>
            </div>
            <div class="form-group">
                <label  class="col-sm-2 control-label">部门名</label>
                <div class="col-sm-10">
                    <input type="text"  th:name="depName" class="form-control" placeholder="输入部门名">
                </div>
            </div>
            <div class="form-group">
                <label  class="col-sm-2 control-label">部门职责</label>
                <div class="col-sm-10">
                    <input type="text"  th:name="depFunction" class="form-control" placeholder="输入部门职责">
                </div>
            </div>
            <div class="form-group">


                <input align="center" class="btn btn-primary center-block" type="submit" value="提交">
            </div>

        </form>
</div>
</body>
</html>

修改部门:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>部门修改</title>
    <link rel="stylesheet" href="/bootstrap-3.3.7/css/bootstrap.min.css"/>
    <script th:src="@{/jquery.min.js}"></script>
    <script th:src="@{/bootstrap-3.3.7/js/bootstrap.min.js}"></script>
    <link href="/css/side.css" rel="stylesheet"></link>
</head>
<body>
<div th:replace="index :: nav"></div>
<div class="pageContainer">
    <h4 class="title">修改部门</h4>
    <div th:replace="index :: side"></div>
    <div class="pageContent">
        <form class="form-horizontal form2" th:action="@{/upDep}" method="post">
            <div class="form-group">
                <label  class="col-sm-2 control-label">部门号</label>
                <div class="col-sm-10">
                    <input type="text" th:name="depId" class="form-control"  th:value="${department.depId}" readonly>
                </div>
            </div>
            <div class="form-group">
                <label  class="col-sm-2 control-label">部门名</label>
                <div class="col-sm-10">
                    <input type="text"  th:name="depName" class="form-control" th:value="${department.depName}">
                </div>
            </div>

            <div class="form-group">
                <label  class="col-sm-2 control-label">部门职责</label>
                <div class="col-sm-10">
                    <input type="text" th:name="depFunction" class="form-control" th:value="${department.depFunction}">
                </div>
            </div>


            <div class="form-group">


                <input align="center" class="btn btn-primary center-block" type="submit" value="提交">
            </div>

        </form>
</div>
</body>
</html>

10、员工模块设计:

<1>mapper xml文件

注意一对一映射的写法,以及如何进行模糊查询

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.gzh.crud.mapper.EmployeeMapper">
    <sql id="cols">
        id,
        name,
        depid,
        age,
        sex,
        tel
    </sql>
    <resultMap type="com.gzh.crud.bean.Employee" id="EmpRM">
    <id property="id" column="id"/>

    <!-- 普通字段 property指实体的属性;column结果集的字段名称 -->
    <result property="name" column="name"/>
    <result property="age" column="age"/>
    <result property="sex" column="sex"/>
    <result property="tel" column="tel"/>
        <association property="department" javaType="com.gzh.crud.bean.Department">
            <!-- 主键映射 -->
            <id property="depId" column="depId"/>

            <!-- 普通字段 property指实体的属性;column结果集的字段名称 -->
            <result property="depName" column="depName"/>
            <result property="depFunction" column="depName"/>
        </association>
    </resultMap>
    <insert id="InsertEmp" parameterType="com.gzh.crud.bean.Employee" >
        insert into employee
        (<include refid="cols"/>)
        values
        (#{id},#{name},#{department.depId},#{age},#{sex},#{tel})
    </insert>
    <delete id="DeleteEmployee" parameterType="int">
        delete from employee
        where id=#{id}
    </delete>

    <update id="Update" parameterType="com.gzh.crud.bean.Employee" >
        update employee
        <set>
            <if test="name!=null">name=#{name},</if>
            <if test="department!=null">depId=#{department.depId},</if>
            <if test="age!=null">age=#{age},</if>
            <if test="sex!=null">sex=#{sex},</if>
            <if test="tel!=null">tel=#{tel}</if>
        </set>
        where id = #{id}
    </update>
    <select id="getEmployee" parameterType="int" resultType="com.gzh.crud.bean.Employee" resultMap="EmpRM">
        select*from employee p
        left join department b
        on p.depId=b.depId
        where p.id=#{id}
    </select>
    <select id="findEmployeesByCondition" parameterType="string" resultType="com.gzh.crud.bean.Employee" resultMap="EmpRM">

        select * from employee p
        left join department b
        on p.depId=b.depId
        where  CONCAT(p.name,p.tel)like CONCAT('%',#{name},'%')

    </select>
<select id="getEmpByDepId" parameterType="int" resultType="int">
    select id from employee where depId=#{depId}
</select>
    <select id="getEmpsByDepId" parameterType="int" resultType="com.gzh.crud.bean.Employee">
    select * from employee where depId=#{depId}
</select>
</mapper>

<2>mapper接口:

package com.gzh.crud.mapper;

import com.gzh.crud.bean.Employee;
import org.apache.ibatis.annotations.Mapper;

import java.util.ArrayList;
@Mapper
public interface EmployeeMapper {

    ArrayList<Employee> findEmployeesByCondition(String name);
    int InsertEmp(Employee employee);
    int DeleteEmployee(int id);
    Employee getEmployee(int id);
    ArrayList<Employee> findAllEmployees();
    int Update(Employee employee);
    int getEmpByDepId(int depId);
    ArrayList<Employee>getEmpsByDepId(int depId);
}

 如果采用mybiatis注解版,可以不要xml文件,mapper接口如下,这里没有做映射

package com.gzh.crud.mapper;

import com.gzh.crud.emp.Employee;
import org.apache.ibatis.annotations.*;

import java.util.ArrayList;
import java.util.List;
@Mapper
public interface EmployeeMapper {
    @Select("select * from employee where CONCAT(name,department,tel) like CONCAT('%',#{name},'%')")
    ArrayList<Employee> findEmployeesByCondition(String name);
    @Insert("insert into employee(id,name,department,age,sex,tel) values(#{id},#{name},#{department},#{age},#{sex},#{tel})")
    int InsertEmp(Employee employee);
    @Delete("delete from employee where id=#{id}")
    int DeleteEmployee(int id);
    @Select("select*from employee where id=#{id}")
    Employee getEmployee(int id);
    @Select("select * from employee")
    ArrayList<Employee> findAllEmployees();
    @Update("update employee set " +
            "name = #{name},"+
            "department=#{department},"+
            "age=#{age},"+
            "sex=#{sex},"+
            "tel=#{tel}"+
            "where id=#{id}")
    int Update(Employee employee);
}

<3>service设计

package com.gzh.crud.service;

import com.github.pagehelper.PageInfo;
import com.gzh.crud.bean.Employee;

public interface EmpService {
    PageInfo<Employee> findEmployeesByCondition(String name, int start, int size);
    int InsertEmp(Employee employee);
    int DeleteEmp(int id);
    Employee getEmp(int id);
    int Update(Employee employee);
    PageInfo<Employee>getEmpsByDepId(int depId, int start, int size);
}

这里注意一下分页查询那里,startpage必须在查询正上方 

package com.gzh.crud.service;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.gzh.crud.bean.Employee;
import com.gzh.crud.mapper.EmployeeMapper;
import org.springframework.stereotype.Service;

import javax.annotation.Resource;
import java.util.ArrayList;

@Service
public class EmpServiceImp implements EmpService {
    @Resource

    private EmployeeMapper employeeMapper;
    @Override
    public PageInfo<Employee> findEmployeesByCondition(String name, int start, int size) {

        PageHelper.startPage(start,size,"id asc");


        ArrayList<Employee> list=employeeMapper.findEmployeesByCondition(name);
        PageInfo<Employee>pages=new PageInfo<>(list);
        return pages;
    }

    @Override
    public int InsertEmp(Employee employee) {
        return employeeMapper.InsertEmp(employee);
    }

    @Override
    public int DeleteEmp(int id) {
        return employeeMapper.DeleteEmployee(id);
    }


    @Override
    public Employee getEmp(int id) {
        return employeeMapper.getEmployee(id);
    }

    @Override
    public int Update(Employee employee) {
        return employeeMapper.Update(employee);
    }

    @Override
    public PageInfo<Employee> getEmpsByDepId(int depId, int start, int size) {
        PageHelper.startPage(start,size,"id asc");


        ArrayList<Employee> list=employeeMapper.getEmpsByDepId(depId);
        PageInfo<Employee>pages=new PageInfo<>(list);
        return pages;
    }
}

<4>controller设计:

这里要注意添加和修改员工时要显示出全部部门

package com.gzh.crud.controller;

import com.github.pagehelper.PageInfo;
import com.gzh.crud.bean.Department;
import com.gzh.crud.bean.Employee;
import com.gzh.crud.service.DepService;
import com.gzh.crud.service.EmpService;
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 org.springframework.web.bind.annotation.RequestParam;

import java.util.List;

@Controller
public class EmployeeController {
    @Autowired
    private EmpService empservice;
    @Autowired
    private DepService depService;
    @RequestMapping("insertEmp")
    public String insertEmp(Model model)
    {List<Department> departments=depService.findAllDeps();
        model.addAttribute("departments",departments);
        return "insertEmp";
    }

    @RequestMapping("addEmp")
    public String addEmployee(Employee employee) throws Exception
    {boolean flag=empservice.InsertEmp(employee)>0;

    return "redirect:listEmp";

    }
    @RequestMapping("findEmp")
    public String findEmp(int id,Model model) throws Exception
    {
        Employee employee=empservice.getEmp(id);
        model.addAttribute("employee",employee);
        List<Department> departments=depService.findAllDeps();
        model.addAttribute("departments",departments);
        return "modifyEmp";
    }
    @RequestMapping("upEmp")
    public String updateEmployee(Employee employee) throws  Exception
    {
        boolean flag=empservice.Update(employee)>0;
        return "redirect:listEmp";
    }
    @RequestMapping("delEmp")
    public String delEmp(int id) throws Exception
    {
        empservice.DeleteEmp(id);
        return "redirect:listEmp";

    }
    @RequestMapping("main")
    public String index()
    {return "index";
    }
    @RequestMapping("listEmp")
    public String list(@RequestParam(value="name",defaultValue="")String name,Model model,
                       @RequestParam(value="start",defaultValue="1")int start,
                       @RequestParam(value="size",defaultValue = "3") int size) throws Exception
    {
        PageInfo<Employee>pages=empservice.findEmployeesByCondition(name,start,size);
        model.addAttribute("pages",pages);
        System.out.println(size);
        System.out.println(pages);
        model.addAttribute("name",name);
        System.out.println(model);
        return "empShow";

    }
    @RequestMapping("empDepartment")
    public String empDepartment(int depId,Model model,
                       @RequestParam(value="start",defaultValue="1")int start,
                       @RequestParam(value="size",defaultValue = "3") int size) throws Exception
    {
        PageInfo<Employee>pages=empservice.getEmpsByDepId(depId,start,size);
        Department department=depService.getDepartment(depId);
        model.addAttribute("department",department);
        model.addAttribute("pages",pages);


        return "empDepartment";

    }

}

<5>页面设计:

员工列表页面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>员工显示</title>
    <link rel="stylesheet" href="/bootstrap-3.3.7/css/bootstrap.min.css"/>
    <script th:src="@{/jquery.min.js}"></script>
    <script th:src="@{/bootstrap-3.3.7/js/bootstrap.min.js}"></script>
    <link href="/css/side.css" rel="stylesheet"></link>
</head>
<body>
<div th:replace="index :: nav"></div>
<div class="pageContainer">
    <div th:replace="index :: side"></div>
<div class="pageContent">
    <div align="center">
        <form class="form-inline form1" action="" th:action="@{/listEmp}">
            <div class="form-group">
                <label for="exampleInputName2">条件</label>
                <input name="name" type="text" class="form-control" id="exampleInputName2" placeholder="请输入查询条件">
            </div>
            <button type="submit" class="btn btn-success">提交</button>
        </form>
        <br>
        <a class="btn btn-info" th:href="@{/listEmp}">刷新全部数据</a>
        </div>
    <table text-align="center" class="table table-bordered table-hover">

            <tr text-align="center" >
                <th>工号</th>
                <th>姓名</th>
                <th>部门</th>
                <th>年龄</th>
                <th> 性别</th>
                <th>电话</th>
                <th></th>
                <th></th>
            </tr>
            <tr  align="center" th:each="list: ${pages.list}">
                <td  th:text="${list.id}"></td>
                <td>[[${list.name}]]</td>
                <td ><a th:href="@{/empDepartment(depId=${list.department.depId})}">[[${list.department.depName}]]</a></td>
                <td th:text="${list.age}"></td>
                <td th:text="${list.sex}==1?'男':'女'"></td>
                <td th:text="${list.tel}"></td>
                <td ><a class="btn btn-primary" th:href="@{/findEmp(id=${list.id})}">修改</a></td>
                <td><a class="btn btn-success" th:href="@{/delEmp(id=${list.id})}">刪除</a></td>
            </tr>
        </table>

    <div align="center">
        <h4>共有 [[${pages.total}]] 条记录</h4>
        <a th:unless="${pages.isFirstPage}"
           th:href="@{/listEmp(name=${name})}">首 页</a>
        <a th:unless="${pages.isFirstPage}"
           th:href="@{/listEmp(start=${pages.hasPreviousPage}?${pages.prePage}:1, name=${name})}">上一页</a>
        <a th:unless="${pages.isLastPage}"
           th:href="@{/listEmp(start=${pages.hasNextPage}?${pages.nextPage}:${pages.pages}, name=${name})}">下一页</a>
        <a th:unless="${pages.isLastPage}"
           th:href="@{/listEmp(start=${pages.pages}, name=${name})}">末 页</a>
    </div>

</div>
</div>
</body>
</html>

员工添加页面 

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>员工添加</title>
    <link rel="stylesheet" href="/bootstrap-3.3.7/css/bootstrap.min.css"/>
    <script th:src="@{/jquery.min.js}"></script>
    <script th:src="@{/bootstrap-3.3.7/js/bootstrap.min.js}"></script>
    <link href="/css/side.css" rel="stylesheet"></link>
</head>
<body>
<div th:replace="index :: nav"></div>
<div class="pageContainer">
    <div th:replace="index :: side"></div>
    <div class="pageContent">
        <h4 class="title">添加员工</h4>
        <form class="form-horizontal form2" th:action="@{/addEmp}" method="post">
            <div class="form-group">
                <label  class="col-sm-2 control-label">工号</label>
                <div class="col-sm-10">
                    <input type="text" th:name="id" class="form-control" placeholder="输入工号">
                </div>
            </div>
            <div class="form-group">
                <label  class="col-sm-2 control-label">姓名</label>
                <div class="col-sm-10">
                    <input type="text"  th:name="name" class="form-control" placeholder="输入姓名">
                </div>
            </div>
            <div class="form-group">

                <label  class="col-sm-2 control-label">部门</label>
                <div class="col-sm-10">
                <select name="department.depId" class="form-control">
                    <option th:each="department:${departments}" th:text="${department.depName}" th:value="${department.depId}"></option>
                </select>
                </div>
            </div>
            <div class="form-group">
                <label  class="col-sm-2 control-label">年龄</label>
                <div class="col-sm-10">
                    <input type="text" th:name="age" class="form-control" placeholder="输入年龄">
                </div>
            </div>


            <div class="form-group">
                <label  class="col-sm-2 control-label">性别</label>
                <div class="col-sm-10">
                    <label class="radio-inline">
                        <input type="radio" th:name="sex" name="inlineRadioOptions" id="inlineRadio1" value="1"> 男
                    </label>
                    <label class="radio-inline">
                        <input type="radio" th:name="sex" name="inlineRadioOptions" id="inlineRadio2" value="0"> 女
                    </label>
                </div>
            </div>



                <div class="form-group">
                    <label  class="col-sm-2 control-label">电话</label>
                    <div class="col-sm-10">
                        <input type="text" th:name="tel" class="form-control" placeholder="输入电话">
                    </div>
                </div>
            <div class="form-group">


                <input align="center" class="btn btn-primary center-block" type="submit" value="提交">
            </div>

        </form>
</div>
</body>
</html>

员工更新页面:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>员工修改</title>
    <link rel="stylesheet" href="/bootstrap-3.3.7/css/bootstrap.min.css"/>
    <script th:src="@{/jquery.min.js}"></script>
    <script th:src="@{/bootstrap-3.3.7/js/bootstrap.min.js}"></script>
    <link href="/css/side.css" rel="stylesheet"></link>
</head>
<body>
<div th:replace="index :: nav"></div>
<div class="pageContainer">
    <div th:replace="index :: side"></div>
    <div class="pageContent">
        <h4 class="title">修改员工</h4>
        <form class="form-horizontal form2" th:action="@{/upEmp}" method="post">
            <div class="form-group">
                <label  class="col-sm-2 control-label">工号</label>
                <div class="col-sm-10">
                    <input type="text" th:name="id" class="form-control"  th:value="${employee.id}" readonly>
                </div>
            </div>
            <div class="form-group">
                <label  class="col-sm-2 control-label">姓名</label>
                <div class="col-sm-10">
                    <input type="text"  th:name="name" class="form-control" th:value="${employee.name}">
                </div>
            </div>
            <div class="form-group">
                <label  class="col-sm-2 control-label">部门</label>
                <div class="col-sm-10">
                <select name="department.depId" class="form-control">
                    <option th:each="department:${departments}" th:value="${department.depId}" th:selected="${department.depId}==${employee.department.depId}" th:text="${department.depName}"></option>
                </select>
                </div>
                </div>
            <div class="form-group">
                <label  class="col-sm-2 control-label">年龄</label>
                <div class="col-sm-10">
                    <input type="text" th:name="age" class="form-control" th:value="${employee.age}">
                </div>
            </div>


            <div class="form-group">
                <label  class="col-sm-2 control-label">性别</label>
                <div class="col-sm-10">
                    <label class="radio-inline">
                        <input type="radio" th:name="sex" name="inlineRadioOptions" id="inlineRadio1" th:value="1" th:checked="${employee.sex}==1"> 男</label>
                    <label class="radio-inline">
                        <input type="radio" th:name="sex" name="inlineRadioOptions" id="inlineRadio2" th:value="0" th:checked="${employee.sex}==0"> 女
                    </label>
                </div>
            </div>



                <div class="form-group">
                    <label  class="col-sm-2 control-label">电话</label>
                    <div class="col-sm-10">
                        <input type="text" th:name="tel" class="form-control" th:value="${employee.tel}">
                    </div>
                </div>
            <div class="form-group">


                <input align="center" class="btn btn-primary center-block" type="submit" value="提交">
            </div>

        </form>
</div>
</body>
</html>

 

 


提交评论区域

您尚未登录登录后方可评论 登录 or 注册

评论列表

暂无评论
div>