前言

第十三届蓝桥杯全国软件和信息技术专业人才大赛(软件类)新开了Web应用开发比赛,已经组织了几次模拟赛和楼赛,这里主要记录模拟赛题目和设计的知识点,帮助参赛者更好的复习琐碎的知识点和代码,有写的不对的地方欢迎指教并讨论.

文章目录

前言
一、【Bug 调试】修复网站显示问题
二、【Bug 调试】修复注册验证问题
三、【功能实现】封装函数实现个人所得税计算器
四、【页面布局】Flex 经典骰子布局
五、【页面布局】制作网站首页
六、【页面布局】响应式 Gulp 中文网
七、【数据交互】天气预报查询
八、【数据交互】实现卡号绑定功能
九、【数据交互】知乎首页数据动态化
十、【API 开发】RESTful API 开发

一、【Bug 调试】修复网站显示问题

题目描述:网页的css样式不显示,需要修复.
题目分析:文件引入错误.
题目代码

<link href="css/index.css" rel="stylesheet" type="text/css">

二、【Bug 调试】修复注册验证问题

题目描述:书写一个判断方法，判断输入的手机号是否符合前三个数字是：186 134-139 150-152.
题目分析:使用正则表达式进行判断.

符号	含义	举例
^	以……开头	^(123)字符串以123开头
$	以……结尾	000$表示以000结尾
[0-9]	表示从0到9的任何数字	[4-9]表示4-9的任何数字
[a-z]	表示从a到z的字母	[abc]表示abc中的任何一个
\|	或者	186\|132 两个数字都行
\d	数字	\d 代表任何数字
\s	空白字符
n+	至少一个	0+表示0，00，000等
n*	0或一个或多个	0*表示没有，0，00等
n?	0或1个	0？表示没有或0
{}	前面的字符有多少个	\d{8}表示有八个数字

题目代码

function isPhone(phoneNumber) {var arr = /^(186|13[4-9]|15[0-2])\d{8}$/;// var arr = /^1(86|\[34-39]|\[50-52])\d{8}$/var flag = arr.test(phoneNumber);return flag
}

三、【功能实现】封装函数实现个人所得税计算器

题目描述:
题目分析:采用if-else语句，对输入的金额分类。
题目代码

function cal(salary) {// TODO: 在此处补充代码if (salary <= 5000) return 0else if(salary > 5000 && salary <= 9000) return (salary-5000)*0.03else if(salary > 9000 && salary <= 15000) return (salary-5000)*0.05else return (salary-5000)*0.1
}

四、【页面布局】Flex 经典骰子布局

题目描述:利用弹性布局知识,完成骰子布局,骰子最终状态如图.
题目分析: 主要使用了弹性布局的相关属性.

	属性名称	属性意义	属性可能的值
容器的属性	flex-direction	决定item排列方向	row,row-reverse,column,column-reverse
	justify-content	item在主轴上的对齐方式	flex-start,flex-end,center,space-between,space-around
	flex-wrap	排列不下时，item如何换行	nowrap,wrap,wrap-reverse
	align-content	侧轴上子元素的排列方式(多行)	flex-start,flex-end,center,space-between,space-around,stretch
	align-items	侧轴上子元素的排列方式(单行)	flex-start,flex-end,center,space-between,space-around,stretch
	flex-flow	复合属性	相当于同时设置了flex-direction和flex-wrap
item的属性	order	定义item的排列顺序	整数，默认为0，越小越靠前
	flex-grow	当有多余空间时，item的放大比例	默认为0，即有多余空间时也不放大
	flex-shrink	当空间不足时，item的缩小比例	默认为1，即空间不足时缩小
	flex-basis	项目在主轴上占据的空间	长度值，默认为auto
	flex	grow,shrink,basis的简写	默认值为0 1 auto
	align-self	单个item独特的对齐方式	同align-items，可覆盖align-items属性

题目代码
骰子一：div1，主轴默认为横轴，主轴上的排列为居中，非主轴上的排列为居中
```
.div1 {justify-content: center;align-items: center;
}
```
骰子二：div2，主轴设置为纵轴，主轴上的排列为均匀排列，非主轴上排列为居中
```
.div2 {flex-direction: column;justify-content: space-around;align-items: center;}
```
骰子三：div3，主轴默认为横轴，主轴上的排列为均匀排列，非主轴上居中排列，此时情况为居中一排，再单独设计第一个点的位置为start，第二个点的位置为end
```
.div3 {justify-content: space-around;align-items: center;padding: 10px;
}
.div3 :nth-child(1) {align-self: flex-start;
}
.div3 :nth-child(3) {align-self: flex-end;
}
```
骰子45679：divn，由于共同点都是在纵轴上均匀排列，设定主轴为纵轴，排列方式为均匀，不需要指定非主轴；再对里面每一个div进行设定，首先需要对子div指定排列方式：display: flex;因为外部的源代码中都指定过了；再设定主轴为横轴，排列方式为均匀即可。
```
.divn {flex-direction: column;justify-content: space-around;
}
.divn div{display: flex;justify-content:space-around;
}
```
骰子8：div8，继承divn中的部分，调整第二个子div的布局，排列应该是扩展，但是由于没有间距不好看，再根据图片调整间距
```
.divn .div8{display: flex;justify-content: space-between;padding: 0 6px;
}
```

五、【页面布局】制作网站首页

题目描述:给知乎日报排版.
题目分析:考察的是CSS盒子模型的应用.
题目代码:

* {margin: 0;padding: 0;box-sizing: border-box;font-weight: normal;
}
a {text-decoration: none;
}
ul {list-style: none;
}body {width: 1024px;margin: 0 auto;background-color: #f9f9f9;
}/* navbox */
.navbox {display: flex;height: 78px;justify-content: space-between;align-items: center;background-color: #fff;
}
.navbox img {height: 50px;margin-left: 30px;
}
.navbox .navright {margin-right: 50px;height: 32px;
}
.navbox .navright :first-child {display: inline-block;height: 32px;width: 120px;color: #0099F2;background-color: #f0f9ff;text-align: center;line-height: 32px;
}
.navbox .navright :nth-child(2) {display: inline-block;height: 32px;width: 120px;color: black;text-align: center;line-height: 32px;
}/* container */.container {display: flex;height: 500px;background-color: #008bed;justify-content: space-between;position: relative;
}
.container .img{align-self: flex-end;margin-left: 20px;
}.container .content {align-self: center;margin-right: 40px;width: 410px;
}.container .content h2 {font-size: 40px;line-height: 40px;color: #fdfdfd;
}.container .content .info {font-size: 16px;line-height: 26px;color: #99d1f8;
}/* tabtitle */
.tabtitle {height: 100px;width: 960px;display: flex;justify-content: space-between;margin: 0 auto;align-items: center;}.tabtitle h3 {color: #000000;font-size: 24px;
}.tabtitle h4 {color: #cccccc;font-size: 24px;
}/* list */
.list {width: 960px;margin: 0 auto;
}
.list ul {display: flex;justify-content:space-between;flex-wrap: wrap;}
.list ul li {width: 300px;height: 374px;background-color: #fff;margin-bottom: 20px;text-align: center;
}.list ul li img {height: 260px;width: 260px;margin-top: 20px;
}.list ul li p{text-align: start;margin-left: 25px;color: #333333;font-size: 14px;
}.list .more {height: 62px;line-height: 62px;font-size: 20px;text-align: center;background-color: #e8eef2;margin-bottom: 30px;
}
.list .more a {color: #59abdf;
}/* footer */
.footer {background-color: #e5e5e5;
}.footer .footerBox {width: 960px;height: 265px;margin: 0 auto;display: flex;justify-content: space-between;
}.footer .footerBox .footerL {width: 710px;padding-top: 32px;
}.footer .footerBox .footerL p {font-size: 14px;line-height: 25px;margin-bottom: 15px;
}.footer .footerBox .footerR {width: 141px;height: 152px;text-align: center;margin-top: 30px;
}

六、【页面布局】响应式 Gulp 中文网

题目描述，根据页面宽度适应不同布局。在 index.html 文件 <style> 中加入下述 @media 媒体查询规则。
题目分析
当屏幕宽度 max-width 为 1400px 时，页面效果如下（不包括图上尺寸标记）。

@media screen and (max-width : 1400px) {nav .content {width: 900px;}main section,main section ul {width: 900px;}
}

当屏幕宽度 max-width 为 900px 时，页面效果如下（不包括图上尺寸标记）

@media screen and (max-width : 900px) {nav .content {width: 700px;}main section,main section ul {width: 700px;}main ul li {width: 100%;}main ul li:nth-child(even){margin-left:0;}
}

当屏幕宽度 max-width 为 650px 时，头部导航隐藏，并在右侧显示图标，底部列表的宽度为 100% ，页面效果如下。

@media screen and (max-width : 650px) {nav .list {display: none;}nav .content .menu {display: block;position: absolute;top: 15px;right: 10px;}main section,main section ul {width: 650px;}main ul li {width: 100%;}main ul li:nth-child(even){margin-left:0;}
}

七、【数据交互】天气预报查询

题目描述：通过 jQuery ajax 请求杭州一周天气预报数据，并将请求到的一周天气预报数据绑定到 HTML 中。得到如下页面：
题目分析：本题涉及到jQuery相关知识，现在整理如下：
（1）jQuery的入口函数：

$(function(){.......
})

（2）jQuery ajax请求数据：

$.ajax({url:"....",success:function(result){console.log(result);       //可以输出请求结果
}})

（3）jQuery基础选择器

名称	用法	描述
ID选择器	$(“#id”)	获取指定ID的元素
全选选择器	$(“*”)	获取所有元素
类选择器	$(“.class”)	获取同一类class的元素
标签选择器	$(“div”)	获取同一类标签的元素
并集选择器	$(“div,p,li”)	获取多个元素
交集选择器	$(“li.current”)	获取交集元素

（4）jQuery层级选择器

名称	用法	描述
子代选择器	$(“ul>li”)	获取亲儿子层级的元素
后代选择器	$(“ul li”)	获取所有后代元素

（5）jQuery筛选选择器

名称	用法	描述
:first	$(“li:first”)	获取第一个li元素
:last	$(“li:last”)	获取最后一个li元素
:eq(index)	$(“li:eq(2)”)	获取索引为2的li元素，index从0开始
:odd	$(“li:odd”)	获取索引为奇数的li元素
:even	$(“li:even”)	获取索引为偶数的li元素

（6）设置属性语法

attr("属性","属性值")

（7）html(),text(),val()三种方法
html()方法

$("#par").html('<a href=" ">这是一个p标签</a>');

text()方法

$("#par").text('<a href=" ">这是一个p标签</a>');
//获取这个元素里面的文本
$("#par").text();

val()方法

$("input").val("123");  //设置一个值
$("input").val();  //获取元素

题目代码：

 function getweather() {//TODO：请补充代码$.ajax({url:"js/weather.json",success:function(result){data = result.resultfor(var i = 0;i < data.length;i++){$(`.item:eq(${i})>img`).attr('src',data[i].weather_icon)$(`.item:eq(${i}) .item-mess>:first-child`).text(data[i].weather)$(`.item:eq(${i}) .item-mess >:nth-child(2) `).text(data[i].temperature)$(`.item:eq(${i}) .item-mess >:nth-child(3) `).text(data[i].wind)$(`.item:eq(${i}) .item-mess >:nth-child(4) :first-child`).text(data[i].days)$(`.item:eq(${i}) .item-mess >:nth-child(4) :nth-child(2)`).text(data[i].week)}}})
}getweather();

八、【数据交互】实现卡号绑定功能

题目描述：通过 jQuery ajax 请求用户列表数据，实现用户输入完卡号与密码后，与 ajax 请求到的卡号数据进行比对，当卡号和密码匹配成功时，则提示绑卡成功，效果如下所示：
题目分析：主要还是使用jQuery的知识，和上题类似。
题目代码：

function bind(cardno, password) {//Todo:补充代码$.ajax({url:"js/cardnolist.json",success:function(result){let data = result.cardnolistlet flag = 0;data.forEach(item=>{if(item.cardno == cardno && item.password == password){flag = 1;}})if(flag){$("#tip1").attr('class','alert alert-primary alert-dismissible show')$("#tip2").attr('class','alert alert-primary alert-dismissible fade')}else{$("#tip1").attr('class','alert alert-primary alert-dismissible fade')$("#tip2").attr('class','alert alert-primary alert-dismissible show')}}})}

九、【数据交互】知乎首页数据动态化

题目描述：通过 axios 请求知乎首页文章列表数据，并响应式布局。
题目分析：就是vue的基本应用，没啥可说的。
题目代码：

<template><div class="list"><divclass="list-item"v-for="(info,index) in listInfo" :key="info.id"><imgclass='list-pic':src='info.imgUrl'/><div class="list-info" ><p class='title'>{{info.title}}</p><p class='desc'>{{info.desc}}</p></div></div></div>
</template>
<script>
import axios from 'axios'
export default {data() {return {listInfo:{},};},mounted(){this.getData();},methods:{async getData(){let result = await axios.get("static/data/list.json")this.listInfo = result.data.data.listInfo;}}
};
</script>

十、【API 开发】RESTful API 开发

题目描述：补全 index.js 获取用户列表 RESTful API。
题目代码：

app.get('/list',function(req,res){fs.readFile(path.resolve(__dirname,'./users.json'),'utf-8',function(err,data){data = JSON.parse(data);res.json(data)})
})

【蓝桥杯Web】第十三届蓝桥杯（Web 应用开发）第一次线上模拟赛相关推荐

第十三届蓝桥杯（Web 应用开发）线上模拟赛第一题
[Bug 调试]修复网站显示问题特别说明第十三届蓝桥杯(Web 应用开发)线上模拟赛依托于蓝桥云课线上实验环境打造,可能与正式比赛所使用线下环境有所不同.线上模拟赛侧重于考生了解比赛题型和体验比赛 ...
第十三届蓝桥杯（Web 应用开发）线上模拟赛【第三题】（封装函数实现个人所得税计算器）
考试需求基于挑战提供的基础代码,完善个人所得税计算器结构,实现当用户在文本框中输入薪资后,单击计算按钮,即可将计算后的结果显示到页面中. 例如: 当输入 5000,根据个人所得税规则无需缴税,页面效 ...
【Bug 调试】修复注册验证问题第十三届蓝桥杯（Web 应用开发）线上模拟赛
[Bug 调试]修复注册验证问题考试需求: 解答: index.js: // " abc " ----> "abc " ----> "a ...
第十三届蓝桥杯（Web 应用开发）线上模拟赛
1.[Bug 调试]修复网站显示问题如上所示的 index.html 布局不符合最终要求.请检查 exam01 下的各个文件,找到并修复项目存在的 Bug,使果壳儿页面正常显示题解: css文件路 ...
2022年蓝桥杯：第十三届蓝桥杯大赛软件赛省赛C/C++大学B组真题（考后回顾，文末附真题链接）
目录第十三届蓝桥杯大赛软件赛省赛C/C++大学B组真题(考后回顾) 试题 A: 九进制转十进制试题 B: 顺子日期试题 C: 刷题统计试题 D: 修剪灌木试题 E: X 进制减法试题 F: ...
【蓝桥杯】第十三届蓝桥杯单片机国赛代码程序
第十三届蓝桥杯单片机国赛程序题目 hex文件代码工程文件 B站视频更多资料题目历届的省赛和国赛的题目我已经在前面的文章(点击查看)里给大家分享了(网盘资源),需要的话,直接去下载,我在这 ...
【蓝桥杯】第十三届蓝桥杯单片机第二次省赛代码程序
第十三届蓝桥杯单片机第二次省赛题目 hex文件代码工程文件 B站视频更多资料题目历届的省赛和国赛的题目我已经在前面的文章(点击查看)里给大家分享了(网盘资源),需要的话,直接去下载,我在这 ...
蓝桥杯嵌入式|第十三届蓝桥杯嵌入式省赛程序设计试题及其题解
题目十三届省赛是要制作一个可由串口设置密码的密码锁.在本场比赛中,我们将用到LED模块.按键模块.串口模块.定时器的PWM模块以及官方会提供源码的LCD模块.下面就请看原题: 题解 ...
2022年蓝桥杯：第十三届蓝桥杯大赛软件赛省赛（全部正解做法代码 C/C++ B组）
文章目录试题 A: 九进制转十进制问题描述问题答案试题 B: 顺子日期问题描述问题答案试题 C: 刷题统计问题描述问题答案(正解) 试题 D: 修剪灌木问题描述问题答案(正解) ...

【蓝桥杯Web】第十三届蓝桥杯（Web 应用开发）第一次线上模拟赛

前言