黑马商城项目(二)

本文介绍了黑马商城项目的实现细节,包括前台分类信息的展示,使用Ajax和CategoryServlet获取JSON数据;商品分页展示,通过Servlet、Dao、Service层处理并使用jsp页面展示商品;同时讲解了单个商品详情页面的实现,以及如何通过ProductServlet展示最新和热门商品。

黑马商城项目(二)

前台分类信息展示

在head.jsp中有以下js代码:

        $(function () {
   
   
            var url = "${pageContext.request.contextPath}/category";
            var params = "method=findCategory";
            $.post(url,params,function (d) {
   
   
                $(d).each(function (a,b) {
   
   
                    $("#u1").append("<li><a href=${pageContext.request.contextPath}/product?
                    method=findPage&pageNumber=1&cid="+b.cid+">"+b.cname+"</a></li>");
                })
            },"json");
        })

通过ajax方式,首先访问CategoryServlet中的findCategory()方法,查询并以json格式返回Category的List集合d
b.cname即是最终导航栏显示的分类信息。

点击某一个分类后,会访问ProductServlet中的findPage()方法,传递当前页数:1和分类ID:cid。

分类商品的分页展示

Servlet中的findPage()方法:

public String findPage(HttpServletRequest request, HttpServletResponse response) 
{
            // 获取分类的ID
            String cid = request.getParameter("cid");
            // 获取当前页数
            int pageNumber =Integer.parseInt(request.getParameter("pageNumber"));
            // 设定每页显示的条数
            int pageSize=12;
            // 带着参数调用service
            ProductService ps=new ProductServiceImpl();
            PageBean pb = ps.findPage(cid,pageNumber,pageSize);
            //将返回的PageBean对象和分类ID存储,供jsp页面使用
            request.setAttribute("pb", pb);
            request.setAttribute("cid", cid);
}

Dao层查询每页显示的数据(select * from product where cid = ? limit ?,?),Service层调用Dao后再进行条数页数的设置并封装进javabean,返回给servlet。

Service层的findPage()方法:

public PageBean findPage(String cid, int pageNumber, int pageSize) throws Exception {
        ProductDao pd=new ProductDaoImpl();
        <
### 马黑商城项目常见问题及其解决方案 #### 背景介绍 在开发过程中,无论是前端还是后端,都会遇到各种各样的技术难题。以下是针对黑马商城项目中常见的几个典型问题以及其对应的解决方案。 --- #### 1. Vue组件命名冲突导致的错误 **问题描述**: 如果Vue组件名称不符合规范(如单词过短或与其他文件名冲突),可能会引发构建失败或其他异常行为。例如,在某些情况下,`Login.vue`可能被误识别为其他资源[^1]。 **解决方案**: 将简单的组件名称更改为复合单词形式,比如将`Login.vue`重命名为`Login-comp.vue`。这样可以有效避免因文件名不规范而导致的问题。 --- #### 2. `less-loader`未安装引起的背景色设置报错 **问题描述**: 尝试通过CSS预处理器Less来设置样式时,若缺少必要的加载器工具,则会抛出类似以下错误:`Error: Can't resolve 'less-loader'`。 **解决方案**: 确保已正确安装并配置`less-loader`插件。可以通过执行以下命令完成安装: ```bash npm install less less-loader --save-dev ``` 随后更新Webpack配置文件以支持`.less`扩展名解析。具体实现方式取决于当前使用的框架版本和环境设定。 --- #### 3. 微服务间接口调用优化策略 **问题描述**: 多个微服务频繁访问同一目标服务的数据接口时,容易造成大量冗余代码堆积,增加维护成本的同时也降低了系统的可读性和灵活性[^2]。 **解决方案**: 采用集中化管理的设计理念——创建独立于各个业务逻辑之外的基础库作为共享层。例如: - **方案一**: 将共通功能提取至单独的Module (`hm-api`) 中统一维护; - 此方法操作简便快捷,适合初期快速迭代阶段使用。 - 缺点在于整体架构紧密相连,一旦基础部分发生变化则需同步调整多处关联位置。 - **方案**: 各自内部封装专属Helper Class 或 Utility Functions 来处理跨域请求事务; - 对应场景更适合长期稳定运行的大规模分布式体系结构设计需求。 - 工程目录规划较为繁琐细致,但能够显著提升模块间的解耦程度。 实际案例分析表明,“黑马商城”最终选择了前者即“公共module”的模式来进行日常运维管理工作。 --- #### 4. HBuilderX分包选项定位困难 **问题描述**: 新版HBuilderX界面布局有所改动,使得原本显眼的功能入口变得难以察觉。特别是对于初次使用者而言,寻找诸如“分包”这样的高级特性尤为费劲[^3]。 **解决方案**: 经过探索得知,最新版软件确实对该区域进行了重新安排布置。用户只需留意屏幕右下方角落即可轻松找到对应按钮图标。 --- ### 结论 综上所述,面对复杂的电子商务平台建设过程中的各类挑战,合理运用上述提到的技术手段可以帮助开发者高效解决问题,从而保障项目的顺利推进。 ---
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值