2023年度河北省职业院校技能竞赛“Web技术”（高职组）赛项（样卷B）竞赛任务

模块一系统设计任务一PC端商品分类功能设计说明书文档的编写任务描述：分析商品分类模块的功能，根据任务十的功能需求，参照U盘中“Web前端开发赛项试卷”目录中的“系统设计说明书（模板）”文档格式，完成管理端商品分类管理模块设计说明书文档的编写。要求：文档要符合软件规范要求。提交作品：需要提交管理端商品分类管理模块设计说明书。分值：本任务共10分。模块二程序排错任务二在移动商城端商城首页的精品推荐商品显示异常任务描述：进入移动商城端的商城页面，商城页面显示如图2-1所示。精品推荐商品价格不显示，正常情况应为显示销售价与市场价如图2-1右图所示，请查明原因并修改。图2-1APP商城页面要求：修改完代码之后，应为四个宫格一字排开且无边框。提交作品：保存修改之后的页面。分值：本任务共5分。任务三PC端商城购物车合计金额不能正确显示任务描述：在PC端商城进入购物车页面。如图2-2所示，选中购物车里面的商品，修改商品数量，下方合计金额不能正确显示。图2-2购物车列表页面要求：修改完代码之后，选中商品、修改商品数量后可成功计算出合计金额。提交作品：保存修改之后的页面。分值：本任务共5分。任务四APP端商城输入相同的手机号注册新用户时，页面显示了SQL错误。任务描述：在APP端商城输入相同的手机号注册新用户时，页面显示了SQL错误。正常情况应该显示该手机号已存在。要求：修改完代码之后，相同手机号注册时应提示手机号已存在。提交作品：保存修改之后的代码。分值：本任务共10分。

模块三功能编码任务五在PC商城个人中心实现收藏商品页面布局任务描述：在PC商城首页点击我的-个人信息-我的收藏可进入收藏页面，如图所示。每行五件商品显示图片、名称、价格、取消收藏按钮、查看详情按钮，点击取消收藏可取消收藏该商品，点击查看详情按钮可跳转至商品详情页、点击批量管理，右上角为全选、取消收藏、保存三个选项，如图所示。图3-1我的收藏图3-2批量管理要求：1．每行五件商品显示图片、名称、价格、取消收藏按钮、查看详情按钮。2．点击取消收藏可取消收藏该商品，点击查看详情按钮可跳转至商品详情页。3．点击批量管理可显示全选、取消收藏、保存按钮、如图，点击全选可全选中商品，被选中的商品的右上角显示被选中状态（未选中灰色、选中橙色），也可单选后点击取消收藏可取消收藏。提交作品：保存完成的页面。分值：本任务共10分。其他：【API接口参考】接口名称API我的收藏API00:8086/api/collect/user?type=collect取消收藏api00:8086/api/collect/del批量取消收藏api00:8086/api/collect/dels/{id},{id},{id}任务六在PC商城首页实现商品搜索功能任务描述：在PC商城首页点击搜索栏输入搜索信息点击搜索按钮，可查询出相关商品，显示商品图片、商品名称、商品市场价与商品价格，商品简介，点击价格可根据价格进行排序，默认每页显示12个商品，左上角“全部结果”后显示搜索内容名称。图3-3搜索商品信息要求：1．输入搜索信息点击搜索按钮，可查询出相关商品，显示商品图片、商品名称、商品市场价与商品价格，商品简介。2．点击价格可根据价格进行排序。3．默认每页显示12个商品，左上角“全部结果”后显示搜索内容名称。提交作品：保存完成的页面。分值：本任务共10分。其他：【API接口参考】接口名称API搜索商品API00:8086/api/products任务七在PC商城端实现钱包充值功能任务描述：设计PC商城端钱包充值页面，进入个人中心下的钱包充值页面，显示充值方案，如图3-4所示，点击充值可根据相应的充值方案进行充值。图3-4我的钱包充值页面要求：1．设计PC商城端钱包充值页面，如图3-4所示。2．显示充值方案列表。3．点击立即使用按钮可根据充值方案进行充值。提交作品：保存完成的页面。分值：本任务共8分。其他：【API接口参考】接口名称API充值方案API00:8008/api/recharge/index模拟充值API00:8008/api/recharge/test详见U盘\02竞赛平台手册\中慧Web前端开发平台API稳定性测试报告任务八在移动商城端实现商品列表功能任务描述：在移动商城端，点击首页菜单栏中的全部商品则可进入商品列表显示普通商品，且可以根据综合（后台默认排序）、价格（根据价格排序）、新品，三种情况进行排序，进入页面默认为综合排序，普通商品如图3-5所示，当列表商品超过10个时，只加载十个并在最底部显示“点击加载更多”选项，如图3-6所示，并且每次点击增加十条数据，当点击排序，且列表商品超过10个时，只加载十个并在最底部显示“点击加载更多”选项。图3-5全部商品图3-6点击加载更多要求：点击首页菜单栏中的全部商品则可进入商品列表显示普通商品。可以根据综合（后台默认排序）、价格（根据价格排序）、新品，三种情况进行排序，进入页面默认为综合排序。当为任意类型排序时，且列表商品超过10个时，只加载十个并在最底部显示“点击加载更多”选项，并且每次点击增加十条数据。提交作品：保存完成的页面。分值：本任务共10分。其他：API名称：商品列表API接口名称商品列表APIAPI地址00:8008/api/products详见U盘\02竞赛平台手册\中慧Web前端开发平台API稳定性测试报告任务九在PC商城个人中心实现地址管理功能任务描述：在PC商城端【我的收货地址】实现收货地址的管理，包括收货地址显示、增加、删除、修改和设为默认地址。图3-7新增地址栏 图3-8新增地址栏-所在区域图3-9我的地址列表页要求：1.点击新增收货地址按钮弹出新增地址页面如图3-7，页面中有4个数据项：所在区域、详细地址、收货人签名、手机号码。所在区域需实现三级联动功能如图3-8所示。选中“设置为默认收货地址”时该地址被保存为默认收货地址。2.收货地址列表页面如图3-9所示。点击“设为默认地址”开关，该地址被设置为默认地址；点击“修改”按钮，弹出修改地址页面进行修改；点击“删除”按钮，提醒用户是否删除该地址，确定后进行删除。提交作品：保存完成的页面。分值：本任务共12分。其他：【API接口参考】接口名称API获取地址列表API00:8008/api/address/list获取城市列表API00:8008/api/city_list新增/编辑地址API00:8008/api/address/edit删除地址API00:8008/api/address/del详见U盘\02竞赛平台手册\中慧Web前端开发平台API稳定性测试报告V2.2任务十在PC商城首页实现商品分类和分类列表展示功能任务描述：在PC商城首页显示商品分类信息，包括二级分类。点击二级分类可跳转至商品列表页面。商品列表页面需分页显示，并可按价格排序。图3-10商品首页分类信息图3-11商品列表显示要求：1．首页显示商品分类信息，需要实现树形结构展示分类信息如图3-10所示。2．点击商品二级分类，跳转至商品列表页面如图3-11所示。商品列表页面中每行显示4个商品，1页显示12个商品，每个商品显示商品名称、商品价格信息。3．商品列表页面点击“价格”可以按照价格对商品进行排序提交作品：保存完成的页面。分值：本任务共12分