
简介这份PDF是计算机网络课程设计的完整文档面向高校计算机相关专业学生及网络教学平台开发者围绕基于WEB的精品课程网站设计与实现展开。内容涵盖需求分析、TCP/IP协议、交换式以太网技术、网站拓扑结构与设备选型、子网划分及IP分配、DNS与DHCP等服务配置并详细阐述教师、学生、管理员三类角色的权限划分与课件资源发布流程。资源包共1个PDF文件大小约76KB以图文文档形式系统呈现课程设计全过程便于读者理解网络教学平台从规划到落地的整体思路。目前已有373人学习浏览适合需要完成同类课程设计、撰写实验报告或参考网站架构方案的学生与教师可从中获取需求分析框架、功能模块划分及网络设备配置等实用参考帮助快速理清设计脉络并应用于实际项目。1. 从一份「精品课程网站」课程设计说起它到底在考什么如果你正在搜「计算机网络课程设计——精品课程网站.pdf」大概率是三种人之一手里攥着任务书但不知道从哪下手、想找一个能跑起来的完整方案照着改、或者答辩前想搞清楚老师到底会问什么。这个题目的本质是用一个 B/S 架构的网站把计算机网络里最核心的 HTTP 请求响应、TCP 连接、DNS 解析、静态资源分发这几件事串起来。它不需要你写多复杂的业务逻辑但要求你能说清楚「浏览器敲下回车之后数据包在网络里到底走了哪几步」。适合网络工程、计算机科学与技术专业的本科生也适合想补网络基础但一看谢希仁那本厚书就犯困的开发者。下面我按自己带过几届课设的经验把选型、实现、抓包验证和答辩避坑一次讲透。2. 精品课程网站的技术选型为什么别一上来就上 Spring Boot2.1 先想清楚课设的评分点在哪很多同学拿到题目第一反应是打开 IDEA 新建 Spring Boot 工程然后花三天配 MyBatis、Redis、Nginx最后网站跑起来了但老师问一句「你这个页面请求经过了几次 TCP 握手」就答不上来。课程设计的评分权重通常是这样分布的功能完整性占 30% 左右网络原理的体现占 40%文档和答辩占 30%。也就是说你把网站做得再花哨如果抓包分析、协议说明这块是空的分数照样上不去。所以选型的第一原则是技术栈要能让你有余力去讲网络而不是把时间全耗在框架配置上。我一般建议两条路线按你的基础选路线技术栈适合人群网络原理体现难度轻量路线Python Flask SQLite 原生 HTML网络基础好、Web 开发弱低代码少容易讲清楚常规路线Java Servlet/JSP MySQL Tomcat学过 Java Web 课程中Servlet 容器本身就是 HTTP 服务器进阶路线Node.js Express MySQL想顺便学 JS 全栈中需要自己处理静态资源缓存注意我不推荐零基础直接上 Spring Boot因为自动配置把太多东西藏起来了你很难在答辩时讲清楚「请求进来之后容器做了什么」。用 Flask 或者原生 ServletHTTP 处理的每一步都在你眼皮底下反而好讲。2.2 用 Flask 搭一个最小可运行的课程网站骨架下面这段代码是我常用的起手式一个能列出课程、点进去看详情的极简网站。先让它跑起来再往上加功能。# app.py from flask import Flask, render_template, abort import sqlite3 app Flask(__name__) def get_db(): # 每次请求新建连接课设规模下够用避免线程安全问题 conn sqlite3.connect(courses.db) conn.row_factory sqlite3.Row return conn app.route(/) def index(): db get_db() # 查询所有课程按 id 排序 courses db.execute(SELECT id, name, teacher FROM course ORDER BY id).fetchall() db.close() return render_template(index.html, coursescourses) app.route(/course/int:cid) def course_detail(cid): db get_db() course db.execute(SELECT * FROM course WHERE id?, (cid,)).fetchone() db.close() if course is None: abort(404) # 返回 404答辩时可以拿这个讲 HTTP 状态码 return render_template(detail.html, coursecourse) if __name__ __main__: # host 设为 0.0.0.0 方便同宿舍同学访问端口用 5000 app.run(host0.0.0.0, port5000, debugTrue)逻辑说明get_db()每次请求创建独立连接课设并发量极低不需要连接池。index路由对应首页course_detail对应详情页abort(404)是故意留的答辩演示时你可以手动访问一个不存在的课程 id用 Wireshark 抓到 404 响应报文这比空口讲状态码有说服力得多。参数说明host0.0.0.0让服务监听所有网卡局域网内其他机器能访问port5000是 Flask 默认端口如果被占用改成 5001debugTrue开发阶段用正式演示前记得关掉否则报错页面会暴露源码路径。数据库建表语句也一并给你-- init_db.sql CREATE TABLE course ( id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL, -- 课程名称 teacher TEXT NOT NULL, -- 授课教师 credit REAL DEFAULT 2.0, -- 学分 intro TEXT -- 课程简介 ); INSERT INTO course (name, teacher, credit, intro) VALUES (计算机网络, 张老师, 3.0, 讲授 OSI 七层模型与 TCP/IP 协议栈), (数据结构, 李老师, 3.0, 线性表、树、图及其算法实现), (操作系统, 王老师, 3.0, 进程管理、内存管理、文件系统);执行sqlite3 courses.db init_db.sql就能建库。模板文件index.html和detail.html用最朴素的 Jinja2 语法即可不需要 Bootstrap课设看的是网络不是 UI。2.3 静态资源怎么放直接影响你后面讲 HTTP 缓存Flask 默认把static/目录作为静态资源根目录CSS、JS、图片都放里面。这个约定很重要因为答辩时老师很可能问你「浏览器第二次访问同一个 CSS 文件还会不会重新下载」。答案取决于响应头里的Cache-Control和ETag。Flask 默认会给静态文件加上ETag和Last-Modified浏览器第二次请求会带If-None-Match服务器返回 304 Not Modified不传 body。这个流程你用 Wireshark 抓一次比背十遍书都记得牢。如果你想让静态资源缓存时间更长可以自定义响应头app.after_request def add_cache_header(response): # 只对静态资源设置长缓存动态页面不设 if request.path.startswith(/static/): response.headers[Cache-Control] public, max-age86400 return responsemax-age86400表示缓存 24 小时。这个值设多大取决于你的演示需求设太大改了 CSS 刷新看不到效果设太小又体现不出缓存的意义。我一般演示时设 60 秒方便反复抓包。3. 把「网络」两个字做进代码里HTTP 请求响应与 TCP 连接的可见化3.1 用 Wireshark 抓一次完整的首页访问网站跑起来只是第一步课设的核心是证明你理解背后的网络过程。打开 Wireshark选回环网卡Windows 上是Adapter for loopback traffic captureLinux 是lo过滤条件填tcp.port 5000然后浏览器访问http://127.0.0.1:5000/。你会看到这样一串包三次握手SYN→SYN, ACK→ACKHTTP 请求GET / HTTP/1.1HTTP 响应HTTP/1.1 200 OK后面跟着 HTML 内容四次挥手FIN, ACK→ACK→FIN, ACK→ACK把这几个包的时间戳、序号、标志位截图放进报告比任何文字描述都管用。老师一看就知道你真的动手了。这里有个细节值得注意HTTP/1.1 默认开启 Keep-Alive所以首页 HTML 和它引用的 CSS、JS 可能复用同一个 TCP 连接你不会看到每个资源都重新握手。这正好可以用来讲「持久连接」的概念。如果你想看到每个资源独立连接可以在请求头里加Connection: close。3.2 用 Python 脚本模拟浏览器发请求把协议字段摊开看Wireshark 看的是二进制流如果你想更直观地看 HTTP 报文结构用 Python 的 socket 手写一个请求# raw_http.py import socket # 连接本机 5000 端口模拟浏览器 s socket.socket(socket.AF_INET, socket.SOCK_STREAM) s.connect((127.0.0.1, 5000)) # 手动构造 HTTP 请求报文注意结尾必须是 \r\n\r\n request ( GET / HTTP/1.1\r\n Host: 127.0.0.1:5000\r\n User-Agent: RawSocketClient/1.0\r\n Accept: text/html\r\n Connection: close\r\n \r\n ) s.sendall(request.encode(utf-8)) # 循环接收直到对端关闭 response b while True: chunk s.recv(4096) if not chunk: break response chunk s.close() # 按 \r\n\r\n 分割响应头和响应体 head, _, body response.partition(b\r\n\r\n) print( 响应头 ) print(head.decode(utf-8)) print( 响应体前 200 字节 ) print(body[:200].decode(utf-8, errorsreplace))逻辑说明这段代码完全绕过了浏览器和 requests 库直接往 TCP socket 里写 HTTP 文本。\r\n\r\n是 HTTP 协议规定的头部结束标志少了这个服务器会一直等。Connection: close告诉服务器响应完就关连接这样recv才能读到空字节退出循环。参数说明recv(4096)的 4096 是每次读取的字节数设太小要读很多次设太大浪费内存4KB 是个经验值。errorsreplace防止响应体里有非 UTF-8 字节导致打印报错。跑完这个脚本你就有了一个「自己实现的 HTTP 客户端」答辩时可以说「我不光会用浏览器还能手写协议报文」这是实打实的加分项。3.3 DNS 解析在课设里怎么体现本地开发用127.0.0.1不涉及 DNS但课设报告里通常要求写 DNS 解析过程。你可以这样补在/etc/hostsWindows 是C:\Windows\System32\drivers\etc\hosts里加一行127.0.0.1 www.course.local然后用www.course.local:5000访问。再用nslookup www.course.local看解析结果。虽然 hosts 文件是本地解析不走 DNS 服务器但你可以借此讲清楚「浏览器先查本地缓存 → hosts 文件 → 系统 DNS 缓存 → 递归查询」这个顺序。如果想抓真实的 DNS 包把 DNS 服务器设成公共的然后nslookup www.baidu.comWireshark 过滤dns就能看到 Query 和 Response 报文。注意课设报告里写这个就行别去解析学校内网的域名。4. 避坑与排查课设里最容易翻车的五个地方4.1 端口被占用Flask 起不来现象运行python app.py报OSError: [Errno 98] Address already in use。原因5000 端口被其他进程占了常见的是之前没关干净的 Flask 进程或者 macOS 上的 AirPlay 接收器。解决Linux/macOS 用lsof -i :5000找到 PID 然后kill -9Windows 用netstat -ano | findstr :5000找到 PID 再任务管理器结束。或者干脆换端口app.run(port5001)。4.2 局域网同学访问不了你的网站现象本机127.0.0.1:5000能开室友用你的 IP 访问超时。原因一是 Flask 没设host0.0.0.0只监听了回环地址二是系统防火墙拦了入站连接。解决先确认代码里是0.0.0.0然后关防火墙或者加一条入站规则放行 5000 端口。Windows 在「高级安全 Windows Defender 防火墙」里新建入站规则选端口TCP 5000允许连接。答辩演示前一定提前试好别到讲台上才发现连不上。4.3 Wireshark 抓不到包现象过滤tcp.port 5000一个包都没有。原因选错网卡了。访问127.0.0.1的流量走回环网卡不走物理网卡。解决Windows 需要单独安装 Npcap 并勾选回环支持然后在接口列表里选Adapter for loopback traffic capture。Linux 直接选lo。如果还是不行换成抓物理网卡然后用另一台机器访问你的 IP流量就会走物理网卡。4.4 中文乱码现象网页上课程名显示成问号或者方块。原因Flask 默认响应头Content-Type: text/html; charsetutf-8但如果你的 HTML 文件保存成了 GBK 编码或者数据库连接没指定编码就会乱码。解决确保所有.html文件用 UTF-8 保存HTML 里加meta charsetutf-8SQLite 默认就是 UTF-8 不用改。如果从 CSV 导入数据注意用encodingutf-8打开文件。4.5 答辩时被问「你这个和网络有什么关系」现象老师觉得你只是做了个网站没体现网络课程的内容。原因报告里全是功能截图没有协议分析、没有抓包、没有拓扑图。解决报告里必须有一章专门讲网络放 Wireshark 截图、HTTP 报文结构、TCP 状态迁移图。最好再画一个简单的网络拓扑客户端 → 交换机 → 服务器标出各层协议。哪怕你是在单机上跑的也要画出逻辑拓扑并说明「实际部署时各层如何对应」。5. 让课设从「及格」到「优秀」抓包分析报告的写法与一个压测技巧5.1 抓包分析报告的三段式结构很多同学的抓包截图就是一堆包列表老师看不出重点。我建议按「三次握手 → HTTP 交互 → 四次挥手」三段来组织每段配一张过滤后的截图和一段文字说明。第一段过滤条件tcp.flags.syn 1只显示握手包。说明里写清楚客户端初始序号 seq0相对序号服务器回复 seq0 ack1第三次握手客户端 ack1。如果你能算出真实序号Wireshark 默认显示相对序号可以在 Preferences → Protocols → TCP 里关掉 Relative sequence numbers那就更硬核了。第二段过滤条件http显示请求和响应。点开GET / HTTP/1.1那一行展开 Hypertext Transfer Protocol把请求行、Host、User-Agent、Accept 这几个字段截图。响应那边展开HTTP/1.1 200 OK截 Content-Type、Content-Length、Server 字段。然后说明「Content-Length 告诉浏览器响应体有多少字节浏览器据此判断什么时候读完」。第三段过滤条件tcp.flags.fin 1 or tcp.flags.reset 1显示挥手包。说明主动关闭方发 FIN另一方回 ACK然后也发 FIN最后 ACK 确认。如果看到 RST 包说明连接被强制重置通常是端口没开或者程序崩了。5.2 用 ab 做一次简单压测让报告有数据支撑光有功能截图不够加一组性能数据会让报告厚实很多。Apache Benchab是现成的工具Linux 直接apt install apache2-utilsWindows 可以下编译好的 exe。# 并发 10总共发 100 个请求测首页 ab -n 100 -c 10 http://127.0.0.1:5000/输出里重点看这几个指标指标含义课设里的参考值Requests per second每秒处理请求数Flask 单进程大概 200-500Time per request平均每个请求耗时几毫秒到几十毫秒Failed requests失败请求数应该是 0Transfer rate传输速率和响应体大小相关把这张表放进报告然后分析「为什么并发上去之后 QPS 没有线性增长」——因为 Flask 开发服务器是单线程的请求排队处理。这就自然引出了「生产环境要用多进程或者 WSGI 服务器」的讨论老师会觉得你思考得比较深。注意压测只在本机做别去压学校的服务器那是违规的。5.3 一个我踩过的坑别在答辩现场才第一次跑抓包我带过的一届学生里有个组报告写得不错但答辩时老师让他们现场抓一次包结果 Wireshark 没装回环驱动折腾了十分钟没抓出来最后分数打了折扣。从那以后我要求学生至少提前三天在答辩用的电脑上完整走一遍流程启动网站、打开 Wireshark、访问页面、抓到包、截图保存。所有截图提前放进 PPT现场只做演示不做首次操作。另外debugTrue一定要在答辩前关掉。我见过有人演示时故意访问一个不存在的路径想展示 404 处理结果 debug 模式返回了交互式调试页面把源码路径和部分变量都暴露出来了场面一度很尴尬。改成debugFalse再跑一次确认 404 页面是干净的。最后说个习惯每次改完代码先在本机用curl -v http://127.0.0.1:5000/看一眼请求响应头确认没问题再开浏览器。curl -v会把请求行、响应行、头部字段全打出来比浏览器 F12 还直接。这个习惯帮我省了很多「明明代码没错但页面就是不对」的排查时间。希望帮到你。本文还有配套的精品资源点击获取