前言

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

---

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

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

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

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

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

3. 题目代码

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
}
1
2
3
4
5
6

---

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

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

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

---

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

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

3. 题目代码
   骰子一：div1，主轴默认为横轴，主轴上的排列为居中，非主轴上的排列为居中

   .div1 {
       justify-content: center;
       align-items: center;
   }
   1
   2
   3
   4

   骰子二：div2，主轴设置为纵轴，主轴上的排列为均匀排列，非主轴上排列为居中

   .div2 {
   	flex-direction: column;
       justify-content: space-around;
       align-items: center;
       
   }
   1
   2
   3
   4
   5
   6

   骰子三：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;
   }
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11

   骰子45679：divn，由于共同点都是在纵轴上均匀排列，设定主轴为纵轴，排列方式为均匀，不需要指定非主轴；再对里面每一个div进行设定，首先需要对子div指定排列方式：display: flex;因为外部的源代码中都指定过了；再设定主轴为横轴，排列方式为均匀即可。

   .divn {
   	flex-direction: column;
   	justify-content: space-around;
   }
   .divn div{
       display: flex;
       justify-content:space-around;
   }
   1
   2
   3
   4
   5
   6
   7
   8

   骰子8：div8，继承divn中的部分，调整第二个子div的布局，排列应该是扩展，但是由于没有间距不好看，再根据图片调整间距

   .divn .div8{
       display: flex;
       justify-content: space-between;
       padding: 0 6px;
   }
   1
   2
   3
   4
   5

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

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

* {
    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;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182

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

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

@media screen and (max-width : 1400px) {
	nav .content {
		width: 900px;
	}
	main section,
    main section ul {
    	width: 900px;
    }
}
1
2
3
4
5
6
7
8
9

当屏幕宽度 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;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

当屏幕宽度 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;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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

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

$(function(){
   .......
})
1
2
3

（2）jQuery ajax请求数据：

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

（3）jQuery基础选择器

（4）jQuery层级选择器

（5）jQuery筛选选择器

（6）设置属性语法

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

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

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

text()方法

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

val()方法

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

3. 题目代码：

 function getweather() {
     //TODO：请补充代码
     $.ajax({url:"js/weather.json",success:function(result){
        data = result.result
        for(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();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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

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

function bind(cardno, password) {
    //Todo:补充代码
    $.ajax({url:"js/cardnolist.json",success:function(result){
        let data = result.cardnolist
        let 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')
        }
    }})
 
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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

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

<template>
  <div class="list">
    <div
      class="list-item"
      v-for="(info,index) in listInfo" :key="info.id"
    >
      <img
        class='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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

十、【API 开发】RESTful API 开发

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

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)
    })
})
1
2
3
4
5
6