hello大家好我注意到了之前发的一篇蓝桥杯Web应用开发的文章是关注度最高的可能大部分关注我的小伙伴对蓝桥杯Web应用开发比较感兴趣或者想要参加不知道这么准备。

但是由于之前发的那一篇只是告诉参赛可以怎样准备附加的笔记可能也不够详细而且我发现之前官网免费学习的课程现在需要收费了。

┭┮﹏┭┮

因此我打算给各位小伙伴每隔几天比较详细地去发一篇该赛道的真题讲解。

每届的真题打算只介绍后面五道希望能够对大家有帮助。

自己介绍的解决思路也不一定是标准的希望大家能够一起学习进步有什么更好地思路也可以进行交流学习

相关的开源项目是每一个前端开发者都应该多多关注的。

我们可以通过这一年新增

star

https://labfile.oss.aliyuncs.com/courses/18213/2022-JavaScript.zip

unzip

文件中的数据必须使用给定的路径请求否则可能会请求不到数据并将后者中的数据保存至

translation

文件中以数组的形式存储了明星项目的数据translation.json

all-data.json

数量numberdescriptionCN项目中文描述stringdescriptionEN项目英文描述stringtags项目标签列表array

2.页面初始化时利用

3.当用户点击页面右上方的中英文切换按钮时根据用户的选择改变项目描述使用的语言不改变原有项目展示数量。

当用户选择英语模式时的项目展示效果如图所示

gif

请严格按照考试步骤操作切勿修改考试默认提供项目中的文件名称、文件夹路径、class

名、id

其实不要看好像题目要实现的功能或者效果很多没有啥思路。

但是其实按着题目给的思路一步一步地去完成它并结合一部分提供的代码就能够比较清楚地找到解决思路。

题目主要需要解决的功能点就是使用ajax来进行发送请求获取数据然后需要对数据来进行截取每次15条进行显示。

同时需要完成项目描述的中英文切换的功能。

题目给出的代码使用的是jQuery进行编写的所以在js文件中最好就进行统一同样地使用jQuery来进行编写。

想要完成这道题目你需要先知道如何使用jQuery来发送ajax请求。

然后每次展示的数量为15条可以使用数组中的slice来进行截取。

中英文切换可以获取声明的变量来做判断若为中文可以将项目的描述赋值为descriptionCN若为英文则赋值为descriptionEN。

知识补充

_default。

当请求不需要携带参数时可以直接传入url以及回调函数。

type可以不写当不写时jQuery会根据响应头中的Content-Type来自动解析返回的数据格式。

$.get(url地址,{name:N-A},function(data){console.log(data);

},json)

使用jQuery发送post请求格式为$.post(url,[data],[callback,[type])url请求的URL地址data:请求携带的参数。

callback载入成功时的回调函数。

type设置返回内容格式xml,html,script,json,text,_default。

$.post(url地址,{name:N-A},function(data){console.log(data);

},json)

url请求携带的参数data请求类型type响应体结果dataType以及成功的回调以及失败的回调函数。

$.ajax({url:请求地址,data:{name:N-A},type:GET,dataType:json,success:function(data){console.log(data);},error:function(){console.log(出错啦);}

数组slice方法

slice方法可以截取原来数组中元素不会修改原来的数组。

语法array.slice(start,end)。

start:表示开始位置规定从何处开始选取负数表示从数组尾部开始计算位置。

如果省略该参数默认从索引0开始。

end表示结束位置规定从何处结束选取负数表示从尾部开始计算位置。

如果省略该参数默认选取到数组末尾。

let

arr[1,2,3,4,5,6,7];console.log(arr.slice(2,4));//[3,4]console.log(arr.slice(2));//[3,4,5,6,7];console.log(arr.slice(-5,4));//[3,4]console.log(arr.slice(2,-1));//[3,4,5,6]console.log(arr.slice(-3));//[5,6,7]

介绍了slice顺便介绍一些splice方法该方法用户对数据进行删除以及添加会改变原本的数组。

当传入一个参数时会从该参数向后全部的数据都删除返回删除的数据。

let

arr1arr.splice(2)console.log(arr1);//[3,4,5,6,7]console.log(arr);//[1,2]

当传入两个参数时第一个参数表示从哪个位置开始删除第二个参数表示删除多个的元素。

返回的是删除的元素。

let

arr2arr.splice(1,1)console.log(arr2);//[2]console.log(arr);//[1,3,4,5,6,7]

当传入三个参数时前两个参数跟上面的一样功能在此基础上插入第三个参数。

返回的同样是删除的元素

let

arr3arr.splice(1,2,66)console.log(arr3);//[2,3]console.log(arr);//[1,66,4,5,6,7]

解答参考

首先我们实现项目数据文件和翻译数据文件的请求功能。

在请求之前先声明两个用于存储数据的数组第一个为items主要用于存储请求的所有数据。

第二个为datadata用于存储在页面展示的数据。

TODO:

$.get(./js/all-data.json,function(res){itemsres;

$.get(./js/translation.json,function(res){

translationres;

接着我们编写数据展示的功能每一次获取需要渲染15条数据第一次页面加载时就需要显示15条后续通过点击按钮在实现数据的逐步获取。

因此在声明一个index,主要用来记录申请的此时并赋初始值为1。

将获取数据的功能单独地封装成一个函数当第一次加载时就调用它然后每次单击按钮时调用它。

该方法可以接受一个参数该参数表示请求的次数将index传入。

TODO:

getData(num){dataitems.slice(0,num*15);data.slice(-15).forEach(element

{element.description

ul).append(createProjectItem(element));});

在函数里面使用slice方法来对全部的数据进行截取首次加载传入index的值为1它会从0截取到14一同15条数据。

当点击按钮加载更多时让index然后调用getData方法data的数据就是items的前三十条数据。

然后再通过slice方法传入-15来获取它后面新增的15条数据插入到列表页面中。

同时需要判断当前的currLang参数的值通过三目运算符来为每一个对象再添加一个属性description该属性的值主要通过currLang的值来决定。

let

$.get(./js/all-data.json,function(res){itemsres;getData(index);

//点击方法

$(.load-more).click(function(){index;getData(index);if(data.lengthitems.length){$(this).css(display,none);}

同时判断data的长度是否达到了items数组的长度若是的话说明数据已经全部都加载完毕了这时候改变该元素的display属性为none。

让其消失。

注意该方法若你使用的是箭头函数的话$(this指向的是window。

最后需要实现但点击切换中英文时项目卡片中的描述可跟着切换。

使用到的方式是直接获取它对应的p标签直接改变里面的文字。

TODO:

zh-cn){$(this).text(data[index].descriptionCN);

}else{$(this).text(data[index].descriptionEN);

}});

$.get(./js/all-data.json,function(res){itemsres;getData(index);

$.get(./js/translation.json,function(res){

translationres;

getData(num){dataitems.slice(0,num*15);data.slice(-15).forEach(element

{element.description

ul).append(createProjectItem(element));});

}$(.load-more).click(function(){index;getData(index);if(data.lengthitems.length){$(this).css(display,none);}

TODO-END//

{$(.lang).text(English);currLang

zh-cn;}

en;}$(body).find(*).each(function

{const

{$(this).text(translation[text]);}});//

TODO:

zh-cn){$(this).text(data[index].descriptionCN);

}else{$(this).text(data[index].descriptionEN);

}});

生成列表DOM元素的函数将该元素的返回值append至列表中即可生成一行项目数据

/***

classdesch3${name}/h3p${description}/pul

classstars${stars}