搜索到
7
篇与
苏顾.
的结果
-
tailwindcss在使用cdn引入静态html的时候，vscode默认不会提示问题 前言 在昨晚偶然了解到tailwindcss这个css框架，第一时间想上手实践，唯一的问题就是没有代码提示，不显示类名，今天在互联网的海洋里遨游一番，才有了最新的解决办法解决方法 1.首先确保vscode下载tailwind插件：Tailwind CSS IntelliSense 2.需要在根目录文件夹创建一个tailwind.config.js文件 3.编辑tailwind.config.jsmodule.exports = {}插件扩展设置中的Tailwind CSS :Emmet Completions默认是未勾选的,可根据需要手动勾选，这里建议勾选无需引入即可使用插件，提供代码提示原教程来自http://t.csdnimg.cn/p8CVR，https://muki.tw/cdn-tailwindcss-vscode-enable-tailwindcss-intellisense/，http://t.csdnimg.cn/2OFNM，本文在此基础上有做修改结语 感谢你花时间阅读本文。如果它对你有所帮助，请考虑打赏一下或点个赞。你的支持是我继续创作的动力。祝你学习愉快，代码顺利！ -
苏顾原创个人主页，引导页 homepage苏顾原创个人主页，引导页介绍苏顾原创个人主页,引导页,纯html,css,采用原生js编写使用说明从GitHub仓库下载，解压打开可部署在云服务器，虚拟主机上支持切换随机必应壁纸，支持切换网站运行时间样式默认pc端谷歌搜索，手机端默认百度，支持切换百度，必应搜索支持深色模式支持设置网站运行时间支持自定义网址跳转目前只支持博客，QQ，gitee，bilibili注意事项fonts目录下，请将字魂大黑字体文件替换成自己喜欢的字体，不要改动iconfont.ttf文件css目录下，请不要改动iconfont.css文件，默认图标引用预览访问地址：https://www.sugu6.top联系方式qq：3342113181GitHub地址 https://github.com/y3342113181/homepage隐藏内容，请前往内页查看详情结语代码已开源在GitHub上，喜欢记得star支持一下，本文如果对你有帮助，请小小打赏一下，不胜感激
-
idea修改默认maven镜像，不本地配置maven 前言 临近期末，期末考试完，几乎都有相关专业的实训，我们专业也不乏，最近开展SSM实训，老师只会让我们本地配置maven，我并不想这样，在搜索了相关设置后，便有了下文解决过程 对于idea的maven，默认链接是https://repo.maven.org/maven2/，下载maven索引极慢，相对速度可观的官方镜像是https://repo1.maven.org/maven2/，第二首选便是华为云镜像https://mirrors.huaweicloud.com/repository/maven/，有小伙伴会问，为什么不用阿里云，阿里云的镜像中并不包含仓库的index索引文件，所以这里使用华为云1.首先打开设置2.搜索maven3.找到自己默认的settings.xml文件，没有新建一个4.修改settings.xml文件,在vscode或者其他编辑器打开,ctrl+f搜索mirrors,在标签里添加mirror标签(文末会放完整文件)<mirror> <id>repo1</id> <mirrorOf>central</mirrorOf> <name>Human Readable Name for this Mirror.</name> <url>https://repo1.maven.org/maven2/</url> </mirror> <mirror> <id>huaweicloud</id> <mirrorOf>central</mirrorOf> <url>https://mirrors.huaweicloud.com/repository/maven/</url> </mirror> </mirrors>隐藏内容，请前往内页查看详情结语 本文如果对你有帮助，希望能小小打赏一下，不胜感激
-
eclipse注释设置问题（暂时还没解决） 今天突然想用用eclipse，老牌Java代码IDE，结果就发现了个很无语的东西，就是eclipse的注释，默认 Eclipse 对于 Java 代码的单行注释是把注释的斜杠放在行数的最开头，默认如下图：问题随之而来，如何设置单行注释的两个斜杠跟随在代码的头部?示例图片如下：类似的代码编辑器，如vscode，idea要不就默认跟随，要不有设置修改，唯独eclipse，没有明确的设置，我在网上又用百度，又查谷歌，也没找到解决方法，类似折中的，就是在Java代码格式化上做修改，但是代码格式化的快捷键shift+ctrl+f只对多行//有用，不对单行注释生效，所以如果后续有解决方法我也会持续跟新此篇文章，今天先到这里了
-
蓝桥杯十五届省赛Web应用开发题目答案解析 赛后直播的答案，也包括职业院校组的，给需要的小伙伴们：1. 智能停车系统 ⭐️考点： flex 布局解题答案：.cars { position: absolute; z-index: 2; display: flex; width: 600px; height: 600px; flex-direction: column; /* TODO: 请在下方编写题目代码，不要更改其他选择器里的代码 */ flex-wrap: wrap; align-content:space-between; justify-content:space-between; }2. 分享点滴 ⭐️考察：对象的遍历，字符串基本操作答案1：function appendParamsToURL(url, params) { // 创建一个空字符串来存储参数字符串 let str = ""; // 遍历参数对象中的每个键 for (const key in params) { // 将键值对追加到字符串中 str += `${key}=${params[key]}&`; } // 移除字符串末尾的 "&" 符号 str = str.slice(0, -1); // 判断是否原始 URL 已包含查询字符串（通过是否包含 "?" 符号来判断） // 如果已包含查询字符串，则设置 sym 变量为 "&"，用于以 "&" 作为分隔符追加参数 // 否则，设置 sym 变量为 "?"，作为查询字符串的起始符号 let sym = url.includes("?") ? "&" : "?"; // 连接原始 URL、sym 符号和参数字符串，并返回最终的 URL return `${url}${sym}${str}`; }答案2：function appendParamsToURL(url, params) { // 使用 Object.entries() 获取参数对象的所有键值对并按照规则拼接 const paramArray = Object.entries(params).map( ([key, value]) => `${key}=${value}` ); // 使用join方法拼接参数字符串 const paramString = paramArray.join("&"); // 判断URL中是否已包含参数 let sym = url.includes("?") ? "&" : "?"; // 返回拼接后的URL return `${url}${sym}${paramString}`; }3. 布局切换 ⭐️考察 DOM 操作、class 类名操作 option.addEventListener('click', function () { for (const otherOption of layoutOptions) { // 移除其他选项的 active 类 otherOption.classList.remove('active'); } // TODO：待补充代码 this.classList.add('active'); // 为当前选项添加active类 }4. 产品360度展示 ⭐️⭐️考察：Promise、循环答案1：const pipeline = async (initialValue, sequence) => { let res = initialValue; for (const fn of sequence) { res = await fn(res); } return res; };答案2：const pipeline = (initialValue, sequence) => { let res = Promise.resolve(initialValue); for (const fn of sequence) { res = res.then((result) => fn(result)); } return res; };5. 多表单验证 ⭐️考察element-plus组件的使用const validateName = (rule, value, callback) => { if (value === "") { callback(new Error("请输入姓名")); } else { const reg = /[^\u4e00-\u9fa5]/g; if (reg.test(value)) { callback(new Error("只能输入汉字")); } callback(); } }; // TODO-3：书写表单校验规则，并绑定到对应表单上 const rules = reactive({ name: [ { required: true, message: "请输入姓名", trigger: "blur" }, { validator: validateName, trigger: "blur" }, ], sex: [{ required: true, message: "请选择性别", trigger: "change" }], age: [{ required: true, message: "请输入年龄", trigger: "blur" }], isCompetition: [ { required: true, message: "请选择是否参加过编程比赛", trigger: "change" }, ], isEntrepreneurship: [ { required: true, message: "请选择是否有过创业经历", trigger: "change" }, ], });6. 找回连接的奇幻之旅 ⭐️⭐️⭐️考察：函数封装、闭包function resetableOnce(fn) { let done = false; // 标记函数是否已执行 let result; // 保存函数执行的结果 /** * 保证只执行一次的函数 * @returns {Any} 返回函数fn的执行结果 */ function runOnce() { if (!done) { // 如果之前没有执行过，则执行函数fn，并保存结果 result = fn.apply(this, arguments); done = true; // 标记为已完成，确保之后不再执行 } // 返回之前执行的结果 return result; } /** * 重置函数的执行状态 */ function reset() { done = false; // 重置done为false，允许函数再次执行 } // 返回控制对象 return { runOnce, reset }; }7. 悠然画境 ⭐️⭐️考察数组操作、字符串操作function generateAndDisplayImages(imageCount, selectedText) { // TODO：待补充代码 根据数量和用户输入在页面上生成图片并显示到 .right-panel 元素中 let count = 0; artDataArray.forEach((el) => { let tags = el.tags.split("、"); tags.forEach((tag) => { if (selectedText.includes(tag)) { count++; } }); el["count"] = count; count = 0; }); artDataArray.sort((a, b) => { return b.count - a.count; // 从小到大 -> a.age - b.age }); let b = artDataArray.slice(0, imageCount); return b; }8. 简易JSX解析器 ⭐️⭐️考察 dom 操作、字符串方法/** * 将驼峰式命名转换为短横线命名 * @param {string} str - 驼峰式命名的字符串 * @returns {string} - 转换后的短横线命名字符串 */ function camelToDash(str) { let result = ""; let hasUppercase = false; // 标记字符串中是否包含大写字母 for (let i = 0; i < str.length; i++) { let char = str.charAt(i); // 检查当前字符是否为大写字母 if (char === char.toUpperCase()) { hasUppercase = true; if (i > 0) { result += "-"; // 在大写字母前添加短横线 } result += char.toLowerCase(); // 将大写字母转换为小写字母并添加到结果中 } else { result += char; // 如果不是大写字母，直接添加到结果中 } } // 如果字符串中没有大写字母，则直接返回原字符串 if (!hasUppercase) { return str; } return result; } const jsx = (type, config) => { /* TODO: 请完善 jsx 函数的代码实现 */ const dom = document.createElement(type); for (let key in config) { const prop = config[key]; if (key === "style") { // 处理样式 let styleStr = Object.entries(prop) .map((item) => { return `${camelToDash(item[0])}:${item[1]}`; }) .join(";"); dom.setAttribute("style", styleStr); } else if (typeof prop === "function") { dom[key] = prop; } else if (key === "children") { // 处理 children if (typeof prop === "string") { dom.appendChild(document.createTextNode(prop)); } else { prop.forEach((child) => typeof child === "string" ? dom.appendChild(document.createTextNode(child)) : dom.appendChild(child) ); } } else { // 处理其他属性 dom.setAttribute(key, prop); } } return dom; };9. tree命令助手 ⭐️⭐️⭐️考察fs、递归函数function generateTree(dirPath) { // 读取目录下的所有文件和文件夹 const files = fs.readdirSync(dirPath); const tree = []; files.forEach(file => { const filePath = path.join(dirPath, file); const isDirectory = fs.statSync(filePath).isDirectory(); if (isDirectory) { // 如果是目录，则递归生成子目录的文件树 const subtree = generateTree(filePath); tree.push({ name: file, children: subtree }); } else { // 如果是文件，则直接添加到文件树 tree.push({ name: file }); } }); return tree; }10. Github明星项目统计 ⭐️⭐️⭐️考察 vue3v-for、Echarts数据处理<select name="language" id="language" @change="changeHandle" v-model="language"> <option v-for="language in languages" :value="language">{{language}}</option> </select> <script> setup() { const changeHandle = () => { let newData = chartData.value.filter(item => item.language === language.value); if (language.value === 'All') { newData = chartData.value; } newData = newData.slice(pageStart.value - 1, pageEnd.value); xData.value = newData.map(item => item.name); yData.value = newData.map(item => item.stars); initChart(); }; } </script>11. 小蓝驿站 ⭐️⭐️⭐️考察 vue3v-for、ref、数据处理// 目标 1 <ul class="contacts-list"> <!-- 使用 Vue 的 v-for 指令循环渲染 sortedContacts 中的每个联系人组 --> <li class="contacts-group" v-for="(group, groupIndex) in sortedContacts" :key="groupIndex" > <!-- 如果联系人组中有联系人，则显示该组的标题 --> <div v-if="group.contacts.length > 0" class="contacts-group-title"> {{ group.letter }} </div> <!-- 使用 v-for 指令循环渲染每个联系人 --> <ul> <li class="contact-item" v-for="(contact, contactIndex) in group.contacts" :key="contactIndex" > <!-- 显示联系人名字 --> <span class="contact-name">{{ contact.name }}</span> <button class="del-contact-button">删除</button> </li> </ul> </li> </ul> <script> setup() { // 目标 2 const addContact = () => { // TODO：待补充代码 目标 2 if (newContact.value.trim() !== "") { // 获取新联系人名字的首字母并转为大写 const firstLetter = newContact.value[0].toUpperCase(); // 查找是否有相同首字母的联系人组 const groupIndex = contacts.value.findIndex( (group) => group.letter === firstLetter ); if (groupIndex > -1) { // 如果找到了相同首字母的联系人组，就添加到该组 contacts.value[groupIndex].contacts.push({ name: newContact.value }); } else { // 如果没有找到相同首字母的联系人组，就新建一个组，并添加到联系人列表 const newGroup = { letter: firstLetter, contacts: [{ name: newContact.value }], }; contacts.value.push(newGroup); } } // TODO：END // 添加完成清空联系人输入框 newContact.value = ""; }; } </script>12. 商品浏览足迹 ⭐️⭐️⭐️考察 axios 请求、数据处理window.onload = async ()=> { const res = await axios("./js/data.json"); const newData = getData(res.data); showData(newData); }; /** * 将同一天浏览的相同商品去重并作为数组返回 * @param {Array} defaultData json 文件中读取到的原始数据 * @returns 去重后的数据，数据结构与 defaultData 相同 */ const removeDuplicates = defaultData => { let newData = []; // TODO：在下面补充代码，最终完成该函数封装 defaultData.forEach((defaultGoods) => { const defaultDate = new Date(defaultGoods.viewed_on); const dD = `${defaultDate.getFullYear()}-${ defaultDate.getMonth() + 1 }-${defaultDate.getDate()}`; defaultGoods.date = dD; let hadThisGoods = false; newData.forEach((tmpGoods) => { const tmpDate = new Date(tmpGoods.viewed_on); const tD = `${tmpDate.getFullYear()}-${ tmpDate.getMonth() + 1 }-${tmpDate.getDate()}`; if (tmpGoods.id == defaultGoods.id && tD == dD) { hadThisGoods = true; } }); if (!hadThisGoods) { newData.push(defaultGoods); } }); return newData; } /** * 将去重后的数据根据字段 viewed_on（格式化为 YYYY-MM-DD） 降序排序 * @param {*} defaultData 去重后的数据 * @returns 根据字段 viewed_on（格式化为 YYYY-MM-DD） 降序排序 */ const sortByDate = defaultData => { let newData = []; // TODO：在下面补充代码，最终完成该函数封装 function sortByProperty(property, asc) { return function (value1, value2) { let a = new Date(value1[property]); let b = new Date(value2[property]); // 默认升序 if (asc == undefined) { return a - b; } else { return asc ? a - b : b - a; } }; } newData = defaultData.sort(sortByProperty("date", false)); return newData; } /** * 将去重排序后的所有商品数据，作为一个对象存储并返回， * 该对象的所有 `key` 为浏览商品的当天日期（即，字段 viewed_on 格式化为 YYYY-MM-DD）， * `value` 为当天浏览的所有商品（以数组形式表现）。 * @param {Array} defaultData 重后的所有商品数据 * @returns */ const transformStructure = defaultData => { let newData = {}; // TODO：在下面补充代码，最终完成该函数封装 // 月份和日期 不足10的前面补0 defaultData.forEach(item=>{ let date=new Date(item.date) ; let y = date.getFullYear() let m = date.getMonth()+1 m=m<10?'0'+m:m let d = date.getDate(); d=d<10?'0'+d:d item.date=`${y}-${m}-${d}`; }) newData = defaultData.reduce((aD, item) => { console.log(item); if (!aD[item.date]) { aD[item.date] = []; aD[item.date].push(item); } else { if (!aD[item.date].includes(item.date)) { aD[item.date].push(item); } } return aD; }, {}); return newData; }13. 扫雷游戏 ⭐️⭐️⭐️⭐️考察二维数组操作、递归function mineSweeperAlgorithms(arr, { row, col }) { if (flagData[row][col]) return; flagData[row][col] = true; const { positionWithoutMineArr, count } = getAroundAndCount(arr, { row, col, }); if (count == 0) { // 如果当前格子周围没有地雷，递归执行扫雷算法 positionWithoutMineArr.forEach((around) => { mineSweeperAlgorithms(arr, around); }); } }14. NPM Download Simulator ⭐️⭐️⭐️⭐️考察：获取数据类型、 promise.racefunction myRace(iterable) { return new Promise((resolve, reject) => { if (!(Symbol.iterator in Object(iterable))) { reject( new TypeError( `${Object.prototype.toString .call({ iterable }) .slice(-8, -1) .toLocaleLowerCase()} is not iterable` ) ); return; } const promises = Array.from(iterable); let resolvedOrRejected = false; for (const promise of promises) { Promise.resolve(promise).then( (value) => { if (!resolvedOrRejected) { resolvedOrRejected = true; resolve(value); } }, (reason) => { if (!resolvedOrRejected) { resolvedOrRejected = true; reject(reason); } } ); } }); }{mtitle title="E N D"/} 本文转自赵阿卷《蓝桥杯十五届省赛Web应用开发题目答案解析》
