支付宝支付&内网穿透 一 沙箱环境二 python第三方模块python-alipay-sdk三 python-alipay-sdk二次封装四 支付接口五 内网穿透5.1 cpolar软件5.2 测试支付宝post回调 一 沙箱环境 注册认证沙箱环境:https://openhome.alipay.com/platform/appDaily.htm?tab=info 下载支付宝开放平台密钥工具:https://opendocs.alipay.com/common/02kipk 在开发中心的沙箱应用下设置应用公钥:填入生成的公钥文件中的内...... Last article READ

第十四届蓝桥杯(web应用开发) 模拟赛2期 -大学组_H-rosy的博客

凭空消失的TA

题解

加入第二行代码即可,没有使用elementUI提供的js文件,所以说提供的所有文件都是有用的呀~

 <!-- 引入 element-ui 样式 --> <link rel="stylesheet" href="./element-ui-2.15.10/index.css" /> <script src="./element-ui-2.15.10/index.js"></script> 

用户名片

题解

核心就是让整个卡片无论在什么时候都是页面居中,就是无论你缩放页面总是居中。这里就必须用到最后的center样式

* { margin: 0; padding: 0; } html, body { background: #fceeb5; height: 100%; overflow: hidden; } html, body { background: #fceeb5; } .card { width: 450px; height: 250px; background: #fff; box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.4); border-radius: 6px; overflow: hidden; position: absolute; margin: auto; left: 0px; bottom: 0; top: 0; right: 0; } .card h1 { text-align: center; } .card img { width: 110px; height: 110px; border-radius: 50%; } .additional { position: absolute; height: 100%; background: #92bca6; z-index: 2; } .user-card { width: 150px; height: 100%; position: relative; float: left; } .user-card .points { top: 85%; } .general { width: 300px; height: 100%; position: absolute; top: 0; right: 0; z-index: 1; box-sizing: border-box; padding: 12px; padding-top: 0; display: flex; flex-flow: column; justify-content: space-around; } .more{ display: block; text-align: right; } /* level 和  points 定位位置 */ .level, .points { width: 72px; text-align: center; position: absolute; color: #fff; font-size: 12px; font-weight: bold; background: rgba(0, 0, 0, 0.15); padding: 2px 0; border-radius: 100px; white-space: nowrap; /*这里改了一下*/ bottom: 5% !important; } /*  level 位置这里也改了一下 */ .level { top: -68% !important; height: 15px; } /* TODO 待补充代码 居中样式*/ .center{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } 

芝麻开门

题解

需要注意的是得把点击确定按钮的事件放在promise中,以至于最终返回的是mPrompt()的状态,不然放在外面返回的就是点击事件的状态了。我就是犯了这个错误,然后答案一直不对。然后点击事件用了.onclick和addEventListener事件监听器,因为开始不太熟悉还是什么都要多用用

const incantations = "芝麻开门"; function init(el) {   document.querySelector(".wrapper .btn").addEventListener("click", () => { mPrompt() .then((res) => {         console.log("@@@@@@@@@@" + res); if (res === incantations) {           document             .querySelectorAll("#door .doors")[0] .classList.add("door-left");           document             .querySelectorAll("#door .doors")[1] .classList.add("door-right"); } }) .catch((err) => {         console.log(err); }); }); } /**  * @description: 调用函数,开启弹窗,记录输入框的内容,并通过 promise 异步返回输入框中的内容  * @return {Promise}  */ function mPrompt() { // 弹窗必须使用以下结构 template 保存的是弹窗的结构字符串,可以先转化为 DOM 再通过 appendChild 方式插入到 body 中 const template = `         <div class="modal">             <div class="message-box">                 <div class="message-header">请输入咒语</div>                 <div class="message-body">                     <input type="text">                 </div>                 <div class="message-footer">                     <button class="btn btn-small" id='cancel'>取消</button>                     <button class="btn btn-small btn-primary" id='confirm'>确定</button>                 </div>             </div>         </div>     `; // 让对话框弹出,先创建子节点 const dialogDiv = document.createElement("div");   dialogDiv.innerHTML = template; // body元素最后追加一个div元素 let body = document.querySelector('body');   body.appendChild(dialogDiv); // 获取对话框的确定和取消按钮,通过这个来操作对话框的显示与隐藏 let confirmBtn = document.getElementById("confirm"); let cancelBtn = document.getElementById("cancel"); let inputVal = ""; // TODO:待补充代码 return new Promise((resolve, reject) => { // 点击确定事件     confirmBtn.onclick = function () { // 注意getElementsByTagName获取到的是数组,取第一个       inputVal = document.getElementsByTagName("input")[0].value       body.removeChild(dialogDiv) if (inputVal == "芝麻开门") { return resolve("芝麻开门") } else { return reject(false) } } // 取消事件     cancelBtn.addEventListener("click", () => {       body.removeChild(dialogDiv) reject(false) }) }) } 

宝贵的一票

总结

这个题还是比较简单的就是考察了简单点dom操作,但是犯了一点错误,就是最终一直没有评测成功,最后发现应该是我动了初始化函数initRender 最初的dom结构,我为了图方便直接在里面都加了那个叉号的dom,但是最后评测时是不能有叉号的dom元素存在的,虽然我使它的display为none了但是还是不能通过检测,提示只有第一次删除检测成功,后面的直到选项小于等于2时应该就失败了。因为它检测到了序列小于2时还存在删除按钮的dom结构。
写这些的目的就是告诉大家一定不要随便操作题目已经给出的dom结构,因为它的评判标准里面就应该会检测最终的dom结构。当然我这个也是有解决办法的,就是在最后判断选项长度小于等于2时直接把选项1和选项2的删除按钮的dom结构remove就ok啦~ 我是小辣鸡一起进步吧

题解

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>宝贵的一票</title> <script src="./js/jquery.min.js"></script> <link rel="stylesheet" href="./css/bootstrap.min.css" /> <link rel="stylesheet" href="./css/style.css" /> </head> <body> <div class="inner-container shadow"> <div class="mb-3 row"> <label class="col-sm-2 col-form-label">投票主题</label> <div class="col-sm-9"> <input type="text" class="form-control" /> </div> </div> <div class="list"></div> <div class="add"> <div class="addtxt"> <img src="./images/plus-square.svg" alt="加号图标" />         添加选项       </div> </div> <div class="form-check checkbox-one"> <input class="form-check-input" type="checkbox" value="" /> <label class="form-check-label" for="flexCheckDefault">         支持多选       </label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" /> <label class="form-check-label" for="flexCheckDefault">         公开投票结果       </label> </div> <div class="row bottom"> <div class="col"> <a class="historytxt" href="javascript:void(0)">历史投票</a> </div> <div class="col"></div> <div class="col"> <button type="button" class="btn btn-light">取消</button> <button type="button" class="btn btn-primary">发起投票</button> </div> </div> </div> <script> let initRender = (txt) => { return `<div class="mb-3 row" >                 <label class="col-sm-2 col-form-label txt">${txt}</label>                 <div class="col-sm-9">                     <input type="text" class="form-control">                </div>                <div class="col-sm-1">                  <!-- 删除图标 -->             <img class="del-icon" src="./images/x.svg" alt="" style="display:none" />             </div>                 </div>`; }; $( (function () { // 初始化的时候渲染两条数据,且不带删除符号 for (let index = 0; index < 2; index++) { let initList = initRender(`选项${index + 1}`); $(".list").append(initList); } // 点击加号逻辑 $(".add").click(function () { // TODO 待补充代码 // 获取当前选项列表的长度,根据initRender函数中的模板字符串可得到灵感 let listLength = $('.list .row').length; let initList = initRender(`选项${listLength + 1}`); $(".list").append(initList);           console.log(listLength); if (listLength >= 2) { $('.del-icon').css("display", "block") } }); // 点击 x 删除逻辑,列表小于 2 项时不显示删除图标 $(document).on("click", ".del-icon", function () { // TODO 待补充代码 // console.log($(this).parent().parent());等价于$(this).parents()[1] $(this).parents()[1].remove() let listLength = $('.list .row').length; for (let index = 0; index < listLength; index++) { $('.txt')[index].innerHTML=`选项${index+1}` }            console.log(listLength); if (listLength> 2) { $('.del-icon').css("display", "block") }else{ $('.del-icon').css("display", "none") // 切记要删除这里呀,因为判题应该是根据dom结构来滴 $('.list .col-sm-1').remove() } }); })() ); </script> </body> </html> 

粒粒皆辛苦

思路:

  • 先直接看json文件中的数据格式,看到是一个对象中嵌套对象的格式。获取数据就好
  • 一般echarts题都有初始化渲染的例子,我们不要动,然后直接看它是怎么渲染的,照着写就行。
    获取到数据后对数据进行处理,我是直接使用for of 对对象进行遍历然后将里面不同类型的值进行分类
  • 直接修改 option.dataset.source中的值注意最前面要加上大豆,玉米啥的中文名。最后一定得调用渲染函数myChart.setOption(option);最终页面才会改变

题解

<!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>粒粒皆辛苦</title> <script type="text/javascript" src="./js/echarts.min.js"></script> <script src="./js/axios.min.js"></script> </head> <body style="height: 100%; margin: 0; overflow: hidden"> <div id="container" style="height: 80%; width: 80%; margin: 5% auto"></div> <script> var dom = document.getElementById("container"); var option; var myChart = echarts.init(dom, null, { renderer: "canvas", useDirtyRect: false, }); let initCharts = () => {       option = { title: { text: "近五年 x 市粮食总产量分布以及 2022 年粮食产量比例", subtext: "单位(万吨)", }, dataset: { //source -> 图表显示所需的数据格式(饼形图和折线图共用),请勿手动修改此行 source: [ ["全部", "2017", "2018", "2019", "2020", "2021", "2022"], ["小麦", 1, 1, 1, 1, 1, 1], ["大豆", 9, 9, 9, 9, 9, 9], ["马铃薯", 13, 13, 13, 13, 13, 13], ["玉米", 23, 23, 23, 23, 23, 23], ], }, xAxis: { type: "category" }, yAxis: { gridIndex: 0 }, grid: { top: "55%" }, series: [ { type: "line", seriesLayoutBy: "row", }, { type: "line", seriesLayoutBy: "row", }, { type: "line", seriesLayoutBy: "row", }, { type: "line", seriesLayoutBy: "row", }, { type: "pie", id: "pie", radius: "30%", center: ["50%", "25%"], label: { // 2022 数据的百分比 formatter: "{b} {@2022} ({d}%)", }, encode: { itemName: "全部", value: "2022", tooltip: "2022", }, }, ], }; if (option && typeof option === "object") { // myChart.setOption -> 设置 echarts 数据的方法         myChart.setOption(option); }       window.addEventListener("resize", myChart.resize); }; initCharts(); // TODO: 待补充代码 var dataList = {} // 初始化四个数组 var wheat = ["小麦"], soybean = ["大豆"], corn = ["玉米"], potato = ["马铃薯"]     window.onload = function () {       axios.get(' ./data.json') .then(res => {           dataList = res.data.data; // 双重循环取对象值 for (item in dataList) { //  console.log(dataList[item]); let value = dataList[item] for (subitem in value) { // console.log(value[subitem]); if (subitem === "wheat") {                 wheat.push(value[subitem]) } else if (subitem === "soybean") {                 soybean.push(value[subitem]) } else if (subitem === "corn") {                 corn.push(value[subitem]) } else if (subitem === "potato") {                 potato.push(value[subitem]) } } }           option.dataset.source = [ ["全部", "2017", "2018", "2019", "2020", "2021", "2022"],             wheat,             soybean,             potato,             corn,]                      myChart.setOption(option);           console.log(option); }) } </script> </body> </html> 

618 活动

介绍

最近蓝桥准备了很多 618 优惠,今天我们将化身蓝桥前端小工,亲自动手制作一个 618 活动页面,快来一显身手吧。

后面补哈~~

资讯接口

题解

其实和模拟一的那个node题都是一样的原理

const http=require('http'); const server=http.createServer(); server.on('request',(req,res)=>{ // 设置请求头     res.setHeader("Content-type", "text/html;charset=utf8"); if(req.url=="/news"){     res.end(JSON.stringify( [ { "channelId": "5572a108b3cdc86cf39001cd", "name": "国内焦点" }, { "channelId": "5572a108b3cdc86cf39001ce", "name": "国际焦点" } ] )) }else{     res.end("404") } })  server.listen(8080,function(){     console.log("8080端口启动成功"); }) 

绝美宋词

题解

思路:使用v-model实现双向绑定,最后使用watch监听words的变化,最后需要使用v-html指令在展示经过我们处理的字符串

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>绝美宋词</title> <link rel="stylesheet" href="css/style.css" /> <script src="./js/vue.min.js"></script> <script src="./js/axios.min.js"></script> </head> <body> <div id="app"> <h1 style="text-align: center">输入关键字,找一首词</h1> <!-- TODO:待补充代码 --> <div class="search-form"> <input type="text" id="search" v-model="words" class="search" placeholder="词牌名 词句 词人" /> <ul class="suggestions" v-if=""> <li v-for="item in resultList" :key="item.title"> <span class="poet" v-html="item.poetry_content"></span> <span class="title" v-html=`${item.title}-${item.author}`></span> </li> </ul> </div> </div> <script> let vm = new Vue({ el: '#app', // TODO:待补充代码 data() { return ({ poetryList: [],//数据库数据 resultList: [],//最终展示数据 words: '' //关键字 }) }, mounted() {         axios.get('./data.json').then(res => { this.poetryList = res.data         }) }, watch: { words(newVal, oldVal) { if (newVal === '') { //如果关键字为空不匹配,直接返回 this.resultList = []; return; }           console.log("newVal值", newVal); this.resultList = []; this.poetryList.forEach(item => { // 处理关键字,得到含有关键字的对象 if (item.poetry_content.includes(newVal) || item.title.includes(newVal) || item.author.includes(newVal)) { // 注意这里得使用深拷贝,不然在下面重新赋值resultList时会改变原有的从JSON中的数据, // 导致最终只能匹配一个字符 this.resultList.push(JSON.parse(JSON.stringify(item))) } }) // 处理高亮,全部的 let reg = new RegExp(newVal, 'g'); this.resultList.forEach(ele => { // 关键字替换             ele.poetry_content = ele.poetry_content.replace(reg, `<span class="highlight">${newVal}</span>`)             ele.title = ele.title.replace(reg, `<span class="highlight">${newVal}</span>`)             ele.author = ele.author.replace(reg, `<span class="highlight">${newVal}</span>`); }) }, } }) </script> </body> </html> 

平地起高楼

题解

这个题最开始我是想直接一遍又一片for循环的后来发现好像所有的流程都是一样的,就开始尝试使用递归,但是最开始的递归时所有的数据都是单独存在的,并没有什么联系,于是我就打开了控制台反复测试每一次递归的结果,发现的确每一次递归都是正确的,但是我设置的resultList.children=convertToTree(regions, item.id)并没有效果,导致所有的数据都无法关联,最后测试出了可以直接使用item.children,因为regions的数据是我们每一次递归都不会改变的,所以可以对其进行操作,保证最后的递归数据能够串联起来。

function convertToTree(regions, rootId = "0") { // TODO: 在这里写入具体的实现逻辑 // 将平铺的结构转化为树状结构,并将 rootId 下的所有子节点数组返回 // 如果不存在 rootId 下的子节点,则返回一个空数组 let resultList=[]; // let testList=[]   regions.forEach(item=>{ // let testList=[]; if(item.pid===rootId){ // 符合结果就放进去,比如最先找到四川,然后就把四川 //放进去,之后在把四川作为pid去查找下一个子代。之后在遍历子代       resultList.push(item); // testList=resultList // 没用,因为每一次递归后的return的是resultList,所以最终会不断 //的改变,所以得使用item.children,直接改变它的值 //resultList.children=convertToTree(regions, item.id) // 为孩子做准备,题目也说了如果没有孩子就设置为空数组,不影响 // item.children=[],这一次递归的结果就是找到这一轮符合要求的子代 //这里把item.id作为pid继续查找子代       item.children=convertToTree(regions, item.id) // console.log(convertToTree(regions, item.id)); // resultList.children=convertToTree(regions, item.id);  // console.log(resultList);解开注释,观察递归效果 } }) return resultList; }  module.exports = convertToTree; // 检测需要,请勿删除 

收快递了

最初错误示例

function findRegion(regions, regionName) { // TODO: 在这里写入具体的实现逻辑 // 需要从树状结构的行政信息中,遍历找到目标区域的行政信息,如输入:成都市,返回 [四川省,成都市] // 如果所输入的位置信息不存在,则返回 null let replceList=regions[0]; // 省 let resultArr=[regions[0].name]; if(replceList.name===regionName){ return resultArr; } var flag1=false; for(let i=0;i<replceList.children.length;i++){ // 市级 if(replceList.children[i].name===regionName){       resultArr.push(regionName)       flag1=true break; }else{ // 区级      replceList.children[i].children.forEach(item=>{ if(item.name===regionName){           flag1=true           resultArr.push(replceList.children[i].name)             resultArr.push(item.name) } }) } } if(flag1){ return resultArr; }else{ return null; } } module.exports = findRegion; // 检测需要,请勿删除 

题解

检测发现原来是我最初的时候就把省份定死啦,我以为最后测试的数据只有一个省原来不是!!!所以在加一层循环就好啦!!!但是这样真的很消耗时间哦,幸好不是算法竞赛,不然就给我TTL了,真给我写麻了。
需要注意的是只有for循环或者while等其他循环语句才可以使用break,所以当我使用forEach时是没有使用break跳出的。

function findRegion(regions, regionName) { // TODO: 在这里写入具体的实现逻辑 // 需要从树状结构的行政信息中,遍历找到目标区域的行政信息,如输入:成都市,返回 [四川省,成都市] // 如果所输入的位置信息不存在,则返回 null let resultArr=[] var flag1 = false;//最终返回条件 for (let t = 0; t < regions.length; t++) { // 省 if (regions[t].name === regionName) {       resultArr.push(regions[t].name)       flag1 = true; break } else { for (let i = 0; i < regions[t].children.length; i++) { // 市级 if (regions[t].children[i].name === regionName) {           resultArr.push(regions[t].name)           resultArr.push(regionName)           flag1 = true break; } else { // 区级           regions[t].children[i].children.forEach(item => { if (item.name === regionName) {               flag1 = true               resultArr.push(regions[t].name)               resultArr.push(regions[t].children[i].name)               resultArr.push(item.name) } }) } } } } if (flag1) { return resultArr; } else { return null; } }  module.exports = findRegion; // 检测需要,请勿删除 
前言 都说程序员工资高、待遇好, 2022 金九银十到了,你的小目标是 30K、40K,还是 16薪的 20K?作为一名 Java 开发工程师,当能力可以满足公司业务需求时,拿到超预期的 Offer 并不算难。然而,提升 Java 核心能力最快、最有效,短期内升职加薪的方法,到底是什么? 首先,你需要跳出日常工作,接触更有深度、更前沿的顶级项目。一个简单的逻辑:大厂之所以能够给到高于行业水准的薪资,正......Next article READ