Java与HTML中Base64编码解码实战案例详解

Base64编码是一种基于64个可打印字符来表示二进制数据的方法。在Java和HTML中，Base64编码常用于在需要以文本形式存储或传输二进制数据的场景中。下面，我们将通过一个实战案例来详细了解如何在Java和HTML中使用Base64编码和解码。

1. Java中的Base64编码和解码

1.1 编码过程

在Java中，我们可以使用java.util.Base64类来实现Base64编码。以下是一个简单的编码示例：

import java.util.Base64;

public class Base64EncodeExample {
    public static void main(String[] args) {
        String originalString = "Hello, World!";
        byte[] encodedBytes = Base64.getEncoder().encode(originalString.getBytes());
        String encodedString = new String(encodedBytes);

        System.out.println("Original String: " + originalString);
        System.out.println("Encoded String: " + encodedString);
    }
}

1.2 解码过程

与编码过程类似，我们可以使用Base64.getDecoder().decode()方法进行解码。以下是一个解码示例：

import java.util.Base64;

public class Base64DecodeExample {
    public static void main(String[] args) {
        String encodedString = "SGVsbG8sIFdvcmxkIQ==";
        byte[] decodedBytes = Base64.getDecoder().decode(encodedString);
        String decodedString = new String(decodedBytes);

        System.out.println("Encoded String: " + encodedString);
        System.out.println("Decoded String: " + decodedString);
    }
}

2. HTML中的Base64编码和解码

2.1 编码过程

在HTML中，我们可以使用JavaScript的btoa()函数来实现Base64编码。以下是一个编码示例：

<!DOCTYPE html>
<html>
<head>
    <title>Base64 Encode</title>
</head>
<body>
    <script>
        var originalString = "Hello, World!";
        var encodedString = btoa(originalString);

        console.log("Original String: " + originalString);
        console.log("Encoded String: " + encodedString);
    </script>
</body>
</html>

2.2 解码过程

在HTML中，我们可以使用JavaScript的atob()函数来实现Base64解码。以下是一个解码示例：

<!DOCTYPE html>
<html>
<head>
    <title>Base64 Decode</title>
</head>
<body>
    <script>
        var encodedString = "SGVsbG8sIFdvcmxkIQ==";
        var decodedString = atob(encodedString);

        console.log("Encoded String: " + encodedString);
        console.log("Decoded String: " + decodedString);
    </script>
</body>
</html>

3. 实战案例：Java与HTML交互

现在，让我们将Java和HTML结合起来，实现一个简单的交互案例。在这个案例中，用户可以在HTML页面中输入文本，点击按钮后，Java后端将文本进行Base64编码，并返回编码后的字符串。用户可以在HTML页面中查看编码后的结果。

3.1 Java后端

import java.io.IOException;
import java.io.OutputStream;
import java.net.HttpURLConnection;
import java.net.URL;
import java.nio.charset.StandardCharsets;

public class Base64Server {
    public static void main(String[] args) throws IOException {
        String originalString = "Hello, World!";
        byte[] encodedBytes = Base64.getEncoder().encode(originalString.getBytes(StandardCharsets.UTF_8));
        String encodedString = new String(encodedBytes, StandardCharsets.UTF_8);

        URL url = new URL("http://localhost:8080/encode");
        HttpURLConnection connection = (HttpURLConnection) url.openConnection();
        connection.setRequestMethod("POST");
        connection.setRequestProperty("Content-Type", "application/json; utf-8");
        connection.setRequestProperty("Accept", "application/json");
        connection.setDoOutput(true);

        try (OutputStream os = connection.getOutputStream()) {
            byte[] input = encodedString.getBytes(StandardCharsets.UTF_8);
            os.write(input, 0, input.length);
        }

        try (java.io.BufferedReader br = new java.io.BufferedReader(
                new java.io.InputStreamReader(connection.getInputStream(), StandardCharsets.UTF_8))) {
            StringBuilder response = new StringBuilder();
            String responseLine = null;
            while ((responseLine = br.readLine()) != null) {
                response.append(responseLine.trim());
            }
            System.out.println(response.toString());
        }
    }
}

3.2 HTML前端

<!DOCTYPE html>
<html>
<head>
    <title>Base64 Encode/Decode</title>
</head>
<body>
    <label for="inputString">Enter text:</label>
    <input type="text" id="inputString" name="inputString">
    <button onclick="encode()">Encode</button>
    <button onclick="decode()">Decode</button>
    <p id="result"></p>

    <script>
        function encode() {
            var inputString = document.getElementById("inputString").value;
            fetch('http://localhost:8080/encode', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ inputString: inputString })
            })
            .then(response => response.json())
            .then(data => {
                document.getElementById("result").innerText = "Encoded String: " + data.encodedString;
            })
            .catch((error) => {
                console.error('Error:', error);
            });
        }

        function decode() {
            var inputString = document.getElementById("inputString").value;
            fetch('http://localhost:8080/decode', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ inputString: inputString })
            })
            .then(response => response.json())
            .then(data => {
                document.getElementById("result").innerText = "Decoded String: " + data.decodedString;
            })
            .catch((error) => {
                console.error('Error:', error);
            });
        }
    </script>
</body>
</html>

通过这个实战案例，我们详细了解了Java和HTML中Base64编码和解码的方法，并展示了如何将两者结合起来实现简单的交互。希望这个案例能够帮助您更好地理解Base64编码和解码在实际应用中的用法。