创建 html

页面如下图：

创建 resources/static/qingjia.html 文件，内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="js/jquery-1.11.0.min.js"></script>
    <script>
        function doSubmit(){
            var emp = $("#emp").val()
            var desc = $("#desc").val()
            var day = $("#day").val()
            if(emp == ''){
                alert("请输入请假人姓名！")
                return
            }
            if(desc == ''){
                alert("请输入请假原因！")
                return
            }
            if(day == ''){
                alert("请输入请假天数！")
                return
            }

            $.ajax({
                url:'/qingjia/start',//请求的url
                type:'POST', //请求方式，GET或POST
                data:{ //发送服务器的数据
                    emp:emp,
                    desc:desc,
                    day:day,
                },
                dataType:'json',  //返回的数据格式：json/xml/html/script/jsonp/text
                success:function(data,textStatus,jqXHR){ //statusCode是2xx 或 304时，执行该函数
                    alert(data.msg)
                    console.log(data)
                    console.log(textStatus)
                    console.log(jqXHR)
                },
                error:function(xhr,textStatus){ //statusCode是 2xx 或 304 以外的值时，执行该函数
                    console.log('错误')
                    console.log(xhr)
                    console.log(textStatus)
                }
            })

        }
        window.onload = function () {
            $("#sbt").click(doSubmit);
        }
    </script>
</head>
<body>
请假人：<input type="text" id="emp"><br>
请假原因：<input type="text" id="desc"><br>
请假天数：<input type="text" id="day"><br>
<input type="button" value="提交" id="sbt">


</body>
</html>

创建 QingjiaController

接收前端的请求

创建类 top.malaoshi.controller.QingjiaController

package top.malaoshi.controller;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import top.malaoshi.entity.Qingjia;
import top.malaoshi.services.QingjiaService;
import top.malaoshi.vo.JsonResult;

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

@RestController
@RequestMapping("/qingjia")
public class QingjiaController {

    @Resource
    private QingjiaService qingjiaService;

    /**
     * 员工提交请假
     * @param emp
     * @param day
     * @param desc
     * @return
     */
    @RequestMapping(value="/start")
    public JsonResult start(String emp,String day,String desc) {

        Qingjia qingjia = new Qingjia();
        qingjia.setEmp(emp);
        qingjia.setDay(Float.parseFloat(day));
        qingjia.setDesc(desc);

        qingjiaService.start(qingjia);
        return JsonResult.success("提交成功");
    }


}

创建 QingjiaService

处理业务

创建类 top.malaoshi.services.QingjiaService，内容如下：

package top.malaoshi.services;

import org.flowable.engine.RuntimeService;
import org.flowable.engine.TaskService;
import org.flowable.engine.runtime.ProcessInstance;
import org.flowable.task.api.Task;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import top.malaoshi.entity.Qingjia;
import top.malaoshi.mapper.QingjiaMapper;

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

@Service
@Transactional(rollbackFor = Exception.class)
public class QingjiaService {

    @Resource
    private RuntimeService runtimeService;

    @Resource
    private TaskService taskService;

    @Resource
    private QingjiaMapper qingjiaMapper;
    /**
     * 启动流程
     * @param qingjia
     */
    @Transactional
    public void start(Qingjia qingjia) {
        // holidayRequest是流程xml文件的 process id
        ProcessInstance processInstance = runtimeService
                .startProcessInstanceByKey("holidayRequest");
        String pid = processInstance.getId();

        // 将请假信息、任务的pid保存到qingjia表中。pid是将任务和qingjia表中记录关联上，方便后面查找
        String uuid = UUID.randomUUID().toString().replace("-","");
        qingjia.setId(uuid);
        qingjia.setActPid(pid);
        qingjiaMapper.insert(qingjia);
    }

}

注意：将 请假信息、任务的pid 保存到 qingjia 表中。pid是将任务和qingjia表中记录关联上，方便后面查找

测试

重启服务

访问页面

访问：http://localhost:8080/qingjia.html

填上测试内容，点击 提交 按钮

原文出处：/show_1IX5iS5EOw0Q.html