终于在不断的摸索之下。到达了这一步,很不容易啊,也感谢我的老师的耐心讲解。
前言:
我们已经达到了嵌入式的目标,现在我们想要在前端有一个按钮,然后可以去调用后端的代码
前端Html示例:
1. <!DOCTYPE html> 2. <html lang="en"> 3. <head> 4. <meta charset="UTF-8"> 5. <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6. <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7. <title>Document</title> 8. 9. </head> 10. <body> 11. <div id="app"> 12. <button id="connected" type="button" onclick="connected()">连接</button> 13. <button id="disconnected" type="button" onclick="disconnected()">断开连接</button> 14. <button id="updateDidDtc" type="button" onclick="updateDidDtc()">DID</button> 15. <parent></parent> 16. </div> 17. 18. <script> 19. function connected(){ 20. window.cef({ 21. request:'connect:', 22. onSuccess(response){ 23. // console.log(response); 24. }, 25. onFailure(error_code,error_message){ 26. System.out.println("连接失败,请坚持配置是否正确"); 27. console.log(error_code,error_message); 28. } 29. }); 30. return true; 31. } 32. 33. function disconnected(){ 34. window.cef({ 35. request:'disconnected:', 36. onSuccess(response){ 37. // console.log(response); 38. }, 39. onFailure(error_code,error_message){ 40. console.log(error_code,error_message); 41. } 42. }); 43. return true; 44. } 45. 46. /* 47. *DID表 48. */ 49. 50. function updateDidDtc(){ 51. window.cef({ 52. request:'updateDidDtc:', 53. onSuccess(response){ 54. var dateArray = JSON.parse(response); 55. // console.log(response); 56. }, 57. onFailure(error_code,error_message){ 58. console.log(error_code,error_message); 59. } 60. }); 61. return true; 62. } 63. 64. 65. </script> 66. </body> 67. </html>
我们在前端,设置了几个按钮,function几个类,在这几个类里定义不同的方法,其中的request,就是向后端发送请求,,onSuccess就是收回这个回应,下面的onFailure就是你请求失败的时候,他去接受的,那我们如果想要在请求回来之后,做什么类似于弹窗的操作,就可以把他们写在
1. onSuccess(response){ 2. // console.log(response); 3. },
这里去。
后端:
1. import java.io.IOException; 2. import java.util.ArrayList; 3. import java.util.Date; 4. import java.util.List; 5. import java.util.Map; 6. import java.util.ResourceBundle; 7. import java.util.Set; 8. 9. import org.cef.browser.CefBrowser; 10. import org.cef.browser.CefFrame; 11. import org.cef.callback.CefQueryCallback; 12. import org.cef.handler.CefMessageRouterHandlerAdapter; 13. import org.eclipse.swt.SWT; 14. import org.eclipse.swt.browser.Browser; 15. import org.eclipse.swt.widgets.Button; 16. import org.eclipse.swt.widgets.Display; 17. import org.eclipse.swt.widgets.Shell; 18. import com.alibaba.fastjson.JSON; 19. import com.sunwoda.platform.user.util.DateUtil; 20. 21. import cn.com.sunwoda.platform.user.cache.DeviceManager; 22. import cn.com.sunwoda.platform.user.cache.ResultCache; 23. import cn.com.sunwoda.platform.user.model.DataRow; 24. 25. public class MessageRouterHandler extends CefMessageRouterHandlerAdapter{ 26. 27. private static final MessageRouterHandler TOJSON = null; 28. 29. 30. /** 31. * @wbp.parser.entryPoint 32. */ 33. @Override 34. public boolean onQuery( 35. CefBrowser browser, 36. CefFrame frame, 37. long query_id, 38. String request, 39. boolean persistent, 40. CefQueryCallback callback 41. ) { 42. /* 43. * 请求信息" connect :"开头 44. */ 45. if(request.indexOf("connect:") == 0) { 46. // 将后面的字符串按 ,:- 切割 47. String connect = request.substring(6).trim(); 48. System.out.println("这是一条Demo"); 49. callback.success(connect); 50. 51. return true; 52. } 53. 54. 55. /* 56. * 请求信息" disconnected :"开头 57. */ 58. if(request.indexOf("disconnected:") == 0) { 59. // 将后面的字符串按 ,:- 切割 60. String disconnect = request.substring(6).trim(); 61. System.out.println("这是一条DisconnectedDemo"); 62. callback.success(disconnect); 63. 64. return true; 65. } 66. @Override 67. public void onQueryCanceled(CefBrowser browser, CefFrame frame, long query_id) { 68. } 69. }
这个就是JS与JAVA交互的接口类,其中,if后面跟着的那些,就是判断你前端发过来的请求是什么,然后执行操作,调用代码之类的。达到联调的目的。
总结:
JCEF应该算是告一段落了,接下来就是我们的接口工作,这要与我们的项目息息相关了,日常琐碎.....比较麻烦的是如果接口的基础不是很好的话,做起来会吃力...比如我,加油吧......