我正在尝试导入预先编写的
index.htmlStringBuilderimport java.io.BufferedReader;
import java.io.FileReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.net.ServerSocket;
import java.net.Socket;
public class HTTPServer {
public static void main(String[] args) throws IOException {
// start server on port 8080
ServerSocket server = new ServerSocket(8080);
System.out.println("Listening for connection on port 8080...");
while (true) {
try {
// accept connection from a client
Socket socket = server.accept();
InputStream in = socket.getInputStream();
OutputStream out = socket.getOutputStream();
// load HTML file from file directory
StringBuilder contentBuilder = new StringBuilder();
try {
BufferedReader webpage = new BufferedReader(new FileReader("index.html"));
String str;
while ((str = webpage.readLine()) != null) {
contentBuilder.append(str);
}
webpage.close();
} catch (IOException e) {
e.printStackTrace();
}
String html = contentBuilder.toString();
// construct valid HTML response message
final String CRLF = "\r\n"; // 13, 10
String response =
"HTTP/1.1 200 OK" + CRLF + // status line: HTTP_VERSION RESPONSE_CODE RESPONSE_MESSAGE
"Content-Length: " + html.getBytes().length + CRLF + // header
CRLF +
html +
CRLF + CRLF;
// write HTML message to the client
out.write(response.getBytes());
} catch (IOException e) {
e.printStackTrace();
}
}
}
}
我的
index.htmlstyle.css
index.html有谁知道如何让我的 Java 服务器保持完整的样式？谢谢！
我尝试在网上寻找解决方案，但尚未找到。也许我必须将整个样式表文件单独发送给客户端？
将每个外部文件合并到一个index.html中
将外部文件（css、xxx.jpg）嵌入到一个 html 文件中。
├── index.html
├── 001.jpg
└── style.css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple HTML Page</title>
<!-- External CSS File -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Welcome to my simple web page</h1>
<p>This is a sample web page using external CSS and images.</p>
<!-- External Image File -->
<div class="image-container">
<img src="001.jpg" alt="Sample pictures">
</div>
</body>
</html>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
text-align: center;
padding: 20px;
}
h1 {
color: #333;
}
p {
color: #666;
}
img {
width: 200px;
height: auto;
margin-top: 20px;
}
001.jpg 是你的图片。
全部合一 -index.html
index.html
<title>Embedded Resources Example</title>
<style>
/* Embedded CSS */
// COPY style.css into here
</style>
</head>
运行linux命令：
base64 -w 76 001.jpg > 001_base64.txt
<div class="image-container">
<!-- Embedded Image as base64 -->
<img src="data:image/png;base64,
//all 001_base64.txt
" alt="Sample pictures">
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Embedded Resources Example</title>
<style>
/* Embedded CSS */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
text-align: center;
padding: 20px;
}
h1 {
color: #333;
}
p {
color: #666;
}
img {
width: 200px;
height: auto;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Welcome to Embedded Resources web page</h1>
<p>This is a Embedded Resources web page using embedded CSS and images.</p>
<div class="image-container">
<!-- Embedded Image as base64 -->
<img src="data:image/png;base64,
/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0a
HBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIy
...
...
WPDLUElPTAjZRRdzKHM6SOczBbnKY7I2WJlerTtbdjHkNFMaDwUUXBm/7v8Aj/60X/UendV4/auV
lK9uXUxNZxUUWyhR/9k=" alt="Sample pictures">
</div>
</body>
</html>
现在你可以使用这个index.html来包含css和图像文件。