背景：
因为在研究Web Bluetooth ，
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
后端 ：服务端实现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=80905.为了解决跨域问题实现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
网页运行效果：
后端收到数据：
5.http通信路是打通，接下来就是把Android APP的module导入到后端服务，并能过http接口开放出来。
4553
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
