企业官网建设流程全解析

简介：计算机网络课程设计中的电子图书馆网站设计任务书与报告写作指南，面向高校网络专业学生，覆盖需求分析、拓扑规划、设备选型、服务配置与主页编写等完整环节。资源为单个Word格式文档，压缩包仅26KB，内容精炼，包含课程设计目的、要求、评分标准、选题规则、任务书及电子图书形态与格式介绍。已有947人浏览学习。文档明确要求构建可接入互联网的电子图书馆网站，内部采用1000M主干网、100M到点，至少划分4个子网，并提供DNS、DHCP、WEB、FTP等服务；验收时需提交包含需求分析、技术描述、硬软件选型配置、应用软件设计及运行结果的课程设计报告，同时给出“优秀”扩展建议和文档与代码一致性等评分细节。对正在完成同类课程设计或需要撰写报告、准备答辩的学生，可作为对照任务要求和梳理方案思路的参考，也可借此了解电子图书的常见格式特点，辅助完善网站功能规划。

1. 电子图书馆网站设计：把一学期的网络课塞进一个能跑的项目里

答辩那天我印象很深：网页在本地打开一切正常，一跨子网就白屏。折腾半小时才发现，问题不在代码，而在路由器上少了一条回程路由。那一刻我才意识到，课程设计里真正值钱的不是那几行 HTML，而是从网络拓扑到服务配置再摸到网页的整条链路。这篇笔记拆的「电子图书馆网站设计」，就是一个典型的计算机网络课程设计项目：要求站点能接入 Internet，内部跑 1000M 主干网、100M 到点，至少划分 4 个子网，提供 DNS、DHCP、WEB、FTP 四类服务，最后还要写一个能用的 WEB 主页。适合正在做课设的学生，也适合想通过一个完整项目把网络分层、子网划分、服务配置串起来的开发者——它逼你把「书本上的抽象概念」变成「能跑起来的系统」。

2. 需求分析与技术选型：先画拓扑，再谈写代码

2.1 任务书拆解：100+ 站点、4 个子网到底意味着什么

课程设计任务书里最容易被忽略的一句话是「站点的设计要求有 100 个以上的站点」。很多同学看到 100 这个数字就直接去买设备清单，其实它决定了整个网络设计的起点。100 个站点意味着至少要考虑 200 个 IP 地址的规划空间，因为交换机管理地址、服务器地址、路由器接口地址都要从可用的地址池里扣。而「内部采用 1000M 主干网，100M 到点」这句话，翻译成设备选型语言就是：核心交换机至少要有千兆端口，接入层交换机到桌面的端口是百兆，上联到核心要走千兆。

我的习惯是先做一张需求拆解表，把任务书里每一条要求映射成具体的技术决策。任务书说「网站的建设要求能接入 Internet」，那路由器就必须配 NAT 和默认路由；说「至少要划分 4 个以上的子网」，那就要设计子网划分方案，而不是用一个大网段硬扛；说「站点需要提供 DNS、DHCP、WEB、FTP 等服务」，那服务器要么用物理机装多服务，要么用虚拟化拆成多台虚拟机。这张表做完，整个项目的轮廓就出来了。

2.2 拓扑结构选择：星型拓扑与三层网络模型

网络拓扑部分我建议直接选星型结构，理由很朴素：课程设计的网络规模不大，星型好排查故障、好扩展、好画图。你画一个核心交换机，下面挂三台接入交换机，路由器单独接在核心上，服务器接核心的千兆端口，这个拓扑既满足 1000M 主干的要求，又能在后面的配置环节少踩很多坑。

更规范的落法是按三层网络模型来组织：核心层放一台三层交换机或路由器，负责跨子网路由；汇聚层和接入层在课程设计里可以合并，用二层交换机划分 VLAN 就能实现。这里有一个常见的认知偏差——认为分 4 个子网就必须买 4 台路由器。实际上你只需要一台支持三层功能的路由器或三层交换机，通过 VLAN 和子接口就能在同一个物理设备上隔离出多个子网。设备清单控制在四类以内：路由器 1 台、核心交换机 1 台、接入交换机 3 台、服务器 2～3 台。

2.3 服务选型：DNS、DHCP、WEB、FTP 分别用什么软件

服务选型这块，很多教材喜欢并列列出 Apache、IIS、vsftpd 这些名字，但课程设计的场景下我一般建议按「最小依赖、最容易在报告里写清楚」的原则来选。WEB 服务用 Apache HTTP Server 或 IIS 都可以，如果你后面要写动态页面，Apache 配 PHP 是常见组合；FTP 用 vsftpd（Linux）或 Serv-U（Windows）；DNS 和 DHCP 在 Windows Server 里用自带的 DNS 服务和 DHCP 服务就能搞定，Linux 下则分别是 BIND 和 isc-dhcp-server。

这里有个容易被报告扣分的点：任务书要求「对完成网络提供服务软件的选型及配置」，不是让你只在报告里写「选用 Apache」，而是要把「为什么选它、装在哪台机器上、怎么配置」讲清楚。比如我选 Apache 的理由是跨平台、配置语法直观、课程设计文档参考资料多；vsftpd 则是因为它支持虚拟用户和被动模式配置，报告里能写出干货。软件和硬件的对应关系也要明确：DNS、DHCP 放在一台服务器上，WEB 和 FTP 放另一台，这样既省设备又不至于单点负载集中到没法看。

3. 网络规划与设备配置：子网划分、IP 分配与服务部署

3.1 子网划分实操：4 个子网怎么切、IP 怎么分

子网划分是整个项目里最能体现「计算机网络基础知识」的部分，也是评分权重最高的环节之一。我用一个标准 C 类私有地址段 192.168.1.0/24 来做划分。任务书要求至少 4 个子网，加上未来可能要扩展，我一般切 5 个子网而不是刚好 4 个——留一个给未来增长。

每个子网里要预留路由器接口地址和服务器地址。比如 VLAN 10 的网关是 192.168.1.1，VLAN 20 的网关是 192.168.1.65，VLAN 30 的网关是 192.168.1.129，VLAN 40 的网关是 192.168.1.193。在这种规划下，你写报告时可以把每个子网的网关、掩码、可用地址数、分配给了哪些终端都列成一张表，这比单纯写「我用了 /26 掩码」要有说服力得多。

3.2 交换机配置：VLAN 划分与 Trunk 链路

子网划分完成后要落到交换机上。接入交换机上划分 VLAN，核心交换机负责 VLAN 间路由。我以 Cisco 设备为例，给出一段能在 Packet Tracer 或 GNS3 里直接跑通的配置。

# 接入交换机 Switch1 上创建 VLAN 并分配端口 Switch1# configure terminal Switch1(config)# vlan 10 Switch1(config-vlan)# name office Switch1(config-vlan)# exit Switch1(config)# interface range fastEthernet 0/1 - 12 Switch1(config-if-range)# switchport mode access Switch1(config-if-range)# switchport access vlan 10 Switch1(config-if-range)# exit # 配置上联口为 Trunk，允许承载所有 VLAN 流量 Switch1(config)# interface fastEthernet 0/24 Switch1(config-if)# switchport mode trunk Switch1(config-if)# switchport trunk allowed vlan all Switch1(config-if)# end

switchport mode access表示端口是接入模式，只属于一个 VLAN；switchport access vlan 10把这个端口划进 VLAN 10。switchport mode trunk用于交换机之间的上联端口，允许多个 VLAN 的流量在同一根线上传输。配置完后可以用show vlan brief查看 VLAN 与端口对应关系，这是在仿真环境里最常用的验证命令。

3.3 路由器配置：子接口、NAT 与 DHCP 中继

跨子网通信的核心在路由器。如果用路由器单臂路由（Router-on-a-Stick）的方式，就在路由器上为每个 VLAN 配置一个子接口，IP 地址就是子网的网关地址。NAT 配置让内网 192.168.1.0/24 整体可以访问外网。

# 核心路由器配置子接口，实现 VLAN 间路由 Router# configure terminal Router(config)# interface fastEthernet 0/0.10 Router(config-subif)# encapsulation dot1Q 10 Router(config-subif)# ip address 192.168.1.1 255.255.255.192 Router(config-subif)# exit Router(config)# interface fastEthernet 0/0.20 Router(config-subif)# encapsulation dot1Q 20 Router(config-subif)# ip address 192.168.1.65 255.255.255.192 Router(config-subif)# exit # 配置 NAT，让内网能访问 Internet Router(config)# access-list 1 permit 192.168.1.0 0.0.0.255 Router(config)# ip nat inside source list 1 interface fastEthernet 0/1 overload Router(config)# interface fastEthernet 0/0 Router(config-if)# ip nat inside Router(config-if)# exit Router(config)# interface fastEthernet 0/1 Router(config-if)# ip nat outside Router(config-if)# end

encapsulation dot1Q 10是关键，它告诉路由器这个子接口承载的是带 VLAN 10 标签的数据帧。ip nat inside source list 1 interface fastEthernet 0/1 overload的作用是把内网所有地址转换成路由器外网口的地址，overload对应 PAT（端口地址转换），让 100+ 台终端共享一个公网 IP。

这里必须强调：如果只配置了 VLAN 间路由而忘记配 DHCP 中继，VLAN 20、VLAN 30 的终端就获取不到 IP 地址。因为 DHCP 服务器在 VLAN 40，而 DHCP 请求是通过广播发送的，默认无法跨子网传播。解决办法是在路由器上配置ip helper-address，指向 DHCP 服务器的地址，这是课程设计里极容易翻车的一步。

3.4 DHCP、DNS、WEB、FTP 服务配置要点

服务配置这层我按「先网络、后服务、再验证」的顺序来做。DHCP 服务的配置核心是地址池和租约。在 Windows Server 的 DHCP 管理器中为每个子网创建作用域，指定地址范围、排除地址和默认网关；在 Linux 下则类似下面这样：

# /etc/dhcp/dhcpd.conf 中为 VLAN 20 配置地址池 subnet 192.168.1.64 netmask 255.255.255.192 { range 192.168.1.66 192.168.1.126; option routers 192.168.1.65; option domain-name-servers 192.168.1.194; option domain-name "lib.example.edu"; default-lease-time 600; max-lease-time 7200; }

range指定可分配的地址范围，排除了网关 192.168.1.65；option routers给客户端下发默认网关；option domain-name-servers指向 DNS 服务器的地址。注意地址池范围要和子网划分表严格一致，否则会出现客户端分配到别的子网地址的玄学问题。

DNS 服务要给图书馆网站建一条 A 记录，比如www.lib.example.edu指向 WEB 服务器的地址。FTP 服务则建议开启被动模式并设置端口范围，否则客户端在真实网络里容易因防火墙拦截主动模式数据连接而下载失败。WEB 服务先把站点根目录指向你写好的 HTML 文件，默认端口 80，配置完用同一子网内的一台终端浏览器访问 http://192.168.1.195 验证。

4. 核心代码设计与实现：一个能展示图书的 WEB 主页

4.1 站点目录结构与页面骨架

服务配好了，接下来是任务书里「编写简单的 WEB 主页」的落地。我的建议是不要只写一个静态 HTML 交差，而是做一个「静态页面 + 轻量检索」的小站点，这样报告里可以写「实现了图书展示和站内检索功能」，扩展功能的加分项就有了。目录结构如下：

/var/www/html/ ├── index.html # 主页，图书列表入口 ├── books.html # 图书详情页模板 ├── search.html # 检索页 ├── css/ │ └── style.css # 统一样式 ├── js/ │ └── main.js # 检索与过滤逻辑 └── books/ ├── 001.html # 单本图书详情页 └── 002.html

页面不需要框架，原生 HTML + CSS + JavaScript 足够课程设计使用，也方便在报告里逐行讲清楚。如果你熟悉 PHP 或其他后端语言，可以再加一个简单的表单提交，但做课设最重要的是「每一行代码你都能解释」，而不是堆技术栈。

4.2 主页结构：图书列表的数据组织方式

主页核心是一个图书列表，我用数组存图书信息，JavaScript 动态渲染。这样做的另一个好处是：报告里能写「页面数据与展示逻辑分离，便于后续替换为数据库接口」。

<!-- index.html 中的列表容器 --> <div id="book-list" class="book-grid"> <!-- 动态渲染的图书卡片将插入此处 --> </div>

// js/main.js 中的图书数据与渲染逻辑 const books = [ { id: 1, title: "计算机网络：自顶向下方法", author: "Kurose", year: 2022, category: "计算机" }, { id: 2, title: "TCP/IP 详解 卷1", author: "Stevens", year: 2016, category: "计算机" }, { id: 3, title: "电子图书格式综述", author: "图书馆项目组", year: 2023, category: "馆藏" } ]; function renderBookList(data) { const container = document.getElementById("book-list"); container.innerHTML = ""; data.forEach(book => { const card = document.createElement("div"); card.className = "book-card"; card.innerHTML = ` <h3>${book.title}</h3> <p>作者：${book.author}</p> <p>出版年份：${book.year}</p> <p>分类：${book.category}</p> <a href="books/${String(book.id).padStart(3, "0")}.html">查看详情</a> `; container.appendChild(card); }); } // 初始加载全部图书 renderBookList(books);

padStart(3, "0")把图书编号补成三位数，这样详情页文件名（比如 001.html）和数组里的 id 能对应上。这个渲染函数的逻辑很直白：拿到数据数组、遍历、创建 DOM 节点、塞进容器。它不依赖任何框架，在报告里解释起来非常清晰。

4.3 检索功能：过滤数组而不是请求后端

为了让站点有「应用软件设计」的味道，我加了一个关键字检索功能。用户在搜索框输入书名关键词，页面刷新时直接把 books 数组过滤一遍并重新渲染。这对课设来说够了——它体现了前端交互设计，又不会引入跨域、接口联调这些容易让课设失控的问题。

// search.html 中的检索逻辑 const searchInput = document.getElementById("search-keyword"); const resultsDiv = document.getElementById("search-results"); searchInput.addEventListener("input", function () { const keyword = this.value.trim().toLowerCase(); if (!keyword) { renderBookList(books); return; } const filtered = books.filter(book => book.title.toLowerCase().includes(keyword) || book.author.toLowerCase().includes(keyword) || book.category.toLowerCase().includes(keyword) ); if (filtered.length === 0) { resultsDiv.innerHTML = '<p class="empty-tip">没有找到匹配的图书，换个关键词试试。</p>'; } else { renderBookList(filtered); } });

toLowerCase()是为了让检索不区分大小写，用户在输入「tcp」时也能匹配「TCP/IP 详解」。includes()做的是子串匹配，实现简单而且对课设场景完全够用。如果你想在报告里写「系统支持模糊检索」，这段代码就是最直接的证据——不依赖数据库也能把交互做出来。

4.4 详情页与 FTP 下载联动

图书详情页里我留了一个「下载电子书」按钮，它指向 FTP 服务器的对应目录。这里要写清楚一个细节：FTP 链接里的用户名密码不能让普通访问者知道，常见的做法是给匿名用户限定到公共下载目录，或者用一个单独的只读账号。在 HTML 里，下载链接长这样：

<!-- books/001.html 中的下载入口 --> <div class="download-box"> <p>本书提供 EPUB 格式电子版，约 12MB。</p> <a href="ftp://reader:lib2024@192.168.1.196/pub/books/001.epub">通过 FTP 下载电子书</a> </div>

实际部署时，reader账号的权限要限制在/pub/books目录，并且只开放下载权限，不开放写入。这是把 WEB 服务和 FTP 服务串联起来的一个小心思——任务书里要求同时提供 WEB 和 FTP，但大多数同学的实现是网站归网站、FTP 归 FTP，互不相干。如果你能把两者联动起来，「至少有一个服务实际被页面调用」这个设计理念就能写进报告，也会在答辩时被提问的概率变高。当然，如果你不想暴露明文密码，也可以用ftp://anonymous@192.168.1.196/pub/books/001.epub配合 FTP 服务器的匿名用户配置。

5. 避坑指南：设备配置与联调中的五个常见问题

5.1 跨子网无法访问 WEB 服务器

现象：VLAN 20 的终端能 ping 通网关，也能获取到 IP 地址，但浏览器访问 WEB 服务器地址时超时，而 VLAN 40 服务器区自己访问却正常。

原因：路由器上只配置了去往各子网的路由，但服务器回包时不知道该把数据发给谁。这属于典型的回程路由缺失，路由器或三层交换机的路由表里没有指向终端所在子网的表项。

解决：在核心路由器上检查show ip route，确认每个 VLAN 的子网都有对应路由条目。如果是用子接口实现 VLAN 间路由，确认子接口的 IP 地址确实配成了对应子网的网关地址。我在答辩前的模拟演练里有一次就是这个原因——VLAN 40 的子接口 IP 配错，服务器回包被丢弃，网页当然打不开。

5.2 DHCP 地址池与静态地址冲突

现象：部分终端能拿到 IP 地址，但隔一段时间会掉线；或者某台终端连续几天分配到的 IP 都不一样，导致在服务器的访问日志里无法追踪。更隐蔽的现象是——某台服务器的 IP 地址被 DHCP 分给了别的终端，服务器服务直接不可达。

原因：DHCP 地址池的范围没有把服务器、打印机、网络设备管理地址排除掉。比如我在 3.1 节的划分表里，VLAN 40 的服务器地址是 192.168.1.193~192.168.1.222，如果 DHCP 的 range 包括了 192.168.1.193，DHCP 就可能把它分配给读者区的终端，服务器就「被抢地址」了。

解决：在 DHCP 作用域里配置排除范围，把服务器和管理地址从动态分配池中去掉。range 192.168.1.66 192.168.1.126已经跳过了网关 192.168.1.65，但要在 Windows DHCP 或 Linux dhcpd.conf 里加一行deny unknown-clients或者显式排除，最稳妥的办法是给服务器配 DHCP 保留（Reservation），把 MAC 地址和 IP 绑定。

5.3 DNS 解析失败但 IP 直连正常

现象：浏览器输 http://www.lib.example.edu 打不开，但直接输 http://192.168.1.195 能打开。用 nslookup 查询域名时返回空结果或超时。

原因：DNS 服务器没有为这个域名配置 A 记录，或者客户端的 DNS 地址没有指向 DNS 服务器。很多同学在 DHCP 的option domain-name-servers里写了 DNS 地址，但 DNS 服务器上忘了建正向查找区域和 A 记录。

解决：在 DNS 管理器中新建正向查找区域，名称和你的域名一致（比如 lib.example.edu），然后在区域内新建主机记录 www 指向 192.168.1.195。改完用nslookup www.lib.example.edu 192.168.1.194验证。我在课设里被这个问题卡了整整一个晚上，后来发现就是少了一条 A 记录，纯手工失误。

5.4 FTP 能连接但下载报 425 错误

现象：FTP 客户端能登录、能看到目录列表，但开始下载文件时报错，类似425 Failed to establish connection。

原因：FTP 默认使用主动模式，客户端在数据连接时要求服务器主动连回客户端的某个端口。在 NAT 环境下，这个回连请求到不了内网的客户端，于是数据连接建立失败。

解决：在 FTP 服务器上启用被动模式，并指定被动端口范围；同时在内网环境中确保客户端使用的是被动模式（大多数图形化 FTP 客户端默认就是被动模式）。vsftpd 的配置里加两行：

# /etc/vsftpd/vsftpd.conf pasv_enable=YES pasv_min_port=50000 pasv_max_port=50100

如果客户端在公网、服务器在内网，还要在 NAT 上把 50000~50100 的端口范围映射到 FTP 服务器，并让服务器的pasv_address指向公网映射地址。课程设计里大家基本都用仿真器或局域网，所以前两行配置就够了，但我见过有人把这一条写进报告里，作为「实际部署时的改进方向」，答辩效果很不错。

5.5 仿真环境下终端获取不到 IP 地址

现象：在 Packet Tracer 或 GNS3 里，PC 设置为 DHCP 模式后一直拿不到地址，抓包看到 DHCP Discover 发出去了但收不到 Offer。

原因：最常见的是 DHCP 服务器和客户端不在同一子网，而路由器的ip helper-address没配，DHCP 广播请求根本到不了服务器。第二种可能是 DHCP 服务器的地址池已经耗尽；第三种是仿真器里交换机的端口没有开启，VLAN 配置没生效。

解决：先沿着拓扑排查——客户端所在子网的路由器接口有没有配ip helper-address 192.168.1.194；再检查 DHCP 服务器的地址池范围与客户端所在子网是否匹配；最后检查交换机端口状态，用show interfaces status确认端口处于 up 状态。我一般会建议在报告的问题记录里把这三种原因都写上，因为这是评委最容易追问的地方，全写清楚反而显得你排查过程完整。

6. 二次开发方向：从课程设计到一个小型图书馆系统的落地

如果这份课设做完之后你还想继续用，我有几个具体的改造方向。第一个是给 4.2 节的静态图书数组换成一个真正能持久化的后端。最简单的方案是保留现有 HTML 页面，引入 PHP 写一个api/books.php返回 JSON 数据，再把renderBookList里的数据源从数组换成 fetch 请求：

// 改造后的数据加载方式 fetch("api/books.php") .then(response => response.json()) .then(data => renderBookList(data));

这样页面结构不用大动，但数据不再写死在 JS 里，后续加书、删书只需要改 PHP 里读的数据文件或数据库。第二个改造方向是给 FTP 下载加一层访问控制，比如在 WEB 页面里做登录后才能下载，把当前reader明文密码换成 session 校验。第三个顺手就能做的是给检索功能加分页——当前filter一次渲染全部结果，书多了以后列表会很长，可以按page参数切片，每次渲染 20 条。

验证方法上，我每次改动都会强制走一遍完整验收链路：终端一用 DHCP 获取地址，终端二 ping 网关确认连通，终端三访问 WEB 主页并执行一次检索，终端四从 FTP 下载一个文件，最后用show ip route确认路由表没有异常变动。这套动作五分钟就能跑完，但能挡住九成以上的「我改了一行配置结果全站打不开」的翻车事故。

做这份课设最大的收获其实不是「会配 Cisco 命令」或者「会写 HTML」，而是养成了一个习惯——每次改动前先在纸上把「数据流」画出来：终端到交换机、交换机到路由器、路由器到服务器，每一跳消耗什么服务、经过什么端口。从那以后我每次做网络相关的项目都强制自己先画这条链路再动手配置，翻车率直线下降。希望这个拆解思路也能帮到你，下次动工前先把拓扑和链路画明白。

本文还有配套的精品资源，点击获取