Spring Boot + Vue + Electron跨平台应用介绍

以下是一个简化的Spring Boot后端服务，Vue前端应用和Electron的桌面应用集成的示例。

Spring Boot后端服务 (Java)

// src/main/java/com/example/demo/DemoApplication.java
@SpringBootApplication
public class DemoApplication {
    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }
}
 
// 控制器提供API接口
@RestController
public class ExampleController {
    @GetMapping("/greeting")
    public String greeting(@RequestParam(name="name", defaultValue="World") String name) {
        return "Hello, " + name + "!";
    }
}

Vue前端应用 (JavaScript)

// src/components/HelloWorld.vue
<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>
 
<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      message: ''
    }
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.$http.get('/greeting?name=Vue')
        .then(response => {
          this.message = response.data;
        })
        .catch(error => {
          console.error('There was an error!', error);
        });
    }
  }
}
</script>

Electron集成 (JavaScript)

// main.js
const { app, BrowserWindow } = require('electron');
 
function createWindow () {
  let win = new BrowserWindow({ width: 800, height: 600 });
  win.loadURL('http://localhost:8080'); // 假设Vue开发服务器运行在8080端口
}
 
app.on('ready', createWindow);

以上代码提供了一个简单的例子，展示了如何将Spring Boot后端服务，Vue前端应用和Electron进行集成。在实际应用中，你需要进一步配置和集成各个框架，并处理生产环境下的部署、打包和自动更新等复杂问题。