前言
web前端也会涉及到算法，但一般比较简单。
一、蓝桥杯是什么？🤔
蓝桥杯一般指蓝桥杯全国软件和信息技术专业人才大赛。
二、数据交互类题目
1.天气预报查询⭐⭐
解决方案：通过使用 jQuery 的 AJAX 请求，获取 JSON 中的数据。准备好一个对象，把数据存放到这个对象里面，然后获取到呈现内容的 div， 通过 for 循环遍历，把 JSON 文件中的内容在对应位置呈现出来。
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() 方法，再绑定到对应按钮上，从而实现个数的加减。
<!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 等请求，获取到数据，然后再对数据进行一些列的操作，达到预期的功能效果。
不积跬步无以至千里🌕 ，不积小流无以成江海🌊。
道阻且长，一起加油，与君共勉！😉
