2026年度河北省职业院校技能竞赛“Web技术”（高职组）赛项竞赛任务
文章目录
- 2026年度河北省职业院校技能竞赛“Web技术”（高职组）赛项竞赛任务
- 模块一 系统设计
- 任务一 PC端旅游网中城市分类功能设计说明书文档的编写
- 模块二 程序排错
- 任务二 在旅游应用的移动端首页中导航显示异常
- 任务三 旅游应用的移动端中热门景点模块点击热门页面不能按浏览量排序显示。
- 任务四 PC端旅游网结算合计金额不能正确显示。
- 模块三 功能编码
- 任务五 在PC端旅游网实现订酒店页面布局
- 任务六 在移动端，实现个人中心的酒店预约订单详情功能
- 任务七 在旅游应用的移动端实现个人中心中用户的修改
- 任务八 在旅游应用的移动端实现景区酒店列表功能
- 任务九 在PC端旅游网中个人中心实现发布攻略功能
- 任务十 在PC端旅游网首页实现商品分类和分类列表展示功能
- 任务十一 在PC端旅游网实现首页轮播图功能
- 需要培训可联系博主！
模块一 系统设计
任务一 PC端旅游网中城市分类功能设计说明书文档的编写
任务描述：分析PC端旅游网中城市分类模块的功能，根据任务十的功能需求，参照U盘中“Web前端开发赛项试卷”目录中的“系统设计说明书（模板）”文档格式，完成旅游网中城市分类管理模块设计说明书文档的编写。
要求：文档要符合软件规范要求。
提交作品：需要提交旅游网中城市分类管理模块设计说明书。
分值：本任务共10分。
模块二 程序排错
任务二 在旅游应用的移动端首页中导航显示异常
任务描述：进入旅游应用的移动端的首页面，首页显示如图2-1左图所示。导航不透明，正常情况应为顶部导航透明，当滚动条滚动纵坐标大于20导航背景设置为白色如图2-1右图所示，请查明原因并修改。
要求：修改完代码之后，顶部导航为透明，当滚动条滚动坐标大于20导航背景设置为白色。
提交作品：保存修改之后的页面。
分值：本任务共5分。
任务三 旅游应用的移动端中热门景点模块点击热门页面不能按浏览量排序显示。
任务描述：在旅游应用的移动端中热门景点模块点击热门页面不能按浏览量排序显示，如图2-2左图所示。正常应如图2-2右图所示，请查明原因并修改。
要求：修改完代码之后，点击热门页面能按浏览量排序显示。
提交作品：保存修改之后的代码。
分值：本任务共5分。
其他：【API接口参考】
| 接口名称 | API |
|---|---|
| 热门景点API | http://localhost:8089/attractions/getSysAttractionsPage |
任务四 PC端旅游网结算合计金额不能正确显示。
任务描述：在 PC端旅游网进入详情页，选择套餐类型，修改商品数量，上方合计金额不能正确显示。
要求：修改完代码之后，选中套餐类型，修改商品数量后可成功计算出合计金额。
提交作品：保存修改之后的代码。
分值：本任务共10分。
模块三 功能编码
任务五 在PC端旅游网实现订酒店页面布局
任务描述： 在PC端旅游网首页点击订酒店进入订酒店列表页面，如图所示。订单列表一行一列有图片、名称、地址、价格、出售如图3-1所示，城市筛查列表折行显示并能实现按城市筛查酒店，搜索框布局，并实现分页布局如图3-2所示。
要求：
1．订单列表一行一列有图片、名称、地址、价格、出售如图3-1所示。
2．城市筛查列表折行显示并能实现按城市筛查酒店。
3．搜索框布局。
4．实现分页布局如图3-2所示。
提交作品：保存完成的页面。
分值：本任务共10分。
其他：【API接口参考】
| 接口名称 | API |
|---|---|
| 获得城市地址API | http://localhost:8089/webApi/noAuth/getAreaList |
| 订酒店列表API | http://localhost:8089/webApi/noAuth/getHotelList |
任务六 在移动端，实现个人中心的酒店预约订单详情功能
任务描述：在移动端个人中心，进入酒店预约列表页如图3-3所示，点击立即查看详情按钮可底部弹层出订单详情如图3-3所示。
要求：
1．实现底部弹层出订单详情。
2．实现订单详情页面如图3-4所示，“预约状态”区域显示后台返回的订单的信息，如“已确认”。
提交作品：保存完成的页面。
分值：本任务共10分。
其他：【API接口参考】
| 接口名称 | API |
|---|---|
| 酒店预定API | http://localhost:8092/order/getSysHotelOrderPage |
任务七 在旅游应用的移动端实现个人中心中用户的修改
任务描述：在旅游应的移动端，单击【个人中心】标签，进入我的个人中心页面，如图3-5所示，在个人中心页面单击【账号信息】打开账号信息页面，如图3-6所示，在账号信息页面可修改头像、用户名称、邮箱、性别，点击修改可完成账号信息修改。
要求：
1.在旅游应的移动端，单击【个人中心】标签，进入我的个人中心页面。
2.在个人中心页面单击【账号信息】打开账号信息页面，如图3-6所示，在账号信息页面可修改头像、用户名称、邮箱、性别，点击修改可完成账号信息修改。
提交作品：保存完成的页面。
分值：本任务共8分。
其他：【API接口参考】
| 接口名称 | API |
|---|---|
| 头像上传API | http://localhost:8092/user/setUserAvatar/ |
| 获得账号API | http://localhost:8092/user/getUserInfo |
| 修改账号API | http://localhost:8092/user/setUserInfo |
任务八 在旅游应用的移动端实现景区酒店列表功能
任务描述：在旅游应用的移动端点击首页景区酒店标签可进入热门线路列表，如图3-7所示，并且可以点击顶部搜索框输入关键字可查询出匹配的热门路线，如图3-8所示。
要求：
- 实现景区酒店列表。
- 点击顶部搜索框输入关键字可查询出匹配的景区酒店。
提交作品：保存完成的页面。
分值：本任务共10分。
其他：【API接口参考】
| 接口名称 | API |
|---|---|
| 热门线路列表API | http://localhost:8092//hotel/getSysHotelPage |
任务九 在PC端旅游网中个人中心实现发布攻略功能
任务描述： 在PC端旅游网中【发布攻略】实现发布攻略管理。
要求：
- 点击个人中心中发布攻略选项如图3-9，页面中有3个数据项：标题、攻略图片、攻略详情，点击按钮发布攻略，如未填写标题，攻略图片，攻略详情会提示信息。
- 点击旅游攻略分类显示旅游攻略列表页面如图3-10所示，页面有旅游攻略标题、攻略图片、内容、发布人、时间、浏览量。
提交作品：保存完成的页面。
分值：本任务共10分。
其他：【API接口参考】
| 接口名称 | API |
|---|---|
| 添加旅游攻略API | http://localhost:8089/webApi/hasAuth/addGuide |
| 旅游攻略列表API | http://localhost:8089/webApi/hasAuth/addGuide |
任务十 在PC端旅游网首页实现商品分类和分类列表展示功能
任务描述： 在PC端旅游网首页显示模版分类信息，包括二级分类。点击二级分类可跳转至对应城市的景点列表页面。景点列表页面需分页显示。
要求：
1．首页显示旅游网分类信息，需要实现树形结构展示分类信息如图3-11所示。
2．点击旅游网城市的二级分类，跳转至景点列表页面如图3-12所示。景点列表页面显示一行一列，1页显示10个商品，每个商品显示商品图片、商品名称、价格信息、预定按钮、已售。
3．旅游网列表页面实现分页。
提交作品：保存完成的页面。
分值：本任务共12分。
任务十一 在PC端旅游网实现首页轮播图功能
任务描述：在PC端旅游网首页实现首页轮播图如图3-13所示。
要求：在首页旅游网分类右侧实现首页轮播图，多个图片可进行左右切换，如3-13所示
提交作品：保存完成的页面。
分值：本任务共10分。
其他：【API接口参考】
| 接口名称 | API |
|---|---|
| 轮播图API | http://localhost:8089//webApi/noAuth/getIndexAds |
