一、摘要
本研究设计并实现了一款基于 Linux 平台的轻量级商品展示与查询 Web 系统。系统采用 C 语言开发，通过 Socket 网络编程构建 Web 服务器，集成 SQLite 嵌入式数据库实现数据存储与查询，核心功能涵盖用户登录验证、商品列表展示、关键字搜索及商品详情查看。
二、技术栈
| 分类 | 技术/工具 |
| 网络通信 | Linux Socket（TCP 协议）、HTTP/1.1 协议（请求解析与响应构建） |
| 数据库 | SQLite3（嵌入式关系型数据库，数据库文件为 123.db） |
| 数据处理 | URL 编解码工具（处理中文及特殊字符参数） |
| 编译环境 | GCC 编译器（支持 C99 标准） |
| 运行环境 | Linux 系统（推荐 Ubuntu 16.04+、CentOS 7+） |
| 前端资源 | HTML + 内联 CSS、静态资源（PNG/JPG/ICO 格式图片、HTML 页面） |
三、研究目标
- 基于 Linux Socket 编程构建 Web 服务器，实现 HTTP 请求解析与响应的完整流程；
- 集成 SQLite 数据库，设计合理数据结构，支撑商品信息的存储与高效查询；
- 实现用户登录验证、商品主页展示、关键字模糊搜索、商品详情查看四大核心功能；
- 处理 URL 编解码、静态资源响应、异常捕获等关键问题，保障系统稳定性与可用性；
四、需求分析
4.1.功能性需求
4.1.1用户登录验证
• 访问根路径获取登录页，输入预设账号（zhangsan/123）提交请求
• 验证通过跳转商品主页，失败返回错误提示
• 处理输入为空、账号错误等异常
4.1.2 商品关键字搜索
• 输入关键字提交请求，系统解码后模糊查询商品名称
• 匹配商品以卡片形式展示（支持跳转详情），无匹配则提示
• 处理关键字解码失败、数据库查询异常
4.1.3 商品详情查看
• 点击商品卡片发送请求，查询商品完整信息（名称、高清图、描述）
• 展示 200px×200px 图片及信息，描述为空显示 “暂无描述”
• 处理解码失败、商品不存在等异常
五、系统设计
5.1 模块设计
| 模块名称 | 职责核心 |
| HTTP 请求接收与解析模块 | 监听 80 端口、接收连接，解析 HTTP 请求方法、URL 及参数 |
| 用户登录验证模块 | 解析账号密码，校验合法性并返回对应页面 |
| 商品搜索模块 | 关键字解码、模糊查询，生成匹配商品列表页面 |
| 商品详情展示模块 | 精确查询商品信息，动态生成详情页面 |
| 数据库访问模块 | 封装 SQLite 操作，提供数据库打开、查询、关闭接口 |
5.2接口设计
5.2.1用户登录模块接口
| 接口名称 | 参数说明 | 返回值 | 接口描述 |
| verify_login | 用户名（字符串）、密码（字符串） | 0：成功，1：失败 | 校验输入的账号密码与系统预设信息（zhangsan/123）是否一致 |
5.2.2商品搜索模块接口
| 接口名称 | 参数说明 | 返回值 | 接口描述 |
| db_search_goods | 搜索关键字（字符串） | 字符串（HTML 片段） | 进行模糊查询，返回含商品名称、缩略图路径的 HTML 列表片段 |
| handle_goods_search | 通信通道标识、搜索关键字 | 无 | 进行 URL 解码生成结果，发送至客户端 |
5.2.3数据库模块接口
| 接口名称 | 参数说明 | 返回值 | 接口描述 |
| db_open | 数据库文件名 | 数据库操作句柄 / 空指针 | 打开指定 SQLite 数据库文件（默认 123.db），失败返回空指针 |
| db_query_goods | 数据库句柄、查询关键字 | 结果集 / 空 | 执行商品名称模糊查询，返回商品名称、图片路径的基础 |
六、系统实现
核心代码与实现界面
6.1 登录页（web_enroll.html）核心表单代码
1.搭建基础 HTML 结构，配置 UTF-8 字符编码与页面标题；
2. 设计登录表单，绑定/login接口（GET 请求），设置用户名 / 密码输入框（必填校验）；
3. 关联静态资源模块，校验参数完整性，返回登录结果页面。
<form action="/login" method="GET" style="text-align:center; margin-top:50px;"> <input type="text" name="username" placeholder="用户名（zhangsan）" required style="margin:5px; padding:8px;"> <input type="password" name="userpass" placeholder="密码（123）" required style="margin:5px; padding:8px;"> <button type="submit" style="padding:8px 20px;">登录</button> </form>
6.2 商品主页（web_find.html）核心搜索与列表容器代码
1.构建 HTML 框架，嵌入搜索表单（绑定/search接口）；
2. 创建弹性布局的商品列表容器，预留动态填充位置；
3. 登录成功后，后端查询数据库商品基础信息，生成卡片 HTML 嵌入容器。
<!-- 核心：搜索框 + 商品列表容器（后端动态填充商品卡片） --> <div style="text-align:center; margin:20px;"> <form action="/search" method="GET"> <input type="text" name="keyword" placeholder="输入商品关键字搜索" required style="padding:8px; width:300px;"> <button type="submit" style="padding:8px 15px;">搜索</button> </form> </div> <div class="goods-list" style="display:flex; flex-wrap:wrap; gap:15px; padding:20px;"> <!-- 后端通过数据库查询结果动态生成商品卡片，插入此处 --> </div>
6.3 搜索结果页（后端动态生成核心代码）
1.解析 URL 中的搜索关键字，执行 URL 解码处理；
2. 调用数据库模糊查询接口，匹配商品名称；
3. 拼接商品卡片 HTML（含详情跳转链接），封装 HTTP 响应返回。
<div class="search-result" style="display:flex; flex-wrap:wrap; gap:15px; padding:20px;"> <!-- 后端通过db_search_goods接口返回的HTML片段插入此处，示例卡片结构： --> <div style="border:1px solid #ddd; border-radius:8px; padding:10px; text-align:center;"> <a href="goods_detail.html?name=xxx"><img src="img/xxx.png" style="width:100px; height:100px;"></a> <p>商品名称</p> </div> </div>
6.4 商品详情页（后端动态生成核心代码）
1.解析请求中的商品名称参数，完成 URL 解码；
2. 调用数据库精确查询接口，获取商品完整信息（名称、高清图、描述）；
3. 生成详情 HTML（200px 高清图 + 名称 + 描述），描述为空显示 “暂无描述”。
<div class="goods-detail" style="text-align:center; padding:20px;"> <img src="img/xxx_hd.png" style="width:200px; height:200px; object-fit:cover; border-radius:8px;" /> <h3 style="margin:10px 0;">商品名称</h3> <p style="max-width:600px; margin:0 auto; line-height:1.5;"> </p> </div>七、总结
该系统基于 Linux，以 C 语言 + Socket+SQLite 开发，实现登录验证、商品展示、搜索及详情查看功能，适用于网络编程课程设计，助力理解底层通信与数据库集成技术。不足在于功能单一，无用户注册、商品管理模块，界面仅基础美化，且并发处理能力有限，难以支撑多用户高并发访问。
