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

前言

前端Ecode调用

后端接口编写

JSP文件方法

总结

---

前言

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

前端Ecode调用

1. const { WeaTools, WeaSlideModal } = ecCom;
3. class testComponent extends React.Component {
4. constructor(props) {
5. super(props);
6. this.state = {
7. info: {
8. name: ''
9. },
10. jsonData: {},
11. currentObj: {},
12. xm: WfForm.getFieldValue(WfForm.convertFieldNameToId("xm"))
13. };
15. }
17. componentDidMount() {
18. window.WfCustomInfoRef = this;
19. this.getData();
20. }
22. getData() {
23. const data = {
24. name: "John1",
25. age: 25
26. };
28. fetch('http://IP:PORT/api/workflow/test/getInfo2', {
29. method: 'POST',
30. headers: {
31. 'Content-Type': 'application/json'
32. },
33. body: JSON.stringify(data)
34. })
35. .then(response => response.json())
36. .then(data => {
37. this.setState({
38. jsonData: data
39. }, () => {
40. console.log(this.state.jsonData);
41. console.log("输出姓名值" + this.state.xm);
42. });
43. })
44. .catch(error => {
45. console.error('请求出错:', error);
46. });
47. }
49. handleClick() {
50. alert("ecode方法被点击");
52. }
54. render() {
55. const { info, jsonData, currentObj } = this.state;
56. return (
57. <div>
58. 添加的自定义内容2{jsonData.username}
59. <SonComponent />
60. <button onClick={()=>{
61. var requestId = WfForm.getBaseInfo().requestid;
62. jQuery.ajax({
63. type: "POST",
64. url: "http://IP:PORT/workflow/request/GetInfoDataAjax.jsp",
65. data: {'requestid':requestId, 'method':"QZgd"},
66. //dataType: 'json',
67. success:function(data){
68. console.log(data)
69. // alert(data)
70. },
71. error:function(data){
72. alert("系统出现问题，请联系管理员!");
73. }
74. })
75. }}>按钮</button>
76. {jsonData.test}
77. </div>
78. );
79. }
80. }
82. ecodeSDK.setCom('${appId}', 'testComponent', testComponent);

复制代码

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

后端接口编写

2. package com.jiuyi.info;
3. import weaver.interfaces.workflow.action.WorkflowFnaInWorkflow;
4. import org.apache.commons.logging.Log;
5. import org.apache.commons.logging.LogFactory;
7. public class TestGuiDang {
8. private Log log = (Log) LogFactory.getLog(WorkflowFnaInWorkflow.class.getName());
9. public String Qzgd(String requestId){
10. this.log.info("TestGuiDang测试按钮点击接口的调用"+requestId);
13. return "1";
14. }
16. }

复制代码

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

JSP文件方法

1. <%@page import="net.sf.json.JSONObject"%>
2. <%@ page language="java" contentType="text/html; charset=UTF-8" %>
4. <%@page import="weaver.general.Util"%>
5. <%@page import="com.sap.mw.jco.IFunctionTemplate"%>
6. <%@page import="com.sap.mw.jco.JCO"%>
8. <jsp:useBean id="rs" class="weaver.conn.RecordSet" scope="page"/>
9. <%@page import="weaver.general.BaseBean"%>
11. <%@page import="com.jiuyi.ajax.TestGuiDang"%>
13. <%
15. if(method.equals("QZgd")){
16. TestGuiDang testGuiDan = new TestGuiDang();
17. String requestId = Util.null2String(request.getParameter("requestid"));
18. out.println("Request ID: " + requestId);
19. out.println(testGuiDan.Qzgd(requestId));
20. return;
21. }
23. %>

复制代码

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

总结

建议最好还是直接采用E9的接口编写，那样的话轻松多了，可以直接通过接口传递参数而不用借助jsp文件来实现前后端的传参