蓝桥杯 —— Web前端（数据交互类）【标题即题目链接，点击查看具体要求】

前端杂货铺

已于 2022-04-06 14:53:05 修改

阅读量1k

点赞数

分类专栏：蓝桥杯文章标签： vue javascript 前端蓝桥杯

于 2022-04-04 15:23:47 首次发布

本文链接：https://blog.csdn.net/qq_45902692/article/details/123950530

版权

蓝桥杯专栏收录该内容

5 篇文章 7 订阅

订阅专栏

简介👇

个人简介：某双非普通大学在校大学生一枚👨‍🎓
个人主页：-Baymax- 🙆‍♂️
博客内容：WEB前端（html、css、JavaScript、Vue、AJAX、ES6…） 👀
支持大白：点赞👍、收藏⭐、关注🏹

前言

web前端也会涉及到算法，但一般比较简单。

一、蓝桥杯是什么？🤔

蓝桥杯一般指蓝桥杯全国软件和信息技术专业人才大赛。

二、数据交互类题目

1.天气预报查询⭐⭐

在这里插入图片描述

解决方案：通过使用 jQuery 的 AJAX 请求，获取 JSON 中的数据。准备好一个对象，把数据存放到这个对象里面，然后获取到呈现内容的 div，通过 for 循环遍历，把 JSON 文件中的内容在对应位置呈现出来。

jQuery 发送 AJAX参考链接

function getweather() {
    let data = {}
    $.ajax({
        type:'GET',
        dataType:'JSON',
        url:'js/weather.json',
        async:false,
        success:function(res){
            data = res.result
            var items = document.querySelectorAll('.item')
            for(var i=0;i<data.length;i++){
                items[i].children[0].src = data[i].weather_icon
                items[i].children[1].children[0].innerHTML = data[i].weather
                items[i].children[1].children[1].innerHTML = data[i].temperature
                items[i].children[1].children[2].innerHTML = data[i].winp
                items[i].children[1].children[3].children[0].innerHTML = data[i].days
                items[i].children[1].children[3].children[1].innerHTML = data[i].week
            }
        }
    }) 
}

2.实现卡号绑定功能⭐⭐

在这里插入图片描述

解决方案：通过使用 jQuery 的 AJAX 请求，获取 JSON 中的数据。通过 for 循环遍历，卡号和密码都匹配正确的 flag 设置为 true，之后再通过 if…else 条件语句，在对应 div 展示相应的内容。

function bind(cardno, password) {
    //Todo:补充代码
    let data = {}
    $.ajax({
        type:'GET',
        dataType:'JSON',
        url:'js/cardnolist.json',
        async:false,
        success:function(res){
            data = res.cardnolist
            for(var i=0;i<data.length;i++){
                var flag = false
                if(data[i].cardno == cardno && data[i].password == password){
                    flag = true
                    break
                }
            }
            if(flag){
                $('#tip1').addClass('show').removeClass('fade')
                $('#tip2').removeClass('show').addClass('fade')
            }else{
                $('#tip2').addClass('show').removeClass('fade')
                $('#tip1').removeClass('show').addClass('fade')
            }
        }
    })
}

3.购物车⭐⭐⭐

在这里插入图片描述

解决方案：在 created(){} 里使用 axios 发送请求，获取到 JSON 文件里面的数据，然后对购物车列表添加 v-for 渲染，在对应位置做出数据或图片的呈现。然后在定义两个方法，一个是 add() 方法，另一个是 sub() 方法，再绑定到对应按钮上，从而实现个数的加减。

Axios 发送请求参考链接

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>购物车</title>
	<script src="./js/vue.js"></script>
	<script src="./js/axios.js"></script>
	<link rel="stylesheet" href="./css/element-ui.css">
	<link rel="stylesheet" href="./css/index.css">
</head>

<body>
	<div class="container" id="app">
		<h4>购物车</h4>
		<!-- 购物车列表 -->
		<div v-for="(good,index) in carlist">
			<el-card class="box-card">
				<!-- 商品图片 -->
				<img :src="good.img">
				<div>
					<span>
						<!-- 商品名称 -->
						{{good.name}}
					</span>
					<div class="bottom clearfix">
						<el-button type="text" class="button" @click="add(index)">+</el-button>
						<el-button type="text" class="button">
							<!-- 商品数量 -->
							{{good.num}}
						</el-button>
						<el-button type="text" class="button" @click="sub(index)">-</el-button>
					</div>
				</div>
			</el-card>
		</div>
	</div>
	</div>

	<!-- 引入组件库 -->
	<script src="./js/element-ui.js"></script>
	<script>
		new Vue({
			el: "#app",
			data: {
				carlist: [] //购物车列表
			},
			created() {
				// 在这里使用axios 发送请求
				axios
				.get('./carList.json')
				.then(res=>{
					this.carlist = res.data
				})
				.catch(function(error){
					console.log(error)
				})
			},
			methods:{
				add(index){
					this.carlist[index].num++
				},
				sub(index){
					if(this.carlist[index].num>0){
						this.carlist[index].num--
					}
				}
			}
		})
	</script>
</body>
</html>

总结

数据交互，通常是发送 AJAX 或者 Axios 等请求，获取到数据，然后再对数据进行一些列的操作，达到预期的功能效果。

三、写在最后的话✍

这篇文章能被你看到，是我很大的 荣幸！😊
如果这篇文章对你有些帮助，不妨 点赞👍、关注🥇 支持一下。
你的支持是我继续精心创作的 强大动力！🧑‍🚀

不积跬步无以至千里🌕 ，不积小流无以成江海🌊。
道阻且长，一起加油，与君共勉！😉

前端杂货铺

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
蓝桥杯 —— Web前端（数据交互类）【标题即题目链接，点击查看具体要求】

1.天气预报查询⭐⭐解决方案：通过使用 jQuery 的 AJAX 请求，获取 JSON 中的数据。准备好一个对象，把数据存放到这个对象里面，然后获取到呈现内容的 div，通过 for 循环遍历，把 JSON 文件中的内容在对应位置呈现出来。jQuery 发送 AJAX参考链接function getweather() { let data = {} $.ajax({ type:'GET', dataType:'JSON', ur
复制链接

扫一扫