尧图网页设计 
简介计算机网络课程设计中的精品课程网站建设方案主要面向高校网络工程、计算机相关专业学生用于完成课程设计或毕业设计。资源围绕一个可接入互联网的精品课程网站展开要求支持一百个以上站点网络内部采用千兆主干、百兆到桌面的结构并需划分至少四个子网同时提供域名解析、动态地址分配、网页服务、文件传输等服务整体覆盖网络拓扑、地址规划、服务器部署和主页编写等关键环节。包内共有三个文件核心为两份文档和一份网页源码文档用于撰写设计思路、方案说明与配置步骤网页源码展示基础前端页面实现整个压缩包约 574KB轻量便于查阅。当前已有八百六十人学习浏览适合需要参考完整设计流程、网络服务配置方法及报告写法的同学。借助这份资源读者能掌握从需求分析到子网划分、服务器角色配置再到网络设计与网页实现结合的完整方法形成可提交的课程设计成果。 每年计算机网络课程设计绕不开的一个题目就是精品课程网站设计。表面上看它跟普通网站开发没什么区别无非是放课程简介、课件、教学视频再加个在线测试和留言板。但真正做下来你会发现这个题目把网络原理里的协议、地址、服务、安全全调动起来了HTTP是应用层TCP三次握手是传输层IP地址和路由是网络层DHCP和DNS又是怎么配合的全都能在项目里找到对应物。这篇文章记录我自己完整做一遍精品课程网站的过程包括需求拆解、技术选型、页面实现、局域网部署以及调试网络时踩过的各种坑。正在准备课设、或者想把网络知识和Web开发串起来的人都值得看一遍。1. 项目目标与需求拆解1.1 这个课设真正要验收什么很多同学拿到“精品课程网站设计”这个题第一反应是套一个现成的CMS模板换个课程名就交差。但如果是计算机网络课程的课设题目里的“网络”两个字才是关键得分点。老师想看到的不是Bootstrap做出多漂亮的首页而是你能把下面这几件事讲明白网站是怎么部署到服务器上的客户端通过什么协议、什么地址访问到它在局域网里怎么规划IP域名是怎么解析的如果访问出现问题你能不能定位到是网络层、传输层还是应用层的故障。我这次给自己的验收标准是一台Ubuntu服务器一台普通交换机几台客户机搭一个小型局域网。服务器上跑课程网站所有终端通过IP地址和域名都能访问。站在用户角度需要课程介绍、教学大纲、课件下载、视频点播、在线测试、留言板这些功能缺一个都不算完整。站在网络角度需要能看到DHCP分配地址的过程能通过抓包看到HTTP请求三次握手能在安全设备日志里排查异常访问。两条线都走通了课设才算真正完成。1.2 技术选型按课设场景取舍课设不是企业项目不需要微服务也不需要前后端分离重点是把原理打通。我选了这套组合模块我使用的方案为什么这么选前端页面HTML CSS 原生JavaScript不用框架演示时容易解释页面加载流程后端逻辑Python Flask路由和HTTP方法非常直观代码量少数据库MySQL 8.0课程常见能体现传统关系型库的配置过程Web服务器Nginx反向代理静态资源和动态请求配置清晰网络环境VMware虚拟机 真实家用路由器既能模拟也能真机联调两端都覆盖抓包工具Wireshark / tcpdump课堂演示网络层分析的标配Flask 开发服务器虽然也能跑但它只有一个进程高并发弱而且老师一眼就知道你没做生产环境部署。用 Nginx 加 uWSGI 跑 Flask才符合“网络服务”这个课设题目。前端我不建议上 React/Vue因为课程设计的时间有限原生页面配合 CSS 框架足够还能把 URL 路由和 HTTP 请求讲得更清楚。1.3 网络环境设计总体思路网络环境按一个小型校园单位来设计。服务器放在独立网口IP 固定为 192.168.10.10/24。终端设备通过路由器DHCP自动获取 192.168.10.20 到 192.168.10.200 的地址。路由器就是网关 192.168.10.1同时承担DNS转发功能。这样设计的好处是既能演示静态IP配置也能演示DHCP协议交互还能让学生终端随意接入不需要手工设置网络。这种网络比单机虚拟机复杂的地方在于虚拟机的网络模式要选“桥接模式”让虚拟机直接挂到局域网里获得和物理机同网段的地址。否则 NAT 模式下外部终端永远访问不到它。首次做这个项目的人很容易忽视这点导致服务器只有本机才能打开网站。2. 网站核心功能与页面实现2.1 功能模块与URL路由精品课程网站我划分成五个模块首页、课程资源、视频教学、在线测试、留言板。每个模块对应一组 URL这其实就是 HTTP 应用层的资源定位。Flask 后端代码里路由直接映射函数调试的时候能看到 GET 和 POST 请求分别进入哪里。from flask import Flask, render_template, request import os app Flask(__name__) app.route(/) def index(): return render_template(index.html) app.route(/course/ppt) def ppt_list(): files os.listdir(static/ppt) return render_template(ppt.html, filesfiles) app.route(/course/video) def video_list(): return render_template(video.html) app.route(/exam, methods[GET, POST]) def exam(): if request.method POST: # 接收答案并判分 return render_template(result.html, scorescore) return render_template(exam.html) app.route(/message, methods[GET, POST]) def message_board(): if request.method POST: # 写数据库 pass return render_template(message.html)注意一点路由中的/course/ppt不是文件系统路径而是 Web 服务器映射出来的逻辑路径。真正的文件放在/var/www/course/static/ppt下面Nginx 会把它映射成外部可访问的 URL。这个映射关系是“网络资源”和“本地文件”之间的桥梁很多人不关注但面试常问。2.2 课件与视频资源的访问策略课件和视频是精品课程网站的大头也是最容易拖垮服务器的地方。我的处理方式是课件文件统一放在static/ppt视频文件放在static/video页面通过遍历目录生成下载链接。这样不用每次新增文件都改代码也方便老师直接往目录里丢素材。视频播放不能用简单的a标签否则用户必须下载完整文件才能看。用 HTML5 的video标签可以直接在线播放但服务器必须支持 Range 请求也就是 HTTP 分块传输。Nginx 默认支持 Range所以静态视频交给 Nginx 处理就行不要让 Flask 去读文件再返回。否则视频播放会卡顿而且服务器内存被瞬间占满。我在 Nginx 里对这目录做了单独配置location /static/video/ { alias /var/www/course/static/video/; add_header Accept-Ranges bytes; }Range 请求是 HTTP 协议里非常典型的“断点续传”机制。浏览器播放视频时会先请求前几秒的数据播放到一半再请求下一段。你通过 Wireshark 抓包能看到请求头里的Range: bytes0-1023响应头里有Content-Range。这个细节在课设答辩时讲出来含金量很高。2.3 在线测试与留言板的实现在线测试我做了十个单选题题目放在一个 JSON 文件里答案用 SHA256 哈希值存不直接明文写答案防止学生查看源码。用户提交答案后后端逐题比对哈希值最后返回分数。这种设计虽然比明文多写几行代码但能体现你懂一点信息安全的思路。判断题、多选题也能按同样逻辑扩展。留言板是典型的 POST 请求场景也是安全问题高发区。第一次写的时候我直接拼接 SQL结果输入一个单引号就把页面打崩了。后面改成参数化查询彻底解决 SQL 注入问题。建表语句如下CREATE TABLE message ( id INT AUTO_INCREMENT PRIMARY KEY, nickname VARCHAR(50) NOT NULL, content TEXT NOT NULL, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ) DEFAULT CHARSETutf8mb4;注意这里特意指定utf8mb4不然留言里出现表情符号或者中文特殊字符保存后就是乱码。字符集是新手最容易踩的坑页面、数据库、连接串三处编码不统一中文数据就会变成“????”。我统一改成 UTF-8 后问题才彻底消失。这个坑看似是应用层问题实际上和 TCP 传输的字节流显示有关也可以从编码原理上跟面试官聊几句。3. 网络配置与服务器部署实战3.1 IP地址和DHCP怎么配合局域网里服务器必须用静态 IP否则DHCP租约到期后地址变了所有客户端都访问不了网站。其他的教师机和学生终端用 DHCP 自动获取这样任何设备接入局域网都能自动获得 IP、掩码、网关和 DNS。这里有个容易混淆的点DHCP 不只是分配 IP它还可以下发网关和 DNS。所以只要路由器开了 DHCP客户端浏览器就能正常解析域名并访问外网。我在路由器上的配置是这样的DHCP 地址池 192.168.10.100 到 192.168.10.200网关 192.168.10.1首选 DNS 用 223.5.5.5。服务器单独保留 192.168.10.10不做 DHCP 分配。为了验证 DHCP 工作我打开客户机的命令行用ipconfig /renew重新获取地址然后用 Wireshark 抓 DHCP Discover、Offer、Request、ACK 四个包。这就是课设里最直接的“网络协议可视化”素材。设备IP地址获取方式用途Web服务器192.168.10.10/24静态配置跑Nginx、MySQL、Flask网关/路由器192.168.10.1/24固定DHCP、DNS转发、NAT教师机192.168.10.100/24DHCP后台维护学生终端192.168.10.x/24DHCP访问课程网站3.2 域名解析从小处理解DNS如果只让学生用 IP 访问网站那 DNS 部分就没法体现。我在内网自己配了一个域名course.jingpin.local。最简单的方式是在每台客户机的 hosts 文件里写一行192.168.10.10 course.jingpin.local这个方式能演示基本解析流程但只能逐台配置。更接近真实场景的是用 dnsmasq 搭建内网 DNS 服务器然后让路由器把 DNS 指向它。这样所有客户机只要 DHCP 拿到地址自动就能解析域名。课程设计里能说清楚这两种方式的区别就已经超过了大部分同学。有了域名之后Nginx 里要配置虚拟主机。用不同的server_name区分不同站点这是 HTTP 请求头里Host字段的应用。配置片段如下server { listen 80; server_name course.jingpin.local; root /var/www/course; index index.html; location /static/ { alias /var/www/course/static/; } location / { include uwsgi_params; uwsgi_pass 127.0.0.1:3031; } }浏览器访问http://course.jingpin.local时流程是先通过 DNS 或 hosts 解析域名得到 192.168.10.10然后向这个 IP 发起 TCP 三次握手再发送 HTTP GET 请求Nginx 发现Host是course.jingpin.local就匹配到这个 server 块把请求转发给 Flask。这个过程可以在浏览器开发者工具和 Wireshark 里完整看到答辩时照着这个顺序讲逻辑非常清晰。3.3 Web服务发布到局域网部署步骤整理成命令清单直接照着做就能跑通# 更新系统并安装依赖 sudo apt update sudo apt install -y nginx mysql-server python3-pip pip3 install flask flask-sqlalchemy uwsgi # 启动数据库并建库 sudo systemctl start mysql sudo mysql -e CREATE DATABASE course DEFAULT CHARSET utf8mb4; # 把 Flask 项目放到指定目录 sudo mkdir -p /var/www/course # 项目代码复制到 /var/www/course 后配置 uwsgi uwsgi --socket 127.0.0.1:3031 --wsgi-file app.py --callable app --daemonize /var/log/course.log这里关键点是 Flask 启动时一定要监听所有网卡而不是默认的 127.0.0.1。如果监听 127.0.0.1那么在服务器本机用curl能通但局域网其他机器永远打不开。这个问题出现频率非常高我排查了很久才意识到是 Flask 的运行参数问题。用 uWSGI 把 Flask 跑在 127.0.0.1:3031Nginx 再对外监听 80 端口相当于把内网服务和对外开放隔离开。Nginx 还顺手做了静态文件服务、连接管理、访问日志这些单靠 Flask 开发服务器做不好。3.4 对外开放访问与防火墙局域网内访问已经通了但为了演示更完整的网络权限控制我还在服务器上开了防火墙。Ubuntu 自带的 ufw 操作比较简单sudo ufw allow 22/tcp # SSH 管理 sudo ufw allow 80/tcp # HTTP 访问 sudo ufw allow 3306/tcp # 仅演示需要实际上不建议对外开放数据库端口开放 3306 只是为了让学生远程连接数据库看表结构真实环境必须关掉否则非常容易被扫描器爆破。我在安全日志里看到大量来自外网的 MySQL 连接尝试才意识到数据库端口暴露的严重性。后来取消了 3306 的外网放行只允许内网网段访问。这本身就是一次很好的“访问控制”教学案例。4. 联调测试与问题排查实录4.1 常见问题速查表整个课设调试过程中我遇到过不少问题整理成一张速查表按照症状、原因、解法三列来写症状可能原因解决办法浏览器访问 IP 显示拒绝连接Nginx 未启动或监听端口不对systemctl status nginx检查ss -tlnp局域网其他电脑打不开Flask 监听了 127.0.0.1uWSGI 绑定0.0.0.0或走 Nginx 反向代理页面能开但 CSS/图片加载失败Nginx 配置没包含location /static/补上静态目录映射重启 Nginx视频播放卡顿或无法拖进度Nginx 没开启 Range 或文件路径错误在 location 中加入add_header Accept-Ranges bytes;留言板中文乱码数据库字符集不是 utf8mb4重建表指定DEFAULT CHARSETutf8mb4域名在别人电脑上解析不了只配了本机 hosts用 dnsmasq 内网DNS或改路由器DNS数据库连接超时MySQL 绑定地址为 127.0.0.1修改bind-address 0.0.0.0授权允许远访问访问日志里出现大量重复请求可能是网页轮询或爬虫用 Nginx 的limit_req模块限制单IP请求频率4.2 一次“异常流量”告警的排查手记调试接近尾声时学校机房里的安全网关弹了一个提示“系统检测到您的计算机网络中存在异常流量。”这是我遇到过最有意思的一个问题因为网站明明功能正常怎么会有异常流量。排查第一步我先看 Nginx 的访问日志。发现某个 IP 在几十秒内反复请求/admin/login.php、/wp-login.php、/.env这类路径。这是一台扫描器在遍历网站试图找后台入口和配置漏洞并不是网站本身出问题。安全网关检测到这种高频探测就把它标记为异常流量。进一步用ss查看连接状态发现来自那个 IP 的 TCP 连接保持在 SYN_RECV 状态说明它在不停尝试建立新连接但在等第三次握手确认典型的半连接扫描特征。我用 tcpdump 抓包确认sudo tcpdump -i eth0 -n tcp port 80 and host 192.168.xx.xx抓到的包里全是 SYN 请求没有后续正常的 HTTP GET这基本可以确认是端口扫描或者恶意探测。解决办法是在 Nginx 里限制并发和请求频率limit_req_zone $binary_remote_addr zonecourse_limit:10m rate5r/s; server { listen 80; server_name course.jingpin.local; location / { limit_req zonecourse_limit burst10 nodelay; include uwsgi_params; uwsgi_pass 127.0.0.1:3031; } }同时在防火墙里只允许校园网网段访问阻断其他来源的探测。经过处理后安全网关的告警逐渐消失。这个案例特别适合写进课设报告因为它是“流量异常检测”和“访问控制策略”的活教材比单纯做网站模板要深刻得多。4.3 几个非常值得注意的坑除了上面表格里的问题还有几个隐蔽的坑。第一是 Nginx 的缓存我改了 CSS 文件后浏览器里始终是旧的清缓存也没用。原因是有个反向代理层把静态资源缓存了最后在 Nginx 的 location 里加proxy_cache_bypass或者给静态文件请求加版本号参数才解决。第二是 MySQL 授权时不能只给rootlocalhost授权。要从 Flask 后端连数据库用的用户最好是单独创建的例如course_user并只授权这个库的权限CREATE USER course_userlocalhost IDENTIFIED BY your_password; GRANT ALL PRIVILEGES ON course.* TO course_userlocalhost; FLUSH PRIVILEGES;这样可以避免应用账号直接使用 root 的高权限哪怕被注入了也删不了其他库。第三是上传课件和视频时文件名一定不要用中文和空格。早期我把文件名直接放到 URL 里浏览器会转义链接反复失效。后来统一改成英文和下划线再用数据库记录原始文件名展示时读取原始文件名给用户下载这样既不破坏 URL也能正常显示中文名称。这个经验在处理所有静态资源时都通用。5. 验收演示与经验扩展5.1 演示时怎么讲出“计算机网络”含量答辩和验收的时候不要一上来就点开首页而是先讲网络拓扑。我准备了一张简单的拓扑图一台 Web/数据库服务器、一台路由器/交换机、若干终端设备用文字标注每台设备的 IP、网关和 DNS。然后现场演示三件事第一在终端上用ping course.jingpin.local能看到域名解析成 192.168.10.10并且时延正常。第二打开 Wireshark在服务器端抓访问课程首页的包能看到 TCP 三次握手和 HTTP GET 请求。第三在留言板提交一条留言再到数据库里查这条记录证明前后端和数据库链路是通的。这三步操作比讲十页 PPT 都有说服力老师一看就知道你确实理解了网络通信的完整路径。5.2 报告和收尾建议课设报告的结构我建议分这几块需求分析、总体设计、网络拓扑与 IP 规划、数据库设计、核心功能实现、测试结果、故障处理记录、总结展望。其中“故障处理记录”一定要写实比如我前面写的异常流量告警就详细写了观测现象、抓包结果、处理方案和最终效果。老师最反感那种全篇都是“实现了什么功能”但没有任何问题分析的报告因为真实项目不可能没有坑。报告里的 IP 地址表、域名映射、Nginx 配置片段、数据库表结构全部要有注释。我还在附录里放了 Wireshark 抓包截图每张图下配两三句说明解释这个包是在哪个阶段出现、标志位有什么含义、对应哪一次通信过程。这样做的好处是即使答辩时间很短老师翻到附录也能快速理解你的网络设计。5.3 如果再让我做一次我会改什么这个项目做完之后我最大的体会是精品课程网站设计的难点不在页面而在“让这个网站在正确的位置提供正确的服务”。如果再给我一次机会我会直接给网站加上 HTTPS用自签名证书虽然会被浏览器报不安全但能借机把 SSL/TLS 握手过程讲明白也算多一个知识亮点。我也会把部署过程写成自动化脚本用 Ansible 一键配置 Nginx、MySQL 和 Flask 环境这样换一个网络环境重新部署时就不用一个命令一个命令地敲。对于还在做课设的人我最后分享一个实用技巧每一步配置完成之后立刻用命令验证。比如改完 Nginx 配置就运行nginx -t改完 hosts 就ping一下域名改完数据库授权就用远程客户端连一次。别等到所有配置都写完了再一次性测试否则一旦报错你会分不清是 Web 服务、数据库、防火墙还是域名解析出问题。小步验证才是这种网络类课设最省时间的推进方式。本文还有配套的精品资源点击获取 计算机网络课设实战：精品课程网站从部署到排障全记录
简介计算机网络课程设计中的精品课程网站建设方案主要面向高校网络工程、计算机相关专业学生用于完成课程设计或毕业设计。资源围绕一个可接入互联网的精品课程网站展开要求支持一百个以上站点网络内部采用千兆主干、百兆到桌面的结构并需划分至少四个子网同时提供域名解析、动态地址分配、网页服务、文件传输等服务整体覆盖网络拓扑、地址规划、服务器部署和主页编写等关键环节。包内共有三个文件核心为两份文档和一份网页源码文档用于撰写设计思路、方案说明与配置步骤网页源码展示基础前端页面实现整个压缩包约 574KB轻量便于查阅。当前已有八百六十人学习浏览适合需要参考完整设计流程、网络服务配置方法及报告写法的同学。借助这份资源读者能掌握从需求分析到子网划分、服务器角色配置再到网络设计与网页实现结合的完整方法形成可提交的课程设计成果。 每年计算机网络课程设计绕不开的一个题目就是精品课程网站设计。表面上看它跟普通网站开发没什么区别无非是放课程简介、课件、教学视频再加个在线测试和留言板。但真正做下来你会发现这个题目把网络原理里的协议、地址、服务、安全全调动起来了HTTP是应用层TCP三次握手是传输层IP地址和路由是网络层DHCP和DNS又是怎么配合的全都能在项目里找到对应物。这篇文章记录我自己完整做一遍精品课程网站的过程包括需求拆解、技术选型、页面实现、局域网部署以及调试网络时踩过的各种坑。正在准备课设、或者想把网络知识和Web开发串起来的人都值得看一遍。1. 项目目标与需求拆解1.1 这个课设真正要验收什么很多同学拿到“精品课程网站设计”这个题第一反应是套一个现成的CMS模板换个课程名就交差。但如果是计算机网络课程的课设题目里的“网络”两个字才是关键得分点。老师想看到的不是Bootstrap做出多漂亮的首页而是你能把下面这几件事讲明白网站是怎么部署到服务器上的客户端通过什么协议、什么地址访问到它在局域网里怎么规划IP域名是怎么解析的如果访问出现问题你能不能定位到是网络层、传输层还是应用层的故障。我这次给自己的验收标准是一台Ubuntu服务器一台普通交换机几台客户机搭一个小型局域网。服务器上跑课程网站所有终端通过IP地址和域名都能访问。站在用户角度需要课程介绍、教学大纲、课件下载、视频点播、在线测试、留言板这些功能缺一个都不算完整。站在网络角度需要能看到DHCP分配地址的过程能通过抓包看到HTTP请求三次握手能在安全设备日志里排查异常访问。两条线都走通了课设才算真正完成。1.2 技术选型按课设场景取舍课设不是企业项目不需要微服务也不需要前后端分离重点是把原理打通。我选了这套组合模块我使用的方案为什么这么选前端页面HTML CSS 原生JavaScript不用框架演示时容易解释页面加载流程后端逻辑Python Flask路由和HTTP方法非常直观代码量少数据库MySQL 8.0课程常见能体现传统关系型库的配置过程Web服务器Nginx反向代理静态资源和动态请求配置清晰网络环境VMware虚拟机 真实家用路由器既能模拟也能真机联调两端都覆盖抓包工具Wireshark / tcpdump课堂演示网络层分析的标配Flask 开发服务器虽然也能跑但它只有一个进程高并发弱而且老师一眼就知道你没做生产环境部署。用 Nginx 加 uWSGI 跑 Flask才符合“网络服务”这个课设题目。前端我不建议上 React/Vue因为课程设计的时间有限原生页面配合 CSS 框架足够还能把 URL 路由和 HTTP 请求讲得更清楚。1.3 网络环境设计总体思路网络环境按一个小型校园单位来设计。服务器放在独立网口IP 固定为 192.168.10.10/24。终端设备通过路由器DHCP自动获取 192.168.10.20 到 192.168.10.200 的地址。路由器就是网关 192.168.10.1同时承担DNS转发功能。这样设计的好处是既能演示静态IP配置也能演示DHCP协议交互还能让学生终端随意接入不需要手工设置网络。这种网络比单机虚拟机复杂的地方在于虚拟机的网络模式要选“桥接模式”让虚拟机直接挂到局域网里获得和物理机同网段的地址。否则 NAT 模式下外部终端永远访问不到它。首次做这个项目的人很容易忽视这点导致服务器只有本机才能打开网站。2. 网站核心功能与页面实现2.1 功能模块与URL路由精品课程网站我划分成五个模块首页、课程资源、视频教学、在线测试、留言板。每个模块对应一组 URL这其实就是 HTTP 应用层的资源定位。Flask 后端代码里路由直接映射函数调试的时候能看到 GET 和 POST 请求分别进入哪里。from flask import Flask, render_template, request import os app Flask(__name__) app.route(/) def index(): return render_template(index.html) app.route(/course/ppt) def ppt_list(): files os.listdir(static/ppt) return render_template(ppt.html, filesfiles) app.route(/course/video) def video_list(): return render_template(video.html) app.route(/exam, methods[GET, POST]) def exam(): if request.method POST: # 接收答案并判分 return render_template(result.html, scorescore) return render_template(exam.html) app.route(/message, methods[GET, POST]) def message_board(): if request.method POST: # 写数据库 pass return render_template(message.html)注意一点路由中的/course/ppt不是文件系统路径而是 Web 服务器映射出来的逻辑路径。真正的文件放在/var/www/course/static/ppt下面Nginx 会把它映射成外部可访问的 URL。这个映射关系是“网络资源”和“本地文件”之间的桥梁很多人不关注但面试常问。2.2 课件与视频资源的访问策略课件和视频是精品课程网站的大头也是最容易拖垮服务器的地方。我的处理方式是课件文件统一放在static/ppt视频文件放在static/video页面通过遍历目录生成下载链接。这样不用每次新增文件都改代码也方便老师直接往目录里丢素材。视频播放不能用简单的a标签否则用户必须下载完整文件才能看。用 HTML5 的video标签可以直接在线播放但服务器必须支持 Range 请求也就是 HTTP 分块传输。Nginx 默认支持 Range所以静态视频交给 Nginx 处理就行不要让 Flask 去读文件再返回。否则视频播放会卡顿而且服务器内存被瞬间占满。我在 Nginx 里对这目录做了单独配置location /static/video/ { alias /var/www/course/static/video/; add_header Accept-Ranges bytes; }Range 请求是 HTTP 协议里非常典型的“断点续传”机制。浏览器播放视频时会先请求前几秒的数据播放到一半再请求下一段。你通过 Wireshark 抓包能看到请求头里的Range: bytes0-1023响应头里有Content-Range。这个细节在课设答辩时讲出来含金量很高。2.3 在线测试与留言板的实现在线测试我做了十个单选题题目放在一个 JSON 文件里答案用 SHA256 哈希值存不直接明文写答案防止学生查看源码。用户提交答案后后端逐题比对哈希值最后返回分数。这种设计虽然比明文多写几行代码但能体现你懂一点信息安全的思路。判断题、多选题也能按同样逻辑扩展。留言板是典型的 POST 请求场景也是安全问题高发区。第一次写的时候我直接拼接 SQL结果输入一个单引号就把页面打崩了。后面改成参数化查询彻底解决 SQL 注入问题。建表语句如下CREATE TABLE message ( id INT AUTO_INCREMENT PRIMARY KEY, nickname VARCHAR(50) NOT NULL, content TEXT NOT NULL, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ) DEFAULT CHARSETutf8mb4;注意这里特意指定utf8mb4不然留言里出现表情符号或者中文特殊字符保存后就是乱码。字符集是新手最容易踩的坑页面、数据库、连接串三处编码不统一中文数据就会变成“????”。我统一改成 UTF-8 后问题才彻底消失。这个坑看似是应用层问题实际上和 TCP 传输的字节流显示有关也可以从编码原理上跟面试官聊几句。3. 网络配置与服务器部署实战3.1 IP地址和DHCP怎么配合局域网里服务器必须用静态 IP否则DHCP租约到期后地址变了所有客户端都访问不了网站。其他的教师机和学生终端用 DHCP 自动获取这样任何设备接入局域网都能自动获得 IP、掩码、网关和 DNS。这里有个容易混淆的点DHCP 不只是分配 IP它还可以下发网关和 DNS。所以只要路由器开了 DHCP客户端浏览器就能正常解析域名并访问外网。我在路由器上的配置是这样的DHCP 地址池 192.168.10.100 到 192.168.10.200网关 192.168.10.1首选 DNS 用 223.5.5.5。服务器单独保留 192.168.10.10不做 DHCP 分配。为了验证 DHCP 工作我打开客户机的命令行用ipconfig /renew重新获取地址然后用 Wireshark 抓 DHCP Discover、Offer、Request、ACK 四个包。这就是课设里最直接的“网络协议可视化”素材。设备IP地址获取方式用途Web服务器192.168.10.10/24静态配置跑Nginx、MySQL、Flask网关/路由器192.168.10.1/24固定DHCP、DNS转发、NAT教师机192.168.10.100/24DHCP后台维护学生终端192.168.10.x/24DHCP访问课程网站3.2 域名解析从小处理解DNS如果只让学生用 IP 访问网站那 DNS 部分就没法体现。我在内网自己配了一个域名course.jingpin.local。最简单的方式是在每台客户机的 hosts 文件里写一行192.168.10.10 course.jingpin.local这个方式能演示基本解析流程但只能逐台配置。更接近真实场景的是用 dnsmasq 搭建内网 DNS 服务器然后让路由器把 DNS 指向它。这样所有客户机只要 DHCP 拿到地址自动就能解析域名。课程设计里能说清楚这两种方式的区别就已经超过了大部分同学。有了域名之后Nginx 里要配置虚拟主机。用不同的server_name区分不同站点这是 HTTP 请求头里Host字段的应用。配置片段如下server { listen 80; server_name course.jingpin.local; root /var/www/course; index index.html; location /static/ { alias /var/www/course/static/; } location / { include uwsgi_params; uwsgi_pass 127.0.0.1:3031; } }浏览器访问http://course.jingpin.local时流程是先通过 DNS 或 hosts 解析域名得到 192.168.10.10然后向这个 IP 发起 TCP 三次握手再发送 HTTP GET 请求Nginx 发现Host是course.jingpin.local就匹配到这个 server 块把请求转发给 Flask。这个过程可以在浏览器开发者工具和 Wireshark 里完整看到答辩时照着这个顺序讲逻辑非常清晰。3.3 Web服务发布到局域网部署步骤整理成命令清单直接照着做就能跑通# 更新系统并安装依赖 sudo apt update sudo apt install -y nginx mysql-server python3-pip pip3 install flask flask-sqlalchemy uwsgi # 启动数据库并建库 sudo systemctl start mysql sudo mysql -e CREATE DATABASE course DEFAULT CHARSET utf8mb4; # 把 Flask 项目放到指定目录 sudo mkdir -p /var/www/course # 项目代码复制到 /var/www/course 后配置 uwsgi uwsgi --socket 127.0.0.1:3031 --wsgi-file app.py --callable app --daemonize /var/log/course.log这里关键点是 Flask 启动时一定要监听所有网卡而不是默认的 127.0.0.1。如果监听 127.0.0.1那么在服务器本机用curl能通但局域网其他机器永远打不开。这个问题出现频率非常高我排查了很久才意识到是 Flask 的运行参数问题。用 uWSGI 把 Flask 跑在 127.0.0.1:3031Nginx 再对外监听 80 端口相当于把内网服务和对外开放隔离开。Nginx 还顺手做了静态文件服务、连接管理、访问日志这些单靠 Flask 开发服务器做不好。3.4 对外开放访问与防火墙局域网内访问已经通了但为了演示更完整的网络权限控制我还在服务器上开了防火墙。Ubuntu 自带的 ufw 操作比较简单sudo ufw allow 22/tcp # SSH 管理 sudo ufw allow 80/tcp # HTTP 访问 sudo ufw allow 3306/tcp # 仅演示需要实际上不建议对外开放数据库端口开放 3306 只是为了让学生远程连接数据库看表结构真实环境必须关掉否则非常容易被扫描器爆破。我在安全日志里看到大量来自外网的 MySQL 连接尝试才意识到数据库端口暴露的严重性。后来取消了 3306 的外网放行只允许内网网段访问。这本身就是一次很好的“访问控制”教学案例。4. 联调测试与问题排查实录4.1 常见问题速查表整个课设调试过程中我遇到过不少问题整理成一张速查表按照症状、原因、解法三列来写症状可能原因解决办法浏览器访问 IP 显示拒绝连接Nginx 未启动或监听端口不对systemctl status nginx检查ss -tlnp局域网其他电脑打不开Flask 监听了 127.0.0.1uWSGI 绑定0.0.0.0或走 Nginx 反向代理页面能开但 CSS/图片加载失败Nginx 配置没包含location /static/补上静态目录映射重启 Nginx视频播放卡顿或无法拖进度Nginx 没开启 Range 或文件路径错误在 location 中加入add_header Accept-Ranges bytes;留言板中文乱码数据库字符集不是 utf8mb4重建表指定DEFAULT CHARSETutf8mb4域名在别人电脑上解析不了只配了本机 hosts用 dnsmasq 内网DNS或改路由器DNS数据库连接超时MySQL 绑定地址为 127.0.0.1修改bind-address 0.0.0.0授权允许远访问访问日志里出现大量重复请求可能是网页轮询或爬虫用 Nginx 的limit_req模块限制单IP请求频率4.2 一次“异常流量”告警的排查手记调试接近尾声时学校机房里的安全网关弹了一个提示“系统检测到您的计算机网络中存在异常流量。”这是我遇到过最有意思的一个问题因为网站明明功能正常怎么会有异常流量。排查第一步我先看 Nginx 的访问日志。发现某个 IP 在几十秒内反复请求/admin/login.php、/wp-login.php、/.env这类路径。这是一台扫描器在遍历网站试图找后台入口和配置漏洞并不是网站本身出问题。安全网关检测到这种高频探测就把它标记为异常流量。进一步用ss查看连接状态发现来自那个 IP 的 TCP 连接保持在 SYN_RECV 状态说明它在不停尝试建立新连接但在等第三次握手确认典型的半连接扫描特征。我用 tcpdump 抓包确认sudo tcpdump -i eth0 -n tcp port 80 and host 192.168.xx.xx抓到的包里全是 SYN 请求没有后续正常的 HTTP GET这基本可以确认是端口扫描或者恶意探测。解决办法是在 Nginx 里限制并发和请求频率limit_req_zone $binary_remote_addr zonecourse_limit:10m rate5r/s; server { listen 80; server_name course.jingpin.local; location / { limit_req zonecourse_limit burst10 nodelay; include uwsgi_params; uwsgi_pass 127.0.0.1:3031; } }同时在防火墙里只允许校园网网段访问阻断其他来源的探测。经过处理后安全网关的告警逐渐消失。这个案例特别适合写进课设报告因为它是“流量异常检测”和“访问控制策略”的活教材比单纯做网站模板要深刻得多。4.3 几个非常值得注意的坑除了上面表格里的问题还有几个隐蔽的坑。第一是 Nginx 的缓存我改了 CSS 文件后浏览器里始终是旧的清缓存也没用。原因是有个反向代理层把静态资源缓存了最后在 Nginx 的 location 里加proxy_cache_bypass或者给静态文件请求加版本号参数才解决。第二是 MySQL 授权时不能只给rootlocalhost授权。要从 Flask 后端连数据库用的用户最好是单独创建的例如course_user并只授权这个库的权限CREATE USER course_userlocalhost IDENTIFIED BY your_password; GRANT ALL PRIVILEGES ON course.* TO course_userlocalhost; FLUSH PRIVILEGES;这样可以避免应用账号直接使用 root 的高权限哪怕被注入了也删不了其他库。第三是上传课件和视频时文件名一定不要用中文和空格。早期我把文件名直接放到 URL 里浏览器会转义链接反复失效。后来统一改成英文和下划线再用数据库记录原始文件名展示时读取原始文件名给用户下载这样既不破坏 URL也能正常显示中文名称。这个经验在处理所有静态资源时都通用。5. 验收演示与经验扩展5.1 演示时怎么讲出“计算机网络”含量答辩和验收的时候不要一上来就点开首页而是先讲网络拓扑。我准备了一张简单的拓扑图一台 Web/数据库服务器、一台路由器/交换机、若干终端设备用文字标注每台设备的 IP、网关和 DNS。然后现场演示三件事第一在终端上用ping course.jingpin.local能看到域名解析成 192.168.10.10并且时延正常。第二打开 Wireshark在服务器端抓访问课程首页的包能看到 TCP 三次握手和 HTTP GET 请求。第三在留言板提交一条留言再到数据库里查这条记录证明前后端和数据库链路是通的。这三步操作比讲十页 PPT 都有说服力老师一看就知道你确实理解了网络通信的完整路径。5.2 报告和收尾建议课设报告的结构我建议分这几块需求分析、总体设计、网络拓扑与 IP 规划、数据库设计、核心功能实现、测试结果、故障处理记录、总结展望。其中“故障处理记录”一定要写实比如我前面写的异常流量告警就详细写了观测现象、抓包结果、处理方案和最终效果。老师最反感那种全篇都是“实现了什么功能”但没有任何问题分析的报告因为真实项目不可能没有坑。报告里的 IP 地址表、域名映射、Nginx 配置片段、数据库表结构全部要有注释。我还在附录里放了 Wireshark 抓包截图每张图下配两三句说明解释这个包是在哪个阶段出现、标志位有什么含义、对应哪一次通信过程。这样做的好处是即使答辩时间很短老师翻到附录也能快速理解你的网络设计。5.3 如果再让我做一次我会改什么这个项目做完之后我最大的体会是精品课程网站设计的难点不在页面而在“让这个网站在正确的位置提供正确的服务”。如果再给我一次机会我会直接给网站加上 HTTPS用自签名证书虽然会被浏览器报不安全但能借机把 SSL/TLS 握手过程讲明白也算多一个知识亮点。我也会把部署过程写成自动化脚本用 Ansible 一键配置 Nginx、MySQL 和 Flask 环境这样换一个网络环境重新部署时就不用一个命令一个命令地敲。对于还在做课设的人我最后分享一个实用技巧每一步配置完成之后立刻用命令验证。比如改完 Nginx 配置就运行nginx -t改完 hosts 就ping一下域名改完数据库授权就用远程客户端连一次。别等到所有配置都写完了再一次性测试否则一旦报错你会分不清是 Web 服务、数据库、防火墙还是域名解析出问题。小步验证才是这种网络类课设最省时间的推进方式。本文还有配套的精品资源点击获取