废物九重境弱者学Ajax第四天--（完结撒花！！！）

最新推荐文章于 2025-04-24 20:26:19 发布
最新推荐文章于 2025-04-24 20:26:19 发布
阅读量991 收藏 13
点赞数 14
分类专栏： Ajax 文章标签： okhttp 前端 ajax javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_74806414/article/details/147399661
版权

目录

Day04_AJAX进阶

学习目标

01.同步代码和异步代码

目标

讲解

02.回调函数地狱

目标

讲解

03.Promise-链式调用

目标

讲解

04.Promise-链式调用_解决回调地狱

目标

讲解

05.async 函数和 await

目标

讲解

06.async 函数和 await 捕获错误

目标

讲解

07.事件循环

目标

讲解

08.事件循环-练习

目标

讲解

09.宏任务与微任务

目标

讲解

​编辑

10.事件循环 - 经典面试题

目标

讲解

11.Promise.all 静态方法

目标

讲解

12.案例-商品分类

目标

讲解

13.案例-学习反馈-省市区切换

目标

讲解

14.案例-学习反馈-数据提交

目标

讲解

今日重点(必须会)

参考文献

 

Day04_AJAX进阶

学习目标

  1. 区分异步代码，回调函数地狱问题和所有解决防范（Promise 链式调用）

  2. 掌握 async 和 await 使用

  3. 掌握 EventLoop 的概念

  4. 了解 Promise.all 静态方法作用

  5. 完成省市区切换效果

01.同步代码和异步代码

目标

能够区分出哪些是异步代码

讲解

  1. 同步代码：逐行执行，需原地等待结果后，才继续向下执行

  1. 异步代码：调用后耗时，不阻塞代码继续执行（不必原地等待），在将来完成后触发回调函数传递结果

  2. 回答代码打印顺序：发现异步代码接收结果，使用的都是回调函数

     const result = 0 + 1
 console.log(result)
 setTimeout(() => {
   console.log(2)
 }, 2000)
 document.querySelector('.btn').addEventListener('click', () => {
   console.log(3)
 })
 document.body.style.backgroundColor = 'pink'
 console.log(4)

    结果：1， 4， 2

    按钮点击一次打印一次 3

02.回调函数地狱

目标

了解回调函数地狱的概念和缺点

讲解

  1. 需求：展示默认第一个省，第一个城市，第一个地区在下拉菜单中

  2. 概念：在回调函数中嵌套回调函数，一直嵌套下去就形成了回调函数地狱

  3. 缺点：可读性差，异常无法捕获，耦合性严重，牵一发动全身

     axios({ url: 'http://hmajax.itheima.net/api/province' }).then(result => {
   const pname = result.data.list[0]
   document.querySelector('.province').innerHTML = pname
   // 获取第一个省份默认下属的第一个城市名字
   axios({ url: 'http://hmajax.itheima.net/api/city', params: { pname } }).then(result => {
     const cname = result.data.list[0]
     document.querySelector('.city').innerHTML = cname
     // 获取第一个城市默认下属第一个地区名字
     axios({ url: 'http://hmajax.itheima.net/api/area', params: { pname, cname } }).then(result => {
       document.querySelector('.area').innerHTML = result.data.list[0]
     })
   })
 })

03.Promise-链式调用

目标

了解 Promise 链式调用特点和语法

讲解

  1. 概念：依靠 then() 方法会返回一个新生成的 Promise 对象特性，继续串联下一环任务，直到结束

  2. 细节：then() 回调函数中的返回值，会影响新生成的 Promise 对象最终状态和结果

  3. 好处：通过链式调用，解决回调函数嵌套问题

  4. 按照图解，编写核心代码：

     /**
  * 目标：掌握Promise的链式调用
  * 需求：把省市的嵌套结构，改成链式调用的线性结构
 */
 // 1. 创建Promise对象-模拟请求省份名字
 const p = new Promise((resolve, reject) => {
   setTimeout(() => {
     resolve('北京市')
   }, 2000)
 })
 ​
 // 2. 获取省份名字
 const p2 = p.then(result => {
   console.log(result)
   // 3. 创建Promise对象-模拟请求城市名字
   // return Promise对象最终状态和结果，影响到新的Promise对象
   return new Promise((resolve, reject) => {
     setTimeout(() => {
       resolve(result + '--- 北京')
     }, 2000)
   })
 })
 ​
 // 4. 获取城市名字
 p2.then(result => {
   console.log(result)
 })
 ​
 // then()原地的结果是一个新的Promise对象
 console.log(p2 === p)

04.Promise-链式调用_解决回调地狱

目标

了解 Promise 链式调用解决回调地狱

讲解

  1. 目标：使用 Promise 链式调用，解决回调函数地狱问题

  2. 做法：每个 Promise 对象中管理一个异步任务，用 then 返回 Promise 对象，串联起来

  3. 按照图解思路，编写核心代码：

     /**
  * 目标：把回调函数嵌套代码，改成Promise链式调用结构
  * 需求：获取默认第一个省，第一个市，第一个地区并展示在下拉菜单中
 */
 let pname = ''
 // 1. 得到-获取省份Promise对象
 axios({url: 'http://hmajax.itheima.net/api/province'}).then(result => {
   pname = result.data.list[0]
   document.querySelector('.province').innerHTML = pname
   // 2. 得到-获取城市Promise对象
   return axios({url: 'http://hmajax.itheima.net/api/city', params: { pname }})
 }).then(result => {
   const cname = result.data.list[0]
   document.querySelector('.city').innerHTML = cname
   // 3. 得到-获取地区Promise对象
   return axios({url: 'http://hmajax.itheima.net/api/area', params: { pname, cname }})
 }).then(result => {
   console.log(result)
   const areaName = result.data.list[0]
   document.querySelector('.area').innerHTML = areaName
 })

05.async 函数和 await

目标

掌握 async 和 await 语法来编写简洁的异步代码

讲解

  1. 概念：在 async 函数内，使用 await 关键字取代 then 函数，等待获取 Promise 对象成功状态的结果值

  2. 做法：使用 async 和 await 解决回调地狱问题

  3. 核心代码：

     /**
  * 目标：掌握async和await语法，解决回调函数地狱
  * 概念：在async函数内，使用await关键字，获取Promise对象"成功状态"结果值
  * 注意：await必须用在async修饰的函数内（await会阻止"异步函数内"代码继续执行，原地等待结果）
 */
 // 1. 定义async修饰函数
 async function getData() {
   // 2. await等待Promise对象成功的结果
   const pObj = await axios({url: 'http://hmajax.itheima.net/api/province'})
   const pname = pObj.data.list[0]
   const cObj = await axios({url: 'http://hmajax.itheima.net/api/city', params: { pname }})
   const cname = cObj.data.list[0]
   const aObj = await axios({url: 'http://hmajax.itheima.net/api/area', params: { pname, cname }})
   const areaName = aObj.data.list[0]
 ​
 ​
   document.querySelector('.province').innerHTML = pname
   document.querySelector('.city').innerHTML = cname
   document.querySelector('.area').innerHTML = areaName
 }
 ​
 getData()

    使用 await 替代 then 的方法

06.async 函数和 await 捕获错误

目标

了解用 try catch 捕获同步流程的错误

讲解

  1. try 和 catch 的作用：语句标记要尝试的语句块，并指定一个出现异常时抛出的响应

     try {
   // 要执行的代码
 } catch (error) {
   // error 接收的是，错误消息
   // try 里代码，如果有错误，直接进入这里执行
 }

    try 里有报错的代码，会立刻跳转到 catch 中

  2. 尝试把代码中 url 地址写错，运行观察 try catch 的捕获错误信息能力

     /**
  * 目标：async和await_错误捕获
 */
 async function getData() {
   // 1. try包裹可能产生错误的代码
   try {
     const pObj = await axios({ url: 'http://hmajax.itheima.net/api/province' })
     const pname = pObj.data.list[0]
     const cObj = await axios({ url: 'http://hmajax.itheima.net/api/city', params: { pname } })
     const cname = cObj.data.list[0]
     const aObj = await axios({ url: 'http://hmajax.itheima.net/api/area', params: { pname, cname } })
     const areaName = aObj.data.list[0]
 ​
     document.querySelector('.province').innerHTML = pname
     document.querySelector('.city').innerHTML = cname
     document.querySelector('.area').innerHTML = areaName
   } catch (error) {
     // 2. 接着调用catch块，接收错误信息
     // 如果try里某行代码报错后，try中剩余的代码不会执行了
     console.dir(error)
   }
 }
 ​
 getData()

07.事件循环

目标

掌握事件循环模型是如何执行异步代码的

讲解

  1. 事件循环（EventLoop）：掌握后知道 JS 是如何安排和运行代码的

    请回答下面 2 段代码打印的结果，并说明原因

     console.log(1)
 setTimeout(() => {
   console.log(2)
 }, 2000)
 console.log(1)
 setTimeout(() => {
   console.log(2)
 }, 0)
 console.log(3)

  2. 作用：事件循环负责执行代码，收集和处理事件以及执行队列中的子任务

  3. 原因：JavaScript 单线程（某一刻只能执行一行代码），为了让耗时代码不阻塞其他代码运行，设计了事件循环模型

  4. 概念：执行代码和收集异步任务的模型，在调用栈空闲，反复调用任务队列里回调函数的执行机制，就叫事件循环

     /**
  * 目标：阅读并回答执行的顺序结果
 */

     console.log(1)
 setTimeout(() => {
   console.log(2)
 }, 0)
 console.log(3)
 setTimeout(() => {
   console.log(4)
 }, 2000)
 console.log(5)

    具体运行过程，请参考 PPT 动画和视频讲解

08.事件循环-练习

目标

了解事件循环的执行模型

讲解

  1. 需求：请根据掌握的事件循环的模型概念，分析代码执行过程

     /**
  * 目标：阅读并回答执行的顺序结果
 */
 console.log(1)
 setTimeout(() => {
   console.log(2)
 }, 0)
 function myFn() {
   console.log(3)
 }
 function ajaxFn() {
   const xhr = new XMLHttpRequest()
   xhr.open('GET', 'http://hmajax.itheima.net/api/province')
   xhr.addEventListener('loadend', () => {
     console.log(4)
   })
   xhr.send()
 }
 for (let i = 0; i < 1; i++) {
   console.log(5)
 }
 ajaxFn()
 document.addEventListener('click', () => {
   console.log(6)
 })
 myFn()

结果：1 5 3 2 4 点击一次document就会执行一次打印6

09.宏任务与微任务

目标

掌握微任务和宏任务的概念和区分

讲解

  1. ES6 之后引入了 Promise 对象， 让 JS 引擎也可以发起异步任务

  2. 异步任务划分为了

    • 宏任务：由浏览器环境执行的异步代码

    • 微任务：由 JS 引擎环境执行的异步代码

  3. 宏任务和微任务具体划分：

  4. 事件循环模型

    具体运行效果，参考 PPT 动画或者视频

     /**
  * 目标：阅读并回答打印的执行顺序
 */
 console.log(1)
 setTimeout(() => {
   console.log(2)
 }, 0)
 const p = new Promise((resolve, reject) => {
   resolve(3)
 })
 p.then(res => {
   console.log(res)
 })
 console.log(4)

注意：宏任务每次在执行同步代码时，产生微任务队列，清空微任务队列任务后，微任务队列空间释放！

下一次宏任务执行时，遇到微任务代码，才会再次申请微任务队列空间放入回调函数消息排队

总结：一个宏任务包含微任务队列，他们之间是包含关系，不是并列关系

10.事件循环 - 经典面试题

目标

锻炼事件循环模型的使用

讲解

  1. 需求：请切换到对应配套代码，查看具体代码，并回答打印顺序（锻炼事件循环概念的理解，阅读代码执行顺序_）

     // 目标：回答代码执行顺序

     console.log(1)
 setTimeout(() => {
   console.log(2)
   const p = new Promise(resolve => resolve(3))
   p.then(result => console.log(result))
 }, 0)
 const p = new Promise(resolve => {
   setTimeout(() => {
     console.log(4)
   }, 0)
   resolve(5)
 })
 p.then(result => console.log(result))
 const p2 = new Promise(resolve => resolve(6))
 p2.then(result => console.log(result))
 console.log(7)

11.Promise.all 静态方法

目标

了解 Promise.all 作用和使用场景

讲解

  1. 概念：合并多个 Promise 对象，等待所有同时成功完成（或某一个失败），做后续逻辑

  2. 语法：

     const p = Promise.all([Promise对象, Promise对象, ...])
 p.then(result => {
   // result 结果: [Promise对象成功结果, Promise对象成功结果, ...]
 }).catch(error => {
   // 第一个失败的 Promise 对象，抛出的异常对象
 })

  1. 需求：同时请求“北京”，“上海”，“广州”，“深圳”的天气并在网页尽可能同时显示

  2. 核心代码如下：

     <!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>Promise的all方法</title>
 </head>
 ​
 <body>
   <ul class="my-ul"></ul>
   <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
   <script>
     /**
      * 目标：掌握Promise的all方法作用，和使用场景
      * 业务：当我需要同一时间显示多个请求的结果时，就要把多请求合并
      * 例如：默认显示"北京", "上海", "广州", "深圳"的天气在首页查看
      * code：
      * 北京-110100
      * 上海-310100
      * 广州-440100
      * 深圳-440300
     */
     // 1. 请求城市天气，得到Promise对象
     const bjPromise = axios({ url: 'http://hmajax.itheima.net/api/weather', params: { city: '110100' } })
     const shPromise = axios({ url: 'http://hmajax.itheima.net/api/weather', params: { city: '310100' } })
     const gzPromise = axios({ url: 'http://hmajax.itheima.net/api/weather', params: { city: '440100' } })
     const szPromise = axios({ url: 'http://hmajax.itheima.net/api/weather', params: { city: '440300' } })
 ​
     // 2. 使用Promise.all，合并多个Promise对象
     const p = Promise.all([bjPromise, shPromise, gzPromise, szPromise])
     p.then(result => {
       // 注意：结果数组顺序和合并时顺序是一致
       console.log(result)
       const htmlStr = result.map(item => {
         return `<li>${item.data.data.area} --- ${item.data.data.weather}</li>`
       }).join('')
       document.querySelector('.my-ul').innerHTML = htmlStr
     }).catch(error => {
       console.dir(error)
     })
   </script>
 </body>
 ​
 </html>

12.案例-商品分类

目标

完成商品分类效果

讲解

  1. 需求：尽可能同时展示所有商品分类到页面上

  2. 步骤：

    1. 获取所有的一级分类数据

    2. 遍历id，创建获取二级分类请求

    3. 合并所有二级分类Promise对象

    4. 等待同时成功，开始渲染页面

  3. 核心代码：

     /**
  * 目标：把所有商品分类“同时”渲染到页面上
  *  1. 获取所有一级分类数据
  *  2. 遍历id，创建获取二级分类请求
  *  3. 合并所有二级分类Promise对象
  *  4. 等待同时成功后，渲染页面
 */

     // 1. 获取所有一级分类数据
 axios({
   url: 'http://hmajax.itheima.net/api/category/top'
 }).then(result => {
   console.log(result)
   // 2. 遍历id，创建获取二级分类请求
   const secPromiseList = result.data.data.map(item => {
     return axios({
       url: 'http://hmajax.itheima.net/api/category/sub',
       params: {
         id: item.id // 一级分类id
       }
     })
   })
   console.log(secPromiseList) // [二级分类请求Promise对象，二级分类请求Promise对象，...]
   // 3. 合并所有二级分类Promise对象
   const p = Promise.all(secPromiseList)
   p.then(result => {
     console.log(result)
     // 4. 等待同时成功后，渲染页面
     const htmlStr = result.map(item => {
       const dataObj = item.data.data // 取出关键数据对象
       return `<div class="item">
     <h3>${dataObj.name}</h3>
     <ul>
       ${dataObj.children.map(item => {
         return `<li>
         <a href="javascript:;">
           <img src="${item.picture}">
           <p>${item.name}</p>
         </a>
       </li>`
       }).join('')}
     </ul>
   </div>`
     }).join('')
     console.log(htmlStr)
     document.querySelector('.sub-list').innerHTML = htmlStr
   })
 })

13.案例-学习反馈-省市区切换

目标

完成省市区切换效果

讲解

  1. 需求：完成省市区切换效果

  2. 步骤：

    1. 设置省份数据到下拉菜单

    2. 切换省份，设置城市数据到下拉菜单，并清空地区下拉菜单

    3. 切换城市，设置地区数据到下拉菜单

  3. 核心代码：

     /**
  * 目标1：完成省市区下拉列表切换
  *  1.1 设置省份下拉菜单数据
  *  1.2 切换省份，设置城市下拉菜单数据，清空地区下拉菜单
  *  1.3 切换城市，设置地区下拉菜单数据
  */
 // 1.1 设置省份下拉菜单数据

     axios({
   url: 'http://hmajax.itheima.net/api/province'
 }).then(result => {
   const optionStr = result.data.list.map(pname => `<option value="${pname}">${pname}</option>`).join('')
   document.querySelector('.province').innerHTML = `<option value="">省份</option>` + optionStr
 })
 ​
 // 1.2 切换省份，设置城市下拉菜单数据，清空地区下拉菜单
 document.querySelector('.province').addEventListener('change', async e => {
   // 获取用户选择省份名字
   // console.log(e.target.value)
   const result = await axios({ url: 'http://hmajax.itheima.net/api/city', params: { pname: e.target.value } })
   const optionStr = result.data.list.map(cname => `<option value="${cname}">${cname}</option>`).join('')
   // 把默认城市选项+下属城市数据插入select中
   document.querySelector('.city').innerHTML = `<option value="">城市</option>` + optionStr
 ​
   // 清空地区数据
   document.querySelector('.area').innerHTML = `<option value="">地区</option>`
 })
 ​
 // 1.3 切换城市，设置地区下拉菜单数据
 document.querySelector('.city').addEventListener('change', async e => {
   console.log(e.target.value)
   const result = await axios({url: 'http://hmajax.itheima.net/api/area', params: {
     pname: document.querySelector('.province').value,
     cname: e.target.value
   }})
   console.log(result)
   const optionStr = result.data.list.map(aname => `<option value="${aname}">${aname}</option>`).join('')
   console.log(optionStr)
   document.querySelector('.area').innerHTML = `<option value="">地区</option>` + optionStr
 })

14.案例-学习反馈-数据提交

目标

完成学习反馈数据提交

讲解

  1. 需求：收集学习反馈数据，提交保存

  2. 步骤：

    1. 监听提交按钮的点击事件

    2. 依靠插件收集表单数据

    3. 基于 axios 提交保存，显示结果

  3. 核心代码如下：

     /**
  * 目标2：收集数据提交保存
  *  2.1 监听提交的点击事件
  *  2.2 依靠插件收集表单数据
  *  2.3 基于axios提交保存，显示结果
  */
 // 2.1 监听提交的点击事件

     document.querySelector('.submit').addEventListener('click', async () => {
   // 2.2 依靠插件收集表单数据
   const form = document.querySelector('.info-form')
   const data = serialize(form, { hash: true, empty: true })
   console.log(data)
   // 2.3 基于axios提交保存，显示结果
   try {
     const result = await axios({
       url: 'http://hmajax.itheima.net/api/feedback',
       method: 'POST',
       data
     })
     console.log(result)
     alert(result.data.message)
   } catch (error) {
     console.dir(error)
     alert(error.response.data.message)
   }
 })

今日重点(必须会)

  1. 掌握 async 和 await 的使用

  2. 理解 EventLoop 和宏任务微任务执行顺序

  3. 了解 Promise.all 的作用和使用场景

  4. 完成案例-学习反馈

参考文献

async和await的mdn讲解

Day04_AJAX进阶
一只小老虎
04-15 499
ajaxj进阶学习
学习黑马AJAX
heliang399的博客
12-01 429
休息了一天半时间，今天下午做了一个商品分类的案例，这个案例把之前学到的axios获取，Promise.all方法和渲染的技巧都用上，首先这个案例是分为四大步来完成的
【Ajax】——学习后的小结
Reka's blog ^_^
01-15 2064
背景：牛腩中接触过CSS，当时对这个CSS情有独钟，因为它可以美化界面，而我就喜欢和界面这种看得见效果的东西打交道，现在又重新学习，而且内容还那么多，超级开心，废话少说，动手吧！ 一、CSS滤镜     CSS滤镜并不是浏览器的插件，也不符合CSS标准，而是微软公司为增强浏览器功能而特意开发的并整合在IE浏览器中的一类功能的集合。     CSS滤镜的标识符是“filter”
利用AJAX显示根据分类显示子分类下拉列表，特殊情况显示多选框
追求专业
04-27 330
此文章为利用AJAX选择一个下拉列表的一个选项则，在下个一子下拉列表显示数据，或者是可以选择多个子类即显示多选框 1、freemaker jsp内容 &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona...
分类——ajax异步实现分类
weixin_33997389的博客
09-29 309
2019独角兽企业重金招聘Python工程师标准>>> ...
泉盛（九重州）TG-1680 TG-800系列.00_setup
03-09
泉盛（九重州）TG-1680与TG-800系列是对讲机产品，主要用于无线电通信。这两个型号的对讲机是泉盛（九重州）品牌下的代表产品，通常被广泛应用于户外活动、商业运营、应急救援等领域，因其高质量的音频输出、长距离...
九重洲TM-800系列写频软件
04-17
九重洲TM-800系列对讲机写频软件，适用于大部分国产单口写频线。
pytorch 学习第【1】天 代码
03-03
在PyTorch学习的第一天，我们将主要关注基础概念、环境搭建、数据处理以及编写第一个简单的神经网络模型。以下是对这些知识点的详细解释： 1. **PyTorch基础**： PyTorch的核心是Tensor（张量），它是多维数组，...
程序员九重境界，看看你到了第几重！
05-08
根据给定的信息，本文将对“程序员九重境界”这一概念进行详细解析，并结合部分文本内容，探讨不同阶段程序员的特点及成长路径。 一、初窥门径：此阶段的程序员通常刚入门，对编程有着浓厚的兴趣，但技能尚显稚嫩。...
TG-1680 写频软件
12-08
1. 安装软件：下载泉盛（九重州）TG-1680 TG-800系列.00_setup.exe文件，双击运行安装程序，按照提示完成安装。 2. 连接设备：通过USB数据线将对讲机连接到电脑，确保驱动程序已正确安装，软件能识别到设备。 3. ...
JavaScript 页面刷新：从传统到现代的全面解析
weixin_43172311的博客
04-24 717
现代Web开发中，页面刷新的实现已经从简单的演进为多种数据更新策略的集合。选择合适的方式取决于项目需求、用户体验目标和性能要求。理解这些方法的原理和适用场景，能够帮助我们构建更现代、高效和用户友好的Web应用。记住，​最好的刷新是看不见的刷新——用户不应该察觉到更新的发生，他们只需要看到结果正确呈现即可。更多推荐阅读内容揭秘网络安全：高级持续攻击的克星——流量检测与响应流程3分钟搞懂：为什么用了overflow:hidden，元素高度会变？
Android OkHttp 框架的使用与源码、原理解析
顾林海
04-23 1099
为了提升应用的健壮性，开发者可以自定义异常处理机制。通过在拦截器中捕获异常，并进行统一的处理和封装，可以将复杂的异常信息转化为更友好、易于理解的错误提示。例如，可以创建一个自定义的异常类NetworkException，在拦截器中捕获各种 OkHttp 异常，并根据异常类型创建NetworkException实例，同时添加详细的错误描述信息。
JavaScript学习教程，从入门到精通，XMLHttpRequest 与 Ajax 请求详解（25）
qq_45746668的博客
04-24 780
XMLHttpRequest (XHR) 是一个 JavaScript API，用于在浏览器和服务器之间传输数据，而无需刷新页面。它是实现 Ajax (Asynchronous JavaScript and XML) 技术的核心。
第三节：核心概念高频题-v-for中key的作用与index的隐患
qq_40860137的博客
04-23 583
作用：辅助Diff算法高效复用DOM节点，避免不必要的渲染 问题：列表动态增删时，index作为key可能导致元素错位或状态混乱
Vite + Flowbite + Svelte 实战：打造现代化高效前端应用
道路永不止步
04-23 939
通过本文的实战演练，我们学习了如何使用Vite、Flowbite和Svelte构建现代化前端应用。
Vue2-重要知识点
马朋帅的博客
04-22 1035
子给父转数据一种组件间通信的方式，适用于：父组件 ===> 子组件 (父给子传数据)通过父组件给子组件绑定一个自定义事件实现子给父传递数据（第一种写法，使用@或v-on）通过父组件给子组件绑定一个自定义事件实现子给父传递数据（第二种写法，使用ref）全局事件总线：App.vue-- props方式： --> <!-- 通过父组件给子组件传递函数类型的props实现子给父传递数据 --> < School :mps = " getSchoolName " /> <!
Linux部署Web程序
sniper_fandc的博客
04-23 784
注意：部署前，需要在Linux环境中的MySQL进行建库建表，保证库和表和开发阶段用到的一模一样（在开发阶段，可以把数据库的建库和建表的语句写进sql文件，在Linux中使用mysql -u[数据库用户名] -p[数据库密码] < [数据库脚本].sql来执行。（1）首次使用，需要先修改可执行命令的可执行权限：cd apache-tomcat-8.5.47/bin、chmod +x *.sh（给所有.sh（Linux的可执行文件）后缀的命令加上可执行权限）。如果提示命令找不到，安装失败。
从节点重排看React 与 Vue3 的 Diff 算法
最新发布
jydchudq的博客
04-24 826
通过上面的分析我们可以看出，React 和 Vue3 在处理节点重排时，采用了不同的策略，它们都在性能和实现复杂度之间进行了权衡和取舍。 **时间复杂度** - React：O(n) - Vue3（LIS）：O(n log n)（预处理 LIS） **实现简洁性** - React 算法只需线性遍历 - LIS 需要预处理、建立映射、计算子序列 **设计思想** - React 优先保证通用场景性能 - Vue3 更强调复杂动态列表的优化
vue2练习项目 家乡特色网站—前端静态网站模板
Json的知识梦工厂
04-21 597
Element-UI：UI 组件库选用 Element-UI，提供丰富的交互式组件，帮助快速构建简洁、易用的用户界面。：介绍文山的主要产业，如农业、手工艺品等，帮助用户了解这个地区的经济特色和发展潜力。：展示文山宜居的气候特点和丰富的自然资源，吸引更多人关注该地的居住和投资潜力。：展示文山的概况、主要景点以及网站的导航，吸引用户进一步了解文山的独特魅力。：介绍文山作为云南省的东南大门的地理位置和重要性，强调其在区域发展中的作用。：展示文山丰富的民族文化，包括各民族的风俗、节庆、服饰等，体现地方特色。
九重天动漫论坛系统：MVC模式与JSP、MySQL实现
4. **浏览帖子**：用户可以查看论坛中的所有帖子，按照时间、热度等标准排序。 5. **发帖回帖**：用户可以发表新帖子，或者在已有的帖子下进行评论，促进社区交流。 6. **管理员功能**：管理员具有删除用户、管理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值