江月迟迟的个人知识库

外观

蓝桥模拟赛 ​

作者:江月迟迟
发表于:2024-12-10
字数统计:4223 字
预计阅读15分钟
js
const copyObj = (obj,id)=>{
  // TODO：找出下面代码中的问题并修复
  let newObj = Object.assign({}, obj);
  newObj.name += '（副本）';
  newObj.isCopy = true;
  newObj.id = id;
  return newObj;
}

// 检测需要，请勿删除
module.exports = copyObj;
js
// TODO：在下面补充代码实现功能
const range = document.getElementById('range')
const fieldset = document.querySelector('fieldset')
const left = document.getElementById('left')
const right = document.getElementById('right')


fieldset.style.setProperty('--_c1', left.value)
fieldset.style.setProperty('--_c2', right.value)
fieldset.style.setProperty('--_x', range.value + range.dataset.unit)

range.addEventListener('input', () => {
    fieldset.style.setProperty('--_c1', left.value)
    fieldset.style.setProperty('--_c2', right.value)
    fieldset.style.setProperty('--_x', range.value + range.dataset.unit)
})

left.addEventListener('input', () => {
    fieldset.style.setProperty('--_c1', left.value)
    fieldset.style.setProperty('--_c2', right.value)
    fieldset.style.setProperty('--_x', range.value + range.dataset.unit)
})

right.addEventListener('input', () => {
    fieldset.style.setProperty('--_c1', left.value)
    fieldset.style.setProperty('--_c2', right.value)
    fieldset.style.setProperty('--_x', range.value + range.dataset.unit)
})
js
  <!-- TODO开始: 修改代码，实现点击按钮切换组件 -->
      <Component :is="isFlower ? 'Flower' : 'Ocean'"></Component>
      <div class="btns">
        <button type="button" id="btn1" class="btn" @click="isFlower = true">花</button>
        <button type="button" id="btn2" class="btn" @click="isFlower = false">大海</button>
      </div>
      <!-- TODO结束 -->


setup() {
        // TODO开始: 添加代码，实现动态组件切换效果
        const isFlower = ref(true)
        return {isFlower}
        // TODO结束
      },
js
  // 点击展开背景图选项
  document.addEventListener("DOMContentLoaded", function() {
    var accordionItems = document.getElementsByClassName("accordion-item");
    for (var i = 0; i < accordionItems.length; i++) {
      accordionItems[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var content = this.querySelector(".accordion-content");
        if (content.style.maxHeight) {
          content.style.maxHeight = null;
        } else {
          content.style.maxHeight = content.scrollHeight + "px";
        }
      });
    }
  });
  // 可选择的皮肤列表
  let imgs = document.querySelectorAll('.accordion-content img');
  let box = document.getElementById('box');
  // 清除皮肤按钮
  let clearSkin = document.getElementById('clearSkin');
  //如果从没有设置皮肤,box的class名为default,一旦设置了皮肤box的class名为active
  // TODO start 

  if (localStorage.getItem('img')) {
    box.classList.remove('default')
    box.classList.add('active')
    body.style.backgroundImage = localStorage.getItem('img')
  }

  imgs.forEach((item, index) => {
    item.addEventListener('click', () => {
      if (box.classList.contains('default')) {
        box.classList.remove('default')
        box.classList.add('active')
        body.style.backgroundImage = `url(./images/${index + 1}.jpg)`
        localStorage.setItem('img', `url(./images/${index + 1}.jpg)`)
      } else {
        body.style.backgroundImage = `url(./images/${index + 1}.jpg)`
        localStorage.setItem('img', `url(./images/${index + 1}.jpg)`)

      }
    })
  });

  clearSkin.addEventListener('click', () => {
    if (box.classList.contains('active')) {
      box.classList.remove('active')
      box.classList.add('default')
      body.style.backgroundImage = ''
      localStorage.removeItem('img')
    }
  })
  // TODO end
js
  computed: {
        // 十六进制
        // TODO：在下面补充代码实现进制转换功能，具体要求如下：实现其他进制转换为十六进制
        HEX() {
            return parseInt(this.request, this.parameter).toString(16)
        },
        // 十进制
        // TODO：在下面补充代码实现进制转换功能，具体要求如下：实现其他进制转换为十进制
        DEC() {
           return parseInt(this.request, this.parameter)
        },
        // 八进制
        // TODO：在下面补充代码实现进制转换功能，具体要求如下：实现其他进制转换为八进制
        OCT() {
            return parseInt(this.request, this.parameter).toString(8)

        },
        // 二进制
        // TODO：在下面补充代码实现进制转换功能，具体要求如下：实现其他进制转换为二进制
        BIN() {
            return parseInt(this.request, this.parameter).toString(2)

        }
js
/**
 * 请完成下面的 TODO 部分，其他代码请勿改动
 */
function $(selector) {
    return document.querySelector(selector);
}
const submitBtn = $('button[type=submit]');//提交按钮
const nameDom = $('input#name');
const ageDom = $('input#age');
const phoneDom = $('input#tel');
const ul = $('.bottom ul');
const showAddTbody = $('main.container .bottom table>tbody');
const showAllTbody = $('section.container table>tbody');

function parseRes(data) {
    const invaild = ['object', 'null', 'undefined', 'array', 'function', 'number', 'string'];
    if (typeof data !== 'string') {
        return
    }
    for (const item of invaild) {
        if (data.includes(item)) {
            return
        }
    }
    if (data.startsWith('[') && data.endsWith(']')) {
        // 解析数组
        return eval(data);
    }
    if (data.startsWith('{') && data.endsWith('}')) {
        // 解析对象
        return JSON.parse(data)
    }
}

init();

async function init() {
    // 在这里需要获取学生数据并展示到页面中
    let res;
    // TODO 请求服务器拿到数据，并完成界面渲染，请求学生数据时需要调用上面提供的方法解析响应体中的data数据，调用渲染方法，注意render函数需要传入数组
    console.log('hello');
    fetch('/student').then(res => res.json()).then(data => {
        console.log(data);
        res = parseRes(data.data)
        console.log(res);
        render(res)
    })
    submitBtn.addEventListener('click', handleAddStudent)
}

async function handleAddStudent(e) {
    e.preventDefault();
    // TODO 你需要将表单中所有的文本框的值获取到，然后向服务器请求，拿到服务器数据调用渲染方法，注意render函数需要传入数组
    let data = {
         name: nameDom.value,
         age: ageDom.value,
         phone: phoneDom.value
    }
    fetch('/student/add', {
        body: JSON.stringify(data),
        method: 'POST'
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok.');
        }
        return response.json(); // Parse the JSON response body
    })
    .then(data => {
        console.log(data); // Handle the parsed data from the response
        render([parseRes(data.data)])
    })
    .catch(error => {
        console.error('There has been a problem with your fetch operation:', error);
    });
}

/**
 * 将数组渲染到页面上
 * @param {Array} datas 数组
 * @returns
 */
function render(datas) {
    if (!datas || !Array.isArray(datas)) return
    const innerHTML = datas.map(i => `<tr key="${i.id}"><td>${i.name}</td><td>${i.age}</td><td>${i.phone}</td></tr>`).reduce((prev, cur) => prev + cur, '')
    if (datas.length === 1) {
        showAddTbody.innerHTML = innerHTML;
    }
    else {
        showAllTbody.innerHTML = innerHTML;
    }
}
js
/**
 * 要求：将 markdown 转换成 html 代码并作为返回值返回
 * 处理 标题(使用 h1-h6 标签),无序列表(使用 ul、li 标签),表格(使用 table、tbody、tr、td 标签)
 * 图片(使用 img 标签),换行(使用 br 标签、一个 \n 对应一个 br 标签)
 * @param {string} markdown id=markdownInput 的 textarea 中获取的 markdown 代码
 * return {string} 参数 markdown 由字符串根据指定规则生成的 html 语法的字符串
 */
function parseMarkdownToHTML(markdown) {
    // TODO: 请完成这个函数
    const lines = markdown.split('\n')
    const linesLength = lines.length

    let currentLine
    let count = 0
    let control

    let result = ''

    while (count < linesLength) {
        currentLine = lines[count]
        control = false

        // parse heading
        const heading = /^#{1,6} .*/
        if (heading.test(currentLine)) {
            let handleLine = currentLine.split(' ')
            let level = handleLine[0].length
            let content = handleLine[1]
            result += `<h${level}>${content}</h${level}>`
            control = true
        }
        // parse heading end

        // parse list
        const list = /\- .*/
        if (list.test(currentLine)) {
            // to get full list
            result += '<ul>'
            result += `<li>${currentLine.slice(2)}</li>`
            while (list.test(lines[count + 1])) {
                result += `<li>${lines[count + 1].slice(2)}</li>`
                count++
            }
            result += '</ul>'
            control = true
        }
        // // parse list end

        // parse img 
        const img = /\!\[(.*?)\]\((.*?)\)/
        if (img.test(currentLine)) {
            let handleLine = currentLine.match(img)
            result += `<img src="${handleLine[2]}" alt="${handleLine[1]}">`
            control = true
        }
        // parse img end

        // parse table
        const table = /\|.*/
        if (table.test(currentLine)) {
            result += `<table><tbody>`

            // render this line
            let handleLine = currentLine.trim().split('|').map(item => item.trim())
            let cal = 1
            result += '<tr>'
            while (cal < handleLine.length - 1) {
                result += `<td>${handleLine[cal]}</td>`
                cal++
            }

            // render other lines
            while (table.test(lines[count + 1])) {
                 // render this line
                let handleLine = lines[count + 1].trim().split('|').map(item => item.trim())
                let cal = 1
                result += '<tr>'
                while (cal < handleLine.length - 1) {
                    result += `<td>${handleLine[cal]}</td>`
                    cal++
                }
                count++
            }

            // render end
            result += `</tbody></table>`
            control = true
        }
        // parse table end

        // 这一个换行比较抽象，都是乱加的
        // parse ohter text
        if (control === false) {
            result += currentLine
        }
        // // parse other test end
        result += '<br>'
        count++
    }
    return result.slice(0, -4);
}


function convertToHTML() {
    const markdownInput = document.getElementById("markdownInput").value;
    const htmlOutput = parseMarkdownToHTML(markdownInput);
    document.getElementById("htmlOutput").innerHTML = htmlOutput;
}
document.querySelector(".header").onclick=function(){
    convertToHTML();
}
js
  <!-- TODO:补全代码实现目标效果 -->
    <div id="app">
        <list v-if="!store.selectedFlower"></list>
        <detail v-else></detail>
    </div>
  <!-- TODOEnd -->
js
// TODO:补全代码实现目标效果
       const store = useFlowerStore()
      onMounted(()=>{
        axios.get('./js/flowers.json').then(response => { 
          store.flowers = response.data
        })
      })
      
      return {store}
       // TODOEnd
js
// TODO:补全代码实现目标效果
const FlowerDetails = {
  template: `
    <div class="flower">
        <h2 class="flower-name">{{ store.selectedFlower.name }}</h2>
        <img :src="store.selectedFlower.image">
        <p class="flower-description">{{ store.selectedFlower.language }}</p>
        <button type="info" @click="store.backToList">返回</button>
    </div>
  `,
  setup() {
    const store = useFlowerStore()
    return {store}
  },
};
// TODOEnd
js
// TODO:补全代码实现目标效果
const FlowerList = {
  template: `
  <div class="flower-list">
    <div class="flower-card" v-for="item in store.flowers" :key="item.id">
      <h2 class="name">{{ item.name }}</h2>
      <p class="scientific-name">{{ item.scientificName }}</p>
      <div class="description">{{ item.description }}</div>
      <button type="primary" @click="store.changeFlower(item)">查看详情</button>
    </div>
  </div>
  `,
  setup() {
    const store = useFlowerStore()

    return {store}
  },
};
// TODOEnd
js
const { defineStore } = Pinia;
const { ref } = Vue;

const useFlowerStore = defineStore("useFlowerStore", {
  state: () => ({
    flowers: [], // 所有花卉信息
    selectedFlower: localStorage.getItem('flower') ? JSON.parse(localStorage.getItem('flower')) : null, // 当前选中的花
  }),
  // TODO:补全代码实现目标效果
  getters: {},
  actions: {
    changeFlower(flower) {
      this.selectedFlower = flower
      localStorage.setItem('flower', JSON.stringify(flower))
    },
    backToList() {
      this.selectedFlower = null
      localStorage.removeItem('flower')
    }
  },
  // TODOEnd
});
js
function memorize(fn) {
  // 创建一个空对象来存储缓存结果
  const cache = {};

  // 返回一个新的函数，它将检查缓存中是否已经有了结果
  return function(...args) {
    // 使用 args 作为 key 来查找缓存中的结果
    const key = JSON.stringify(args);
    if (key in cache) {
      // 如果缓存中有结果，直接返回缓存的结果
      return cache[key];
    } else {
      // 如果缓存中没有结果，调用原始函数并存储结果
      const result = fn.apply(this, args);
      cache[key] = result;
      return result;
    }
  };
}
vue
<template>
  <div class="account container">
      <section class="content bgcolor-6">
        <span class="input input--juro">
          <input :ref="input" class="input__field input__field--juro" type="text" id="userName"/>
          <label class="input__label input__label--juro" for="input-28">
            <span id="userNameVerify" class="input__label-content input__label-content--juro" :class="isName === null ? '' : !isName ? 'wrong' : 'right'">{{ isName === null ? '用户名' : isName ? '用户名' : '用户名不合法' }}</span>
          </label>
        </span>
        <span class="input input--juro">
          <input :ref="input" class="input__field input__field--juro" type="text" id="idNum"/>
          <label class="input__label input__label--juro" for="input-29">
            <span id="idNumVerify" class="input__label-content input__label-content--juro" :class="isName === null ? '' : !isIdNum ? 'wrong' : 'right'">{{ isIdNum === null ? '身份证号': isIdNum ? '身份证号' : '身份证号不合法'}}</span>
          </label>
        </span>
      </section>
      <el-button type="primary" id="nextStep" @click="verifyInput">下一步</el-button>
    </div>
</template>

<script>
const { ref,onMounted} = Vue
module.exports = {
  name:"account",
  
  setup(props, {emit}) {
    // TODO:补全代码实现目标效果
    const isName = ref(null)
    const isIdNum = ref(null)
    function verifyInput() {
      console.log(inputs.value[0].value);
      const userName = inputs.value[0].value
      const idNum = inputs.value[1].value
      if (!verifyUserName(userName)) {
        isName.value = false
        emit('change', 'error')
      } else {
        isName.value = true
      }
      if (!verifyIdNum(idNum)) {
        isIdNum.value = false
        emit('change', 'error')
      } else {
        isIdNum.value = true
      }
      if (verifyUserName(userName) && verifyIdNum(idNum)) {
        isName.value = true
        isIdNum.value = true
        emit('change', 'success')
        emit('show', 'check')
        emit('next', 1)
        emit('change', 'process')
      }
      
    }

    function verifyUserName(userName) {
      const regex = /^[\d\w_]+$/
      if (userName.length <= 5 && userName.length >= 3 && regex.test(userName)) {
        return true
      } else {
        return false
      }
    }

    function verifyIdNum(idNum) {
      const addressNum = /^[1-9]\d{5}$/
      const yearNum = /^(19|20|21)\d{2}$/
      const monthNum = /^(01|02|03|04|05|06|07|08|09|10|11|12)$/
      const dayNum = /^((0[1-9]|[12]\d|3[01]))$/
      const rankNum = /^\d{3}$/
      const checkNum = /^[\dX]$/
      console.log(idNum.length);
      if (idNum.length === 18) {
        const address = idNum.slice(0, 6)
        const year = idNum.slice(6, 10)
        const month = idNum.slice(10, 12)
        const day = idNum.slice(12, 14)
        const rank = idNum.slice(14, 17)
        const check = idNum[17]
        console.log(address, year, month, day, rank, check);
        if (addressNum.test(address) && yearNum.test(year) && monthNum.test(month) && dayNum.test(day) && rankNum.test(rank) && checkNum.test(check)) {
          return true
        }
      } else {
        return false
      }
    }

    
    // ***此部分代码不用修改***
    //#region 
    const inputs = ref([])
    const input = (el) => {
      inputs.value.push(el)
    }
    onMounted(() => {
      inputs.value.map(el => {
         if (el.value.trim() != "") {
              el.parentNode.classList.add('input--filled')
            }
            el.onfocus = function () {
              el.parentNode.classList.add('input--filled')
            }
            el.onblur = function () {
              if (this.value.trim() != "") {
                el.parentNode.classList.add('input--filled')
              } else {
                el.parentNode.classList.remove('input--filled')
              }
            }
      })
    })
    //#endregion
    // **********************
    return {
      input,
      verifyInput,
      verifyUserName,
      verifyIdNum,
      isName,
      isIdNum
    }
  }
}
</script>

<style  scoped>

</style>
vue
<template>
  <div class="check" v-loading="checkStatus" element-loading-text="验证中...">
    <div class='robot'>
      <input type="checkbox" @click="handleCheck">
      <span>确认您是真人</span>
    </div>
  </div>
</template>

<script>
import {ref} from 'vue'
module.exports = {
  name:"check",
  setup(props, {emit}) {
    // TODO:补全代码实现目标效果
    const checkStatus = ref(false)
    function handleCheck() {
      checkStatus.value = true
      setTimeout(() => {
        emit('change', 'success')
        emit('next', 2)
        emit('show', 'modify')
        emit('change', 'process')
      }, 1500);
    }

    return {
      handleCheck,
      checkStatus
    }
  }
}
</script>

<style scoped>

</style>
vue
<template>
  <div class="modify container">
        <section class="content bgcolor-6">
          <span class="input input--juro">
            <input :ref="input" class="input__field input__field--juro" type="text" id="passwordOne"/>
            <label class="input__label input__label--juro" for="input-28">
              <span ref="passwordOneVerify" id="passwordOneVerify" class="input__label-content input__label-content--juro">请输入密码</span>
            </label>
          </span>
          <span class="input input--juro">
            <input :ref="input" class="input__field input__field--juro" type="text" id="passwordTwo"/>
            <label class="input__label input__label--juro" for="input-29">
              <span ref="passwordTwoVerify" id="passwordTwoVerify" class="input__label-content input__label-content--juro">请再次输入密码</span>
            </label>
          </span>
        </section>
        <el-button type="primary" id="alter" @click="resetPassword">修改</el-button>
      </div>
</template>

<script>
const { ref, onMounted, } = Vue
module.exports= {
  setup(props, {emit}) {
    // TODO:补全代码实现目标效果
    const passwordOneVerify = ref(null)
    const passwordTwoVerify = ref(null)
    function resetPassword() {
      const password = inputs.value[0].value
      const password2 = inputs.value[1].value
      console.log(password, password2);
      if (!isLegalPassword(password)) {
        passwordOneVerify.value.innerText = '您输入的密码不合法'
        passwordOneVerify.value.classList.add('wrong')
        emit('change', 'error')
      } else {
        if (passwordOneVerify.value.classList.contains('wrong')) {
          passwordOneVerify.value.classList.remove('wrong')
        }
        passwordOneVerify.value.innerText = '请输入密码'
        passwordOneVerify.value.classList.add('right')
      }

      if (!verifyPassword(password, password2)) {
        passwordTwoVerify.value.innerText = '两次输入的密码不一致'
        passwordTwoVerify.value.classList.add('wrong')
                emit('change', 'error')

      } else {
        if (passwordTwoVerify.value.classList.contains('wrong')) {
          passwordTwoVerify.value.classList.remove('wrong')
        }
        passwordTwoVerify.value.innerText = '请再次输入密码'
        passwordTwoVerify.value.classList.add('right')
      }
      if (isLegalPassword(password) && verifyPassword(password, password2)) {
        emit('change', 'success')
        emit('show', 'success')
        emit('next', 3)
        emit('change', 'success')
      }
    }

    function isLegalPassword(password) {
      const regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&_]{6,12}$/
      return regex.test(password)
    }

    function verifyPassword(psw1, psw2) {
      return psw1 === psw2
    }


    // ***此部分代码不用修改***
    //#region 
    const inputs = ref([])
    const input = (el) => {
      inputs.value.push(el)
    }
    onMounted(() => {
      inputs.value.map(el => {
        if (el.value.trim() != "") {
          el.parentNode.classList.add('input--filled')
        }
        el.onfocus = function () {
          el.parentNode.classList.add('input--filled')
        }
        el.onblur = function () {
          if (this.value.trim() != "") {
            el.parentNode.classList.add('input--filled')
          } else {
            el.parentNode.classList.remove('input--filled')
          }
        }
      })
    })
    //#endregion
    // **********************

    return {
      input,
      resetPassword,
      verifyPassword,
      isLegalPassword,
      passwordOneVerify,
      passwordTwoVerify
    }
  }
}
</script>

<style scoped>

</style>
vue
<template>
  <div class="success">
    <el-result icon="success" title="修改成功！" sub-title="您现在可以使用新密码登录您的帐号">
    </el-result>
  </div>
</template>

<script>
module.exports =  {
  // TODO:补全代码实现目标效果
    
}
</script>

<style scoped>

</style>
vue
<template>
     <div class="steps">
          <el-steps align-center :active="props.active" :process-status="props.status" finish-status="success">
            <el-step title="账号核实" description="输入用户名和身份证号"></el-step>
            <el-step title="验证身份" description="请确认您是真人"></el-step>
            <el-step title="修改密码" description="输入要修改的密码"></el-step>
            <el-step title="成功" description="成功找回密码"></el-step>
          </el-steps>
        </div>
</template>

<script>
module.exports = {
  // TODO:补全代码实现目标效果
  props: ['active', 'status'],
  setup(props, {emit}) {
    return {
      props
    }
  }
}
</script>

<style scoped>

</style>