2022年全省职业院校技能大赛中职学生组web前端开发赛项竞赛试题(A)

2022年全省职业院校技能大赛中职学生组Web前端开发赛项竞赛试题（样卷）第18页共18页2022年全省职业院校技能大赛中职学生组Web前端开发赛项竞赛试题A赛题说明一、竞赛内容本试卷适用于Window10平台，试题包含4个模块，A模块为网页UI设计模块，B模块为网页重构模块，C模块网页交互模块，D模块为数据库操作模块，团队成员分工并行，最终实现各个任务，试卷满分100分，四个模块分别所占比重为：A模块15%，B模块40%，C模块25%，D模块20%二、竞赛时间竞赛时间：共计240分钟。三、竞赛事项要求参赛选手不得携带通信设备、存储设备等物品进入赛场，违反者按作弊处理。请根据大赛所提供的比赛环境，检查所列的硬件设备、软件清单、材料清单是否齐全，计算机设备是否能正常使用。竞赛结束前，将各任务代码整合，统一拷贝到1号计算机的桌面（PC1），并提交一个完整的项目工程目录到大赛组委会提供的U盘中，目录格式如图所示。竞赛结束时，请将U盘、试卷和答题纸统一提交。禁止将比赛所用的所有物品（包括试卷和稿纸）带离赛场。裁判以各参赛队部署到PC1计算机上运行结果为评分依据。严禁在程序及运行结果中任何位置标注竞赛队的任何信息，否则按照作弊处理。PC1：或者localhost

模块A：WebUI设计根据任务要求完成UI效果图设计（15分）【任务要求】根据目录查看A模块下素材文件夹中Images目录中提供的图片素材，通过Photoshopcc2018软件设计一张“某某酒店”首页面。首页面需要包含以下元素：“某某酒店“logo,导航栏，导航栏目需设置以下几项：关于我们，酒店房间，酒店餐饮，酒店分布，公司新闻，联系我们一张banner图片（素材已提供）通过图片列表逐一展示“商务住宿”、“贵宾套房”、“酒吧餐饮”、“会议房间”、“休闲娱乐”、“酒店分布”。酒店概况介绍：“我们商务酒店，创立于2006年，定位于豪华商务连锁酒店。以打造“城央、商务、雅致”的精品商务连锁酒店为产品理念；驻足于重要商旅城市中心，专注于宾客需求与体验；倾力打造以品质、高雅、时尚、智能为主题，以快捷准确、尊贵礼遇的对客服务的特点以塑造精品商务型酒店的典范；为中产白领人士提供优质的酒店住宿服务，打造精品商务连锁酒店品牌。”酒店特色：突出“地理位置优越”，“室内豪华装修”，“高级安全系数”，“住宿环境良好”。酒店房间掠影：通过素材库中的图片，展示酒店房间。网页脚步提供分享至QQ、微信、微博的链接图标【任务提示】将设计好的UI设计图，同时保存为.psd和.jpg两种不同格式，存放于A模块/设计效果图目录即可。

模块B：网页重构根据给定网页效果图和重构代码文件包中的素材，通过HTML5+CSS3完成静态页面重构（40分）【任务提示】推荐使用Photoshop软件打开给定效果图，通过Phosotshop提供的工具，完成颜色取值、间距测量等，尽可能在CSS样式编写中与效果图保持一致。B模块/重构代码/images目录中已给定了可能用到的图片素材（不一定全部使用），请根据效果图选择使用即可；【任务要求】目录中已存在页面文件index.html，参赛选手编写代码，实现网页重构；空白CSS样式文件已建立，如图所示，所有的外观样式均需写在style.css文件中，通过外链式将该css文件链入到index.html中。

模块C：网页交互根据任务要求，完成轮播图网页交互效果【任务提示】C模块路径如图，C模块根目录index.html中，提供了静态轮播图代码，提供了jQuery3.6版本的文件，放置于C模块/js目录中，命名为jQuery.js;index.html中已经有静态页面代码，代码中包括了轮播图的基本结构和css样式，打开后默认显示最后一张图片（slide04.jpg）。【任务要求】通过给已有标签添加id或者class类名，实现DOM操作；鼠标点击轮播图中的左右方向箭头，实现对应图片切换效果，同时对应的小圆点跟着变化；设置定时器，在不点击小圆点的情况下，图片可以实现每间隔2秒，自动切换，并且小圆点跟着图片及时变化。模块D：数据库操作根据项目提示和要求，按照已给页面代码中的注释提示，补全所有代码，实现数据的查询，删除，修改。（20分）【任务提示】如图，根据模块D目录，lst.php为数据展示页面，add.html为添加数据的表单页面，add.php为添加数据时的数据处理页面，del.php为删除数据时的数据处理页面，sql.php为数据库链接页面，5个页面中均有不同数量的代码和注释。重要提示：考试目录有中文，PHP文件不能正常显示，为了保证答题正常，需要将D模块中的5个页面全部拷贝至PHPStudy的站点根目录下，也就是D:\phpstudy_pro\WWW，这样才可以正常作答。模块D答题结束后，把文件全部拷贝至考试目录D模块下即可。数据库主机名为localhost，通过浏览器地址访问localhost/lst.php，可以看到学生数据展示页面。如图所示，参赛选手电脑已经安装MySQL数据库，并且创建了名为user的数据库，这个数据库中，存在一张数据表，表名也是user，该数据表有四个字段，分别是id,name,age,gender，该表中有2条已存在的数据，分别是小明的数据和小红的数据。在已给.php结尾的文件中，只要看到“补全代码”四个字，就需要在当前位置取消注释，并补全符合逻辑的正确代码。【任务要求】请参赛选手打开sql.php文件，,根据注释，补全代码，实现数据库链接正确；请参赛选手打开lst.php文件，根据注释，补全代码，实现查询数据库成功，并把存在的两条数据显示在页面中，可通过浏览器查看数据是否显示成功；点击lst.php操作一列下的删除按钮，使得页面跳转到del.php，在del.php中，需要再次导入数据库链接文件sql.php，并继续根据注释提示，完成代码补全，实现数据删除操作成功；点击lst.php页面中的添加数据按钮（蓝色按钮），页面会跳转到add.html表单页面，填入需要添加的数据，点击提交，使得页面跳转至add.php，并保证提交方式为“POST”方式；一旦页面跳转至add.php，就需要做数据的处理，在add.php中，首先也需要导入sql.php文件；在add.php文件中，需要判断add.html提交表单的方式是GET方式还是POST方式，如