如何为Electron JS配置Java后端实现MySQL/Firebase的CRUD操作？

Hey there! Since you're already comfortable with Java and have your Electron desktop app ready, connecting the two for CRUD operations is straightforward. Let’s break this down step by step, tailored to your tech stack:

Electron is a front-end/desktop framework, so the most seamless way to connect it with Java is via a RESTful API. Spring Boot is perfect here—given your Java expertise, you’ll pick it up in no time.

• Initialize a Spring Boot Project: Use Spring Initializr to generate a project with dependencies like Spring Web, Spring Data JPA (or MyBatis if you prefer), and your database driver (MySQL, PostgreSQL, etc.).
• Create Entity & Repository: Define your data model (e.g., a User class with JPA annotations) and a repository interface extending JpaRepository—this gives you out-of-the-box CRUD methods.
• Implement Controller Layer: Write a REST controller to expose endpoints for your CRUD operations. Example code:

  @RestController
  @RequestMapping("/api/users")
  public class UserController {
      private final UserRepository userRepo;
  
      // Constructor injection
      public UserController(UserRepository userRepo) {
          this.userRepo = userRepo;
      }
  
      // Insert data
      @PostMapping
      public User addUser(@RequestBody User user) {
          return userRepo.save(user);
      }
  
      // Fetch all data
      @GetMapping
      public List<User> getAllUsers() {
          return userRepo.findAll();
      }
  
      // Add PUT/DELETE endpoints similarly...
  }
  

• Configure Database: Update application.properties with your database connection details:

  spring.datasource.url=jdbc:mysql://localhost:3306/your_db
  spring.datasource.username=root
  spring.datasource.password=your_password
  spring.jpa.hibernate.ddl-auto=update
  

• Test the Backend: Launch your Spring Boot app, then use tools like Postman to verify that your POST/GET endpoints work as expected.

In Electron, you can use either the native fetch API or axios to call your backend endpoints. Both are simple to implement.

• Option 1: Use Native Fetch (No Extra Dependencies)
  Add this code to your Electron renderer process (or main process, if needed):

  // Insert a user
  async function createUser(userData) {
      try {
          const res = await fetch('http://localhost:8080/api/users', {
              method: 'POST',
              headers: { 'Content-Type': 'application/json' },
              body: JSON.stringify(userData)
          });
          const newUser = await res.json();
          console.log('User created:', newUser);
          return newUser;
      } catch (err) {
          console.error('Failed to create user:', err);
      }
  }
  
  // Fetch all users
  async function getUsers() {
      try {
          const res = await fetch('http://localhost:8080/api/users');
          const users = await res.json();
          console.log('All users:', users);
          return users;
      } catch (err) {
          console.error('Failed to fetch users:', err);
      }
  }
  

• Option 2: Use Axios (Cleaner Syntax, Requires Installation)
  First install axios in your Electron project:

  npm install axios
  

  Then write your request logic:

  const axios = require('axios');
  
  // Insert a user
  async function createUser(userData) {
      try {
          const res = await axios.post('http://localhost:8080/api/users', userData);
          console.log('User created:', res.data);
          return res.data;
      } catch (err) {
          console.error('Failed to create user:', err);
      }
  }
  
  // Fetch all users
  async function getUsers() {
      try {
          const res = await axios.get('http://localhost:8080/api/users');
          console.log('All users:', res.data);
          return res.data;
      } catch (err) {
          console.error('Failed to fetch users:', err);
      }
  }
  

Electron runs on the file:// protocol by default, which will trigger cross-origin errors when calling your http://localhost:8080 backend. Fix this with one of two approaches:

• Configure CORS in Spring Boot:
  Add a global CORS config to your backend to allow requests from Electron:

  @Configuration
  public class CorsConfig implements WebMvcConfigurer {
      @Override
      public void addCorsMappings(CorsRegistry registry) {
          registry.addMapping("/api/**")
                  .allowedOrigins("*") // For development only; restrict in production
                  .allowedMethods("GET", "POST", "PUT", "DELETE")
                  .allowedHeaders("*");
      }
  }
  

• Disable Web Security in Electron (Dev Only):
  In your main.js, add this to your BrowserWindow config (not recommended for production):

  const mainWindow = new BrowserWindow({
      width: 800,
      height: 600,
      webPreferences: {
          nodeIntegration: true,
          contextIsolation: false,
          webSecurity: false
      }
  });
  

• Package the Java Backend: Use mvn package to build an executable JAR, then deploy it to a server or run it locally on end-user machines.
• Package the Electron App: Use tools like electron-builder to package your app. Store the backend API URL in an environment variable (don’t hardcode it) to easily switch between dev and prod environments.
• Use a Persistent Database: Replace any in-memory databases (like H2) with a production-ready option like MySQL or PostgreSQL.

内容的提问来源于stack exchange，提问作者B_Ali_Code