【JCEF】JS与JAVA进行交互

简介: 【JCEF】JS与JAVA进行交互

终于在不断的摸索之下。到达了这一步,很不容易啊,也感谢我的老师的耐心讲解。

前言:

我们已经达到了嵌入式的目标,现在我们想要在前端有一个按钮,然后可以去调用后端的代码

前端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应该算是告一段落了,接下来就是我们的接口工作,这要与我们的项目息息相关了,日常琐碎.....比较麻烦的是如果接口的基础不是很好的话,做起来会吃力...比如我,加油吧......

相关文章
|
22天前
|
缓存 JavaScript 前端开发
Java 如何确保 JS 不被缓存
【10月更文挑战第19天】在 Java 中,可以通过设置 HTTP 响应头来确保 JavaScript 文件不被浏览器缓存。方法包括:1. 使用 Servlet 设置响应头,通过 `doGet` 方法设置 `Expires`、`Cache-Control` 和 `Pragma` 头;2. 在 Spring Boot 中配置拦截器,通过 `NoCacheInterceptor` 类和 `WebConfig` 配置类实现相同功能。这两种方法都能确保每次请求都能获取到最新的 JavaScript 内容。
|
4天前
|
设计模式 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用JavaScript,打造智能交互体验!
【10月更文挑战第30天】前端开发领域充满了无限可能与创意,JavaScript作为核心语言,凭借强大的功能和灵活性,成为打造智能交互体验的重要工具。本文介绍前端大牛如何利用JavaScript实现平滑滚动、复杂动画、实时数据更新和智能表单验证等效果,展示了JavaScript的多样性和强大能力。
15 4
|
25天前
|
存储 JavaScript 前端开发
【JavaScript】网页交互的灵魂舞者
本文介绍了 JavaScript 的三种引入方式(行内、内部、外部)和基础语法,包括变量、数据类型、运算符、数组、函数和对象等内容。同时,文章还详细讲解了 jQuery 的基本语法和常用方法,如 `text()`、`html()`、`val()`、`attr()` 和 `css()` 等,以及如何插入和删除元素。通过示例代码和图解,帮助读者更好地理解和应用这些知识。
13 1
【JavaScript】网页交互的灵魂舞者
|
12天前
|
开发框架 JavaScript 前端开发
HarmonyOS UI开发:掌握ArkUI(包括Java UI和JS UI)进行界面开发
【10月更文挑战第22天】随着科技发展,操作系统呈现多元化趋势。华为推出的HarmonyOS以其全场景、多设备特性备受关注。本文介绍HarmonyOS的UI开发框架ArkUI,探讨Java UI和JS UI两种开发方式。Java UI适合复杂界面开发,性能较高;JS UI适合快速开发简单界面,跨平台性好。掌握ArkUI可高效打造符合用户需求的界面。
54 8
|
1月前
|
人工智能 缓存 Java
深入解析Spring AI框架:在Java应用中实现智能化交互的关键
【10月更文挑战第12天】Spring AI 是 Spring 框架家族的新成员,旨在满足 Java 应用程序对人工智能集成的需求。它支持自然语言处理、图像识别等多种 AI 技术,并提供与云服务(如 OpenAI、Azure Cognitive Services)及本地模型的无缝集成。通过简单的配置和编码,开发者可轻松实现 AI 功能,同时应对模型切换、数据安全及性能优化等挑战。
|
22天前
|
缓存 JavaScript 前端开发
Java 如何确保 JS 不被缓存
大家好,我是 V 哥。本文探讨了 Java 后端确保 JavaScript 不被缓存的问题,分析了文件更新后无法生效、前后端不一致、影响调试与开发及安全问题等场景,并提供了使用版本号、设置 HTTP 响应头、配置静态资源缓存策略和使用 ETag 等解决方案。最后讨论了缓存的合理使用及其平衡方法。
|
1月前
|
JavaScript Java
Java 控制台VUE.JS的使用
Java 控制台VUE.JS的使用
18 0
|
2月前
|
JavaScript 前端开发
JavaScript 与 DOM 交互
【9月更文挑战第01天】
29 2
|
3月前
|
JavaScript 前端开发 UED
Vue.js动画魔法:解锁流畅过渡,让每一次交互都成为用户心中的小确幸!
【8月更文挑战第30天】在Vue.js中,动画与过渡效果不仅是视觉点缀,更是提升用户体验的关键。通过流畅的动态效果,应用的互动性和吸引力得以增强,从而提高用户满意度和参与度。`&lt;transition&gt;`和`&lt;transition-group&gt;`组件结合CSS过渡,可轻松实现元素的进入、离开及列表变化动画。合理的性能优化,如使用硬件加速,能避免页面卡顿,确保动画既美观又高效。下面是一个简单的淡入淡出效果示例,展示了如何利用Vue.js实现平滑的动画过渡。总之,恰当的动画设计能显著提升应用的用户体验。
53 0
Vue.js动画魔法:解锁流畅过渡,让每一次交互都成为用户心中的小确幸!
|
3月前
|
前端开发 JavaScript Java
Ajax进行异步交互:提升Java Web应用的用户体验
Ajax 技术允许在不重载整个页面的情况下与服务器异步交换数据,通过局部更新页面内容,极大提升了 Java Web 应用的响应速度和用户体验。本文介绍 Ajax 的基本原理及其实现方式,包括使用 XMLHttpRequest 对象发送请求、处理响应数据,并在 Java Web 应用中集成 Ajax。此外,还探讨了 Ajax 如何通过减少页面刷新、实时数据更新等功能改善用户体验。
67 3