- 博客(84)
- 收藏
- 关注
RSS订阅原创 Vue3之写一个aichat---语音输入
最后创建一个’'aduio/wav"类型的Blob对象，主要是因为调用语音转文字接口的时候需要WAV格式的音频数据，而不是原始的WebM格式。Blob转Base64：将WAV格式的Blob对象转换为Base64编码的字符串，这是因为进行网络传输（如HTTP请求发送数据给服务器）时，直接传输二进制数据可能会遇到限制，而Base64编码是一种常见的将二进制转化为文本格式的方法，便于嵌入到JSON、XML等结构化数据中，作为HTTP请求的一部分。ChatInput组件完整代码。不知道怎么写了，先这样吧。
2025-03-25 11:53:13
783
原创 vue3之写一个aichat---已聊天组件AI助手消息复制和文字转语音播放
复制内容实现很简单，创建一个textarea标签，将textArea的值设为要复制的内容，document.execCommand(‘copy’)执行复制操作，尝试将选中的文本复制到剪切板，如果操作成功返回true，否则返回false。AudioContext 是Web Audio API的核心组件之一，它提供了一个强大的、模块化的且基于可复用组件的系统来合成音频，通过AudioContext ，开发者可以在网页或应用中创建、控制以及处理音频资源。请求中断在用户取消操作或需要理解停止的转换的时候有用。
2025-03-21 11:49:35
850
原创 vue3之写一个aichat---已聊天组件部分功能
当chatRecordList变化的时候，自动触发滚动到底部的函数，isClickThought是因为在显示正式的回答前会显示思考的过程，思考完成后，开始回答问题时，会将思考的内容收起，通过点击按钮控制思考内容的显示与隐藏，但是当点击思考内容变化的时候，我们是不希望滚动条滚动的，所以就通过isClickThought来控制。通过计算属性isResponding判断是显示“停止”还是显示“开启新对话”，当进入已聊天界面且没有正在回答的消息的时候，显示“开启新对话”按钮，否则显示停止。
2025-03-20 15:05:12
758
原创 vue3之写一个aichat---实现聊天逻辑
首先我们的已聊天界面长这样，可以看到消息是两部分组成的，一个是用户发出去的消息，一个是调用流式接口返回的消息，所以chatRecordList聊天记录列表就是下面的形式,role区分是ai助手消息还是用户消息；fetch的响应对象Response提供了原生的ReadableStream接口，允许通过流式逐块(chunk)读取数据，对于SEE这种余姚实时处理每个事件的场景，fetch可以监听流的data事件，实时解析每个分块的数据。先看发起聊天的函数，主要是是发送请求这里,封装的流式调用的接口如下。
2025-03-20 10:35:51
1292
3
原创 vue3之写一个aichat ----完成过程的简单记录
因为第一次写这种ai聊天的项目，也是第一次自己从0到1写的项目，有很多的缺陷，然后根据需求，对于已聊天页面和未聊天页面的切换直接用了v-if切换，没有通过路由，目前暂时没有发现大问题。
2025-03-19 12:10:21
1022
原创 vue3之写一个aichat ----vite.config.js
postcss-pxtorem是PostCSS的一个插件，它的主要作用是将CSS中的px（像素）单位自动转换为rem(根em)单位，Rem单位基于HTML文档的根元素的字体大小来计算尺寸，这使得它可以很好的适应不同的屏幕尺寸和分辨率，从而帮助创建响应式设计。
2025-03-18 17:16:33
1097
原创 vue3之写一个aichat项目------项目初始化
它们都是为提高代码质量和一致性服务的，vite-plugin-eslint依赖于eslint.config.js中的配置来决定如何检查代码，换句话说，eslint.config.js提供了ESLint的规则和配置，而vite-plugin-eslint则负责在Vite环境中应用这些规则。使用场景不同：vite-plugin-eslint侧重于集成和自动合检查过程，eslint.config.js侧重与定制化的设置ESLint的行为。Node：如果你的代码主要在 Node.js 环境中运行，选择这个选项。
2025-03-17 16:19:33
1030
原创 vue3学习之待办事项列表（Todo List）
通过vite创建vue3项目，具体查看vite官网，安装依赖，引入element组件，操作查看。components下创建TodoList组件。创建TodoItem组件。创建TodoForm组件。
2025-02-11 14:12:32
477
原创 学习记录之原型，原型链
console.log(p.a,‘first’)打印的a是字符串’aproperty’，因为这个属性存在于这个实例本身，console.log(p.a,‘second’)打印的a是100，因为上一句代码删除了实例的a属性，所以在这个实例本身是找不到的，所以会去这个实例的原型p.__proto__上找，找到了a属性，打印，如果没找到就到原型的原型上去找。当在实例上寻找一个属性没找到时，就会查找与对象关联的原型中的属性，如果还查不到，就去找原型的原型，直到顶层为null为止。
2025-01-20 10:40:55
994
原创 学习记录之关于javascript的call，apply,bind函数
apply, call, bind是JavaScript中用于改变（即函数内部的this指向）的方法，他们的存在和使用方式方式反应了关于函数是一等公民以及动态的this绑定规则。
2025-01-14 10:47:45
711
原创 pinia数据持久化
指将Pinia状态管理中的数据存储到持久化存储介质（如localStorage或sessionStorage)中，以确保用户在刷新或者关闭浏览器后，状态数据不会丢失，避免因页面刷新或关闭而导致的数据丢失。在项目目录src下新建plugins文件夹新建persistencePlugin.js。如：pinia-plugin-persistedstate。使用和下载的插件解决的是一样的。
2024-11-15 11:44:09
404
原创 Markdown转HTML
一种简单易用的标记语言，旨在使纯文本格式化变得简单且易于阅读，它的设计目标是使文档易于阅读和书写同时保持格式的清晰和简洁。博客和网站：许多博客平台和静态站点生成器是使用markdown编写的内容，然后将其转换为HTML以在网页上展示。文档手册：技术文档、用户手册等经常使用 Markdown 编写，然后转换为 HTML 以便在网页上查看。尽管 Markdown 本身非常方便，但在某些情况下，将其转换为 HTML 是必要的。执行node index.js目录下就会生成index.html,并在浏览器打开。
2024-11-06 14:17:04
509
原创 Node学习记录-crypto
crypto模块提供了加密功能，其中包括了用于 OpenSSL 散列、HMAC、加密、解密、签名、以及验证的函数的一整套封装。
2024-11-06 10:13:09
434
原创 Node学习记录-events
来自：https://juejin.cn/post/7285915718666354723 和 https://nodejs.cn/api/events.htmlNodejs核心API都是采用异步事件驱动架构，在该架构中，某些类型的对象（触发器）触发命名事件，导致调用Function对象(监听器)，就是通过有效的方法来监听事件的变化，并在变化时执行相应的动作。例如：当文件被打开时，fs.ReadStream触发一个事件；只要数据可供读取，‘流’就会触发一个事件。
2024-11-01 15:22:46
354
原创 Node学习记录-child_process 子进程
来自：https://juejin.cn/post/7277045020422930488child_process用于处理CPU密集型应用，Nodejs创建子进程有7个API，其中带Async的是同步API,不带的是异步API。
2024-10-31 16:52:03
1294
原创 node学习记录-process
来自： https://juejin.cn/post/7274072375964254269process是Nodejs操作和控制当前进程的API,并且是挂载到globalThis下的全局。
2024-10-30 17:56:39
969
原创 node学习记录-path
来自：https://xiaoman.blog.youkuaiyun.com/article/details/132338169。
2024-10-30 14:14:24
329
原创 vue3之插件
插件plugins是一种能为vue添加全局功能的代码,官网连接：https://cn.vuejs.org/guide/reusability/plugins.html。
2024-10-12 10:42:20
1417
原创 vue3之依赖注入provide（提供）/inject（注入）
通常情况下，需要从父组件传值到子组件使用props足以，但是如果是深层嵌套的组件，如果某个深层的组件想要得到祖先组件的部分数据，使用props的话需要沿着各个嵌套的组件着层传递数据，而在传递过程中的组件压根就不需要使用该数据，这些组件只是传递的一环，如果嵌套很深，这种传递数据的方式会很麻烦。
2024-10-11 14:27:36
1348
原创 vue3学习之插槽slot
插槽的内容无法访问到子组件的状态，在某些场景下插槽的内容可能想要同时使用父组件域内和子组件域内的数据。通过像对组件传递 props 那样，向一个插槽的出口上传递 attributes，el-table中就使用了作用域插槽。，具名插槽就是在slot标签上添加name属性（https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/slot）当一个组件同时接收默认插槽和具名插槽时，所有位于顶级的非 节点都被隐式地视为默认插槽的内容。
2024-10-11 10:54:57
1333
原创 关于 counter-reset
counter-reset: count：创建一个名为count的计数器，用于跟踪子元素的个数。这在某些情况下，例如当需要为子元素设置连续的编号时，非常有用。
2024-10-08 09:17:13
122
原创 关于unaipp生成的vue3项目开启微信云函数所遇到的问题
，会用到微信开发者工具的云开发，那么在创建的项目里面是没有用到云函数的，就没有云函数的文件夹。
2024-09-18 14:28:12
372
原创 el-checkbox复选框做单选
思路：（所有选择项都在一个数组中）给每一个选项设置一个是否选中的属性（checked），通过change事件来改变,数组中每一项的checked，如果change事件的值是true,那么就要把数组中（如根据唯一值：id）不等于当前选择项且checked为true的要变为false，一般的，@change事件回调参数是更新后的值，这里我们需要知道当前变化的是哪一项所有@change事件要这么写：@change=“handleChange($event, item)”
2024-05-08 11:21:52
1743
原创 一些js的基础
原始值(基本类型)：Number String Boolean undefined null Symbol bigInt(空值、初始化组件、函数、销毁函数、占位)ECMAscript 语法、变量、关键字、保留字 值 原始类型 引用类型运算 对象 继承 函数。1、编译型 翻译过程 源码 -> 编译器->机器语言 ->可执行文件。动态语言基本上就是脚本语言就是解释型语言就是弱类型语言。2、解释型 源码->解释器->解释一行就执行一行。5、JS线程执行一个又一个的任务片段。静态语言 编译型语言 强类型语言。
2024-05-08 10:51:27
536
原创 【无标题】
globel{脚本块（script block）也是一个作用域，整个脚本都是一个脚本代码块，所以在这个脚本中在变量声明语句以下的部分都可以访问b:?第一个console.log©会报错： Uncaught ReferenceError: Cannot access ‘c’ before initialization 未捕获的引用错误：在变量C初始化之前不能访问变量c（）变量在状态的阶段，就是let const声明变量之前不能访问某个变量的区域或阶段就是。
2024-05-05 14:43:45
281
原创 冒泡捕获流、事件与事件源对象、事件委托
事件流：描述从页面中接收事件的顺序 冒泡 捕获IE提出的 事件冒泡流 （Event Bubbling）Netscape 网景 事件捕获流 （Event Capturing）事件流：事件捕获阶段、处于目标阶段、事件冒泡阶段事件对象 事件触发后的详细信息 里面有一个target srcElement 火狐只有target IE只有scrElment 谷歌两个都有。
2024-04-28 10:54:04
194
原创 输入及状态改变事件、搜索框
oninput出自于HTML5的规范里面，IE9某些版本及IE9以下使用的是onpropertychange。由于placeholder不好修改，不容易自定义，所以一般用focus和blur来实现placeholder。在写鼠标输入事件的时候考虑到兼容性要两个都写。onchange失去焦点才会触发。
2024-04-28 10:31:08
1762
原创 鼠标行为、坐标系、pageX/Y、拖拽
鼠标行为document.onclick = function(e){ var e = e || window.event; console.log(e.clientX,e.clientY);}clientX clientY 鼠标位置相对于当前页面可视区域的坐标（不包括滚动条的距离）X/Y 同clientX/Y 老版本firefox不支持pageX/Y 鼠标位置相对于当前文档的坐标（包含滚动条的距离）IE9以下不支持layerX/Y 同pageX/Y，IE11以下同 client
2024-04-26 15:34:53
309
原创 根据输入的数字，对树形数组进行级数筛选
实现树形数组中每一级的子元素按照级数进行筛选。如果级数输入为2，则返回每个元素只包含两级，如果输入3则返回每个元素只包含3级。思路：根据传入的级数进行递归。
2024-04-18 14:17:01
148
原创 解构赋值、函数默认值
解构失败，变量如果在右边没有对应的值，就会用undefined填充；不完全解构，就是值多了。数组的解构会存在顺序问题，而对象的解构不会有顺序问题，它是根据对应的属性名进行解构的。结构完全一样的两个对象可以通过解构进行变量赋值。没有解构赋值之前我们定义三个变量会这样写。ES6新增的一个语法特征。如何取出wangwu?
2023-09-03 16:47:10
414
原创 自定义日期组件
思路： 三个数组分别存放年月日，年数组可以更加自己的需要来设置，比如说直接写死，或者设置当前年份的前后多少年可选（这个需要另外写函数），月份写死就是1-12月，日期数组根据所选年份和月份，通过new Date(年份， 月份， 0).getDate(),获取到当前所选月份的最后一天，从而确定这个月的天数。首先是获取到存放年月日的盒子，设置好年月日数组，然后对其进行初始化，然后给年月日的盒子绑定scrollend事件，处理滚动后的值。
2023-08-20 21:44:01
209
原创 关于浏览器调试项目出现crbug/1173575, non-JS module files deprecated
解决：浏览器中的netWork，在这个位置选择No throttling，就可以了，至于为什么会出现这个问题和为什么这么解决我也不知道，望大神解答。
2023-08-06 12:18:39
207
原创 初步了解Canvas API
HTML5新增的标签：配合JavaScript Canvas技术的画布标签原本没有大小的，需要设置，设置canvas的width属性和height属性（不是在style中设置）</
2023-07-17 16:42:29
152
原创 面试记录06/27
slice()是纯粹的读取操作，不会对原数组进行修改，而splice()是对数组精选操作会修改原数组slice()的参数是起始位置和结束位置，返回选定元素组成的新数组；splice()的参数是起始位置、删除的元素的个数、插入的元素（可选参数）返回被删除的元素组成的数组，没有被删除的元素就返回空数组slice()的结束位置是不包含再选取范围内的，而splice()中删除元素的个数是包含再操作范围内的slice()不会改变原数组的长度，而splice()可以改变数组的长度。
2023-06-28 15:05:23
70
空空如也
图片中的代码主题风格是什么，对应哪个vscode插件
2024-08-07
nuxt2 layout中使用使用beforeRouteEnter
2024-04-19
前端怎么实现这种布局
2024-03-13
uniapp配置vue.config.js
2023-09-26
uniapp频繁触发timeupdate在真机上视频会一直转圈圈
2023-09-25
nuxt使用location.herf跳转页面报错
2023-08-14
移动端时间日期选择组件
2023-08-06
nuxt2如何写移动端页面
2023-08-05
koa-generic-session的使用
2023-05-09
TA创建的收藏夹 TA关注的收藏夹
TA关注的人