一点蓝桥web校赛解析（往届题居多）

五弦奏南风
157 阅读3分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 23 天，点击查看活动详情

今天参加了学校蓝桥杯web组的校赛，因为是校赛，题都不是很难，基本都是往届题，今天来解析一下。

关于你的欢迎语

背景介绍

营销号，有时候需要一些特定的欢迎语，但针对特定的用户，我们希望可以个性化一点。本题需要在项目文件中修改代码存在的问题，实现根据模版生成特定用户的欢迎语。

步骤准备

下载完成之后的目录结构如下：

├── css

│   ├── bootstrap.min.css

│   └── style.css

├── js

│   ├── bootstrap.bundle.min.js

│   └── index.js

└── index.html

 

其中：

  • css/style.css 是页面样式文件。

  • css/bootstrap.min.css 和 js/bootstrap.bundle.min.js 是 Bootstrap 相关文件。

  • js/index.js 是页面功能实现的逻辑代码。

  • index.html 是页面布局。

  1. 下载源码。
  2. 选中 index.html 右键启动 Web Server 服务（Open with Live Server），让项目运行起来。
  3. 在浏览器中看到如下错误显示，当前显示没有正确获取到输入的用户、课程、平台的输入框内容。

因为这个index.js中存在bug,所以导致我们点击生成之后渲染的效果出现问题，问题效果如下:

image.png

我们没有获取到其中的value,查看我们的源码，原来我们的result是一个写死的对象，所以我们要做出如下修改，使用ES6中的模板字符串的方式，重构我们的index.js。

代码如下:

function generate() {
    subject = document.getElementById("subject");
    event1 = document.getElementById("event1");
    event2 = document.getElementById("event2");
    if (subject.length==0 || event1.length==0 || event2.length==0){
        return;
    }
    result = `欢迎用户${subject.value}在${event1.value}学习${event2.value}课程！`
    document.getElementById("result").value = result;
}

image.png

水果摆盘

背景介绍

目前 CSS3 中新增的 Flex 弹性布局已经成为前端页面布局的首选方式，这次试题将利用 Flex 实现经典布局效果。

准备步骤****

下载完成之后的目录结构如下：

├── index.css

└── index.html

└── img

 

其中：

  • index.css 是本次挑战的需要补充样式文件。

  • index.html 为主页面。

  • img 图片文件夹。

  1. 选中 index.html 右键启动 Web Server 服务（Open with Live Server），让项目运行起来。

运行后效果如下:

image.png

可以看到我们的水果没有放到了正确位置上，我们需要使用CSS3中的flex布局来完成。

我们在待补充的代码处加上如下代码:

/* 菠萝 TODO 待补充代码 */
.yellow {
	align-self: flex-end;
	order: 1;
}

image.png

新鲜的蔬菜

介绍

厨房里新域一批蔬菜,被凌乱地堆放在一起,现在我们给蔬菜分下类,把相同的蔬菜放域同一个菜板 上,拿给厨师烹饪美味佳肴吧。

准备

开始答题前,需要先打开本题的项目代码文件夹,目录结构如下:

 

├──  css

│      L──  style.css

├──  images

L──  index.html

 

其中:

· css/style.css 是需要补充代码的样式文件。

· images 是图片文件夹。

· index.html 是其页面。

在浏览器打开后,效果如下:

初始效果

image.png

我们在父元素中使用如下代码:

  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

在子元素中分别使用align-self: flex-start;,align-self: center;,align-self: flex-end;最终实现效果如下:

image.png

东奥大抽奖

我们做一个抽奖，动画旋转停留在不同选项后，再随机选中奖项，并在上面渲染，可以使用jq或原生。我们的解决方案如下:

// TODO：请完善此函数

function rolling() {

  let index = [1,2,3,4,5,6,7,8,9];

  time++; // 转动次数加1

  clearTimeout(rollTime);

  rollTime = setTimeout(() => {

    window.requestAnimationFrame(rolling); // 进行递归动画

  }, speed);

  


  // time > times 转动停止

  if (time > times) {

    clearInterval(rollTime);

    time = 0;

    var alt = $('.active').html()

     $('#award').html(`恭喜抽中了${alt}!!!`)

    return;

  }

  


  ind = (time - 1 ) % 9

  if(ind!=8)

  {

    $('.active').removeClass('active')

    $("li").eq(index[ind]-1).addClass('active')

  }

}

image.png

RESTFUL

背景介绍****

RESTful API 已经是现在互联网里对外开放接口的主流模式,本次试题将实现用户功能的 RESTful API 开发。

准备步骤****

下载完成之后，你可以看到目录结构如下：

├── index.js

├── users.json

 

接下来，通过 npm run dev启动项目（无需执行 install 操作）。

考试需求****

请基于 users.json 补全 index.js 获取用户列表 RESTful API。

UrlHTTP 方法发送内容响应结果
listGet空显示所有用户列表

我们代码如下:

//TODO：请补全获取用户列表代码
app.get("/list",(req,res)=>{
    fs.readFile(path.resolve(__dirname,'./users.json'), 'utf8',(err, data)=>{
        data = JSON.parse(data);
        res.json(data);
    })
})

拿APIfox测一下:

image.png

【功能实现】购物车

背景介绍

购物车是商城类应用里必不可少的功能，接下来，我们将使用 vue 实现一个购物车列表。

准备步骤

下载完成之后的目录结构如下：

├── carList.json  # json 数据

├── css      #  样式文件夹

│   ├── element-ui.css

│   └── index.css

├── images   # 图片文件夹

│   ├── img1.jpg

│   ├── img2.jpg

│   ├── img3.jpg

│   └── img4.jpg

├── index.html

└── js    # 项目中用到的 js 文件

    ├── axios.js

    ├── element-ui.js

    └── vue.js

<div class="container" id="app">
		<h4>购物车</h4>
		<!-- 购物车列表 -->
		<div>
			<el-card class="box-card" v-for="(item,index) in carlist">
				<!-- 商品图片 -->
				<img :src="item.img">
				<div>

					<span>
						<!-- 商品名称 -->{{ item.name }}
					</span>
					<div class="bottom clearfix">
						<el-button type="text" class="button">+</el-button>
						<el-button type="text" class="button">
							<!-- 商品数量 -->{{ item.num }}
						</el-button>
						<el-button type="text" class="button">-</el-button>
					</div>
				</div>
			</el-card>
		</div>
	</div>
	</div>

image.png

重新访问路由过早触发

需求说明****

在 vue-router v2.5.2 版本代码中存在一个 Bug，beforeRouteUpdate next() 在 “out-in” 转换中重新访问路由时触发过早。请修复此问题。

知识技能****

修复本问题，需要具备的知识技能：

  • 掌握 JavaScript 基础语法。

问题复现**** 这题有点意思，是早期的vue-router的一个bug  

选中左侧文件树中 index.html 右键 Open with Live Server 启动 Web 服务，然后点击环境右侧工具栏中的【Web 服务】，在浏览器预览页面效果如下：

  • 当你点击 “to /” 时，页面上会显示 “This is A”。
  • 当你点击 “to /b” 时，页面上会显示 “This is B”。
  • 当你再次点击 “to /” 时，页面上会显示 “This is”。

image.png

解决如下:

    const component = cache[name] = matched.components[name]

    // attach instance registration hook
    // this will be called in the instance's injected lifecycle hooks
    data.registerRouteInstance = (vm, val) => {
      // val could be undefined for unregistration
      if (matched.instances[name] !== vm || matched.instances[name] === vm) {
        matched.instances[name] = val
      }
    }

我们防止val出现为undefined的问题。

avatar
文章
阅读
粉丝