- 博客(128)
- 收藏
- 关注
RSS订阅
原创 node 搭建 MCP Server 并且在业务场景中使用
Client和Server 都可以调用模型，这两者只是不同的角色和位置，调用模型本质上就是发起一个请求给模型API，谁发起都行。这类概念，本质上是定义了一种“通过 Client 去操作特定 Server 的规范和机制”，它是对多组件（Client和Server）之间交互的抽象和约束。MCP不是说只能“Client调用模型”，而是强调Client和Server协同工作的规范。});
2025-07-07 18:54:21
1298
原创 Unexpected end of JSON input 问题解决方案
我是在react中项目遇到这个问题，排查了半天，最后发现是JSON.parse(transferData)使用的问题。一定注意JSON.parse()入参不能是空字符串。在使用JSON.parse()前要对入参做判断，适用于所有前端项目。
2022-02-25 15:13:18
8261
原创 微信小程序订阅消息wx.requestSubscribeMessage使用要点和requestSubscribeMessage:can only be invoked by userTAPgestur
requestSubscribeMessage:can only be invoked by userTAPgestur bug解决
2022-01-14 17:40:08
7273
原创 小程序使用 企业微信客户服务插件(联系我) contactPlugin
小程序插件接入步骤1.开发者在小程序管理后台申请使用插件，添加路径：设置 ->第三方服务 -> 插件管理 -> 添加插件，搜索并添加插件ID： wx104a1a20c3f81ec2，无需审核确认。设置第三方服务插件管理添加插件2.开发者在小程序app.json 文件中添加对插件的引用"plugins": { "contactPlugin": { "version": "1.4.3", "provider": "wx104a1a20c3f81ec2
2022-01-06 17:33:38
7192
5
原创 怎么定义Vue-router的动态路由？怎么获取传过来的动态参数？
我们经常需要把某个模式匹配到的所有路由，全都映射到同一个组件，例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染，那么我们可以在vue-router的路由路径中使用 “动态路由参数” 来达到这个效果 1. 动态路径参数，使用 “冒号” 开头，一个路径参数，使用冒号标记，当匹配到一个路由时，参数会被设置到 this.$router.params 中,并且可以在每个组件中使用this.$router.push({ name:"......
2021-08-19 15:58:45
6709
1
原创 VsCode的 code . 失效了？如何解决
已经安装了vscode 为什么没有 code 命令呢？ 是因为你下载vscode的时候，是直接拷贝的文件，或者下载失误的问题，从而导致code环境变量没有配置配置环境变量(path)找到我的电脑（右键+属性） 2. 选择高级系统设置（单机即可）3. 找到环境变量4. 找到 path 变量5. 双击进入变量（或者编辑）6. 把vscode安...
2021-08-05 18:12:08
9514
3
原创 nvm所有命令笔记
摘要 NVM常用命令指南：使用NVM管理Node版本时需以管理员权限运行CMD，否则会报错。主要命令包括查看版本(nvm ls/list)、安装/卸载指定版本(nvm install/uninstall)、切换版本(nvm use)、设置别名(nvm alias)以及设置默认版本(nvm alias default)等。还支持查看远程版本列表(nvm ls-remote/list available)和安装最新稳定版(nvm install stable)。
2025-12-23 16:32:13
54
原创 前端开发图片怎么超宽按100%宽度自适应高度，超高又按100%适应宽度
图片等比缩放完整显示方案：使用固定比例容器配合CSS属性实现图片自适应显示。关键代码：容器设置width:100%和height:100%，图片设置max-width:100%、max-height:100%和object-fit:contain，确保图片完整显示不裁剪，超宽撑满宽度，超高撑满高度。避免仅设置width:100%导致超高图片撑爆容器。背景图场景可用background-size:contain替代。适用于海报预览、素材库等需要保持图片完整比例的业务场景。
2025-12-23 16:29:51
291
原创 react-inlinesvg如何动态的修改颜色SVG
本文介绍了修改SVG图标颜色的两种方法及注意事项。当直接使用CSS的fill和color属性无效时，可以通过CSS滤镜(filter)来改变SVG颜色，并提供了快速生成任意颜色滤镜值的在线工具链接。文章包含具体代码示例和操作指引，帮助开发者解决SVG图标颜色修改问题。
2025-12-12 11:36:14
278
原创 css样式用flex 布局的时候元素尺寸展示不对
摘要：当Flex布局中父元素宽度不足时，子元素默认会因flex-shrink:1而自动收缩。本文通过案例说明如何通过设置flex-shrink:0或使用flex:0 0 164px简写来固定子元素宽度，避免被压缩。同时简要介绍了flex布局的三大核心属性（flex-grow、flex-shrink、flex-basis）及其作用，帮助开发者精准控制Flex子元素尺寸。（148字）
2025-12-12 11:10:07
419
原创 前端项目发布到cdn上css被编译失效问题rgba失效和rgb失效
CSS中当使用纯黑色rgba(0 0 0 / 50%)时，编译会被错误压缩为#0008 0。这是由于纯黑色在压缩时被简写导致。解决方法是将颜色值改为非纯黑如rgba(1 1 1 / 50%)，这样编译后会正确转换为#01010180（50%透明度对应十六进制80）。其他透明度值无此问题，仅50%的纯黑色会出现这种压缩异常。
2025-12-10 10:25:07
170
原创 react 元素触底hooks封装
useScrollHitBottom是一个React自定义Hook，用于检测滚动触底事件。它支持多种容器类型（window/DOM元素/ref对象），通过监听滚动事件，计算滚动位置与容器高度的关系来判断是否触底。当距离底部小于指定偏移量(默认100px)且存在滚动条时触发回调。使用示例中展示了如何在一个聚合页面组件中应用该Hook，通过ref绑定容器并在触底时执行特定逻辑。该Hook具有类型安全、容器兼容性强和灵活配置的特点。
2025-12-03 15:28:49
203
原创 前端开发五笔输入法输入不进去输入框的问题
摘要：五笔输入法无法正常使用的原因是输入框被设为受控组件，其value={searchVal}属性与onChange逻辑打断了五笔的"组合输入流程"。删除value属性后，输入框转为非受控组件，由原生输入逻辑主导，onChange仅监听值变化而不强制修改内容，使五笔的编码组合过程不被干扰。虽然仍通过setSearchVal同步状态到React，但不再影响输入框原生显示，从而恢复输入法正常工作。该问题揭示了受控组件对特定输入法工作流程的潜在影响。
2025-11-17 17:30:06
206
原创 前端box-shadow出现兼容性问题如何处理
在谷歌浏览器正常显示的box-shadow效果在IE和360浏览器中失效。通过对比发现，rgb(0 0 0 /10%)语法存在兼容性问题，改用十六进制颜色代码#d1cece后解决了跨浏览器显示问题。建议使用取色器获取具体颜色值替代rgba写法，确保样式兼容性。问题最终通过修改CSS为box-shadow: 0 0 20px 0 #d1cece得到解决。（135字）
2025-10-13 11:26:17
224
原创 在 JavaScript/TypeScript 中，?? 和 ||是做什么的有什么区别
??和||是JS/TS中不同的逻辑运算符：??（空值合并）仅在左侧为null/undefined时返回右侧值，对空字符串、0等"假值"无效；而||（逻辑或）会对所有"假值"（包括null、undefined、''、0、false等）返回右侧值。简言之，??精确处理null/undefined，||覆盖更广的"假值"情况。
2025-09-24 17:49:11
424
原创 前端灰度发布的解析
灰度发布是一种渐进式软件发布策略，通过分阶段推送新版本降低风险。核心流程包括：定义灰度对象（用户/设备/流量）、制定灰度规则（比例/标签/白名单）、控制功能范围和技术实现。技术实现通常采用配置文件管理，通过请求JSON配置判断是否命中灰度规则，前端根据返回结果动态展示功能。这种方式能有效控制风险，实现快速回滚，无需重新发布代码。示例展示了如何通过JSON配置白名单和比例规则，在前端实现功能开关控制。
2025-09-12 11:44:03
638
原创 监听页面可见性变化，并动态修改网页标题（react版）visibilitychange 事件
本文介绍了利用visibilitychange事件动态修改页面标题的方法。当用户切换标签页时，通过监听document.visibilityState状态变化，在页面隐藏时显示"你别走"提示，重新可见时显示"欢迎回来"并3秒后恢复原标题。代码使用React的useEffect和useRef实现定时器管理，确保组件卸载时正确清理资源。这种交互方式能提升用户体验，适用于需要吸引用户注意力的场景。
2025-09-12 10:40:37
323
原创 react 流式布局（图片宽高都不固定）的方案及思路
摘要：本文介绍了一个基于React的Masonry瀑布流布局组件实现方案，核心是通过getJustifiedRows方法动态计算图片行布局。该方法根据图片宽高比和容器宽度自动分配每行图片数量，确保每行总宽度接近容器宽度且高度一致。组件实现了图片加载、窗口大小响应式调整、行高约束（100-400px）等功能，并采用防抖优化性能。关键算法通过宽高比计算预估行宽，在达到容器宽度95%或单行5张图片时触发换行，最终形成视觉平衡的瀑布流布局。
2025-08-06 18:47:19
463
原创 UI + MCP Client + MCP Server（并且链接多个Server）
本文介绍了如何构建一个前后端分离的MCP（Model Context Protocol）项目，通过HTTP服务器实现通信。前端调用MCP Client与后端MCP Server交互，后端支持多工具扩展。代码示例展示了如何创建HTTP服务器、处理跨域请求、解析URL参数，并通过多Server配置区分不同工具。关键点包括：使用http.createServer搭建服务端，通过StdioClientTransport连接多个MCP Server，并为每个工具绑定所属服务器标识。完整代码演示了工具注册、异步调用及结
2025-07-07 20:48:43
339
原创 ＜font style=“vertical-align: inherit；“＞＜font style=“vertical-align: inherit；“＞文字＜/font＞突然文字被包裹了
样式全部失效。
2025-03-10 15:28:04
908
原创 前端+nodejs+mysql实现前后端联通
npm init初始化项目一路回车即可当有这个文件的时候就相当于已经构建完毕3. 配置文件创建index.js到根目录上创建index.html文件和index.js平级创建component功能性代码。
2025-02-25 11:53:11
1180
原创 node连接mysql报Error: ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol reque
直接升级客户端，我自己的mysql是9.1的，mysql2支持5.5版本以上的任何版本。然后我一直连接数据库连接不上导致很崩溃，从网上搜索到的信息都是去更改他的用户验证。解释：客户端不支持服务器请求的认证协议版本不匹配。
2025-02-20 11:34:50
342
原创 react自动播放音频错误修复play() failed because the user didn‘t interact with the document first.
App.js:76 Uncaught (in promise) NotAllowedError: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD
2025-01-17 16:30:15
32178
原创 wps导出图片图片特别多怎么进行排序，并且全部进行统一的修改名称
一整个文件夹例如文件名称河床_00.png一共到230我想变成0.png-230-png
2024-11-12 16:31:06
976
原创 mac系统使用vscode 写代码老是有叮咚的声音如何解决
3.Accessibility Support 从auto改为 off。3.搜索 Accessibility Support。改完以后重启一下，就摆脱了提示音的烦恼了。听的人很闹心，如何解决呢？
2024-07-24 15:08:30
1922
原创 vue的$nextTick是什么是干什么用的？
nextTick() 是 Vue.js 框架中的一个方法，它主要用于 DOM 操作。当我们修改 Vue 组件中的数据时，Vue.js 会在下次事件循环前自动更新视图，并异步执行 $nextTick() 中的回调函数。这个过程可以确保 DOM 已经被更新，以及可以操作到最新的 DOM。具体来说，当修改了 Vue 组件中的数据时，Vue.js 并不会立即进行视图更新。Vue.js 会将修改的数据记录下来，并在下一次事件循环时才更新视图。
2024-06-28 17:41:41
523
原创 h5链接企业微信WECOM-JSSDK的使用
在调用 JSAPI 前，需要先通过 ww.register 注册当前页面的身份信息。当执行过这段代码以后，直接放在这行代码的下面。这里面的参数需要接口来配合。
2024-04-15 10:33:46
3633
16
原创 clipboard报错Uncaught TypeError: element.hasAttribute is not a function
是因为赋值的文本不能是number类型，必须是字符串类型。注意注意了，不管你要传什么值都得用引号包裹起来 ’ ’注意一定要写在组件加载完毕之后，不然会找不到节点。这种cv过去直接可以用。
2024-03-11 15:02:57
1055
原创 rn Downloading template无法加载模板
是因为镜像源的问题网络太卡加载不出来。下载不出来还是有问题如何解决呢？如何解决无法加载模板的问题。再执行一遍就解决问了。
2024-02-02 09:49:45
733
原创 原型链 什么是原型链？为什么要使用原型链呢？使用原型链有什么作用？
原型链 什么是原型链？为什么要使用原型链呢？使用原型链有什么作用？原型链的特点__proto__和prototype的区别示例代码控制台测试详解图话说回来，原型链既然是一个链条，那肯定是存在一个开头的吧，那它是从哪开始的呢？我们如何才能知道？ 什么是原型链？ 原型链通俗易懂的理解就是可以把它想象成一个...
2024-01-17 15:33:46
1294
原创 React更新 解决 不再支持Create React App的全局安装。
问题react更新不再支持create-react-app my-app如何解决请使用以下命令之一删除任何全局安装:npm删除npm uninstall -g create-react-appyarn global remove create-react-app
2024-01-17 15:33:21
555
原创 react-native 配置@符号绝对路径配置和绝对路径没有提示的问题
这里需要用到vscode的包找到根目录里的在页面添加plugins配置直接替换。
2024-01-10 16:29:53
828
原创 rn报错 run react-native-start，rn真机报错bug解决
ADB (Android Debug Bridge) ，译作 安卓调试桥 ，一个能让你 与Android设备进行通信 的 命令行工具。你可以通过它，在命令行输入命令控制Android设备，或者查看Android设备信息。安装解压完毕以后，把解压路径放到系统变量里去(Path)这个问题是因为手机和电脑没有链接起来需要实行通讯。删除手机上app，重新启动安装一下错误就消失了。当有这些字符的时候，就证明已经安装好了。3.测试是否环境搭建成功。
2023-12-19 10:49:23
576
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人