17370845950

首先设计Product类封装商品信息，包含id、name、price、category等字段；接着用List模拟数据库，实现获取全部商品、按分类查询和关键词搜索方法；然后通过Java自带HttpServer创建Web服务，监听8080端口，提供/products、/products/category和/products/search三个接口返回JSON数据；最后编写HTML页面，使用JavaScript的fetch请求加载商品并渲染为卡片列表，支持下拉选择分类和输入框实时搜索，完成基础浏览功能。

开发一个小型在线商城的商品浏览功能，核心是实现商品展示、分类查询和搜索功能。Java作为后端语言，配合简单的前端页面和数据库，就能快速搭建出可用的系统。重点在于设计合理的类结构和接口逻辑。

1. 设计商品实体类（Product）

商品浏览的基础是商品数据模型。创建一个Product类，包含商品的基本信息：

• id：商品唯一标识
• name：商品名称
• price：价格
• category：分类（如手机、服装）
• description：描述
• imageUrl：图片链接

这个类用于封装从数据库查出的数据，也方便传输到前端。

2. 搭建简易数据访问层

使用List模拟数据库存储，适合学习阶段：

• 初始化几个测试商品，放入ArrayList
• 写一个getAllProducts()方法返回全部商品
• 实现getProductsByCategory(String category)按分类筛选
• 提供searchProducts(String keyword)按名称模糊查找

后续可替换为JDBC连接MySQL，或使用Spring Data JPA简化操作。

3. 创建HTTP服务暴露接口

用HttpServer类（Java自带）启动轻量Web服务：

• 监听本地8080端口
• 注册/products路径，返回所有商品JSON
• 注册/products/category支持分类查询（带参数）
• 注册/products/search接收关键词进行搜索

每个请求处理中调用对应的数据方法，把List转成JSON字符串响应。

4. 简单前端页面展示商品

写一个HTML页面，用JavaScript发送fetch请求：

• 加载时请求/products获取全部商品
• 渲染为卡片列表，显示图、名、价
• 添加下拉框选择分类，点击后请求对应接口刷新列表
• 搜索框输入时调用搜索接口实时过滤

不需要框架，原生JS加CSS就能做出清晰的浏览界面。

基本上就这些。先跑通流程，再逐步加入分页、缓存、图片上传等功能。关键是从简单入手，理解前后端交互逻辑。不复杂但容易忽略细节，比如URL参数解析和JSON格式拼接。