2023年江西省职业院校技能大赛 Web应用软件开发竞赛样题

    一、    竞赛背景 
本赛项面向产业主流技术，对接国家标准和要求，引进世界技能大赛理念，引领和促进教学改革。通过完成一个完整的工作过程，使参赛选手熟悉并掌握Web应用软件开发的技术标准。 
Web应用软件开发赛项，主要面向前端开发工程师、软件技术支持工程师等核心岗位。通过竞赛，考察参赛选手Web理论知识、软件工程文档编写能力、工程项目的需求分析理解能力、程序编码与排错能力，增强学生专业技能和职业素质，提升教学环境与产业环境之间
的契合度，让参赛选手尽可能地适应未来工作岗位的需要。 
二、    竞赛内容 
比赛时间为4小时，考核“理论测试”“需求分析”“功能编码”和“程序排错”四个模块，具体如下表所示。 

 三、    成果物提交 
模块A、模块B、模块C和模块D的竞赛成果物提交至平台，具体要求如下： 
Web应用软件开发赛项参赛选手按照四个模块的任务要求完成对应的成果物，将四个模块的成果物“理论测试.doc”、“需求分析.doc”、“dist.zip”（选手将完成后管理端项目、用户前端项目
文件夹压缩成dist.zip、dist1.zip）、“dist1.zip”“程序排错.doc” 压缩为“成果物.zip”进行提交，裁判基于选手提交的竞赛成果物，
进行评判。 
四、    成绩评定 
模块 A 评分：裁判依据提交的成果物中理论测试.doc 文件进行
评分。 
模块 B 评分：裁判依据提交的成果物中需求分析.doc 文件进行
评分。 
模块C评分：裁判以服务器上的项目运行效果评判模块C。裁判运行项目，启动浏览器，进行结果评分，如果浏览器内系统未显示或未运行，则该模块为零分。 
模块 D 评分：裁判依据提交的成果物中程序排错.doc 文件进行
评分。 
      
模块A：理论测试 
任务一：单选题 
1.为 EMP 表的 namesalary 字段创建名为 emp name salary 
idx的校复习接课name 字段升序， salary 字段降序的复合索引的 SQL 语句是? 
A: CREATEINDEX emp name salary idx ON EMP(namesalary) 
B: CREATE INDEX emp name salary idx ON EMP(name 
ASC,salary DESC) 
C:CREATE VIEW emp name salary idx ON EMP(name,salary) 
D: CREATE INDEX emp name salary idx ON EMP(name 
DESC,salary) 
2.建立索引的作用之一是? 
A:节省存储空间 
B:便于管理 
C: 提高查询速度、 
D: 提高查询和更新的速度 
3.查看角色的权限可以使用的语句是? 
A: SHOW STATUS 
B: SHOW CLIENT STATUS 
C: SHOW MASTER STATUS 
D: SHOW GRANTS FOR“用户" 
4分布式数据库缺点描述不正确的一项是? 
A:系统网络通信开销较大 
B:系统可扩展性较差 
C: 存取结构较为复杂 
D:数据的安全性和保密性较难处理 
5.数据库备份可以只复制自上次备份以来更新过的数据，这种备份方法称为? 
A:海量备份 
B:增量备份 
C:动态备份 
D:静态备份 
6.    计算学生 student 集合中的各班最高成绩的语句是？  
A: db.student.aggregate({"$group":{"_id":"$class",'最高成绩':{"$max":"$score"}}});  
B: db.student.find({"$group":{"_id":"$class",'最高成绩 ':{"$sum":"$score"}}});  
C: db.student.aggregate({"$group":{"_id":"$class",'最高成绩':{"$min":"$score"}}});  
D: db.student.aggregate({"$group":{"_id":"$class",'最高成绩':{"$push":"$score"}}});  
7.    分布式数据库系统的英文缩写是？  
A: DBS  
B: DB  
C: DBMS  
D: DDBS  
8.___标签用于指定内联框架？ 
A.<jframe> 
B.<frameset> 
C.<iframe> 
D.<frame> 
9.    查看主从复制集群的同步状态，使用语句是？  
A: SHOW STATUS  
B: SHOW CLIENT STATUS  
C: SHOW MASTER STATUS  
D: SHOW SLAVE STATUS  
10.    软件体系结构的文档要求与软件开发项目中的其他文档是相似的，下列哪项属于体系结构文档化过程的主要输出结果（）  
A: 体系结构需求规格说明  
B: 体系结构概要设计说明  
C: 体系结构详细设计说明  
D: 体系结构总体框架说明  
11.下列关于jQuery对象与DOM对象的说法，错误的是（      ） A. DOM对象是使用JavaScript操作DOM返回的对象。 
B.    jQuery对象是使用jQuery提供的操作DOM的方法返回的对象。 
C.    jQuery对象命名时必须使用$符号。 
D.    jQuery对象与DOM对象之间可以进行转换。 
12.执行以下程序，输出结果为（      ） 
function Foo() { 
    var i = 0; 
    return function() { 
        console.log(i++); 
    } 
} 
var f1 = Foo(),f 2 = Foo(); 
f1(); 
f1(); 
f2(); 
A.0 1 0 
B.0 1 2 
C.0 0 0 
D.0 0 2 
13.当点击鼠标或者拖动鼠标时，触发的事件是下列的哪一个？
（） 
A.KeyEvent  
B.AxtionEvent  
C.ItemEvent   
D.MouseEvent 
14.在 HTML 页面上包含如下所示的层对象，则 JavaScript 语
句 document.getElementById(“info”).innerHTML 的值是（      ）    
<div id=”info” style=”display:block”><p> 请填写 </p></div> 
A.请填写 
B.<p>请填写</p> 
C.id=”info” style=”display:block” 
D.<div id=”info” style=”display:block”><p>请填写
</p></div> 
15.要删除表A中数据，使用TRUNCATE TABLE A。运行结果是？ 
A.表A中的约束依然存在； 
B.表A被删除了； 
C.表A中的数据被删除了一半，再次执行时，将删除剩下的一半数据行； 
D.表A中不符合检查约束要求的数据被删除，而符合检查约束要求的数据依然保留； 
16.在Vue中，关于Vue实例的生命周期理解错误的是（）。 A.生命周期是指Vue实例从创建到销毁的过程。 
B.在beforeCreated阶段，数据并没有挂载，只是一个空壳，无法访问到数据和真实DOM。 
C.当data变化时，会触发beforeUpdate和updated方法。 
D.created阶段，vue实例的挂载元素el已挂载。 
17.查找 student 表中所有电话号码(列名：telephone)的第一位为8或6，第三位为0的电话号（ ） 
A.SELECT telephone FROM student WHERE telephone LIKE  
‘[8,6]%0*’ 
B.SELECT telephone FROM student WHERE telephone LIKE  
‘(8,6)*0%’ 
C.SELECT telephone FROM student WHERE telephone LIKE  
‘[8,6]_0%’ 
D.SELECT telephone FROM student WHERE telephone LIKE  
‘[8,6]_0*’ 
18.下列关于v-for说法错误的是（   ） 
A.    v-for指令基于一个数组来渲染一个列表 
B.    v-for 指令需要使用 item in items 形式的特殊语法，其中 items是源数据数组，而item则是被迭代的数组元素的别名 
C.不可以用v-for来遍历一个对象的property 
D.v-for在使用的时候最好添加key，且key最好不是索引 
19.Mysql中表student_table(id,name,birth,sex)，插入如下
记录： 
('1004' , '张三' , '2000-08-06' , '男'); 
('1005' , NULL , '2001-12-01' , '女'); 
('1006' , '张三' , '2000-08-06' , '女'); 
('1007' , ‘王五’ , '2001-12-01' , '男'); 
('1008' , '李四' , NULL, '女'); 
('1009' , '李四' , NULL, '男'); ('1010' , '李四' , '2001-12-01', '女'); 
执行 
select count(t2.birth) as c1 
from ( 
select * from student_table where sex = '男' ) t1 
full  join 
(select * from student_table where sex = '女') t2 
on t1.birth = t2.birth and t1.name = t2.name; 
的结果行数是（  ）。 
A.2 
B.3 
C.执行报错 
D.4 
20.关于jQuery的自定义动画animate方法，下列说法错误的是
（） 
A.animate方法第一个参数可设置为键值对的对象； 
B.animate方法能同时以动画的形式改变元素的样式属性到某个确定的值； 
C.animate方法最后一个参数为回调函数； 
D.animate方法第一个参数可以不传入。 
任务二：多选题 
1.    创建索引时，通常可以使用以下哪几种方法创建？  
A: 表上建立主键约束或唯一性约束时，由系统自动建立唯一性索引  
B: 由用户在一个表的一个列或多列上使用 CREATE INDEX 创建非唯一索引  
C: 由用户使用 CREATE INDEX 创建聚集索引  
D: 以上均不正确  
2.    不适合建立索引的情况都包括哪些？  
A: 记录很少的表  
B: 值过长的属性  
C: 频繁更新的属性  
D: 属性值很少的属性  
 
3.    db.articles.aggregate( [ { $match : { score : { $gt : 
70, $lte : 90 } } }, { $group: { _id: null, count: { $sum: 
1 } } } ] );关于上述语句说法正确的是？  
A: 该聚集有两个管道阶段，分别是$match 和$group，它们之间是无序的。  
B: 进行匹配操作时，分数 score 应该是大于 70 或小于等于 
90  
C: 第二个管道$group，对 count 字段进行求和  
D: 以上均不正确  
4.    分片的方式有几种？  
A: 水平分片  
B: 垂直分片  
C: 导出分片  
D: 混合分片  
5.    对 Json 理解正确的是（ ）  
A: JSON 是指 JavaScript 对象表示法  B: JSON 是轻量级的文本数据交换格式  
C: JSON 具有自我描述性，更易理解  
D: JSON 是存储和交换文本信息的语法  
6.执行以下SQL，下面哪个名字会被查询出来（ ） 
Select firstname from stafflist 
where firstname like'_A%' 
A.Allen 
B.CLARK 
C.JACKSON 
D.DAVID 
7.假设HTML 结构为<parent><child>content</child></parent>
下列哪些做法可以实现 child 内容垂直居中？（ ）  
A.parent {  
display: table;  
}  
child {  
display: table-cell;  
vertical-align: middle;  
}  
B.parent {  
display: flex;  
align-items: center;  }  C.parent {  
position: relative;  }  
child { 
position: absolute;  
top: 50%;  
transform: translateY(-50%);  
}  
D.parent:after {  
content: '';  
height: 100%;  
vertical-align: middle;  width: 0;  }  
child {  
display: inline-block;  
vertical-align: middle;  
}  
8. 以下哪些是原型模型的优点（ ）。  
A: 与用户见面快  
B: 奠定了软件工程方法的基础  
C: 开发成功率高  
D: 适合于需求不确定的大系统  
9.关于主键，描述错误的是（） 
A.一个表可以有多个主键 
B.主键是可以为空的 
C.可以有多个属性联合组成主键 
D.主键就是允许重复 
10. ALTER TABLE 语句支持对索引的什么操作？  
A: 创建索引  
B: 修改索引  
C: 删除索引  
D: 查看索引  
11.关于身份证号，以下正确的正则表达式为（ ） 
A.isIDCard=/^[1-9]\d{7}((0\d)|(1[0- 2]))(([0|1|2]\d)|3[0-1])\d{3}$/; 
B.isIDCard=/^[1-9]\d{7}((9\d)|(1[0- 
2]))(([0|1|2]\d)|3[9-1])\d{3}$/; 
C.isIDCard=/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0- 
2]))(([0|1|2]\d)|3[0-1])\d{4}$/; 
D.isIDCard=/^[1-9]\d{5}[1-9]\d{3}((9\d)|(1[9- 
2]))(([0|1|2]\d)|3[9-1])\d{4}$/; 
12.关于label 元素，以下说法正确的有：（ ） 
A.label 元素可以使用 for 属性关联表单控件，也可以将表单控件放置在它的内部。 
B.当使用for 属性来关联label 元素和表单控件时，label 元素的for 属性要和表单控件的ID 一致。 
C.如果label 元素内嵌套一个a 链接，则点击该 a 链接不会触发页面跳转。 
D.一般会在 label 元素内部放置可交互的元素，比如 anchors
或 buttons。 
13.下列说法正确的是（ ） 
A.每个 JS 对象一定对应一个原型对象，并从原型对象继承属性和方法； 
B.对象的proto 指向自己构造函数的 prototype； 
 
C.Object.prototype. proto === null ， 说 明 原 型 链 到 
Object.prototype 终止； 
D.表达式 Function.prototype.proto.proto === null 的运行
结果为true； 
14.阅读以下代码，请选择可以正确打印 h1 标签宽度的选项 
（ ） 
<template> 
<div> 
<h1 ref='h1' v-if="show">nowcoder</h1> 
</div> 
</template> 
<script> export default { data() { 
return { show: false 
} }, 
mounted() { this.show = true 
// 此处填写代码 
} 
} 
</script>  
A.this.$nextTick(function() 
{console.log(this.$refs.h1.offsetWidth)}) B.setInterval(() => 
{console.log(this.$refs.h1.offsetWidth)}) 
C.setTimeout(() => 
{console.log(this.$refs.h1.offsetWidth)}) 
D.console.log(this.$refs.h1.offsetWidth) 
15. 某学生数据库包含学生表 S,成 绩 表 R SELECT 
SN,A.SCORE ,B.SCOREFROM S ,R A ,R B WHERE S.ID=A.ID AND S.ID=B.IDAND A.SCORE<B.score AND A.CNO=1AND B.CNO=2有关该查
询描述正确的是：（ ） 
A.该查询属于自连接查询 
B.查询选修 1 号课程的成绩比选修 2 号课程的成绩高的学生。 
C.查询选修了 1 号和 2 号课程，并且其 1 号课程低于 2 号课程的学生。 
D.查询选修课程号为 1 的课程且成绩低于课程 2 的学生的姓名、及两门课程的成绩。 
16.下面有关sql 语句中 delete、truncate 的说法正确的是？ 
（） 
A.论清理表数据的速度，truncate 一般比delete 更快 
B.truncate 命令可以用来删除部分数据。 
C.truncate 只删除表的数据不删除表的结构 
D.delete 能够回收高水位(自增ID 值) 
17.若要删除 book 表中的所有数据而不删除表，如下哪些语法是错误的？（ ） 
A.drop table book; 
B.truncate table book; 
C.delete from book; 
D.del * from book; 
18.（ ）完成对数据库数据的建表与更新。 
A.DCL B.DDL C.DML D.DQL 
19.通过分析如下 HTML 代码，可以得出（ ） 
<table border="10"> 
<tr> 
<td colspan=2 align="center">员工号</td> 
</tr> 
<tr> 
<td rowspan=2 align="center">学历</td> 
<td align="center">专业</td> 
</tr> 
<tr> 
<td colspan=2 align="center">毕业学校</td> 
</tr> 
</table> 
A.该表格共有 2 行 3 列 
B.该表格中的文字均居中显示 
C.该表格的边框宽度为 10 毫米 
D."员工号"单元个跨 2 列 
20.以下哪些事件会在页面加载完成（onload）之前触发？（
 ） 
 
A.readystatechange 
B.pageshow 
C.beforeunload 
D.DOMContentLoaded 
模块B：需求分析一、任务说明 
根据给定的竞赛任务需求说明，利用“需求规格说明书（模板）. docx”和相关工具软件（如：Visio 等），编写模块概要简述，绘制对应业务流程图/活动图、用例图、类图、时序图、E-R 图，完成“需求规格说明书.docx”文档编写。 
任务一：校园新闻管理模块 
【基本要求】 
1.    进入管理主界面，点击【信息发布管理】下的【校园新闻】标
签，进入校园新闻管理界面，实现校园新闻管理信息列表数据显示，信息包括编号、新闻主标题、新闻详情、发布状态（暂停发布、发布中），修改按钮、删除按钮，点击修改按钮可进行数据修改，并提示
“修改成功”字样，点击删除按钮，可进行数据删除。 
2.    实现按新闻主标题和发布状态的搜索功能。 
3.    页面数据列表上方显示新增按钮、批量删除按钮，用户选择多条数据点击批量删除按钮，可删除选中相关的数据，并提示“删除成功”字样，数据列表做出相应数据变化。 
4.点击新增按钮后，弹出对话框中输入新闻主标题、新闻详情、
发布状态（暂停发布、发布中），点击确定按钮，可新增校园新闻信息，并提示“新增成功”字样。  
任务二：任课管理模块 
【基本要求】 
1.    进入管理主界面，点击【教务管理】下的【任课管理】标签，
进入任课管理界面， 实现任课管理信息列表数据显示，信息包括编号、教师姓名、学科名称、学段、年级、班级、所属学年，修改按钮、删除按钮，点击修改按钮可进行数据修改，并提示“修改成功”字样，点击删除按钮，可进行数据删除。 
2.    实现按教师姓名搜索功能。 
3.    页面数据列表上方显示新增按钮、批量删除按钮，用户选择多条数据点击批量删除按钮，可删除选中相关的数据，并提示“删除成功”字样，数据列表做出相应数据变化。 
4.    点击新增按钮后，弹出对话框中输入教师姓名、学科名称、学段、年级、班级、 所属学年，点击确定按钮，可新增班级信息，并提示“新增成功”字样。 
任务三：学籍异常管理模块 
【基本要求】 
1.    进入管理主界面，点击【学生信息管理】下的【学籍异常管理】
标签，进入学籍异常管理界面，实现学籍异常管理信息列表数据显示，信息包括编号、学生姓名、学籍号、异常原因、申请时间、状态，修改按钮、删除按钮，点击修改按钮可进行数据修改，并提示“修改成功”字样，点击删除按钮，可进行数据删除。 
2.    实现按学生姓名、学籍号搜索功能。 
3.    页面数据列表上方显示新增按钮、批量删除按钮，用户选择多条数据点击批量删除按钮，可删除选中相关的数据，并提示“删除成功”字样，数据列表做出相应数据变化。 
4.    点击新增按钮后，弹出对话框中输入学生姓名、学籍号、异常类型、申请时间、状态（下拉选），点击确定按钮，可新增学籍异常信息，并提示“新增成功”字样。 
 
 
 
模块C：功能编码任务一：校园新闻管理模块注：选手需自行编写前端逻辑代码。 
1.    进入管理主界面，点击【信息发布管理】下的【校园新闻】标
签，进入校园新闻管理界面，实现校园新闻管理信息列表数据显示，信息包括编号、新闻主标题、新闻详情、发布状态（暂停发布、发布中），修改按钮、删除按钮，点击修改按钮可进行数据修改，并提示
“修改成功”字样，点击删除按钮，可进行数据删除。 
2.    实现按新闻主标题和发布状态的搜索功能。 
3.    页面数据列表上方显示新增按钮、批量删除按钮，用户选择多条数据点击批量删除按钮，可删除选中相关的数据，并提示“删除成功”字样，数据列表做出相应数据变化。 
4.    点击新增按钮后，弹出对话框中输入新闻主标题、新闻详情、
发布状态（暂停发布、发布中），点击确定按钮，可新增校园新闻信息，并提示“新增成功”字样。 
 
 
 
注：选手需自行编写前端逻辑代码 
1.    进入管理主界面，点击【教务管理】下的【任课管理】标签，
进入任课管理界面， 实现任课管理信息列表数据显示，信息包括编号、教师姓名、学科名称、学段、年级、班级、所属学年，修改按钮、删除按钮，点击修改按钮可进行数据修改，并提示“修改成功”字样，点击删除按钮，可进行数据删除。 
2.    页面数据列表上方显示新增按钮、批量删除按钮，用户选择多条数据点击批量删除按钮，可删除选中相关的数据，并提示“删除成功”字样，数据列表做出相应数据变化。 
3.    点击新增按钮后，弹出对话框中输入教师姓名、学科名称、学段、年级、班级、所属学年，点击确定按钮，可新增班级信息，并提示“新增成功”字样。 
 
 
任务三：学籍异常管理模块注：选手需自行编写前端逻辑代码 
1.    进入管理主界面，点击【学生信息管理】下的【学籍异常管理】
标签，进入学籍异常管理界面，实现学籍异常管理信息列表数据显示，信息包括编号、学生姓名、学籍号、异常原因、申请时间、状态，修改按钮、删除按钮，点击修改按钮可进行数据修改，并提示“修改成功”字样，点击删除按钮，可进行数据删除。 
2.    实现按学生姓名、学籍号搜索功能。 
3.    页面数据列表上方显示新增按钮、批量删除按钮，用户选择多条数据点击批量删除按钮，可删除选中相关的数据，并提示“删除成功”字样，数据列表做出相应数据变化。 
4.    点击新增按钮后，弹出对话框中输入学生姓名、学籍号、异常类型、申请时间、状态（下拉选），点击确定按钮，可新增学籍异常信息，并提示“新增成功”字样。 
 
 
 任务四：智慧校园用户端首页注：选手需自行编写前端逻辑代码 
1、进入智慧校园用户端主页面，主页面显示智慧校园资讯轮播
图（每隔 3 秒自动轮播并支持用户点击滑动）； 2、轮播图下方默认展示前两条校园新闻，内容包括：图片、新闻标题、发布人。 
3、校园新闻右侧展示剩余新闻，内容包括：新闻标题。 
注：参考接口文档 
 
任务一：指定Bug修改 
修正下面功能Bug，并完成“软件功能修正报告.docx”文档撰写。 
表1系统功能修正报告样例 
Bug编号         001 
Bug修正截图     略     
修改文件名称及对应代码     文件名称：XXX.vue 修正代码如下：略     
（1）    校园新闻模块删除功能点击后无任何反应进入智慧校园系统主界面，点击“信息发布管理”后再点击左侧校园新闻标签，进入校园新闻界面。 
【基本要求】注：选手需根据描述的功能缺陷进行改错，并修正对应错误。 
点击【删除】按钮后应删除数据并刷新页面，但当前页面点击【删除】后无任何反应，请查找对应错误并改正。 
（2）    考勤查看中异常备注下拉选择无法查看对应数据 
进入智慧校园系统主界面，点击“考勤管理”后再点击左侧考勤查看标签，进入考勤查看界面。 
【基本要求】注：选手需根据描述的功能缺陷进行改错，并修正对应错误。 
考勤查看页面点击搜索功能区中的异常备注下拉选择后，应显示所有异常数据状态并可以按照状态进行查询，但现在异常数据下拉选择中无法显示对应的状态数据，请查找对应错误并改正。 
（3）    任课管理中点击【导出】按钮后无法将对应数据导出为 excel文件 
进入智慧校园主界面，点击“教务管理”后再点击左侧任课管理标签，进入任课管理界面。 
【基本要求】注：选手需根据描述的功能缺陷进行改错，并修正对应错误。点击【导出】按钮后应弹出“是否确认导出”对话框，点击【确认】按钮后将任课管理数据导出为excel文件，点击【取消】按钮后关闭对话框，但现在点击【导出】按钮后无任何反应，请查找对应错误并改正。 
（4）    预约管理中点击【修改】按钮后无反应 
进入智慧校园系统主界面，点击“访客管理”后再点击左侧预约管理标签，进入预约管理界面。 
【基本要求】注：选手需根据描述的功能缺陷进行改错，并修正对应错误。 
预约管理页面中点击数据列表中的【修改】按钮弹出修改预约管理对话框，对话框内容包括：访客名字、手机号、被访人手机号、预约时间、是否访问选择框、当前状态下拉选、访客电话、身份证号、到校时间、同行人、车辆信息、访客照片、离校时间、【确定】和【取消】按钮，点击【确定】按钮后可保存修改的信息，但现在点击【修改】按钮后无法弹出修改预约管理对话框的功能，请查找对应错误并改正。 
（5）    充值中无法批量选中所有数据 
进入智慧校园系统主界面，点击“一卡通”后再点击左侧充值标签，进入充值界面。 
【基本要求】注：选手需根据描述的功能缺陷进行改错，并修正对应错误。 
充值数据列表显示内容应包括：id、充值方式、充值金额、订单时间、订单号、用户id、【修改】和【删除】按钮，点击数据列表左上方的复选框后可选择全部充值数据，但现在点击复选框后无法批量选择所有充值数据，请查找对应错误并改正。