<think>我们已经在本地（CentOS7虚拟机）上运行了一个基于epoll的
Web服务器，监听80端口。前端文件结构如下：
```
.
├── About
.html
├── Contact
.html
├── css
│ ├── reset
.css
│ ├── style
.css
│ └── style_mobile
.css
├── data
│ └── contact
.json
├── images
│ ├── About_baby
.png
│ ├──
... (其他图片)
├── img
│ ├── 1
.jpg
│ ├──
... (其他图片)
├── Index
.html
├── js
│ ├── action
.js
│ └── jquery-1
.9
.1
.min
.js
├── test
.html
└── Work
.html
```
### 访问步骤
1
. **确保
Web服务器正在运行**：
在虚拟机中，使用`root`权限运行
Web服务器程序（因为80端口需要特权）。确保程序正确绑定到80端口并开始监听。
2
. **确定虚拟机的IP地址**：
在虚拟机终端中执行：
```bash
ip addr
```
找到类似`inet 192
.168
.x
.x`的地址（通常在`eth0`或`ens33`接口下）。
3
. **在
浏览器中访问**：
- 如果
浏览器也在同一虚拟机中，可以直接使用`http://localhost`或`http://127
.0
.0
.1`。
- 如果
浏览器在宿主机（你的物理机）上，则需要使用虚拟机的IP地址，如`http://<虚拟机IP>`。
4
. **访问具体页面**：
- 首页（Index
.html）：在
浏览器地址栏输入`http://<虚拟机IP>/Index
.html`。
- 其他页面：同理，输入对应文件名，如`http://<虚拟机IP>/About
.html`。
### 注意事项
1
. **根目录设置**：
在
Web服务器代码中，我们设置了一个根目录（例如`ROOT_DIR`）。你需要将上述前端文件（包括`css`、`images`等目录）放在该根目录下。例如，如果根目录是`/var/www/html`，则文件结构应为：
```
/var/www/html/
├── About
.html
├── Contact
.html
├── css/
├── data/
├── images/
├── img/
├── Index
.html
├── js/
├── test
.html
└── Work
.html
```
2
. **服务器路径处理**：
- 当
浏览器请求`/Index
.html`时，服务器会读取`ROOT_DIR/Index
.html`并返回。
- 对于子目录中的资源，如CSS文件，
浏览器会请求`/css/style
.css`，服务器应返回`ROOT_DIR/css/style
.css`。
3
. **
浏览器兼容性**：
- 由于使用了jQuery 1
.9
.1（支持
IE6+），因此可以兼容
IE8+。
- 确保HTML文件开头包含：
```html
<!DOCTYPE html>
<!--[if lt
IE 9]>
<script src="https://oss
.maxcdn
.com/libs/html5shiv/3
.7
.0/html5shiv
.js"></script>
<![endif]-->
```
以支持
IE8的HTML5标签。
4
. **端口问题**：
- 如果80端口已被占用（如已有Apache/Nginx），可修改服务器监听端口（如8080），但访问时需加端口号：`http://<虚拟机IP>:8080/Index
.html`。
### 示例：在宿主机
浏览器访问
假设虚拟机IP为`192
.168
.1
.100`，则：
- 首页：`http://192
.168
.1
.100/Index
.html`
- About页面：`http://192
.168
.1
.100/About
.html`
- 图片资源：`http://192
.168
.1
.100/images/About_baby
.png`
### 调试技巧
1
. **查看服务器日志**：确保服务器收到请求并正确解析路径。
2
. **
浏览器开发者工具**（按F12）：
- 查看Network标签，确认资源加载状态（200成功，404未找到等）。
- 检查Console标签，查看JavaScript错误。
### 服务器代码调整建议
在之前的服务器代码中，我们使用`ROOT_DIR`作为根目录。在文件路径处理时，需要防止路径遍历攻击（如`/
../
../etc/passwd`）。可添加安全检查：
```c
// 在handle_get函数中，检查路径是否合法
if (strstr(path, "
..")) {
send_response(sockfd, 403, "Forbidden", "text/plain", "Forbidden", 9);
return;
}
```
同时，确保正确处理带查询参数的URL（如`/About
.html?name=value`），可忽略查询参数：
```c
// 找到问号并截断
char* qmark = strchr(path, '?');
if (qmark) *qmark = '\0';
```
### 常见问题解决
1
. **404错误**：
- 确认文件是否在根目录下。
- 检查请求路径（
浏览器地址栏）和服务器根目录是否匹配。
2
. **图片/CSS加载失败**：
- 检查路径：在HTML中，图片路径应为相对路径（如`<img src="images/About_baby
.png">`）。
- 确保服务器正确设置了Content-Type（如`
.png`为`image/png`）。
3
. **权限问题**：
- 确保
Web服务器进程有权限读取文件（可使用`chmod -R a+r /var/www/html`）。
通过以上步骤，你应该可以在
浏览器中访问到你的网页了。
§§相关问题§§
1
. 如何配置CentOS7的防火墙以允许80端口访问？
2
. 如何将
Web服务器设置为系统服务（开机自启）？
3
. 如何处理
Web服务器中的动态请求（如PHP）？
4
. 如何优化
Web服务器以支持高并发？
5
. 如何实现HTTPS支持？</think>根据您提供的文件结构和在CentOS7虚拟机上搭建的epoll
Web服务器，以下是
浏览器访问前端页面的完整指南：
### 一、访问基础地址
在
浏览器地址栏输入以下地址访问首页：
```url
http://<虚拟机IP>/Index
.html
```
- **`<虚拟机IP>`** 获取方式：
```bash
# 在CentOS7终端执行
ip addr show | grep inet | grep -v 127
.0
.0
.1
```
示例输出：`inet 192
.168
.122
.105/24` → 使用`192
.168
.122
.105`
### 二、完整页面访问路径
| 页面文件 |
浏览器访问地址 |
|---------------|-----------------------------------|
| 首页 | `http://<虚拟机IP>/Index
.html` |
| About页面 | `http://<虚拟机IP>/About
.html` |
| Contact页面 | `http://<虚拟机IP>/Contact
.html` |
| Work页面 | `http://<虚拟机IP>/Work
.html` |
| Test页面 | `http://<虚拟机IP>/test
.html` |
### 三、静态资源访问示例
1
. **CSS文件**：
```url
http://<虚拟机IP>/css/style
.css
http://<虚拟机IP>/css/style_mobile
.css
```
2
. **JavaScript文件**：
```url
http://<虚拟机IP>/js/action
.js
http://<虚拟机IP>/js/jquery-1
.9
.1
.min
.js
```
3
. **图片资源**：
```url
# images目录
http://<虚拟机IP>/images/About_baby
.png
http://<虚拟机IP>/images/footer
.png
# img目录
http://<虚拟机IP>/img/1
.jpg
```
### 四、服务器配置关键点
在您的epoll
Web服务器代码中，需确保：
1
. **根目录映射**：
```c
#define ROOT_DIR "
." // 指向当前项目目录
```
2
. **MIME类型处理**（添加在`send_response()`函数）：
```c
// 根据扩展名设置Content-Type
if (strstr(path, "
.css")) content_type = "text/css";
else if (strstr(path, "
.js")) content_type = "application/javascript";
else if (strstr(path, "
.png")) content_type = "image/png";
else if (strstr(path, "
.jpg")) content_type = "image/jpeg";
```
3
. **路径安全校验**（防止路径遍历攻击）：
```c
if (strstr(path, "
..")) {
send_response(sockfd, 403, "Forbidden", "text/plain", "Path traversal den
ied", 22);
return;
}
```
### 五、
浏览器兼容性处理
在HTML文件中添加兼容头（以`Index
.html`为例）：
```html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="
IE=edge">
<!-- 强制
IE使用最新引擎 -->
<link rel="stylesheet" href="/css/reset
.css">
<!-- 其他资源 -->
</head>
```
### 六、验证步骤
1
. **启动服务器**：
```bash
# 需要root权限绑定80端口
sudo
./
webserver
```
2
. **
浏览器访问测试**：
-
Firefox/
Chrome：直接输入`http://虚拟机IP/About
.html`
-
IE浏览器：需关闭"增强安全配置"（在VM设置中禁用）
3
. **终端调试命令**：
```bash
# 测试图片加载
curl -I http://localhost/images/About_baby
.png
# 应返回类似响应
HTTP/1
.1 200 OK
Content-Type: image/png
Content-Length: 8732
Connection: close
```
### 七、常见问题解决
| 问题现象 | 解决方案 |
|--------------------------|----------------------------------|
| 404 Not Found | 检查文件是否在`ROOT_DIR`目录下 |
| 图片/CSS加载失败 | 确认MIME类型设置正确 |
|
IE8显示空白页 | 添加`X-UA-Compatible`元标签 |
| 连接被拒绝 | 关闭CentOS防火墙：`sudo systemctl stop firewalld` |
> 对于
IE8兼容性，建议避免使用CSS3动画和Flex布局，使用传统float布局[^4]
为解决大数据量下树图在客户端生成时导致浏览器崩溃或响应缓慢的问题，作者自研了一款轻量级树图组件。此组件易于使用且高效，特别适合数据量较大时的应用场景。
扫一扫
619
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
