关于前端Skill的AI提效
AI+Skill 提效实践一、重复场景及提效空间(一)典型重复场景前端开发中,重复工作主要集中在两类:
基础页面与组件:相似的页面结构和交互逻辑在不同业务模块中反复出现;
配置类代码:字段定义、布局配置等仅参数不同,却需要逐次手写。
(二)提效方向针对上述痛点,核心思路是:
模板化沉淀:将高频重复的代码结构系统梳理,封装为标准化、可复用的模板;
AI 自动化调度:借助具备 Agent 能力的 AI 工具,自动匹配并调用模板,替代人工重复编码。
二、AI+Skill 提效方案Skill 的概念:Skill 是用自然语言定义的、具有特定领域上下文(Domain Context)的逻辑指令集,相当于 AI 的”技能包”,让 AI 能精准理解项目的开发规范与需求。
核心逻辑:Skill 作为提效载体,负责存放可复用的模板代码和项目规范文件,为 AI 提供标准化的”素材库”和”操作指南”;AI 则依托 Agent 能力,自动调用对应 Skill,快速生成符合规范的代码,摆脱从零编码的繁琐。
落地步骤(共 4 步):
第一步:建立 Skill 模板库
梳理项目中的重复开发场景,将高频代码结 ...
Java环境搭建与mcp连接数据库
本文用于记录 Java 环境搭建与 mcp 连接数据库的步骤安装 JavaJDK1.下载地址 :jdk172.安装步骤:
按照安装向导的提示进行安装
右击【我的电脑】->【属性】->【高级系统设置】->【高级】->【环境变量】新增环境变量:
变量名:JAVA_HOME
变量值:D:\java\jdk-17 (根据自己的安装路径修改)
变量名:PATH
变量值:%JAVA_HOME%\bin;
打开命令行,在地址栏输入 cmd ,打开命令行
在命令行中输入 java -version ,如果出现 java 命令,则说明安装成功
maven1.下载地址 :maven
2.安装步骤:
将解压后的文件夹复制到 D:\java 目录下
新增环境变量:
变量名:M2_HOME
变量值:D:\java\apache-maven-3.9.12
变量名:PATH
变量值:%M2_HOME%\bin;
打开命令行,在地址栏输入 cmd ,打开命令行,输入 mvn -v ,如果出现 mvn 命令,则说明安装成功
在 D:\java\apache-mave ...
cursor地区限制解除
本文用于记录解决 cursor 地区限制解除的方法
问题背景大概在 7 月份的时候,国外有很多大模型在国内被禁用,在 cursor 中使用这些模型的时候会提示,Model not availableThis model provider doesn’t serve your region.下面提供一些方法来解决这个问题
解决方法设置代理路径:文件-> 首选项 -> 设置 -> 搜索 proxy操作: 找到Http: Proxy ,在其中填入你的魔法工具的代理地址
禁用 HTTP2.0
在 cursor 的设置页面中找到 Network
找到 HTTP Compatibility Mode ,然后选择 HTTP1.1
打开魔法工具,打开 TUN 模式
End好了,现在就能正常使用限制地区的模型了
Hello World
Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.
Quick StartCreate a new post1$ hexo new "My New Post"
More info: Writing
Run server12$ hexo serverJava环境搭建与mcp连接数据库
More info: Server
Generate static files1$ hexo generate
More info: Generating
Deploy to remote sites1$ hexo deploy
More info: Deployment
前端下载后端返回文件流,踩坑记录
本文主要记录前端使用后端返回的文件流进行下载时,下载的文件损坏的问题。
问题背景前端在使用axios下载后端返回的文件流的后,将它转化为 url 然后模拟点击下载,发现下载的文件损坏。以下是最开始代码片段:
1234567891011121314Vue.prototype .$post(`api/xxxx`, formData) .then((response) => { // 创建一个 Blob 对象 const blob = new Blob([response], { type: "application/zip" }); // 创建一个 URL 对象 const url = window.URL.createObjectURL(blob); window.location.href = url; // 注意,这里需要合适的时机去释放 URL 对象,比如可以在页面加载完成等回调中去执行 window.addEventListener("load", () =& ...
优化axios封装之配置使用AbortController取消重复请求
本文主要记录如何使用 axios 的 CancelToken 机制解决数据请求过多导致的数据错乱问题,通过配置参数中断重复请求并管理缓存,确保请求的高效性和准确性。当用户重复调用一个接口时,会导致数据错乱,解决方法是取消上一次重复的请求,通过axios的AbortController去中断之前的请求。PS:AbortController 仅支持 Axios0.22.0 及以上的版本,本人使用的是 0.22.0 的版本,请确保使用版本不低于这个版本
在封装的 axios 文件中增加逻辑
定义变量123// isCancel-取消标识 用于判断请求是不是被AbortController取消的const { isCancel } = axios;const cacheRequest = {};
定义删除缓存队列中请求的函数12345678// 删除缓存队列中的请求function removeCacheRequest(reqKey) { if (cacheRequest[reqKey]) { // 通过AbortContr ...
Hexo增加Live2D动态人物
一、安装 hexo-helper-live2d 插件使用npm安装hexo-helper-live2d模块
hexo-helper-live2d 官方中文文档
1npm install --save hexo-helper-live2d
二、添加配置文件在 hexo 博客到_config.yml 文件添加以下配置 建议在根目录下的_config.yml 配置,这样以后换了主题就不用重新配置了 当然也可以在 themes 下的_config.yml 配置但是要注意模型目录要填写正确
1234567891011121314151617181920live2d:enable: true # 是否启动scriptFrom: local # 默认pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)pluginJsPath: lib/ # 脚本文件相对与插件根目录路径pluginModelPath: assets/ # 模型文件相对与插件根目录路径tagMode: false # 标签模式, 是否仅替换 live2d tag 标签而非插入到所有页面中debug ...
性能优化
前言目前的互联网产品竞争十分激烈,一个网站的打开速度和响应速度是一个很重要的指标,这都会影响用户的留存率和转化率,最终体现为经济效益。现在市场上初中级的前端太多了,学习性能优化的知识也能提高我的个人竞争力和发展空间,所以我打算学习一下这个模块的知识,并在此记录一下我的学习过程。
一丶初识性能优化性能优化其实主要关注点是用户的体验,所以我们需要了解用户的体验点是什么,并且根据网站的生命周期来进行优化。主要参照了 RAIL 性能模型的四个方面:
响应(Response):用户交互的响应时间
动画(Animation):用户体验的流畅度
空闲(Idle):利用空闲时间来处理可延迟任务
加载(Load):加载关键渲染路径
常见的优化性能的步骤一般分为三步:
首先量化网站的性能表现,可以通过Chrome浏览器的Performance模块或者使用Lighthouse插件来查看网站的性能表现;
然后立足于网站的生命周期,找出性能表现差的原因;
最后进行技术改造和优化性能。
二丶前端页面的生命周期前端有一道很经典的面试题:从浏览器地址栏输入 URL 后,到页面渲染出来,整个过程发生了什么?这道 ...
