- 博客(55)
- 收藏
- 关注
RSS订阅原创 一文带你彻底掌握Function Call 的使用（nodejs版）
本文介绍了如何使用阿里云百炼的Function Calling功能实现AI调用外部工具。通过Node.js搭建服务器，利用SSE（Server-Sent Events）实现流式响应。核心流程包括：AI判断是否需要调用外部工具（如天气查询）、构造正确参数、处理返回结果并转化为自然语言。文中提供了代码示例，包括工具映射、流式聊天接口实现以及天气查询工具的定义。开发者需自行配置API Key，通过工具数组指定可用功能，实现AI与外部服务的智能交互。
2025-10-20 18:20:08
793
原创 AI编辑器(二) ---调用模型的fim功能
摘要：本文介绍了阿里云百炼大模型的使用方法，重点说明了如何通过API调用Qwen2.5-coder-32b-instruct模型。内容包含API密钥获取、提示词模板格式（需替换prefix_content和suffix_content）以及JavaScript调用示例代码，展示了完整的请求流程和结果输出方式。注意需替换示例中的xxxx为实际内容并使用自己的API密钥。
2025-10-06 21:04:15
340
原创 AI编辑器（FIM补全，AI扩写)简介
这篇文章介绍了一个结合AI技术的前端编辑器项目。作者使用React18、Antd5.x、Redux等技术栈，集成Qwen2.5-Coder-7B-Instruct模型实现AI辅助功能。重点阐述了选择该免费AI模型的原因，并解释了FIM（填充中间部分）技术相较于传统Prompt方式的优势：通过硅基流动平台测试发现，FIM在文本补全、代码补全等任务中准确度显著更高。文章还简要说明了编辑器将支持Markdown、目录导航等基础功能，以及AI扩写、改错等智能特性。
2025-10-06 20:39:25
486
原创 回顾websocket心跳机制以及断线重连(服务端为node)
本文介绍了WebSocket的心跳机制和断线重连的实现原理。心跳机制通过定时发送探测包（每5秒）并设置超时检测（10秒）来判断连接状态，若超时未收到响应则触发重连。断线重连在网络异常关闭时自动尝试恢复连接，并监听网络状态变化进行相应处理。文章提供了完整的TypeScript实现代码，包括心跳定时器管理、超时检测以及网络状态监听等功能模块，适用于需要稳定WebSocket连接的场景。同时附带了服务端测试代码，可模拟心跳响应和断线情况。
2025-08-27 11:02:44
669
原创 antd form登录表单切换问题
摘要：本文讨论了在React中使用条件渲染切换密码登录和验证码登录表单时遇到的问题。当通过isPassword变量切换两种登录方式时，会出现表单实例丢失连接的问题，导致验证码表单无法获取数据并报错。分析表明这是由于条件渲染导致DOM元素完全重建，表单实例状态丢失。解决方法是不使用条件渲染，改为通过样式控制显示隐藏来保持DOM结构稳定。文章详细解释了问题发生的时机和原因，即在表单切换过程中存在表单实例暂时失去连接的时间窗口。
2025-08-16 11:55:52
281
原创 nprogress效果和网页进度不一致问题
本文针对Vue项目中NProgress进度条过早结束与路由跳转不同步的问题进行分析与解决。作者发现当组件懒加载时，进度条已在路由跳转前完成，导致体验割裂。提出三个解决方案：1)改用router.beforeResolve钩子确保组件加载完成；2)封装懒加载函数处理加载状态；3)使用全局混入控制进度条。第一种方案经实测有效，通过调整NProgress配置（降低速度/增加最小值）进一步优化效果。该问题本质是进度条与异步组件加载时序不匹配所致。
2025-06-06 20:06:15
328
原创 vue3定义全局防抖指令
在写项目时，总会有要进行防抖节流的时候，如果写一个debounce函数的话 用起来代码总会是有点长的，因此想到了用一个全局指令进行输入框的防抖，毕竟全局指令使用时只要v-xxx就行了，非常方便。
2025-04-29 11:40:14
544
原创 vue3 excel文件导入
最近写小组官网涉及到了excel文件导入的功能 场景是导入小组成员年级 班级 邮箱 组别 姓名等基本信息的excel表格用于展示各组信息。
2025-04-20 18:29:24
510
1
原创 进程线程回顾
之前在学习进程和线程的时候，只知道一个进程可以有多个线程，每个进程之间是独立的，一个进程的多个线程之间资源是共享的，我对进程和线程的了解仅限于此，最近复习到网络部分的知识，才发现我对进程和线程的理解非常浅显，借此回顾一下。
2025-04-13 19:21:30
828
原创 前缀和与差分(一维)
当计算一个数组 多个区间的和时，我们可能首先想到的是使用多重for循环,比如给了一个长度为n的序列，有m个询问，每个询问代表一个区间l r 那么就要计算n*m次 时间复杂度是次方，如果n和m稍微大一点很容易会造成超时，那么此时就要用到。]进行-1的操作来抵消在这区间以后的加1操作 那么这个位置就是。但是要考虑一种情况就是L=0 那么sum[L,R]=sum[R]差分的情况的适用于对一个区间[L,R] +value的操作。那么得到的sum中 sum[ 1，N] 都会加上1。那么为什么是这样算？
2025-04-06 10:48:57
411
原创 marked库（高效将 Markdown 转换为 HTML 的利器）
最近尝试了一下通过星火大模型将ai引入到项目上，但是ai返回的数据可以显而易见的发现是markedown语法的，那么就需要一个工具，将类似这种的格式转换为markdown格式Marked 是一个用 JavaScript 编写的开源库，专注于把 Markdown 格式的文本解析并转换为 HTML。它广泛应用于各类 Web 应用程序、文档生成工具、博客系统等场景中，实现 Markdown 到 HTML 的顺畅转换然后我就搜索到了marked这个包，自定义渲染器可以把解析后形成的数据再次进行二次修改。
2025-03-30 08:56:34
2097
原创 菜单（路由）权限&按钮权限&路由进度条
在写后台管理或者类似的项目中，开发者希望用户只能访问部分路由或者路由中的部分按钮 那么又该如何实现呢本篇是基于对硅谷甄选项目（可搜到）的代码进行一个总结前端权限控制不仅仅是页面和路由的访问权限，还包括按钮、操作权限的细粒度控制。它与后端的权限体系相辅相成，前端负责用户体验的优化与增强，而后端则负责核心的权限认证与校验。在实际项目中，合理设计权限系统可以提高系统的安全性、灵活性和可维护性。通过接口、路由和按钮的权限控制机制，前端开发者可以构建一个更加安全、用户友好的应用系统。
2025-03-23 16:40:08
923
原创 webworkers来计算md5
当上传的文件过于庞大时，计算的hash值时间非常长可能会导致主线程阻塞，因此可以使用webworkers在分线程进行hash值的计算然后再向主线程发送消息。
2025-03-02 10:46:30
429
原创 Vue3大文件分片上传，断点续传TS语法（核心思路）
因为要写小组项目，其中涉及到了大文件的分片上传，之前进行了一些资料的参考 但是还是写了好几遍 这篇文章我先简单的介绍一下思路，以及一些最基本的核心代码 ，后续再进行一些优化涉及技术：spark-md5 vue3大文件之所以要分片上传 是因为服务器在处理大文件上传时，需要分配大量的内存和资源来接收和处理数据。如果一次性上传大文件，服务器可能会因为资源耗尽而出现性能下降甚至崩溃的情况。而分片上传将大文件分成多个小块，服务器可以逐块处理，每次处理的数据量相对较小，减轻了服务器的负载压力。
2025-02-23 11:37:14
1228
原创 封装confirm（Vue3+Ts）
通过showConfirm函数 传递过来参数，在调用时通过createApp挂载组件，并传递过去参数，组件进行接收和渲染，当点击确定和取消时卸载该组件，.then 和.catch执行相关确定取消的逻辑。该期末考试了，也该复习复习知识点了不然包挂科的，然后下周还有一次面试，Vue也该复习复习了，虽然写过一个项目了，但是感觉对Vue的一些用法还是不太熟悉。首先要进行调用函数进行传参的操作，而且组件还要接收，那怎么才能只在调用函数的情况，没有父组件子组件这种关系进行支撑的情况下对一个组件进行传参？
2024-12-15 09:48:53
1222
原创 Node环境的事件循环
浏览器与Node事件循环有何区别？这么通俗易懂的Node事件循环，背就完了Node 中的 Event Loop 和浏览器中的是完全不相同的东西。Node.js采用V8作为js的解析引擎，而I/O处理方面使用了自己设计的libuv，libuv是一个基于事件驱动的跨平台抽象层，封装了不同操作系统一些底层特性，对外提供统一的API，事件循环机制也是它里面的实现。
2024-12-01 11:49:15
1140
原创 伪数组和真数组
伪数组可以理解为类似数组的一个集合 常见的有两个，一个是arguments，一个是DOM的children属性，获取回来的子节点集合，他们与数组一样，具有索引和length属性，可以通过for循环写循环语句去循环遍历。1.拥有length属性，其他属性（索引）为非负整数（对象中的索引会被当做字符串来处理，这里可 当做是非负整数串来理解）3、如果这个对象的length不为0，那么必须要有按照下标存储的数据。4、伪数组不可以使用数组中的方法（.forEach）。真数组的长度是动态可变的。
2024-11-24 18:39:17
425
原创 Vue3新组件&其他API
浅层式 API 创建的状态只在其顶层是响应式的，对所有深层的对象不会做任何处理，避免了对每一个内部属性做响应式所带来的性能成本，这使得属性的访问变得更快，可提升性能。1.作用：创建一个浅层响应式对象 只会使对象的最顶层属性变成响应式的，对象内部的嵌套属性则不会变成响应式的。作用：用于获取一个响应式对象的原始对象，toRaw 返回的对象不再是响应式的，不会触发视图更新。只将对象的顶层属性设置为只读，对象内部的嵌套属性仍然是可变的。3.特点：对象的顶层属性是响应式的，但嵌套对象的属性不是。
2024-11-10 19:34:53
992
原创 TS（类 接口 泛型）
注意 对象结构不需要 implements一个interface继承另一个interface从而实现代码的复用何时使用接口1.定义对象的格式：描述数据模型，API响应格式，配置对象等等 是开发中用的最多的场景2.类的契约：规定一个类需要实现哪些属性和方法3.扩展已有接口：一般用于扩展第三方库的类型，这种特性在大型项目中可能会用到。
2024-11-03 16:49:11
1267
原创 Vue(4)脚手架&Vuex
main.js// 引入Vue// 引入App组件，它是所有组件的父组件// 关闭Vue的生产提示// 创建Vue实例对象new Vue({// 将app放入容器// template: `<h1>你好</h1>` 用不了,});关于不同版本的Vue1.vue.js与vue.runtime.xxx.js的区别：（1）vue.js 是完整版的Vue 包含：核心功能+模版解析器（2）vue.runtime.xxx.js 是运行版的Vue 只包含：核心功能：没有模版解析器。
2024-10-20 09:28:24
1490
原创 Vue(3) 组件
1.一种组件间的通信方式 适用于：子组件==>父组件2.使用场景：子想给父传数据 那么就要在父中给子绑定自定义事件（事件的回调在父中）3.绑定自定义事件第一种方式：在父组件中：或App.vue理解：在组件上绑定一个事件atguigu 回调函数是getStudentName第二种方式：在父组件中：< Demo ref=“xxx”>App.vue。
2024-10-14 08:31:20
1058
原创 Vue基础(2)检测数据原理~生命周期
一、定义语法：（1）局部指令：（2）全局指令：二、配置对象中常用的三个回调（1）bind 指令与元素成功绑定时调用（2）inserted：指令所在元素被插入页面时调用（3）update：指令所在模版结构被重新解析时调用三、备注：1.指令定义时不加v- 但使用时要 v-2.指令名如果是多个单词，要使用x-x命名方式 不要用驼峰注意：指令中所有的this都是window 与是否是箭头函数 普通函数无关<body>
2024-10-06 11:56:08
1441
1
原创 Vue基础(1)
2.数据代理的理解 通过一个对象代理对另一个对象的属性的操作（读/写） 如果直接更改obj2中的x obj中的x也会更改 即通过一个对象（obj2）对另一个对象obj的属性（x）的操作。当发现被修改时，页面中用到两者的地方会自动更新，而计算属性是依赖着data中的来改变的，则会再次调用fullName，调用get方法，达到页面中插值fullName修改的效果。2.所有不被Vue管理的函数（定时器的回调函数，ajax的回调函数等，promise的回调函数），最好写成箭头函数。3.get函数什么时候执行？
2024-09-29 17:12:06
1495
原创 webpack
webpack是一个前端模块打包工具 他可以将多个模块按照依赖关系进行静态分析 并生成一个或多个打包后的文件1.模块打包将项目中的所有模块（JS CSS Img等）当做一个整体 通过依赖关系将它们打包成一个或多个静态资源文件2.依赖管理webpack可以分析模块之间的依赖关系 根据配置的入口文件找出所有依赖的模块 并将其整合到打包结果中3.文件转换。
2024-09-15 15:30:22
2146
3
原创 src&href，fetch&ajax，cookie&session
src，会暂停其他资源的处理，直到该资源加载、解析和执行完毕，将其所指向资源应用到当前内容。Fetch API 提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的部分，例如请求和响应。href，将资源解析成css文件，并行加载请求资源，不会阻塞对当前文档的处理。src，将其所指向的资源下载并应用到当前页面，常见的有script、img。href，超文本引用，用于建立文档与资源的联系，常用的有：link、a。fetch()方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。
2024-06-08 11:09:56
1126
原创 中间件&模版引擎
/ next 是否继续往下执行console.log("中间件");// 如果是根路径/ 即上面代码等价于// console.log("中间件");// });});} else {});} else {});当运行并发送请求时，被app.use拦截因为中间件用的 //text1 /text2 中间件都具有这个符号当发送请求时，会优先处理中间件的处理函数如果中间件处理函数中有next() 会继续往下执行。
2024-06-02 22:46:14
1144
2
原创 Nodejs(文件操作，构建服务器，express，npm)
全局自定义// next 是否继续往下执行console.log("中间件");// 如果是根路径/ 即上面代码等价于// console.log("中间件");// });});} else {});} else {});当运行并发送请求时，被app.use拦截因为中间件用的 //text1 /text2 中间件都具有这个符号当发送请求时，会优先处理中间件的处理函数如果中间件处理函数中有next() 会继续往下执行。
2024-05-26 21:13:29
1030
原创 事件委托，call apply bind用法
利用 JS 事件冒泡动态为元素绑定事件的方法称为事件委托（也称为“事件代理”）。事件委托就是把原本需要绑定在子元素上的事件（onclick、onkeydown 等）委托给它的父元素，让父元素来监听子元素的冒泡事件，并在子元素发生事件冒泡时找到这个子元素。好处在 JavaScript 中，页面内事件处理程序的个数会直接影响页面的整体性能，因为每个事件处理程序都是对象，对象会占用内存，内存中的对象越多，页面的性能则越差。
2024-05-19 11:34:11
853
原创 jq的一些小操作以及遇到的问题
由于js是单线程的，当有多个函数在同级进行调用时，如果前一个函数出错，那么下一个函数也不会执行，不能想当然的认为函数会异步执行；当回复二级评论时，需要将自己的评论放在最开头的地方，这里可以用js的拼接，也可以用jq的prepend 方法。当删除二级评论时，需要通过删除按钮获取祖先元素中的整个二级评论，这里需要用到jq的方法。
2024-05-12 17:02:36
407
原创 JS高级（续）及部分知识点
● 套路：自定义构造函数，通过new创建对象● 适用场景：需要创建多个类型确定的对象● 问题：每个对象都有相同的数据，浪费内存//定义类型</script>这两周的学习结束了，通过考核，发现了很多知识点被我忽略了，导致出错，比如map方法，bind和call的区别接下来要开始和后端合作写项目了，我没想到我会是组长，毕竟我只想当个小小组员按照安排来做，希望我这次的分工算合理吧，要是到最后项目完成不了那就真的无了；就两个人来写，估计接下来的30天晚上睡不好觉了，毕竟我最擅长内耗自己；
2024-03-31 10:41:42
694
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人