- 博客(284)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 在nuxtjs和vuejs中对this.$router,this.$route及router,route的用法和场景说明
本文总结了Vue路由中router和route的区别及使用场景：router用于页面跳转（router.push()），route用于读取路由参数（route.params）。在<script setup>中需import导入，选项式组件中可直接通过this.$router/this.$route调用。记住口诀："跳转用router，读参用route；<script setup>要import，选项式用this.$前缀"。
2025-09-24 15:24:58
424
原创 在window中创建第2个mongodb数据的方法
要在新项目中连接独立MongoDB数据库，需完成以下步骤：1. 在新目录创建mongoData和mongoLogs文件夹；2. 复制并修改mongod.cfg配置文件，指定新数据路径和端口（如28017）；3. 以管理员身份运行mongod加载新配置；4. 创建特定权限用户（推荐在目标数据库内创建普通用户）；5. Node.js连接时需注意：若用户在admin库创建，连接字符串需包含authSource=admin，若在应用库创建则直接指定数据库名即可。关键配置项包括端口修改、独立数据存储路径和精确的用户权
2025-09-20 02:42:39
304
原创 数据库存储大量的json文件怎么样高效的读取和分页，利用文件缓存办法不占用内存
本文提出了一种基于文件缓存的高效JSON大数据处理方法，主要特点包括： 采用文件流处理技术，避免内存溢出，支持GB级大文件 实现分页读取机制，包含二进制搜索和索引创建功能 通过内存映射和缓冲区操作优化文件读取性能 提供完整的处理链：从数据库导出JSON到文件缓存，再到分页查询 包含错误处理和资源释放机制，确保系统稳定性 关键技术点包括：使用writeStream处理大数据导出、建立位置索引实现快速定位、通过缓冲区减少IO操作、支持并发安全的分页查询等。该方法特别适合处理超大型JSON数据集，在保证性能的同时
2025-09-05 23:06:29
419
原创 理解Vuex的辅助函数，分析mapState、mapGetters、mapMutations和mapActions各个应用场景
Vuex辅助函数的使用规范：mapState和mapGetters用于computed，处理状态数据；mapMutations和mapActions用于methods，触发变更操作。mapActions不能直接写入watch，但可通过映射方法或dispatch调用。注意：只有mapState/mapGetters可写入computed，mapActions/mapMutations必须写在methods中，watch中需间接调用action。
2025-08-25 21:17:45
334
原创 利用vue.js2X写前端搜索页面，express写后端API接口展现搜索数据
摘要：本文介绍了使用MongoDB数据库进行搜索的实现方案。首先创建了一个数据库类ClientDB，封装了连接管理及CRUD操作。然后实现了searchDocuments函数，通过MongoDB的全文检索功能查询分词后的内容，使用数据流方式将结果写入临时JSON文件以避免内存溢出。查询结果中的空格会被移除，并格式化输出为包含id、title和content的JSON对象。该方案适用于处理大量搜索结果，通过流式写入临时文件的方式提高系统稳定性。
2025-08-07 21:58:35
298
原创 vue2.X中正确使用computed/watch
Vue.js中computed和watch的核心区别：computed用于派生新数据（必须返回值，具有缓存机制），适合同步计算场景；watch用于监听数据变化并执行副作用（不返回值，支持异步），适合复杂逻辑处理。computed应避免副作用操作，watch需预先定义监听对象，动态属性需用$set确保响应式。两者分别适用于数据计算和变化响应场景，computed更适合模板渲染，watch更适合处理异步或复杂逻辑。错误用法包括在computed中执行副作用或在watch中返回模板值。
2025-08-04 00:27:24
1052
原创 Vuex 中的mapState、mapGetters、mapMutations 和 mapActions 等辅助函数影射state,getters,mutations,actions
摘要：Vuex提供了mapState、mapGetters、mapMutations和mapActions辅助函数，用于映射store中的状态和方法。mapState可将state映射为计算属性，mapMutations可映射mutations方法。Getters则用于从state派生新状态，具有缓存特性，可通过mapGetters映射到组件。示例展示了如何通过这些函数在组件中访问和修改store数据，以及使用getters进行状态筛选和计算。这些辅助函数简化了Vuex在组件中的使用，使状态管理更加便捷。
2025-07-06 01:58:47
425
原创 vuex快照和logger中间件，一个保存应用状态的完整副本，另一个记录所有 mutations 的详细日志，包括变化前后的状态和传递的 payload，这两个工具对于开发和调试复杂的 Vuex 应用
摘要：本文展示了一个基于Vite+Vue2.7.6的项目示例，实现了表单组件与Vuex状态快照功能。项目包含Vuex核心模块(state/mutations/actions)和快照管理模块(snapshot.js)，通过JSON序列化保存状态快照，提供撤销/重做功能。表单组件(UserForm.vue)与Vuex状态双向绑定，并集成了快照控制按钮，通过计算属性实现快照导航的禁用逻辑。整个架构采用模块化设计，通过Vuex插件机制实现状态变更的自动快照保存。
2025-07-01 23:03:05
256
原创 vue + vue-router写登陆验证的同步方法和异步方法，及页面组件的分离和后端代码
现在把login2.js中的改成import Login from ‘./components/Login2.vue’;现在你进入cmd并进入到你代码的根目录中用 node login.js 运行后端代码。//这个很简单就是把router-link to路由到相关的页面即可，然后导出为App。//后端代码用的nodejs的express写的login.js。先写一个用vue cdn写一个登陆验证的小示例+后端代码。//访问的主入口代码login2.html。下面写一个组件分离的代码。
2025-06-26 22:24:17
294
原创 Vue的路由配置我们平时需要去手动配置吗？还是说默认配置就可以了
例如，一个电商网站可能有首页、商品列表页、商品详情页、购物车页、个人中心等多个页面，且个人中心下可能还有订单管理、地址管理等子页面，这种情况下就需要手动配置路由来清晰地定义页面之间的关系和跳转逻辑。单页面应用（SPA）：如果项目是一个简单的单页面应用，只有一个或几个页面，且没有复杂的路由逻辑，那么可以使用 Vue Router 的默认配置。base：定义路由的基准路径，默认是 /。例如，可以将不同模块的路由配置放在不同的文件中，然后在主路由配置文件中统一引入，这样可以使代码结构更加清晰，便于维护和扩展。
2025-06-17 16:44:40
990
原创 vue二级路由的写法，以及动态路由的匹配和获取动态参数的值
当你点击 list/other/path 链接时，会导航到 /list/other/path，List 组件会显示 page 的值为 other/path，fullPath 的值为 /list/other/path。当你点击 list/item1 链接时，会导航到 /list/item1，List 组件会显示 page 的值为 item1，fullPath 的值为 /list/item1。如果同时定义了 /list/:page 和 /list/*page，Vue Router 会根据定义的顺序匹配路由。
2025-06-13 16:20:53
874
原创 vue中的派发事件与广播事件，及广播事件应用于哪些场景和一个表单验证例子
本文介绍了Vue 2.X中组件通信的替代方案，重点讲解$emit和$on方法的使用。首先说明$dispatch和$broadcast在Vue 2.X中被废弃的原因，然后通过代码示例展示： 子组件通过$emit向上派发事件，父组件通过@custom-event监听并处理； 父组件通过$emit向所有子组件广播事件； 典型应用场景包括表单验证、状态更新、数据同步等。 文中还特别提供了表单验证的完整示例，通过广播事件实现多字段统一验证。这些方法取代了被废弃的$dispatch和$broadcast，提供了更清晰的
2025-06-07 22:55:25
1165
原创 vue中events选项与$on监听自定义事件他们的区别与不同，以及$emit与$on之间通信和mounted生命周期钩子函数有哪些作用和属性
Vue事件监听与mounted钩子解析 Vue早期版本使用events选项监听事件，Vue 2.x改用$emit和$on方法实现组件通信。$emit触发自定义事件（如组件间传递数据），$on监听实例或组件事件。 mounted是重要生命周期钩子，用于： 访问/操作DOM（通过$el） 初始化数据（如API请求） 绑定事件（需在beforeDestroy清理） 执行动画 使用$nextTick确保DOM更新后操作 示例展示了$emit父子组件通信、mounted的数据加载和事件绑定，强调需及时移除监听防止内存
2025-05-31 00:35:19
698
原创 Vue中的自定义指令适用于哪些场景
Vue 中的自定义指令提供了强大的功能，能够灵活地处理各种 DOM 操作和行为。通过自定义指令，开发者可以实现动态样式和类的管理、自定义事件监听、焦点管理、表单验证、自定义动画和过渡，以及自定义数据绑定等功能。这些指令不仅增强了应用的交互性，还提升了用户体验。例如，可以通过指令动态添加或移除类、监听特定事件、自动聚焦输入框、验证表单输入、实现动画效果，以及绑定非标准数据。自定义指令的灵活性和扩展性使其成为 Vue 开发中的重要工具，能够满足复杂场景下的需求。
2025-05-15 22:22:27
336
原创 vue用通过npm的webpack打包编译，这样更适合灵活配置的项目
本文介绍了在不使用 Vue CLI 的情况下，如何通过 npm 手动配置 Vue 项目。首先，创建项目目录并初始化项目，生成 package.json 文件。接着，安装 Vue 2 或 Vue 3，并配置 Webpack 及其相关依赖，如 vue-loader 和 vue-template-compiler，确保版本与 Vue 兼容。随后，安装必要的加载器（如 css-loader、vue-style-loader）和 babel-loader，并配置 webpack.config.js 文件。最后，通过运
2025-05-14 04:07:04
1280
原创 在vue中this.$emit有哪些作用,事件监控具体含义，以及这些子组件能封装哪些功能组件
this.$emit 用于在子组件中触发自定义事件，并将数据传递给父组件。父组件通过 v-on 监听该事件，并在事件触发时执行相应的处理函数。this.content 是子组件的 props，用于接收父组件传递的数据。在子组件中，this.$emit('update', this.content) 触发 update 事件，通知父组件 content 值的变化。父组件通过监听 update 事件，接收子组件传递的数据并更新自身状态。这种方式实现了父子组件之间的数据同步，常用于表单控件、数据展示、交互式组件、
2025-05-13 03:51:14
1190
原创 express使用 formidable 处理文件上传时form.parse()，form.on(‘fileBegin‘)，form.on(‘file‘)他们之间的作用和位置
这里给一个完整上传图片，并判断是否图片，以及重新生成图片避免恶意代码。
2025-04-30 03:50:39
278
原创 在 Handlebars 的 Helpers 中，options.fn(this) 和 options.inverse(this) 是用于处理块级 Helper 的重要部分进行解释
用途：当你在模板中为 Helper 传递命名参数时（例如 {{#helperName param1=value1 param2=value2}}…它通常是传递给模板的数据对象。当你调用 options.fn(this) 或 options.inverse(this) 时，Handlebars 会根据 this 的上下文来渲染模板内容。//如：{{#isEqual user.role ‘admin’}}上面的value1/value2会自动比较user.role/admin是否相等。在helper的函数中。
2025-04-25 23:43:41
628
原创 express的模板handlebars用app.engine()创建配置和用exphbs.create()的区别
以下是详细的对比和说明。作用：当调用 res.render(‘index’) 时，Express 会在 viewsDir 指定的目录中查找 index.hbs 文件。文件：所有模板文件的扩展名应该是 .hbs，例如 index.hbs、main.hbs 等。views/partials/ 下的文件，例如 header.hbs、footer.hbs。文件：所有布局文件位于这个目录下，例如 views/layouts/main.hbs。文件：所有视图文件位于这个目录下，例如 views/index.hbs。
2025-04-25 23:07:09
804
原创 mongodb在window10中创建副本集的方法，以及node.js连接副本集的方法
创建Mongodb的副本集最好是新建一个文件夹，如D:/data，不要在mongodb安装文件夹里面创建副本集，虽然这样也可以，但是容易造成误操作或路径混乱；然后初始化副本集，注意在cmd命令中不能换行书写的，你最好写成一行，要么用mongosh加载js文件。在初始化后我们就可以进行创建用户名和密码，上面都是直接登陆，这样显然是不安全的，进入我们的主节点。现在你就可以测试了，比如在主节点中插入数据，然后在从节点中查询。将 keyfile 复制到所有节点的相同路径。初始化成功后，验证各节点状态，进入主节点。
2025-04-11 01:44:52
1246
原创 用nodejs连接mongodb数据库对标题和内容的全文本搜索，mogogdb对文档的全文本索引的设置以及用node-rs/jieba对标题和内容的分词
/首先我们要在Nodejs中安装 我们的分词库@node-rs/jieba,这个分词不像jieba安装时会踩非常多的雷，而且一半的机率都是安装失败，node-rs/jieba比jieba库要快20-30%；在window打开cmd运行showSearch.js,然后在浏览器中输入http://localhost:3000/show 则会显示出搜索结果。对于在Mongodb中设置全文本索引，比如上面代码中的title,content。第二个为搜索代码，对标题和内容进行全文搜索search.js。
2025-04-03 22:28:17
567
原创 crypto 自己写的cipher加密chacha20-poly1305算法最优化增强性能,不用时间戳匹配
动态 nonce 的主要目的是确保每次加密时使用的 nonce 都是唯一的，从而防止重放攻击（replay attacks）和确保加密的随机性。在你的原始代码中，nonce 的前 8 字节是基于时间戳和随机偏移生成的，后 4 字节是随机填充的。加密时：仍然生成动态 nonce（前 8 字节基于时间戳 + 随机偏移，后 4 字节随机填充）。安全性：修改后的代码仍然保持了动态 nonce 的唯一性和随机性，因此安全性没有降低。重放攻击防护：由于 nonce 仍然是动态生成的，重放攻击的风险仍然被有效避免。
2025-03-08 03:57:12
382
原创 nodejs用ws模块反向代理socks5数据，即用ws写服务端和客户端及加密
首先思路是客户端发送socks5请求数据——>服务端解密并解析socks5数据是否为真，解析出Host和port,并用net.socket访问目标网站，目标网站返回数据，服务端再用ws发送返回数据给客户端。) 捕获请求，并通过 targetSocket.write(data) 将请求转发给 baidu.com。) 捕获数据，并通过 targetSocket.write(data) 将数据转发给目标服务器。) 捕获数据，并通过 ws.send(data) 将数据转发给客户端。
2025-02-26 22:22:50
1015
原创 websocket服务端对客户的数据的FIN，mask,大端序payload数据复制以及解码，WS写浏览器端和cmd客户端模拟掩码发送文本、二进制、ping的方法
如果 self._processBuffer() 返回 false，表示当前缓冲区中的数据不足以解析一个完整的帧，循环会结束，等待更多数据。self._processBuffer() 是一个方法，用于从 self.buffer 中解析出完整的 WebSocket 帧。如果 self._processBuffer() 返回 true，表示成功解析了一个完整的帧，并可以继续解析下一个帧。如果添加了额外的逻辑，确保代码结构清晰，避免将 self._processBuffer() 的逻辑与其它逻辑混在一起。
2025-02-19 22:33:24
870
原创 模拟一个 WebSocket 数据帧，使用 masked() 函数对数据进行掩码处理，然后将掩码后的数据传递给 processBuf() 函数，以验证它是否正确解析和解码数据。
/理解了上面的创建FIN,MASK和数据的关系，我们就可以着手模拟创建一个 WebSocket 数据帧，包含掩码和掩码后的数据。createWebSocketFrame() 函数：用于模拟创建一个 WebSocket 数据帧，包含掩码和掩码后的数据。//最后是掩码函数和解码函数，就不多做介绍，可以搜我的文章有掩码和解码的具体过程。processBuffer() 函数会解析数据帧并输出解码后的数据。unmask() 函数：用于对掩码后的数据进行解掩码处理。//解码processBuffer()函数。
2025-02-16 23:08:56
293
原创 websocket服务器端对于websocket协议中FIN 位、操作码、Mask 位、长度字段、Payload 复制数据到 Buffer 中的测试
例如，当长度为65536（0x00010000），用writeUInt32BE(0,2)和writeUInt32BE(length,6)，那么第2到5字节是0，第6到9字节是0x00010000，这样整个长度是0x0000000000010000，即65536，是正确的。需要注意的是，对于超过32位的情况，代码可能存在错误。测试长度超过65535的情况，这时候应使用八个字节的长度，并且前四个字节可能为0（因为JavaScript的Buffer最大长度可能受限制，但假设这里处理的是大端序的64位长度）。
2025-02-15 02:49:25
871
原创 bind绑定类,使this在上下文章中指向类，然后利用debug绑定类中的方法输出缓存中的日志
这段代码实现了一个 带缓冲功能的日志记录器，主要功能是将日志暂存到缓冲区，最后统一格式化输出。bind 的作用：确保 logger.log 和 logger.printOutput 方法中的 this 始终指向 logger 实例。作用：定义一个空函数，用于在日志未启用时作为 printOutput 的占位符，避免调用时报错。看起来这是一个用于缓冲日志记录的模块，使用。接下来，我需要详细解释代码的每个部分，指出可能的问题，并说明其工作原理。库来记录日志，但添加了缓冲的功能，允许在适当的时候输出所有日志。
2025-02-06 00:43:04
1208
原创 WebSocket协议里客户端发送给服务器的数据会用4字节的掩码循环异或的分析
但在WebSocket协议的上下文中，maskBytes应该是4个字节的数组，每个元素是0-255的整数，因此这种情况应由上层输入验证处理，而不是在unmask函数中处理。但根据WebSocket协议，服务器在接收到客户端消息时，掩码必须是4字节，因此在正确的实现中，调用unmask函数之前，应该已经验证了maskBytes的长度为4。此外，可能需要测试掩码中的某些字节为0的情况，例如掩码中间有零，但之前的测试用例已经覆盖了全零的情况，可能不需要特别测试。：对于大数据量的处理，是否有效率问题？
2025-02-06 00:10:06
1170
原创 nodejs后端ws与http结合共享一个服务器，前端websocket发送信息后端ws接收信息,使用Map定型数组设置ID
【代码】nodejs后端ws与http结合共享一个服务器，前端websocket发送信息后端ws接收信息,使用Map定型数组设置ID。
2025-01-15 00:47:49
582
原创 nodejs利用net|http|cluster模块将net.socket客户端的请求发送到net服务器，net服务器将信息转发到http服务器上，客户访问浏览器访问
/子进程处理模块文件child9401.js。//net模块客户端请求代码。//app.js文件。
2025-01-12 22:28:18
233
原创 Nodejs利用net和cluster模块主进程将socket对象传递给子进程中运行返回消息
/客户端 client.js。主进程代码app.js。
2025-01-12 20:42:02
243
原创 nodejs创建ws服务器，前端浏览器用websocket接收信息和发送信息给服务端
/html文件，index.html。//创建前端的websocket文件。首页是用nodejs建立服务器端。//向服务端发送信息。
2024-12-24 20:51:03
686
原创 在window环境下安装openssl生成钥私、证书和签名，nodejs利用express实现ssl的https访问和测试
现在我们在window环境下打开node-ssl-server文件夹就可以看到一个package.json文件，在scripts{}中添加"start":“node index.js”要创建一个新的 Express 项目，让我们创建一个名为node-ssl -server 的目录，用终端cmd中进入node-ssl-server目录。由于我们是自己的颁发证书，因此我们需要使用 CSR 来生成我们的证书。现在进行最后的步骤，我们需要使用key.pem和csr.pem文件来生成我们的 SSL 证书。
2024-12-17 22:03:28
1343
原创 nodejs建立TCP服务器端和TCP客户端之间的连接
TCP服务器端，看名字也知道是建立在服务器上面的。//下面是客户端，也是放在机子上的，比如VPS。
2024-11-29 23:16:13
870
原创 nodejs第三方库sharp对图片的操作生成新图片、压缩、添加文字水印及图片水印等
Sharp是一个基于libvips的高性能Node.js图像处理库，它提供了广泛的功能，包括调整大小、裁剪、旋转、格式转换等。text-to-svg将文本转换为SVG路径，而无需本地依赖,相关用法及说明看https://www.npmjs.com/package/text-to-svg。以及安装：npm install --save text-to-svg。相关说明及用法看：https://sharp.nodejs.cn/安装：Sharp：npm install sharp。
2024-11-26 23:07:39
984
原创 virtualBox建立虚拟机安装centos7.9的设置与换源后才可用yum,及共享目录设置的报错的处理方法
查看共享盘下面没有文件,如果你D盘的文件在centos7.9的/usr/local/xuenodejs/文件夹里面显示，说明挂载成功，如果没有说明失败；/mnt/cdrom 是你刚刚创建并挂载ISO文件的目录，这条命令将你的当前工作目录切换到这个目录。/mnt/cdrom 是你想要创建的目录路径，这里用作挂载点，即ISO文件将被挂载到这个目录。/dev/cdrom 是Linux系统中的虚拟光驱设备文件，代表插入的ISO文件。/mnt/cdrom 是挂载点，即你想要挂载 /dev/cdrom 设备的位置。
2024-11-20 00:57:36
1161
原创 在 Service Worker 中caches.put() 和 caches.add()/caches.addAll() 方法他们之间的区别
在 Service Worker 中，caches.put(request, response) 和 caches.add(request)/caches.addAll(requests) 方法都用于将资源添加到缓存中，但它们的使用场景和目的略有不同。它允许你在捕获到网络请求并从网络获取资源后，将这些资源存储到缓存中，以便后续的请求可以直接从缓存中获取。预先缓存：这些方法用于在 Service Worker 安装时预先缓存资源，这样在页面加载时可以直接从缓存中获取这些资源，而不需要等待网络请求。
2024-11-13 03:10:37
676
javascript+php原生态写的上传文件，可多选文件，解决formdata()后端只接到一个图片和图片中有恶意代码的问题
2023-10-25
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人