- 博客(91)
- 收藏
- 关注
RSS订阅原创 移动端屏幕适配新思路：基于宽高比的动态适配策略
基于宽高比的动态适配策略为移动端和多设备兼容提供了更精细的控制手段。通过结合CSS属性选择器和JavaScript动态检测，我们可以创建出真正适应各种屏幕比例的用户体验。多媒体展示网站电子商务平台数据可视化应用全屏交互体验记住，优秀的响应式设计不仅仅是适应不同宽度，更要考虑屏幕比例、设备特性和用户使用场景。通过宽高比检测，我们可以为用户提供更加精准和舒适的浏览体验。扩展阅读CSS宽高比属性 aspect-ratio设备像素比与响应式图片。
2025-12-14 22:13:27
536
原创 如何自定义一个MCP服务器：从零到一的完整指南
满足特定业务需求：连接企业内部系统、数据库或API提升开发效率：封装常用操作，减少重复代码增强安全性：完全控制数据访问和权限管理优化性能：针对特定场景进行性能优化✅ MCP的基本概念和用途✅ 如何搭建基础的MCP服务器✅ 如何实现工具、资源和提示词✅ 错误处理和日志记录✅ 配置和部署流程✅ 最佳实践和进阶功能自定义MCP服务器为AI应用提供了无限的可能性。无论是连接企业内部系统，还是集成第三方服务，MCP都能帮助你扩展AI模型的能力。现在，开始构建你自己的MCP服务器吧！🚀。
2025-12-01 19:03:39
784
原创 Figma MCP 在 Cursor 的实战：从设计到代码的无缝转换
作为一名前端开发者，你是否遇到过这样的场景：设计师在 Figma 中完成了精美的界面设计，而你需要在代码中手动还原每一个像素、每一个间距、每一个颜色值？这个过程既耗时又容易出错。随着 AI 编程工具 Cursor 的兴起，以及 Figma MCP 协议的推出，我们终于可以告别这种低效的工作方式。本文将带你深入了解如何在 Cursor 中配置和使用 Figma MCP，实现从设计稿到代码的自动化转换。设计文件的结构和层级组件的样式属性（颜色、字体、间距等）设计规范（Design Tokens）
2025-11-17 21:58:26
1542
原创 Chrome DevTools MCP 使用指南
是Anthropic提出的一个开放协议，用于连接大型语言模型（LLM）与外部工具和数据源。提升开发效率：AI可以自动执行繁琐的测试任务改善代码质量：AI可以实时分析性能，提供优化建议简化测试流程：自动化测试变得简单易用增强AI能力：AI从代码生成扩展到实际测试和调试。
2025-11-10 02:15:27
2274
3
原创 background样式问题踩坑
复合background语法在现代浏览器中支持良好。如需支持老旧浏览器，可能需要单独设置属性并注意执行顺序。使用了background属性且需要动态更新背景图时，单独设置的。在动态更新时的性能表现不如静态设置稳定，特别是对大尺寸图像。属性在IE11及以下版本需要polyfill支持。CSS属性设置顺序影响最终效果，当先设置。可能失效，主要原因是属性覆盖顺序问题。当需要更精确控制动态图像时，使用。属性通常能提供更稳定的渲染结果。
2025-10-31 21:14:33
219
原创 vscode自动保存注意事项
临时解决方案：禁用插件或调整文件，适合快速解决问题。长期策略：与团队协商统一格式化时机（如提交时而非保存时），减少开发阶段的干扰。调试工具：利用VS Code的Output面板（选择或Prettier日志）观察格式化触发链。通过分层排查插件、编辑器配置和项目文件，可精准控制保存时的格式化行为，平衡开发效率与代码一致性需求。
2025-10-09 18:19:17
353
原创 状态管理库 Zustand 的接入流程与注意点
Zustand 的简洁性使其适合中小型项目快速接入，但对于超大型应用需谨慎设计 Store 结构。合理使用中间件和 TypeScript 能显著提升可维护性。
2025-09-27 20:57:49
843
原创 redux-toolkit踩坑记录
业务中采用Redux Toolkit（RTK）作为状态管理方案，因其简化了Redux的繁琐配置，提高了开发效率。但在低版本浏览器（如Chrome 49以下）运行时出现报错，导致功能异常。技术选型的全面评估引入新库时需彻底检查其底层依赖和浏览器兼容性，尤其是元编程等高级特性。降级方案的可行性对于无法通过垫片解决的API，需提前制定备选方案，避免后期被动。团队协作影响迁移过程中需统一团队规范，并提供替代方案的示例代码和文档支持。
2025-09-27 15:35:14
456
原创 tua-body-scroll-lock踩坑记录
但是在滑动过程中如果调用lock方法，此时window.scrollY会变为0，会导致标题栏的底色消失，这样的体验很不佳，用户可能会认为有bug。解决方法也很简单，在调用lock时存一个变量，当scroll事件回调发现这个变量为true时也认为此时页面已经滚动了，如下面代码。在日常工作中，我们经常会遇到拉起弹窗时要禁止页面的滚动，此时tua-body-scroll-lock库就是一个很好的选择。但是最近在维护老项目的时候发现这个项目会监听滚动事件，当滚到到某个地方时就会给标题栏一个底色，如下面代码。
2025-09-12 21:16:06
227
原创 ts学习4
假设我们有一个名为padLeft的函数。如果padding是number，它会将其视为我们想要添加到input的空格数。如果padding是string，它应该只是将padding前置到input。让我们尝试实现当padLeft为padding传递number时的逻辑。哦，我们在padding上遇到错误。TypeScript 警告我们，将添加到number可能不会给我们想要的东西，这是正确的。换句话说，我们没有先明确检查padding是否是number，也没有处理它是string的情况，所以让我们这样做。
2025-08-11 01:03:04
288
原创 ts学习3
您可能会看到的第一种组合类型的方法是联合类型。联合类型是由两种或多种其他类型组成的类型，表示可能是这些类型中的任何一种的值。我们将这些类型中的每一种都称为联合的成员。
2025-07-28 20:01:40
1025
原创 ts学习2
JavaScript 中的每个值都有一组行为，您可以通过运行不同的操作来观察这些行为。这听起来很抽象，但作为一个简单的例子，考虑我们可能在名为message的变量上运行的一些操作。如果我们将其分解，第一行可运行的代码会访问一个名为的属性，然后调用它。第二个尝试直接调用message。但是假设我们不知道message的值——这很常见——我们不能可靠地说明尝试运行这些代码会得到什么结果。每个操作的行为完全取决于我们最初拥有的价值。message。
2025-07-18 20:53:19
718
原创 ts学习1
您可以在 JavaScript 中使用多种设计模式。但是，某些设计模式使得自动推断类型变得困难（例如，使用动态编程的模式）。为了涵盖这些情况，TypeScript 支持 JavaScript 语言的扩展，它为您提供了告诉 TypeScript 类型应该是什么的地方。例如，要创建一个包含和id: numberid: 0,您可以使用interfaceid: number;然后，您可以在变量声明后使用类似: TypeName的语法来声明 JavaScript 对象符合新interface。
2025-07-09 21:05:39
1037
原创 koa搭建服务器（二）
操作数据库就可以使用Sequelize内置的方法了，这里用我的查询接口为例，接口可以支持日期、状态、分类、分页查询，所以需要动态给where添加相应的条件。由于在实际项目中连接一个数据库中的多个表，所以在这里我建了一个models文件夹，index.js用来遍历models文件夹下的js文件并依次创建实例。框架其他的一些方法可以看下以下文章，首先也是需要安装相关的依赖。
2023-10-29 15:34:53
357
原创 react的setState做了什么
setState这个方法在调用的时候是同步的，但是引起React的状态更新是异步的。在React中，如果是由React引发的事件处理（比如是通过onClick引发的事件处理,以及生命周期函数调用setState），调用setState不会同步更新this.state，除此之外的setState调用会同步执行this.state。如果需要对state数据更改监听，就可以使用第二个参数，它是用来监听state里面数据的更改，当数据更改完成，调用回调函数，用于可以实时的获取到更新之后的数据。
2023-10-22 20:11:39
685
原创 react&antd（11）＜Table /＞组件更改dataSource和columns时页面不更新渲染的问题
组件增加一列数据，于是我在该状态下对columns进行操作并把更新后的columns重新setState，但是此时页面的表格并没有更新渲染，我在控制台打印的columns却已经是更新后的了。因为columns和dataSource都是一个对象数组（[{},{},{}]），所以我们更改columns/dataSource时引用地址并没有改变，改的只是引用地址指向的内存数据。
2023-06-19 17:14:16
4122
原创 npm报错The operation was rejected by your operating system问题解决
npm报错The operation was rejected by your operating system问题解决
2023-04-23 17:44:34
1065
原创 git推送远程仓库报错解决
kex_exchange_identification: Connection closed by remote hostConnection closed by 20.205.243.166 port 22fatal: Could not read from remote repository.Please make sure you have the correct access rightsand the repository exists.
2023-04-08 23:55:30
1207
原创 js实现JSON字符串格式化显示
最近有个需求是需要把后端返回的json数据格式化显示，处理其实很简单，先用JSON.parse（）把json数据转为json对象，再用JSON.stringify（）把JSON对象 转换为 有缩进的 JSON字符串格式。
2023-03-15 11:46:55
1980
原创 moment 时间戳转为固定格式时间错误
有个需求是后端返回的时间格式是一个时间戳，例如：我们在页面上展示之前需要把这个时间戳转换为标准格式的时间。如果在页面上看到转换的时间有问题，请务必留意下转换格式有无问题。在转换时要注意格式，如果格式错误那么转换到的时间也会有问题。首先我们需要引入moment这个库。
2023-03-08 10:23:00
925
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人