背景：

因为在研究Web Bluetooth ，

通过 Web 控制蓝牙设备：WebBluetooth入门_疯狂的技术宅的博客-CSDN博客_web 蓝牙通过渐进式 Web 应用（*Progressive Web Apps*）技术，你可以开发成熟的 Web 应用。得益于大量新规范和新功能，以前需要在本机执行的应用，现在可以基于 Web 实现。不过迄今为止，与硬件设备的交互仍然是遥不可及。感谢 WebBluetooth 的出现，现在我们可以开发能够控制灯光、驾驶汽车甚至是无人机的 PWA。https://blog.csdn.net/eyeofangel/article/details/87890418

为减少研究时间，代码复用，需要调用以前在Android APP实现数据封装模块，把这个模块打包放到服务端，让Html能调用拿到封装的数据，然后再能过Web Bluetooth API发送给蓝牙BLE 设备。

参考网上的说法：

编写Java类时，它部署在服务器端。编写JavaScript函数时，它部署在客户端。服务器端Java类可以部署为应用程序服务器（例如Apache tomcat）中的Web应用程序，并通过URL公开。这样做的接口是编写所谓的Servlet。 servlet只是部署在同一应用程序服务器上的另一个Java类。这个servlet类可以调用你的Java方法。（注意：还有其他技术（例如JSP或Java Server Pages）最终会重新设计为servlet。）关于servlet如何工作的文献很多，但简而言之，一旦部署在应用程序服务器中，当从浏览器调用应用程序URL时，可以调用servlet中的代码。那么，以下是步骤：您可以从浏览器调用应用程序服务器上部署的应用程序的URL。例如，您调用

http://localhost:8080/myapp/doSomething

您的Web应用程序（myapp）具有部署描述符（web.xml），其中包含自己的URL映射。通过引用此描述符，您的webapp意识到对于URL：“/ doSomething”它应该调用MyServlet（您的servlet部署在服务器上）您的servlet（MyServlet）现在将实现一些标准的

doXXX

方法（用于GET，POST等操作）。在doXXX方法的此实现中，您可以调用Java类方法。一旦您的servlet完成执行，它就会将响应写入servlet的输出流，然后应用程序服务器将通过http流回浏览器。现在，在您的回复中，您可以选择编写任何您想要的内容 – 这是您在调用URL时可以在浏览器上使用的内容。完成上述步骤后，您可以使用JavaScript调用URL并使用AJAX等技术获取响应。如果你的函数没有返回值，只是“做某事”，那么你真的不关心响应，但是，使用AJAX，你也可以检查响应的状态，看看是否有任何异常发生时在服务器端执行您的功能。

方案：

涉及如何实现Java 的类或者接口模块调用，网上搜索了几天，总结以下方案：

方案1. 走RPC远程处理调用协议，

RPC，全称为Remote Procedure Call，即远程过程调用。它允许像调用本地服务一样调用远程服务。RPC一般基于TCP协议，也可以基于HTTP协议。

RPC主要用于公司内部的服务调用，性能消耗低，传输效率高，服务治理方便。HTTP主要用于对外的异构环境，浏览器接口调用，APP接口调用，第三方接口调用等。

个人理解，RPC在公司内部的分布式系统中比直接用http方式具有优势，网络传输效率高，具有额外的适合分布式的一些功能(如包含负载均衡策略等)，所以分布式系统内部会使用RPC。

前端：Vue.js +axios+html

后端： 1) Netty + RPC方式实现

2) javassit+socket+io

方案2. 走http协议 , HTTP协议是超文本传输协议，为应用层协议。它是基于TCP/IP协议的，客户端和服务器端的通信规则为握手规则。

前端：Vue.js +axios+html

后端： 1）Netty （+ Servlet ）

2）服务器可以用Nginx来部署 + Servlet

最终选定方案：

RPC的方案，前端没有找到参考实例，最终选Http方式。

前端：Vue.js +axios+html

后端：服务器可以用Nginx来部署 +Springboot

指路：使用axios进行接口请求和使用Java进行接收_Ken_1115的博客-CSDN博客_axios接收数据1、axios普通get请求//axios普通get请求//方法名为test,传入数据valuefunction test(value) { axios({ //请求方式 method:’get’, //后端接口路径 url:’/sys/test’, //注意这里使用的是params,该属性负责把属性名和属性值添加到url后面，一般和get配合使用，但也能和post配合使用 params: { //attributeName为属性名https://blog.csdn.net/m0_64284147/article/details/123599615

后端：服务端实现Demo:

1.环境：macOS + 安装IntelliJ IDEA

安装IDEA之后，新建服务端项目：File->New->New Project,修改Name：testser,选择语言Java,基于Maven,选择JDK。根据需要修改GroupId,

然后配置pom.xml,主要是添加sprintboot

<dependencies>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
            <version>2.5.6</version>
        </dependency>

    </dependencies>

完整pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>org.xx</groupId>
    <artifactId>xx</artifactId>
    <version>1.0-SNAPSHOT</version>

    <properties>
        <maven.compiler.source>18</maven.compiler.source>
        <maven.compiler.target>18</maven.compiler.target>
    </properties>
    <dependencies>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
            <version>2.5.6</version>
        </dependency>

    </dependencies>

</project>

2. 创建项目之后，添加New->Java Class 启动类

package com.xx;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication//启动类注解，表明这是一个启动类
public class StartApplication {
    public static void main(String[] args) {
        SpringApplication.run(StartApplication.class,args);
    }
}

3.生成一个测试Get接口类

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@CrossOrigin
@RestController//注解，表明这是控制层。
public class TestController {

    @GetMapping("/test/test")
    public String get(){
        return "Test hello everyone";
    }
}

4.自定义服务的端口号8090：

在项目下，生成resources/application.properties文件添加以下语句即可

server.port=8090

5.为了解决跨域问题实现addCorsMappings接口

import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class ConfigurerAdapter implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowCredentials(false)
                .allowedMethods("POST","GET","DELETE","PUT","OPTIONS")
                .allowedOrigins("*")
        ;
    }
}

6.然后启动服务，去前端web做个http接口请求就可以。

前端实现：

1.用IDEA ,然后File->New->Empty project即可,

前提是系统安装好Node.js, 还IDEA安装解析JS的插件：ESLint。

2.因为要用Vue.js, axios.js, qs.js,可以提前下载好，也可以之前在

axios.js 安装使用：

在html网页直接引用：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

vue.js CDN:
压缩版：

<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>

完整版：
<script src=”https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js”></script>

qs.js模块安装引用：

<!-- 引入Qs -->
 <script src="https://cdn.bootcss.com/qs/6.5.1/qs.min.js"></script>

3.我是直接把上面这几个js模块下载了放到项目js目录，然后创建我们的测试网页File->New ->Html,源码：vueaxiostext.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例</title>
    <script src="js/vue.js"></script>
    <script src="js/qs.js"></script>
    <script src="js/axios.js"></script>
    <!--    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.10.1/qs.js"></script>-->
    <!--    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>-->
</head>
<body>
<div id="app">
    {{ info }}

    <p id="info2">---</p>
</div>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return {
                info: null
            }
        },
        mounted() {
            axios
                .get('http://localhost:8090/test/test')
                .then(response => (this.info = response))
                .catch(function (error) { // 请求失败处理
                    console.log(error);
                });
        }
    })
</script>

<div id="app4">
   <span style="color: #367ebd; font-weight: bold" v-bind:title="message">
       1 鼠标悬停显示当前系统时间
   </span>
    <span style="color: #367ebd; font-weight: bold" v-bind:title="message2">
       2 鼠标悬停显示当前系统时间
   </span>
    <p id="info4"></p>
    <span title="哈哈哈哈">哈哈哈哈</span>
    {{ info4 }}
</div>
<script>

    new Vue({
        el: '#app4',
        data() {
            return {
                message: '1 页面加载于' + new Date().toLocaleString(),
                message2: '2 页面加载于' + new Date().toLocaleString(),
                info4: null
            }
        },
        mounted() {
            var url = "http://localhost:8090/axios/saveUser";
            var data = {
                name: "lani",
                age: 18,
                sex: "girl"
            }
            axios({
                url,
                data: Qs.stringify(data),
                method: 'post',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            }).then(res => {
                this.info4=res
                console.log(res)
            }).catch(function (error) { // 请求失败处理
                console.log(error);
            });

        }
    })
</script>
</body>
</html>

4.然后在网页直接运行结果，GET与POST都OK了

http://localhost:63342/gtkmbbUi/gtkmbbui/src/vueaxiostext.html

网页运行效果：