springboot实现前后端分离——员工管理

（一）介绍

1、项目比较简单，适合刚接触spring-boot前后端分离，实现了员工单表的一个crud。
2、项目中涉及到springboot整合mybatis、mysql、pagehelper（分页）、前后端分离（layui）、swagger2在线接口文档。

(二)创建spring-boot后台项目

（1）使用IDEA创建项目

创建springboot项目，File——》new project，按下图创建。


这里在创建项目的时候可以选择自己用的依赖，（这里是创建的maven项目）

（2）在pom.xml中导入项目需要的依赖

1、首先是项目创建时选择的依赖，开发是会用到多个依赖，结合使用maven来进行依赖的导入，是非常方便的。

		<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.2.0</version>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

2、后面会用到的依赖

 <!--druid连接池-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-starter</artifactId>
            <version>1.1.9</version>
        </dependency>
        <!--pagehelper依赖,用来实现项目的分页-->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.3.1</version>
        </dependency>

        <!--swagger2，这是实现在线文档的依赖-->
        <dependency>
            <groupId>com.spring4all</groupId>
            <artifactId>swagger-spring-boot-starter</artifactId>
            <version>1.9.1.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>com.github.xiaoymin</groupId>
            <artifactId>swagger-bootstrap-ui</artifactId>
            <version>1.9.6</version>
        </dependency>

（3）开始写项目

1.项目的整体目录结构

2、首先是配置一下properties.properties文件，这里面配置数据库的连接，以及tomcat服务的端口和端口号。(这里说明一下mysql的驱动连接mysql 8.0以上的需配置时区，可以自行百度一下)

server.port=8080 #端口号 ，可改
server.servlet.context-path=/liu  #访问路径，可改

spring.datasource.druid.driver-class-name=com.mysql.cj.jdbc.Driver 
spring.datasource.druid.url=jdbc:mysql://localhost:3306/ssm?serverTimezone=Asia/Shanghai
spring.datasource.druid.username=root
spring.datasource.druid.password=password
spring.datasource.druid.initial-size=5
spring.datasource.druid.min-idle=3
spring.datasource.druid.max-active=10

mybatis.mapper-locations=classpath:mapper/*.xml
logging.level.com.lz.dao=debug #打印日志

3、先创建实体类entity层，emp（员工）类和dept（部门）类，这里的注解
@Data 、@NoArgsConstructor、@AllArgsConstructor三个注解是lombok中的，@Data 是用来生成getter和setter方法，@NoArgsConstructor是生成无参空构造的，@AllArgsConstructor是生成全参构造的。而@ApiModel、@ApiModelProperty这两个注解是swagger2中需要的。
emp实体类：

package com.lz.entity;

import io.swagger.annotations.ApiModel;
import io.swagger.annotations.ApiModelProperty;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.io.Serializable;

/**
 * @program: springboot-emp
 * @description:
 * @author: 刘壮
 * @create: 2021-08-21 23:01
 **/
@Data
@NoArgsConstructor
@AllArgsConstructor
@ApiModel("员工信息")
public class Emp implements Serializable {
    @ApiModelProperty(value = "员工编号")
    private Integer empId;
    @ApiModelProperty(value = "员工姓名")
    private String empName;
    @ApiModelProperty(value = "员工性别")
    private String gender;
    @ApiModelProperty(value = "员工邮箱")
    private String email;
    @ApiModelProperty(value = "部门编号")
    private Integer dId;
    @ApiModelProperty(value = "部门信息")
    private Dept dept;

}

dept实体类

package com.lz.entity;

import io.swagger.annotations.ApiModel;
import io.swagger.annotations.ApiModelProperty;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.io.Serializable;

/**
 * @program: springboot-emp
 * @description:
 * @author: 刘壮
 * @create: 2021-08-22 00:03
 **/
@Data
@AllArgsConstructor
@NoArgsConstructor
@ApiModel(value = "部门信息")
public class Dept implements Serializable {
    @ApiModelProperty(value = "部门编号")
    private Integer deptId;
    @ApiModelProperty(value = "部门名称")
    private String deptName;
}

4、创建一个工具类Result，因为前端是用layui实现的，需要返回特定的数据类型，所以创建工具类。

package com.lz.util;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import org.springframework.stereotype.Component;

/**
 * @program: springboot-emp
 * @description:
 * @author: 刘壮
 * @create: 2021-08-21 23:12
 **/
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Result {
    private Integer code=0;
    private String msg="";
    private long count=0l;
    private Object data;
}

5、创建controller层的EmpController类，controller层是用来对前端传来的请求来进行接收的，即前端调用的接口就是在controller层。相应的注解必不可少。本类中主要涉及两方面的注解：spring需要的和接口文档需要的。
以下是spring需要的
@RestController
@RequestMapping
@GetMapping （一般用来接收查询的请求）
@PostMapping（一般用来接收添加的请求）
@PutMapping（一般用来接收修改的请求）
@DeleteMapping（一般用来接收删除的请求）
swagger2文档需要的：
@Api(tags = “员工的接口”)
@ApiOperation(value = “分页查询员工信息”)
@ApiImplicitParam(name = “page”,value = “当前页码”),
@ApiImplicitParam(name = “limit”,value = “每页显示的条数”)

package com.lz.controller;

import com.lz.entity.Emp;
import com.lz.service.EmpService;
import com.lz.util.Result;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiImplicitParam;
import io.swagger.annotations.ApiImplicitParams;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

/**
 * @program: springboot-emp
 * @description:
 * @author: 刘壮
 * @create: 2021-08-21 23:00
 **/
@RestController
@RequestMapping("emp")
@Api(tags = "员工的接口")
public class EmpController {

    @Autowired
    private EmpService empService;
    @ApiOperation(value = "分页查询员工信息")
    @ApiImplicitParams({
            @ApiImplicitParam(name = "page",value = "当前页码"),
            @ApiImplicitParam(name = "limit",value = "每页显示的条数")
    })
    @GetMapping("selectAll")
    public Result selectAll(@RequestParam Integer page, @RequestParam Integer limit){
        return empService.selectAll(page,limit);

    }

    @ApiOperation(value ="添加员工信息" )
    @PostMapping("insertEmp")
    public Result insertEmp(Emp emp){
        return empService.insertEmp(emp);
    }

    @ApiOperation(value ="修改员工信息" )
    @PutMapping("updateEmp")
    public Result updateEmp(Emp emp){
        return empService.updateEmp(emp);
    }

    @ApiOperation(value = "删除员工信息")
    @DeleteMapping("deleteById")
    public Result deleteById(Integer empId){
        return empService.deleteById(empId);

    }

}

6、创建service层的EmpService以及其实现类EmpServiceImpl
EmpService类

package com.lz.service;

import com.lz.entity.Emp;
import com.lz.util.Result;
import io.swagger.models.auth.In;

/**
 * @program: springboot-emp
 * @description:
 * @author: 刘壮
 * @create: 2021-08-21 23:00
 **/
public interface EmpService {
    /**
     * 分页查询所有员工信息
     * @param page
     * @param limit
     * @return
     */
    Result selectAll(Integer page,Integer limit);

    /**
     * 添加员工信息
     * @param emp
     * @return
     */
    Result insertEmp(Emp emp);

    /**
     * 修改员工信息
     * @param emp
     * @return
     */
    Result updateEmp(Emp emp);

    /**
     * 删除员工信息
     * @param empId
     * @return
     */
    Result deleteById(Integer empId);


}

EmpServiceImpl类

package com.lz.service.impl;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.lz.dao.EmpDao;
import com.lz.entity.Emp;
import com.lz.service.EmpService;
import com.lz.util.Result;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

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

/**
 * @program: springboot-emp
 * @description:
 * @author: 刘壮
 * @create: 2021-08-21 23:01
 **/
@Service
public class EmpServiceImpl implements EmpService {

    @Resource
    private EmpDao empDao;

    /**
     * 分页查询所有员工信息
     * @param page
     * @param limit
     * @return
     */
    @Override
    public Result selectAll(Integer page, Integer limit) {
        PageHelper.startPage(page,limit);//使用PageHelper进行分页，接收传来的页码，是当前页码的条数
        List<Emp> list = empDao.selectAll();//调用查询所有
        PageInfo<Emp> pageInfo = new PageInfo<>(list);//用PageHepler对查到的数据封装
        Result result = new Result(0,"",pageInfo.getTotal(),pageInfo.getList());//返回前台需要的数据类型
        return result;


    }

    /**
     * 添加员工信息
     * @param emp
     * @return
     */
    @Override
    public Result insertEmp(Emp emp) {
        Integer integer = empDao.insertEmp(emp);
        Result result = new Result();
        if (integer>0){
            result.setMsg("插入成功");
        }else {
            result.setMsg("插入失败");
        }
        return result;

    }

    /**
     * 修改员工信息
     * @param emp
     * @return
     */
    @Override
    public Result updateEmp(Emp emp) {

        Integer integer = empDao.updateEmp(emp);
        Result result = new Result();
        if (integer>0){
            result.setMsg("修改成功");
        }else {
            result.setMsg("修改失败");
        }
        return result;
    }

    /**
     * 删除员工信息
     * @param empId
     * @return
     */
    @Override
    public Result deleteById(Integer empId) {
        Integer integer = empDao.deleteById(empId);
        Result result = new Result();

        if (integer>0){
            result.setMsg("删除成功");
        }else {
            result.setMsg("删除失败");
        }
        return result;
    }
}

7、创建dao层的EmpDao类

package com.lz.dao;

import com.lz.entity.Emp;
import org.apache.ibatis.annotations.Param;
import org.springframework.stereotype.Component;

import java.util.List;

/**
 * @program: springboot-emp
 * @description: 员工
 * @author: 刘壮
 * @create: 2021-08-21 23:00
 **/
@Component
public interface EmpDao {
    //查询所有员工信息
    List<Emp> selectAll();
    //添加员工信息
    Integer insertEmp(@Param("emp") Emp emp);//这里最好加上@Param注解，不然报错
    //修改员工信息
    Integer updateEmp(@Param("emp") Emp emp);
    //删除员工信息
    Integer deleteById(Integer empId);


}

8、创建Mapper以及EmpMapper.xml文件，这里整合了mybatis

<?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.lz.dao.EmpDao">
    <resultMap id="empMap" type="com.lz.entity.Emp" autoMapping="true">
        <id column="empId" property="empId"></id>
        <result column="d_Id" property="dId"></result>
        <association property="dept" javaType="com.lz.entity.Dept">
            <id column="deptId" property="deptId"></id>
            <result column="deptName" property="deptName"></result>
        </association>
    </resultMap>
    <sql id="empsql">
        empId,empName,gender,email,d_Id,deptId,deptName
    </sql>
    <!--分页查询所有-->
    <select id="selectAll" resultMap="empMap">
        select <include refid="empsql"></include>
        from tbl_emp inner join tbl_dept on tbl_emp.d_Id=tbl_dept.deptId
    </select>
    <!--插入员工信息-->
    <insert id="insertEmp" parameterType="com.lz.entity.Emp">
        insert into tbl_emp
        values(#{emp.empId},#{emp.empName},#{emp.gender},#{emp.email},#{emp.dId})
    </insert>
    <!--修改员工信息-->
    <update id="updateEmp" parameterType="com.lz.entity.Emp">
        update tbl_emp set empName=#{emp.empName},gender=#{emp.gender},email=#{emp.email},d_Id=#{emp.dId}
        where empId=#{emp.empId}
    </update>
    <!--删除员工信息-->
    <delete id="deleteById">
        delete from tbl_emp where empId=#{id}
    </delete>
</mapper>    

9、创建两个配置类CrosConfig类和Swagger2Config类
CrosConfig类是为了解决前后端分离引起的跨域问题。

package com.lz.config;

import org.springframework.stereotype.Component;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * @program: springboot-emp
 * @description: 配置跨域
 * @author: 刘壮
 * @create: 2021-08-21 23:36
 **/
@Component
public class CrosConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        //任意路径
        registry.addMapping("/**")
                //任意请求
                .allowedHeaders("*")
                //任意请求方式
                .allowedMethods("*")
                .allowedOrigins("http://127.0.0.1:8848");
    }
}

Swagger2Config类是实现了swagger2在线的接口文档

package com.lz.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import springfox.documentation.builders.RequestHandlerSelectors;
import springfox.documentation.service.ApiInfo;
import springfox.documentation.service.Contact;
import springfox.documentation.spi.DocumentationType;
import springfox.documentation.spring.web.plugins.Docket;
import springfox.documentation.swagger2.annotations.EnableSwagger2;

import java.util.ArrayList;

/**
 * @program: springboot-emp
 * @description: 文档配置
 * @author: 刘壮
 * @create: 2021-08-22 15:22
 **/
@Configuration
@EnableSwagger2 //开启swagger2注解
public class Swagger2Config {
    //swagger封装到Docket类中
    @Bean
    public Docket docket(){
        Docket docket = new Docket(DocumentationType.SWAGGER_2)
                .apiInfo(getInfo())
                .groupName("emp")
                .select().apis(RequestHandlerSelectors.basePackage("com.lz.controller")).build();

        return docket;
    }
    public ApiInfo getInfo(){
        Contact DEFAULT_CONTACT = new Contact("刘壮", "http://www.baidu.com", "2378245574@qq.com");
        ApiInfo apiInfo = new ApiInfo(
                "员工管理系统",
                "员工管理系统",
                "1.0",
                "http://www.baidu.com",
                DEFAULT_CONTACT, "AAA-qy137",
                "http://www.apache.org/licenses/LICENSE-2.0", new ArrayList());;
        return apiInfo;
    }

}

（三）创建前端emp-web项目

（1）使用HBuilder-X创建项目

1、项目的整体目录

2、项目用到了layui前端框架，所以需要先引入layui相关的文件，可以自己去layui官网下载。
3、项目主要有两个前端页面index.html以及main.html。页面比较简单，可以自行扩展。
4.index.html页面。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 管理系统大布局 - Layui</title>
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <script src="layui/layui.js" charset="utf-8"></script>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">员工管理系统</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->

        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                <a href="javascript:;">
                    <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
                    tester
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">Your Profile</a></dd>
                    <dd><a href="">Settings</a></dd>
                    <dd><a href="">Sign out</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-more-vertical"></i>
                </a>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">

                <li class="layui-nav-item">
                    <a href="javascript:;">员工管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="main.html " target="emp">员工信息</a></dd
                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <iframe frameborder="0" width="100%" height="100%" name="emp" ></iframe>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        底部固定区域
    </div>
</div>
<script>
    //JS
    layui.use(['element', 'layer', 'util'], function(){
        var element = layui.element
            ,layer = layui.layer
            ,util = layui.util
            ,$ = layui.$;

        //头部事件
        util.event('lay-header-event', {
            //左侧菜单事件
            menuLeft: function(othis){
                layer.msg('展开左侧菜单的操作', {icon: 0});
            }
            ,menuRight: function(){
                layer.open({
                    type: 1
                    ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
                    ,area: ['260px', '100%']
                    ,offset: 'rt' //右上角
                    ,anim: 5
                    ,shadeClose: true
                });
            }
        });

    });
</script>
</body>
</html>

效果如下图：

main.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="layui/css/layui.css" media="all">
		<script src="layui/layui.js" charset="utf-8"></script>
	</head>
<body>
 
<table class="layui-hide" id="test" lay-filter="test"></table>
 
 <form class="layui-form" id="empForm" lay-filter="empForm" style="display: none">
   <div class="layui-form-item">
     <label class="layui-form-label">员工姓名</label>
     <div class="layui-input-inline">
       <input type="text" name="empName"  placeholder="请输入姓名" class="layui-input">
     </div>
   </div>

   <div class="layui-form-item">
     <label class="layui-form-label">性别</label>
     <div class="layui-input-inline">
       <select name="gender" lay-filter="aihao">
         <option value=""></option>
         <option value="M">男</option>
         <option value="F">女</option>
       </select>
     </div>
   </div>
   
   <div class="layui-form-item">
     <label class="layui-form-label">邮箱</label>
     <div class="layui-input-inline">
       <input type="text" name="email" lay-verify="email"  placeholder="请输入邮箱" class="layui-input">
     </div>
   </div>
   
   <div class="layui-form-item">
     <label class="layui-form-label">部门</label>
     <div class="layui-input-inline">
       <select name="dId" lay-filter="aihao">
         <option value=""></option>
         <option value="1">开发部</option>
         <option value="2">测试部</option>
       </select>
     </div>
   </div>
   <div class="layui-form-item">
     <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="add">立即提交</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
     </div>
    </div>
 </form>
 
 <form class="layui-form" id="empForm1" lay-filter="empForm1" style="display: none">
	<div class="layui-form-item">
	   <label class="layui-form-label">员工id</label>
	   <div class="layui-input-inline">
	     <input type="text" name="empId"  class="layui-input">
	   </div>
	</div>
   <div class="layui-form-item">
     <label class="layui-form-label">员工姓名</label>
     <div class="layui-input-inline">
       <input type="text" name="empName"  placeholder="请输入姓名" class="layui-input">
     </div>
   </div>
 
   <div class="layui-form-item">
     <label class="layui-form-label">性别</label>
     <div class="layui-input-inline">
       <select name="gender" lay-filter="aihao">
         <option value=""></option>
         <option value="M">男</option>
         <option value="F">女</option>
       </select>
     </div>
   </div>
   
   <div class="layui-form-item">
     <label class="layui-form-label">邮箱</label>
     <div class="layui-input-inline">
       <input type="text" name="email" lay-verify="email"  placeholder="请输入邮箱" class="layui-input">
     </div>
   </div>
   
   <div class="layui-form-item">
     <label class="layui-form-label">部门</label>
     <div class="layui-input-inline">
       <select name="dId" lay-filter="aihao">
         <option value=""></option>
         <option value="1">开发部</option>
         <option value="2">测试部</option>
       </select>
     </div>
   </div>
   <div class="layui-form-item">
     <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="update">立即提交</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
     </div>
    </div>
 </form>
 
 
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="shuaxin">刷新</button>
	<button class="layui-btn layui-btn-sm" lay-event="addEmp">新增</button>
  </div>
</script>
 
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
              
 
<script>
layui.use(['jquery', 'form', 'layer', 'table'], function(){
  var $ = layui.jquery;
  var form = layui.form;
  var layer = layui.layer;
  var table = layui.table;
  
  table.render({
	 id: 'table1'
    ,elem: '#test'
    ,url:'http://127.0.0.1:8080/liu/emp/selectAll'
    ,type: 'get'
    ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
    ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
      title: '提示'
      ,layEvent: 'LAYTABLE_TIPS'
      ,icon: 'layui-icon-tips'
    }]
    ,title: '用户数据表'
    ,cols: [[
    	{type: 'checkbox', fixed: 'left'}
        ,{field:'empId', title: '员工id', sort: true}
        ,{field:'empName',title: '员工姓名'}
        ,{field:'gender',title: '员工性别',templet:function (r) {
            if (r.gender =='M'){
                return "男"
            }else {
                return "女"
            }
    
            }}
        ,{field:'email',title: '邮箱'},
    	//,{field:'did',title:'部门号'}
    	
        ,{field:'deptName',title: '部门',templet:function (r) {
            return r.dept.deptName;
    
            }} ,
    	,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
    
    ]]
    ,page: true,
    limit: 5,//设置每页条数
    limits: [5, 10, 15, 20]
  });
  
  //头工具栏事件
  table.on('toolbar(test)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id);
    switch(obj.event){
      case 'shuaxin':
        table.reload("table1");
        break;
	  case 'addEmp':
	    $("#empForm")[0].reset();
	        layer.open({
	            type: 1,
	            title: '添加员工信息',
	            area: ['400px', '500px'],
	            offset: '100px',
	            content: $("#empForm")
	    });
	  break;
    };
  });
  
//新增表单提交
  form.on('submit(add)', function (data) {
	  console.log(data.field)
	  $.ajax({
		  type: 'post',
		  url: 'http://127.0.0.1:8080/liu/emp/insertEmp',
		  data: data.field,
		  dataType: 'json',
		  success: function (result) {
			  layer.closeAll();
			  if (result.code == 1) {
				  layer.msg(result.msg, {icon: 5});
				  table.reload("table1");
			  } else {
				  layer.msg(result.msg, {icon: 1});
			  }
		  }
	  })
	  return false;
  });
  
  //修改表单提交
    form.on('submit(update)', function (data) {
  	  console.log(data.field)
  	  $.ajax({
  		  type: 'put',
  		  url: 'http://127.0.0.1:8080/liu/emp/updateEmp',
  		  data: data.field,
  		  dataType: 'json',
  		  success: function (result) {
  			  layer.closeAll();
  			  if (result.code == 1) {
  				  layer.msg(result.msg, {icon: 5});
  				  table.reload("table1");
  			  } else {
  				  layer.msg(result.msg, {icon: 1});
  			  }
  		  }
  	  })
  	  return false;
    });
  
  //监听行工具事件
  table.on('tool(test)', function(obj){
    var data = obj.data;
    //console.log(obj)
    if(obj.event === 'del'){
      layer.confirm('真的删除行么', function(index){
        $.ajax({
			type: 'delete',
			url: 'http://127.0.0.1:8080/liu/emp/deleteById',
			data: {"empId": data.empId},
			dataType: 'json',
			success:function(result){
				if(result.code==1){
					layer.msg(result.msg);
					table.reload("table1")
				}else{
					layer.msg(result.msg);
				}
			}
		})
		obj.del();
        layer.close(index);
      });
    } else if(obj.event === 'edit'){
    //打开弹出框时先清空
		$("#empForm1")[0].reset();
		layer.open({
			type: 1,
			anim: 3,
			title: ['修改员工信息', 'font-size:20px'],
			content: $("#empForm1"),
			offset: '50px',
			area: ['400px', '500px'],
			success:function (){
				form.val("empForm1",data);//点击编辑时，填充数据
			}
		})
    }
  });
});
</script>
</body>

</html>

（四）启动项目，查看效果

1.启动后台项目

在后台的springboot-emp项目中，找到SpringbootEmpApplication启动类，并运行。
SpringbootEmpApplication启动类：

package com.lz;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
@MapperScan(basePackages = "com.lz.dao")
public class SpringbootEmpApplication {

    public static void main(String[] args) {
        SpringApplication.run(SpringbootEmpApplication.class, args);
    }

}

2、启动前端项目

效果如下：

（五）接口文档

访问http://localhost:8080/liu/doc.html来查看自己的接口文档。

swagger2的实现在上面已经加入，具体在项目中添加文档的步骤：
1、导入依赖

2、书写配置类

另外，在接口文档中需要对参数属性、方法、以及接口进行说明，只需要在相应的位置加入对应的注解即可。
swagger2用到的注解

@Api：用在接口类上，说明该类的作用
         @ApiOperation：用在方法上，说明方法的作用
         @ApiImplicitParams：用在方法上包含一组参数说明
         @ApiImplicitParam：用在@ApiImplicitParams注解中，指定一个请求参数的各个方面
             name：参数名
             dataType：参数类型
             required：参数是否必须传
             value：参数的意思
             defaultValue：参数的默认值
@ApiModel：描述一个Model【实体类】的信息（这种一般用在post创建的时候，使用@RequestBody这样的场景，请求参数无法使用@ApiImplicitParam注解进行描述的时候）
            @ApiModelProperty：描述一个model的属性

（六）跨域问题

1、在启动前端项目后，通过相应的路径来访问后台的接口，这时会因为前后端的端口后不一样，从而访问不到数据，并产生错误。产生的错误就是跨域问题。当使用ajax从一个服务器访问另一个服务时，如果端口，协议，ip有一个不同，则会产生跨域问题。
2、后端接口解决
（1）再接口所在的类上添加一个@CrossOrigin，但是需要再每一个接口类上都加载@CrossOrigin
(2) 我们可以使用一个配置类，来统一解决跨域问题。