
简介这份资源是广开国开电大《网络编程技术》课程实践技能训练1的完整答案包面向电大、国开网络技术相关专业学员用于完成“制作简易购物车页面”实操任务也适合正在学习HTML、CSS与JavaScript入门知识的开发者参考。资源共5个文件包含HTML页面、CSS样式文件、JavaScript脚本以及两张图片素材压缩包约62KB文件结构清晰便于直接解压运行。目前已有252人学习下载。内容以购物车页面实现为核心覆盖页面结构搭建、CSS美化与响应式布局、按钮点击事件处理、商品数量合法性校验、总价计算及本地存储等关键知识点其中JavaScript脚本还展示了addEventListener、localStorage等常见前端API的用法对理解浏览器交互逻辑很有帮助。该答案包提供了完整可运行的前端源码与配套图片既可用于课程作业提交也可作为对照练习和排错参考能帮助初学者快速掌握一个简单购物车页面的完整开发流程。 很多人一看“广开国开电大网络编程技术实践技能训练1”这个标题第一反应是找现成答案但我个人的体会是这门课真正有价值的地方不在于交作业那一下而在于把网络编程里最核心的几块内容亲手跑通一遍。如果你正在为这个训练头疼或者想补一补网络编程技术的基础这篇文章可以当作一份可参考的学习路线和实践笔记来看。我会从训练背后的考核点讲起把HTTP、Socket、前后端交互这些常见模块逐个拆开附上可直接复制运行的代码示例再把我自己踩过的坑和排查技巧一并整理出来。1. 这个训练到底在练什么1.1 先搞清楚考核范围网络编程技术这门课放在开放教育的技术类专业里考察的通常不是偏门框架而是那些“放之四海皆准”的基础能力。各分校、各专业方向的具体题目会有差异但核心范围基本集中在以下几个方面网络协议基础TCP/IP分层模型、IP地址与端口、DNS解析过程。HTTP协议应用请求方法、状态码、请求头与响应头、Cookie与Session。Socket编程面向TCP的客户端与服务端通信、面向UDP的数据报通信。客户端与服务器交互表单提交、JSON数据解析、Ajax/Fetch请求。简单网络应用开发用Python或Java实现一个能跑通的最小HTTP服务端或聊天程序。换句话说训练题不管怎么出最终都在考验“客户端发请求、服务端处理请求、两边的数据按既定格式流动”这条主链路。抓住这条链路你会发现很多题目其实换汤不换药。1.2 为什么说“答案”不是重点我看到很多同学在找现成代码但如果你只是把代码抄上去考评时稍微改个端口号、换个协议、加一个异常处理可能就不知道怎么改了。更实在的做法是把每一次训练当成一个“最小项目”来做亲手敲一遍代码然后改动参数观察结果。这门课和算法题不一样网络编程的是非对错几乎都能通过网络抓包、日志打印来验证自己动手验证过一遍比背十份答案都管用。2. 动手前必须补齐的协议底子2.1 TCP/IP分层模型网络编程技术里如果你不理解TCP和IP的分工后面看Socket代码会有些费劲。简单类比IP地址解决的是“数据包从哪台机器到哪台机器”类似快递寄件时的地址TCP解决的是“这台机器上的哪个程序收这份数据”以及“数据有没有丢、顺序对不对”类似快递签收和拆包核对。UDP则不关心签收只管发适合视频通话、DNS查询这类能容忍少量丢失的场景。这一块在训练题里最常见的考法是让你写出TCP建立连接的“三次握手”过程以及TCP和UDP的区别。三次握手可以这么记客户端先发一个SYN说“我想连你”服务端回SYNACK说“收到我也能连你”客户端再回ACK说“好开始传数据”。两个端点各自确认了收发能力连接才算建立。2.2 HTTP协议的核心要素HTTP本身也是构建在TCP之上的应用层协议。一个完整的HTTP请求包含请求行、请求头、空行和请求体四部分。响应则包含状态行、响应头、空行和响应体。这里面有很多细节是训练题的高频考点要素示例说明请求方法GET /index.html HTTP/1.1标识操作类型GET用于获取POST用于提交状态码200 OK / 404 Not Found / 500 Internal Server Error服务端对请求的处理结果请求头Host、User-Agent、Content-Type描述客户端能力和请求体格式响应头Content-Type、Content-Length、Set-Cookie描述响应体格式和附加信息一个容易被忽视的知识点GET请求的查询参数放在URL里POST请求的参数放在请求体里。前者适合从服务端取数据后者适合向服务端提交数据。考虑到URL会出现在浏览器历史和服务器日志中敏感信息一定不要放在GET请求里。3. 训练中最高频的实操环节用一个Python程序跑通TCP通信3.1 TCP Socket服务端示例很多实践训练题的必做环节是写一个基于TCP的简易通信程序。Python的socket内置模块非常适合做这件事。下面这个服务端代码实现的功能是接收客户端发送的一行文本把它转成大写后再返回。import socket def tcp_server(host127.0.0.1, port8888): # 创建TCP SocketAF_INET表示IPv4SOCK_STREAM表示面向连接的TCP server_socket socket.socket(socket.AF_INET, socket.SOCK_STREAM) # 设置SO_REUSEADDR避免程序退出后端口被占用 server_socket.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1) server_socket.bind((host, port)) server_socket.listen(5) print(f服务端已启动监听 {host}:{port}) while True: client_socket, client_addr server_socket.accept() print(f收到来自 {client_addr} 的连接) try: data client_socket.recv(1024) if data: print(f收到数据: {data.decode(utf-8)}) response data.decode(utf-8).upper() client_socket.sendall(response.encode(utf-8)) except Exception as e: print(f处理连接时出错: {e}) finally: client_socket.close() if __name__ __main__: tcp_server()你运行这段代码后服务端会一直挂着等待连接。listen(5)里的5表示连接队列的最大长度超过这个数的新连接会被拒绝。实际写训练题时这个值不用太在意但有时会被问到心里有个数就行。3.2 TCP Socket客户端示例客户端相对简单核心就是创建socket、connect、send、recv四步。import socket def tcp_client(host127.0.0.1, port8888): client_socket socket.socket(socket.AF_INET, socket.SOCK_STREAM) try: client_socket.connect((host, port)) message hello, network programming client_socket.sendall(message.encode(utf-8)) response client_socket.recv(1024) print(f服务端返回: {response.decode(utf-8)}) except Exception as e: print(f连接或通信出错: {e}) finally: client_socket.close() if __name__ __main__: tcp_client()我遇到不少朋友在这段代码上报错最常见原因是先启动了客户端、后启动服务端或者服务端忘了先运行。还有一种是防火墙把端口拦住了。在训练环境里如果服务端和客户端都在同一台机器上建议直接用127.0.0.1这个地址就是“本机回环地址”不经过网卡物理链路可以避开很多网络限制。3.3 为什么同时要会写服务端和客户端训练题里有时只要求写服务端有时只要求写客户端但我的建议是哪边都要动手跑一遍。道理很简单不了解服务端怎么解析请求就不会知道客户端该用什么格式发数据不了解客户端怎么封装请求也不会知道服务端该怎么提取参数。这种“双向理解”在考试和实际工作中都很重要。哪怕题目只要求其中一端也把另一端写上做联调你会发现很多只是看书根本注意不到的问题。4. 另一种常见考法用原生库实现简易HTTP交互4.1 服务端返回JSON在实践技能训练里面HTTP相关的题目通常会涉及JSON。JSON本质上就是一个大家都认的文本格式服务端把处理结果按这个格式拼好客户端再按这个格式解析。下面是Python标准库提供的HTTP服务端示例功能是接收GET请求返回一个JSON字符串import json from http.server import BaseHTTPRequestHandler, HTTPServer class SimpleHandler(BaseHTTPRequestHandler): def do_GET(self): # 设置响应状态码为200 self.send_response(200) # 告诉客户端返回内容的类型是JSON self.send_header(Content-Type, application/json; charsetutf-8) self.end_headers() data {message: hello from server, status: ok} self.wfile.write(json.dumps(data, ensure_asciiFalse).encode(utf-8)) def log_message(self, format, *args): # 关闭默认的日志输出让控制台保持干净 pass if __name__ __main__: server HTTPServer((127.0.0.1, 8000), SimpleHandler) print(HTTP服务端已启动端口8000) server.serve_forever()这里每行头字段设置后面都要手动调end_headers()很多人忘了这一行结果客户端收不到完整的响应头。另一个细节是ensure_asciiFalse不写这个参数的话中文会变成\uXXXX形式的转义序列显示起来不直观。4.2 客户端用requests库发请求现成的第三方库requests虽然不在课程标准库里但自己练习时用它非常方便。如果你用的是Python 3安装只需一行pip install requests然后可以这样写客户端import requests try: resp requests.get(http://127.0.0.1:8000, timeout5) print(状态码:, resp.status_code) print(响应JSON:, resp.json()) except requests.exceptions.ConnectionError as e: print(连接失败请确认服务端已启动:, e) except requests.exceptions.Timeout: print(请求超时)如果题目要求不用第三方库也可以用urllib.request替代但代码会繁琐一些。requests对训练和调试来说是更顺手的工具。4.3 前端侧用fetch发起请求有些训练题会给你一个前端页面要求通过点击按钮向某个接口发请求并渲染结果。这里示例用浏览器的fetch函数fetch(http://127.0.0.1:8000) .then(response { if (!response.ok) { throw new Error(HTTP error, status response.status); } return response.json(); }) .then(data { console.log(data.message); document.getElementById(result).innerText data.message; }) .catch(error { console.error(请求失败:, error); });在浏览器里直接打开HTML文件使用fetch时如果请求的是另一个端口浏览器会有跨域限制。最简单的解决办法是让服务端响应头里加上Access-Control-Allow-Origin: *。课程训练通常不要求做前端但这一步一旦卡住很容易让人误以为是代码错了实际问题出在浏览器跨域策略。5. 训练题里的非代码考核点别丢分5.1 状态码与请求方法的区分实践训练考核不只限于写代码有时会穿插简答或选择比如“200、301、403、404、500分别代表什么”。这里有一点值得注意301是永久重定向302是临时重定向很多人在这一点上混淆。还有一个常见误区是觉得“404就是服务器挂了”实际上404表示服务器正常运行但没找到对应资源服务器不可用通常是502或503。状态码含义典型场景200请求成功页面或接口正常返回301永久重定向网站换域名后跳转302临时重定向登录后跳转原页面403禁止访问没有权限访问该资源404资源不存在URL路径写错500服务器内部错误服务端代码抛异常502网关错误代理服务器收到无效响应503服务不可用服务器过载或维护中这些状态码不需要死记硬背只在真实请求里多观察几次就自然记住了。我习惯在调试代码时直接把状态码打印出来根据状态码快速定位问题这个习惯也建议大家尽早养成。5.2 协议细节填空题网络编程技术这门课的考核里经常有一些细节题比如传输层的两个主要协议是TCP和UDP。TCP是面向连接的、可靠的传输协议。HTTP默认端口是80HTTPS默认端口是443。DNS的作用是把域名解析为IP地址。Cookie通常由服务器下发存储在客户端Session存储在服务器端。这些考点单独看都不难但如果只看不练会很快遗忘。我的建议是把它们和实操步骤绑定记忆比如你写完一个HTTP服务端后顺手把“默认端口80”这个信息记在旁边这样记忆比干背牢固得多。6. 常见问题与排查技巧实录6.1 端口被占用写Socket或HTTP服务端时最常遇到的一个报错是Address already in use。原因往往是上一次运行的程序没有正常退出或者别的进程占了同一个端口。解决办法分两步走换一个端口号比如从8000改成8001快速验证代码逻辑是否正确。找到占用进程并结束它在Windows上可以执行netstat -ano | findstr 8000在Linux或macOS上可以执行lsof -i:8000拿到PID后结束进程。这里简单说明一下为什么代码里要写setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)在程序崩溃或重启时端口会进入TIME_WAIT状态如果不设置这个选项短时间内重复监听同一个端口就可能被拒绝。6.2 收发数据编码错乱网络编程训练里中文乱码是高发问题。核心原因在于发送端和接收端使用的字符编码不一致。我常用的排错顺序是约定统一使用UTF-8发送时encode(utf-8)接收时decode(utf-8)。查看响应头里的Content-Type是否带了charsetutf-8。如果客户端是浏览器打开开发者工具的网络面板查看响应体实际字节内容。有一些截图里看到乱码是因为decode()没带参数Python默认按UTF-8解码如果对方实际发送的是GBK就会报错或乱码。做训练时双方提前约定好编码格式是省事的第一步。6.3 客户端连不上服务端如果你运行客户端时提示“目标计算机积极拒绝”或“Connection refused”基本不是代码逻辑问题而是服务端根本没有监听你连接的那个端口。排查顺序建议如下先确认服务端是否真的启动了有没有打印出监听日志。再确认IP和端口是否写对127.0.0.1和localhost一般等价但有些环境里服务端绑定了别的IP。如果服务端和客户端不在一台机器上还要检查防火墙是否放行对应端口。这种问题在实践中很常见也最锻炼人。把每一次“连不上”当作抓包和日志分析的练习机会积累几个典型场景后你面对网络程序会从容很多。7. 我的学习建议与后续扩展方向如果你现在正准备这门课的实践技能训练我的核心建议是先别急着搜答案把上面的示例代码从头到尾自己敲一遍。运行通了之后试着改一改把TCP改成UDP把接收的数据从大写改成语种统计把服务端改成多线程支持多个客户端同时连接。每改一个点你对网络编程技术的理解就会深一层。后面如果想进一步扩展可以尝试用Python写一个极简的HTTP服务器支持GET和POST两种方法用字典存储提交的数据或者用浏览器开发者工具分析某个网站请求的Header和Payload看看实际网络交互是怎么发生的。实践技能训练只是一个起点它想考察的并不是你背了多少代码而是你能不能独立地、规范地搭建一条能跑通的数据通路。这条路跑通了后面再接触Flask、Django、Spring Boot之类的框架都会觉得顺理成章。本文还有配套的精品资源点击获取