- 博客(96)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 从开发到发布全流程教程，看完不踩坑！
在上一篇文章🧐什么是 MCP 服务？如何利用 cursor + MCP 快速将现有服务接入大模型？中 ，我介绍了一下 MCP 的概念以及如何快速搭建一个 MCP 服务，文中搭建了一个简单的示例在本地进行调试并顺利调用了工具。在将上篇文章中的示例项目进行完善并发布的过程中，我对搭建 MCP 服务有了新的心得，也踩了一些坑，这篇文章我将更详细的讲讲从 MCP 服务的开发到发布的全流程。
2025-04-06 19:00:37
1052
原创 什么是 MCP 服务？如何利用 cursor + MCP 快速将现有服务接入大模型？
最近开始在网上了解到 MCP 这个概念，最开始只是听说可以用于快速将一些 API 快速接入大语言模型，自认为是类似 LangChain 这类上手会比较复杂的工具，但实际了解后发现 MCP 这个概念不仅不难理解，而且很好上手，并且实用性极强，下面我将基于我的理解为大家介绍一下 MCP 是什么？有什么用？如何实现一个 MCP 服务。MCP 中的概念不仅仅有tool。
2025-03-24 10:17:16
1410
原创 做了三个月的学习卡盒小程序，开源了！
去年的年末，我利用闲暇时间开始开发学习卡盒小程序，截止至今天已经接近三个月了，上线接近两个月，目前有 4150 人使用过学习卡盒小程序，虽然用户不多，但是也收获了 50 个评价，4.9 的评分。正面可以用来记录“问题 \ 概念 \ 中英文”反面可以用来记录“答案 \ 概念解析 \ 中英文的翻译”虽然这个小程序的很多核心功能的实现，我都以文章的形式直接给大家分享了：但既然每天使用的用户不多，我还是决定开源让这个小程序实现更大的价值
2025-03-19 09:01:30
1014
原创 如何使用 JS 的 Intl 类实现货币/时间单位国际化？
Intl是 JavaScript 中用于处理国际化的内置对象，提供了日期、时间、数字、货币等格式化的功能。它基于 ECMAScript 国际化 API，支持多语言和地区设置，能够帮助我们轻松实现本地化需求。本文将详细介绍Intl的核心功能、使用场景以及一些需要注意的事项。Intl。
2025-01-26 14:37:24
664
原创 JS 时间格式大全（含大量示例）
在 JS 中，处理时间和日期是常见的需求。无论是展示当前时间、格式化日期字符串，还是进行时间计算，JavaScript 都提供了丰富的 API 来满足这些需求。本文将详细介绍如何使用 JavaScript 生成各种时间格式，从基础到高级，涵盖常见的场景。内容比较多，请大家搭配目录食用。
2025-01-26 10:23:10
1537
原创 小程序手搓轮播图，几千个元素滑动照样丝滑~
在最近做小程序的时候，遇到了轮播图卡顿的情况。有些情况下，轮播图需要展示上千个元素，如果使用原生的Swiper组件，渲染这么多元素会导致严重的卡顿问题。原生的Swiper组件无法做到仅展示当前元素和前后两个元素。虽然你可以控制的内容不展示，但这个 DOM 节点仍然会被渲染。因此，在几千个元素的情况下，轮播图组件依然会非常卡顿。通过按需渲染的方式，我们成功极大轮播图的性能，避免了在渲染大量元素时的卡顿问题。这种方式不仅适用于小程序，也可以应用于其他前端框架。如果你想实际体验一下实现的效果，可以在。
2025-01-15 10:43:48
819
原创 如何利用 AI 实现智能出题 + 智能评分功能？
Hello 大家好我是 oil欧呦，最近在做小程序的过程中实现了一些 AI 相关的小功能，也有了自己的一些小小心得，这篇文章给大家分享一下。最初，我预计实现 AI 学习功能会花费大量时间，但出乎意料的是，仅用了两三天就完成了。目前，我的小程序中提供了三种学习模式，如下图所示：第一种模式是用户自行评估是否记住了卡片内容，而单选模式和复述模式则是通过 AI 实现的功能。接下来，我将详细讲解这两种模式的实现过程。这是我第一次调用 AI 相关的 API 来实现答题相关逻辑。之前实现的生成卡片功能。
2025-01-14 09:06:12
1097
原创 uniapp 小程序如何实现语音输入功能功能？
最近使用 uniapp 做小程序的时候，需要实现一个语音输入转换为文本的功能，功能的实现并不复杂，但还是踩了一个坑，因此记录了一下整体的实现过程以及提供了可以直接复制使用的代码，希望可以帮助到你。实现语音转文字的效果通过插件来实现还是很简单的，就是要记得看上面提到的注意点。不然我们在发布之后才发现无法语音输入去排查，是很难看出问题的。如果你想看看实际实现效果也可以进入学习卡盒小程序，在卡盒中点击顶部制定学习计划，然后使用复述模式进行复习，就可以看到语音输入的按钮了。
2025-01-13 10:01:01
2570
原创 uniapp 小程序 textarea 层级穿透，聚焦光标位置错误怎么办？
在开发微信小程序时，使用textarea组件可能会遇到一些棘手的问题。层级穿透：由于textarea是原生组件，任何元素都无法遮盖住它。当其他元素与textarea重叠时，就会出现层级穿透的问题。特别是在弹窗中使用textarea时，如果弹窗有动画效果，textarea会在动画执行期间显示在页面右上角，导致视觉效果非常差。如果等到动画结束后再显示textarea，又会出现突然弹出的效果，影响用户体验。光标位置不正确：在 iOS 设备上，textarea的光标默认会出现在文本的最前面。
2025-01-13 08:54:56
1446
原创 如何基于艾宾浩斯记忆曲线设计一个学习规划+定时复习功能
Hello 大家好，我是 oil欧呦，上周写了一篇文章🤔认真投入一个月做的小程序，能做成什么样子？有人用吗？介绍了小程序开发了一个月做的一些功能，有幸上了前端热榜的榜二。这周我又给小程序加了一些新功能。大家一起来看看我这周又整了哪些新活儿。
2024-12-31 09:25:06
974
原创 前端转产品一年总结！
截止至本月，我从前端研发转岗为产品经理已经一年多了，这篇文章就讲讲我这一年中的一些经验和总结。希望能为同样身为前端也有想法转产品的你提供一点帮助。
2024-12-29 11:42:28
858
原创 认真投入一个月做的小程序，能做成什么样子？有人用吗？
Hello 大家好我是欧呦，大概一个月前，我写了一篇文章🗃️耗时一周，肝了一个超丝滑的卡盒小程序，那时候我开始做自己的第一个卡盒小程序，那一个月后，这个小程序做到什么程度了呢？在我发了第一篇小红书后，小红书一个用户反馈导入单词后字体太小了看着不是很舒服。列表/卡片的切换大/小字体的切换靠左/居中布局的切换开启/关闭序号展示这个卡片样式是跟着整个卡盒走的，而且后续任何引用卡片组件的位置，都会基于用户设置的卡盒样式进行展示，这样体验就不会割裂。
2024-12-23 09:07:48
954
原创 纯前端实现一个精致的中英文挖空提示功能
这两天给我的学习卡盒小程序新增了一个提示功能，在卡片正面的时候，点击左下角的小灯泡，就会弹出背面内容的提示，这个提示是挖了空的，这种方式可以帮助我们循序渐进的回忆内容，而不是直接看答案。
2024-12-15 20:12:58
815
原创 cursor 真强啊，用 AI 把我的卡盒小程序所有 UI 交互优化了
自从我的卡盒小程序功能稳定后，我就开始把整体的 UI 和交互继续打磨。之前因为时间原因想要先上线给大家看看反馈，所以有的地方妥协用了一些原生的 API，自己感觉还是差点意思，这几天下班后就开始继续优化，但是改造 UI ，重复和琐碎的事情太多了，于是我就想到这种事情交给 AI 做应该很不错，所以也开始用上了 cursor，不得不感叹 cursor 真强啊。实话说，就在这两三天，我干了之前自己做一周左右的活儿。
2024-12-12 19:09:59
1273
原创 给我的小程序加了个丝滑的搜索功能，踩坑表情包长度问题
最近在用自己的卡盒小程序的时候，发现卡片越来越多，有时候要找到某一张来看看笔记要找半天，于是自己做了一个搜索功能，先看效果：怎么样，是不是还挺不错的，那么这篇文章就讲讲这样一个搜索展示的功能是如何实现的。如果不是遇到了表情包长度问题，这个搜索功能的实现还是比较简单的，重点是交互和设计是否能够让用户快速定位到想找的内容。目前是纯前端实现，而且涉及了很多遍历，性能还有待提升，不过先实现再优化了。学习卡盒已经上线了，大家可以直接搜索到，这个搜索功能也发版了，欢迎体验。
2024-12-10 12:14:13
999
原创 uniapp 小程序如何实现中英文人声朗读功能？
最近在我的学习卡盒小程序中增加了一个卡片人声朗读的效果，点击右小角的播放按钮就会播放卡片中的文字对应的人声朗读效果。效果如下图：主要的原理是用到了小程序的同声传译插件，下面就详细讲讲如何将这个插件集成，以及交互应该怎么做.微信小程序的朗读功能实现还是比较简单的，跟着步骤走一个小时就做好了。
2024-12-09 08:43:10
1260
原创 踩坑无数，如何用 uniapp 实现一个丝滑的英语学习卡盒小程序
在前两周，我发了两篇文章介绍了我为什么做一个卡盒小程序以及这个小程序的一些功能和交互。这篇文章就讲讲这个小程序是用什么框架做的，数据如何存储，其中的一些动画效果如何实现，我在做的时候是怎么思考的。《 🗃️耗时一周，做了一个超丝滑的学习卡盒小程序》《🗃️给我的卡盒小程序做了丝滑拖拽排序功能》
2024-12-08 19:20:10
1028
原创 ️耗时两周，肝了一个超丝滑的卡盒小程序（第二期）
在上周，写了一篇关于自己写了一个卡盒小程序的文章🗃️耗时一周，肝了一个超丝滑的卡盒小程序在写这篇文章时，我将小程序的基本概念设计和基础操作都实现完成了，原本想着补全后续的一些功能，再把 bug 修一修，就开始写关于这个卡盒小程序的实现方式了。但在自己用的过程中，陆陆续续又发现一些可以提升体验的小点，以及开发拖拽排序功能花了很多时间，再加上工作也比较忙，业余时间比较少就又过去了一周。
2024-12-06 19:28:19
607
原创 ️️耗时一周，肝了一个超丝滑的卡盒小程序
先看看成品效果：在上个月，我出于提升自己的英语造句能力的目的，想要找一个阅读或者练习造句类的英语学习 APP，但是最终找了几个 APP 不是不太好用就是要付费。于是我转换思路，找到了一本书，叫《365天英语口语大全》书中的每一个章节就是十几段的对话，其中包含了日常生活几乎所有场景的对话，我希望自己能够做到一看到中文，就能够快速的说出恰当的英文句子，从而提升自己的造句能力。但是我把书放在我的电纸书上看不太方便，我看中英文得来回几页翻着看。
2024-12-03 23:35:10
1970
2
原创 ⚡OWASF 十大 API 安全问题盘点
OWASP 是一个致力于提升 Web 应用程序安全的国际非营利组织，其核心原则之一是公开、免费地提供所有相关资料，方便大众在其官方网站上轻松查阅，助力任何人提升 Web 应用程序的安全性。该组织提供的资料涵盖文档、工具、视频以及论坛等多种形式，其中，最为人所熟知的项目当属 OWASP Top 10。
2024-05-10 18:53:22
1162
原创 ⚡REST 和 SOAP 协议有什么区别？
XML 允许使用自定义的描述性标签来存储和共享信息，这与 HTML 使用的预定义标签不同。XML 的标准化特性使其能够在不同平台和系统间轻松迁移。作为一种消息格式，XML 提供了很高的灵活性，用户可以根据需求定义 XML 模式，以确保 XML 消息的结构满足特定要求。在数据访问和操作方式上，SOAP API 与 REST API 有所区别。REST API 通过资源 URL 来访问数据，而 SOAP API 则是通过调用特定的 API 函数来操作数据。
2024-05-07 22:12:27
2696
1
原创 教你如何编写一份 API 文档
API 文档是一份说明书，它告诉开发人员以及其他相关人员如何使用你的 API 以及其服务来实现特定目的。API 文档 通常包含代码示例、教程以及有关函数、类和返回类型的详细信息。从本质上讲，它为开发人员提供了与应用程序接口建立集成和使用软件进行应用程序接口调用所需的所有信息。API 调用是第三方开发人员向平台的 API 发出的一种请求。文档中对 API 如何调用进行了描述，告诉开发人员可以让 API 做什么以及如何去做。
2024-05-07 08:50:45
3565
原创 内部 API vs 公共 API：全面比较及管理策略
API 管理是指设计、发布、监控和保护 API，开发人员、客户和其他利益相关者使用这些接口来访问公司的软件和数据。API 管理有助于实施身份验证和访问控制，加密数据，并监控安全性。这些手段可以保护敏感数据并防止未经授权的访问。API 管理通过提供相关的使用方式、用户行为和性能指标的实时数据的分析，确保 API 的可靠性。因此公司可以识别潜在问题，如性能瓶颈和错误，并在它们成为重大问题之前解决它们。开发人员工具和文档使第三方开发人员能够轻松使用 API。
2024-05-06 13:53:51
891
原创 什么是开发者门户？最佳实践及示例
很多 SaaS 公司正在大力投资他们的开发者门户。这些公司现在认识到 开发者门户上的内容作为影响采用的外部资源的潜在高价值。创建一个有效的开发者门户需要整个组织的一致性和自上而下的治理程序来加强品牌。
2024-05-05 10:32:19
1260
原创 ⚡什么是 OpenAPI，优势、劣势及示例
想象一下，你正在阅读一个 Microsoft Word（.docx）格式的传统规范文档。这份传统规范文档提供了系统的广泛背景，并描述了其组件以及与其他系统的交互。传统规范的结构往往各不相同。而像 OpenAPI 这样的API规范，其结构是严格的。如果API规范符合另一种格式，如 RAML 或 API Blueprint，那么该文档将遵循该格式的结构。回到 OpenAPI 如何定义 API 的问题上，你经常会听到“规范”和“定义”这两个词被当作同义词使用。API 规范“定义”了一个 API。
2024-05-03 16:44:11
4314
翻译 一篇文章带你理解 React 中最“臭名昭著”的 useMemo 和 useCallback
作为一个 React 开发者，如果你一直觉得useMemo和这两个 Hook 比较难以理解，那么别害怕，事实上很多人都如此。我和其他公司很多的 React 开发者交流过，大多数对这两个 Hook 都是一知半解的状态。这篇文章就为你答疑解惑，为大家介绍这两个 Hook 的具体作用，它们的实现原理以及在实际开发中如何应用。我最喜欢的自定义 hook 之一是useTogglev);} , [ ]);注意这里的toggle函数使用了进行缓存。
2023-01-11 10:22:35
1297
原创 Next.js | Jest + React testing library + Typescript 单元测试框架搭建及实现
单元测试和 E2E 测试作为前端项目健壮性的保障，在许多团队可能并没有足够的能力和资源去实现很好的自动化测试，但基本的了解还是必不可少的。最近在上手并集成单元测试到已有的 Next.js 项目中，网上的文档虽然很多，但实际使用的时候遇到的问题可谓五花八门，这篇文章可以帮助你快速的在 Next.js + TS 的环境中构建单元测试环境及进行单测的编写。
2023-01-11 10:18:57
1807
1
原创 教你用 React Hook + Typescript 实现一个类型提示完整的高阶组件（HOC）
最近在对项目内的表单组件进行的优化，在实现高阶组件的过程中发现目前关于 react 高阶组件的文章都比较旧了，很多都是以类组件的形式去实现，与 Typescript 的结合使用也比较难找到示例。因此决定自己写一篇关于实现高阶组件的文章，希望简单直观的让大家学习到高阶组件的使用场景及封装方式。高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。高阶组件其实就是一个函数，这个。
2022-09-06 18:12:45
1030
原创 提升用户体验，给你的模态弹窗加个小细节
大家在开发后台网站应用时，应该常常会使用到模态组件（Modal），也可以称为对话框组件。模态组件一般用于展示一些简单的操作，例如字段较少的表单编辑，或者删除确认框等。
2022-07-26 20:12:21
684
原创 uniapp (vite +vue3+ts+pinia) 搭配微信小程序云开发项目架构搭建-避坑指南
前言最近开始了项目旧改，将以前开发的一些校园小程序由 uniapp + vue2 版本升级为，unipp + vite + ts + vue3 的架构，顺便把代码质量提升一下。由于是单兵作战，我选择将以前的后端摒弃，选择了微信小程序云开发作为后端，这样可以将我的开发精力聚焦在小程序上。 但这么做也有如下两个缺点：使用了微信小程序云开发后，uniapp 只适用于编译成微信小程序，失去了跨端的能力。uniapp 使用云开发并不方便，尤其是使用了 typescript 后需要做大量的额外配置。综
2022-05-10 11:31:59
7607
5
原创 Next.js 网站部署踩坑经历小记及前端站点部署技巧
前言在入职两个月后，我开始了第一个完全由我一个人负责开发的网站项目。这个网站的用途是用于 宣传一个开源社区峰会 以及 沉淀峰会视频内容 ，在峰会进行期间还需要在网站进行 直播 。从网站的开发到部署上线，可谓是踩坑无数，最终实现的网站在这里 https://apisix-summit.org/背景由于时间有限，整体网站的架构是基于 vercel 的一个网站脚手架 virtual-event-starter-kit 之上进行开发，因此并不需要从头构建项目。这个脚手架使用的是 next.js 实现服务端渲
2022-04-30 15:38:11
4992
原创 前端工程师怎么写后端？试试 koa.js + Apache APISIX 吧～
前言两年前，我还是一个小白开发者。当时为了上线我开发的一个网站购买了一个学生服务器，并且安装了 linux 服务器的小白之友 宝塔面板 ，相信现在还有很多朋友买到服务器了第一件事就是装个宝塔。在宝塔面板中，我使用了内置的脚本快速的安装了 nginx + mysql + phpAdmin 全家桶。虽然很快就安装上去了，但是当时的我对于 nginx 一窍不通，在部署服务端功能的时候随便遇到一个小问题都能卡我一天，导致我最后折腾了快一周才把项目部署上去。作为一个前端开发，我有很多自己写的小项目都是通过 nod
2022-03-14 11:25:59
3892
1
原创 别害羞，开源社区真的很需要你，教你如何参与开源社区~
前言相信各位开发者多多少少会在实际开发的过程中会使用一些开源的技术，例如前端的 vue, react, 以及大量的第三方库如 echart，color.js, day.js 等等，后端就更多了，从到 api 网关到注册中心，微服务框架，日志服务等等。不知道有多少开发者有想过 为自己使用的开源项目贡献代码 呢？ 反正我自己是一直都想为一个牛逼的开源项目做出贡献，甚至成为一个 commiter 。但是我相信大部分的开发者都和我一样觉得：”这么牛逼成熟的框架，有我什么事，我连用都用的磕巴，更何况去贡献代码呢？
2022-02-23 10:30:55
4196
2
原创 前端开发从零开始学Lua-开发环境搭建及基础语法介绍（对照JS）
Lua介绍Lua 是一种轻量小巧的脚本语言，用标准C语言编写并以源代码形式开放， 其设计目的是为了嵌入应用程序中，从而为应用程序提供灵活的扩展和定制功能。Lua 是巴西里约热内卢天主教大学（Pontifical Catholic University of Rio de Janeiro）里的一个研究小组于 1993 年开发的，该小组成员有：Roberto Ierusalimschy、Waldemar Celes 和 Luiz Henrique de Figueiredo。Lua 不是一门很难的语言
2022-01-29 12:04:05
2361
原创 环境构建工具make介绍及makefile基础语法
前言在linux或unix环境中构建应用时，根据官方文档的指导，常常会使用到 make xxx 这个指令，在执行后就会为我们安装某个应用所需要的依赖，那么这个 make 到底是什么呢？make 是什么？make 是一个在软件开发中所使用的工具程序（Utility software），经由读取 “makefile” 的文件以自动化建构软件。它是一种转化文件形式的工具，转换的目标称为“target”；与此同时，它也检查文件的依赖关系，如果需要的话，它会调用一些外部软件来完成任务。顾名思义，make
2022-01-29 12:02:58
2073
原创 帮你早点下班~基于飞书API实现next.js网站内容自动生成实践
前言最近在公司里得到了一项任务，人事给了一个 飞书的职位表格 ，要求将里面的信息更新到官网上面去。其中涉及了已有岗位的信息更新，删除部分岗位和添加部分岗位。这种工作虽然简单，但是很琐碎，很麻烦。三十个岗位的 岗位列表 和 岗位详情 花了我一个早上去 更新及核对 。主要的工作量都在于 表格的数据结构和代码中的数据结构不同需要进行一个修改 以及 更新后数据后网站展示情况的核对。作为一个程序员当然得想办法优化一下整体的流程，正好本身就知道飞书是有开放api的，于是就开始琢磨着能不能基于飞书表格将内容自动化生
2022-01-29 12:00:49
3112
原创 如何在React中实现全局数据的状态持久化？一篇文章让你看懂状态持久化
前言????代码仓库链接 react-todo gitee仓库????在线预览效果 react-todo 开发进度# ????从零开始学React第一天~React基础框架的构建(Create React App+Tailwind css+Material ui)# ????从零开始学React第二天~React配置Eslint+路由导航的实现(react-router-dom)# ????从零开始学React第三天~React日期选择器组件开发+Dayjs的使用# ????从零开始学Reac
2022-01-21 11:34:00
3628
原创 一看就懂的JS内存管理及垃圾回收机制介绍及解析
前言最近在翻译外刊的时候，感觉很多好的文章翻译的时候不够地道，想为文章补充内容又担心准确度降低。莫得办法，最终我选择了以自己的大白话来总结一些翻译时的所学所想。这篇文章将会根据我最近翻译的几篇node.js相关的垃圾回收机制，循序渐进 的进行一个JS相关的内存管理机制和垃圾回收的运行原理及介绍，文章没有特别深入，适合点杯奶茶☕搭配目录食用~内存管理简介众所周知，咱们开发的程序在跑的使用都是需要用到内存来存储一些数据的，但是要是 随便存，乱存，瞎xx存 那肯定存的少，因此在存的时候就会选择一些合适的数
2022-01-18 16:02:46
1460
原创 从零开始学算法的第三天~（删除链表的倒数第 N 个结点，无重复字符的最长子串，字符串的排列）
前言今天就是我 硬钢算法的第三天，我的基础真的很差。文章重在记录总结，我也很好奇我会坚持多久，我只有以写文章的形式记录每天刷的题才能让自己保持一个积极的态度，不然每次看一会就懈怠了????。只有看到大家的反馈我才能源源不断的坚持下去！过往文章：# ????????从零开始学算法的第一天~（二分查找，双指针，两数相加，最长回文子串）# ????????从零开始学算法的第二天~（最长公共前缀，有效的括号，移动零）刷题19. 删除链表的倒数第 N 个结点这题我觉得对我的提升很大，尤其是对快慢
2022-01-12 16:44:46
367
原创 从零开始学算法的第二天~（最长公共前缀，有效的括号，移动零）
前言今天就是我 硬钢算法的第二天，我的基础真的很差。文章重在记录总结，我也很好奇我会坚持多久，我只有以写文章的形式记录每天刷的题才能让自己保持一个积极的态度，不然每次看一会就懈怠了????。只有看到大家的反馈我才能源源不断的坚持下去！过往文章：????????从零开始学算法的第一天~（二分查找，双指针，两数相加，最长回文子串）刷题283. 移动零var moveZeroes = function(nums) { let left = 0,right = 0 while(ri
2022-01-12 16:43:12
344
公司商号屏蔽算法(JS)
2021-02-23
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人