泛微Ecode新增Button调用服务器中的JSP页面里的方法

前言

前端Ecode调用

后端接口编写

JSP文件方法

总结

前言

因为我们是从之前E8版本升级到E9的，所以会有一些接口是通过jsp文件来实现前后端调用的，这里介绍的就是如果你有接口是写在jsp文件里面调用的，但是你又想在Ecode中调用的对应的接口，那么继续往下看你就会明白具体该如何调用了

前端Ecode调用

const { WeaTools, WeaSlideModal } = ecCom;

class testComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      info: {
        name: ''
      },
      jsonData: {},
      currentObj: {},
      xm: WfForm.getFieldValue(WfForm.convertFieldNameToId("xm"))
    };
   
  }

  componentDidMount() {
    window.WfCustomInfoRef = this;
    this.getData();
  }

  getData() {
    const data = {
      name: "John1",
      age: 25
    };

    fetch('http://IP:PORT/api/workflow/test/getInfo2', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(data => {
      this.setState({
        jsonData: data
      }, () => {
        console.log(this.state.jsonData);
        console.log("输出姓名值" + this.state.xm);
      });
    })
    .catch(error => {
      console.error('请求出错:', error);
    });
  }

  handleClick() {
    alert("ecode方法被点击");
    
  }

  render() {
    const { info, jsonData, currentObj } = this.state;
    return (
      <div>
        添加的自定义内容2{jsonData.username}
        <SonComponent />
        <button onClick={()=>{
          var requestId = WfForm.getBaseInfo().requestid;
          jQuery.ajax({
          type: "POST",
          url: "http://IP:PORT/workflow/request/GetInfoDataAjax.jsp",
          data: {'requestid':requestId, 'method':"QZgd"},
          //dataType: 'json',
              success:function(data){
                console.log(data)
                  // alert(data)
              },
          error:function(data){
                alert("系统出现问题，请联系管理员!");
              }
          })
        }}>按钮</button>
        {jsonData.test}
      </div>
    );
  }
}

ecodeSDK.setCom('${appId}', 'testComponent', testComponent);

需要注意的是，可以直接在插入的按钮里编写点击事件，但是推荐最好就是定义一个方法，然后点击按钮的时候直接调用就可以了（因为我这里是做一个测试，所以就直接写上去了）

后端接口编写


package com.jiuyi.info;
import weaver.interfaces.workflow.action.WorkflowFnaInWorkflow;
import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;

public class TestGuiDang {
	private Log log = (Log) LogFactory.getLog(WorkflowFnaInWorkflow.class.getName());
	public String Qzgd(String requestId){
		this.log.info("TestGuiDang测试按钮点击接口的调用"+requestId);
		

		return "1";
	}

}

在这个class中编写你需要的代码即可，无论是更新数据还是返回信息都可以，只是你需要注意要将这个接口放到对应的jsp文件中引用

JSP文件方法

<%@page import="net.sf.json.JSONObject"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" %>

<%@page import="weaver.general.Util"%>
<%@page import="com.sap.mw.jco.IFunctionTemplate"%>
<%@page import="com.sap.mw.jco.JCO"%>

<jsp:useBean id="rs" class="weaver.conn.RecordSet" scope="page"/>
<%@page import="weaver.general.BaseBean"%>

<%@page import="com.jiuyi.ajax.TestGuiDang"%>

<%

	if(method.equals("QZgd")){
    TestGuiDang testGuiDan = new TestGuiDang();
    String requestId = Util.null2String(request.getParameter("requestid"));
    out.println("Request ID: " + requestId); 
    out.println(testGuiDan.Qzgd(requestId));
    return;
}

  %>

在jsp文件中，你会有对应的方法名称来进行判断，然后只需要实例化对象然后传参调用即可