- 博客(171)
- 收藏
- 关注
RSS订阅原创 figma MCP + cursor如何将设计稿生成前端页面
Figma MCP配置与代码生成指南 本文详细介绍了如何在Cursor中配置Figma MCP（多上下文处理器）的完整流程：从获取Figma API密钥、设置MCP服务器配置，到添加代码生成规则。关键步骤包括生成Figm a个人访问令牌、配置cursor settings文件、启用MCP服务，以及设置代码规则（包含TypeScript/Vue技术栈规范、BEM命名规则等）。最后提供了将Figma设计稿转化为Vue页面的prompt模板，涵盖文件结构、图片处理、样式规范等具体要求，确保生成代码与设计稿高度一致
2025-06-06 16:05:02
1306
原创 Prompt
Prompt的核心要素包括指令、输入数据、上下文和输出指示器，这些要素共同构成了有效的AI交互设计。指令明确模型需要执行的任务，输入数据是用户提供的内容，上下文包含额外的信息以引导模型响应，输出指示器则指定了输出的类型或格式。并非所有Prompt都需包含这四个要素，但合理运用它们可以显著提升AI的响应质量和准确性。
2025-05-22 14:40:12
444
原创 配置 VS Code 使用 ESLint 格式化
4、然后在需要格式化的代码中右键选择使用…格式化文档，在上方选择框选择ESlint。1、在设置里面搜索Default Formatter，下拉框里选择eslint。2、并勾选Enables ESlint as a formatter。快捷键：Ctrl + ,（Mac: ⌘ + ,）或点击左下角齿轮 → Settings。1） 、打开 VS Code 设置。2）、 修改设置（JSON 格式）
2025-04-21 19:20:11
977
原创 前端登录业务
3.退出登录以后再登录需要回到上次退出前的页面，而不是统一回到首页，可以在退出登录的时候跳转登录页面时在路径上携带query参数，参数名为redirect，参数值就是退出前页面的路径，在登录成功后跳转时判断当前路径是否有redirect参数，有则跳转到redirect路径，否则跳转到首页。1.用户登录成功拿到token，放在请求拦截器的请求头中，调用户接口才可以获取到用户信息，存储到仓库中，以便其他组件使用用户信息。
2024-12-25 16:54:20
150
原创 Vue封装组件并发布到npm仓库
总体说来Vue组件封装发布到npm仓库整体难度不大，主要是理解Vue的install方法以及打包相关知识，其实最重要的还是如何封装一个适用范围广，扩展性高的公用组件。由于这里我们只是测试，所以我不需要更改package.json文件，如果是生产的话，最好加上版本描述和版本号等等，其中name字段便是我们上传到npm仓库后的名称。到这里为止，我们的组件封建基本就完成了，当然组件封装成什么样得看自己得业务需求了，接下来我们就需要将组件进行打包了。到这里我们的组件就封装好了，并且可以直接从npm仓库下载使用。
2024-10-10 15:05:47
1436
1
原创 HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字+烟花特效)
这是一个简单的表白功能，可以用于小哥哥小姐姐在情人节向心爱的人表白使用
2024-08-01 17:44:14
659
原创 普通html文本如何使用Redux
虽然以上示例展示了在 HTML 文件中使用 Redux 的方式，但实际开发中，更常见的是将 Redux 与现代前端框架结合使用，比如 React、Angular 或 Vue.js。3.与 HTML 元素交互: 在 HTML 文件中，你可以使用事件监听器来触发 Redux store 的更新，或者直接输出 store 中的状态到页面上。因此，如果你的目标是在一个现代化的项目中使用 Redux，建议考虑使用相应框架的官方或社区支持的 Redux 集成方式。标签中引入 Redux 的库文件或者使用 CDN。
2024-07-25 16:39:57
624
原创 用js手动写一个纵向滚动条
业务场景：由于通过css无法改动ios设备的滚动条样式，所以这里采取用js手动写一个纵向滚动条功能：实现滚动的时候出现滚动条，停止滚动，滚动条消失，示例代码如下：
2023-11-30 17:53:36
1381
原创 如何解决安卓手机无法预览pdf文件而是需要直接下载的问题
4、在业务组件跳转到pdfH5组件。3、在路由文件引入pfdH5组件。2、构建一个pdhH5组件。1、安装pdfh5插件。
2023-11-22 16:14:46
3007
原创 实现一个简单的瀑布流列表
*思路：**利用flex布局，将列表分为左右两侧，因为这种方式存在一个弊端，就是当有一侧的高度越来越高的时候，滑到底部的时候就会出现一个很明显的高度差，为了修复这个漏洞，写一个算法，计算每一页两侧列表的高度差，举个例子，当左侧高度比右侧高很多的时候，则把下一页列表的第一个数据放在右侧，补齐高度，反之同理；如果数据是无限滚动加载不会滑动到底部的话，则可以不做处理；
2023-11-13 16:10:44
369
原创 如何灵活实现文本或图片的展开收起功能？
首先要根据内容的高度是否超过指定高度来判断展开按钮显示与否，所以需要先获取dom元素，以及元素的高度，由于页面渲染需要时间，所以在获取元素高度这里需要加一个延时；然后因为图片渲染的时间要比文本更长，尤其是有很多张图片的情况下，所以在判断内容有图片的情况下，需要在图片的onload事件里执行获取元素的高度，也就是在图片渲染完成以后再去获取元素的高度；由于加了延时以后，图片会有一个先展开了全部然后突然被收起的动作，用户体验很不好，所以在这里加了一个骨架屏起到一个隐藏渲染过程的效果。
2023-11-02 14:53:18
591
原创 vue3实现一个滚动分页加载瀑布流列表
项目框架：vue3+JS+vite瀑布流框架：vue-waterfall-next问了chatGPT，对于vue3有哪些好用的瀑布流插件，回答如下：对于 Vue 3，有一些瀑布流插件可供选择。以下是几个常用的 Vue 3 瀑布流插件：vue-waterfall-next：这是一个基于 Vue 3 的瀑布流插件，它提供了简单易用的 API，可以帮助你实现瀑布流布局。它支持动态加载数据和无限滚动，并且具有自定义配置选项，如列数、间距等。vue-masonry-wall：这是一个基于 Vue 3 的瀑布流
2023-10-27 17:07:45
4768
3
原创 vue3+element-plus props中的变量使用 v-model 报错
prop 是单向数据流，这里只能用:model-value，不能用v-model。// 控制弹出框的显示与隐藏。
2023-10-15 19:13:15
1047
1
原创 JS实现瀑布流页面布局
每列的宽度相等而高度不等，且第二行的第一个容器需要放在第一行高度最小的容器下面，依次类推放置。代码仅实现了瀑布流的布局方式和 resize 监听，如果大家有需要，可以自己拓展下：实现监听滚动事件，页面滚动加载图片的功能。代码中写了详细注释，可以直接使用。实现效果如下：
2023-09-15 13:18:46
145
原创 使用js控制文字大小自动适应div不换行，div中文字字号自动调整大小以适应固定宽度
* 隐藏溢出的内容 *//* 初始字体大小 *//* 禁止文字换行 */
2023-09-08 22:41:14
860
原创 vite打包后的项目在有的浏览器上报错globalThis is not defined
【代码】vite打包后的项目在有的浏览器上报错globalThis is not defined。
2023-04-11 11:39:56
1739
1
原创 前端加密，后端解密（用RSA和AES256双重加密）
7、服务器端收到key_str用RSA2048私钥解密key_str得到AES256密钥，然后用AES256密钥解密sec_text获得请求数据。4、前端发请求的时候random一个AES256的key，然后用RSA2048公钥加密Key生成key_str。5、前端发的请求体用AES256key整个加密生成sec_text。6、前端发请求的时候将key_str放入请求头（或者请求体也可以）3、后端RSA2048私钥写到配置文件中。2、前端写死RSA2048公钥。
2023-04-07 10:25:40
2559
2
原创 前端开发环境配置搭建
npm存储包文件的服务器在国外，有时候会被抢，速度很慢，所以我们需要解决这个问题，国内淘宝的开发团队把npm在国内做了一个备份，网址是：http://npm.taobao.org/，复制下面两句话到nvm的安装目录（C:\Users\XXXX\AppData\Roaming\nvm）下的settings.txt的最后。配置到淘宝服务器：npm config set registry https://registry.npm.taobao.org。nvm list：查看当前安装的Node.js所有版本。
2023-03-27 20:42:21
521
原创 如何将自己的本地项目上传到GitHub并且能通过链接访问
1、找到本地项目所在目录，git bash here，打开git终端。2、按照这些命令去执行。
2023-03-27 10:46:14
660
原创 在vscode终端上无法运行ts文件解决方案
用管理员身份打开powershell,输入命令：set-ExecutionPolicy RemoteSigned，然后输入Y选择是。
2023-01-03 19:00:49
688
原创 react脚手架搭建项目文件
reportWebVitals.js ------- 页面性能分析文件（需要web-vitals库的支持）setupTest.js ------组件单元测试的文件（需要jest-dom库的支持）manifest.json -------应用加壳的配置文件。robot.txt -------爬虫协议文件。index.html ------主页面。logo.svg ------logo图。index.js ------入口文件。App.js ------App组件。index.css ------样式。
2022-09-12 15:36:50
152
原创 react 生命周期
4.componentDidMount()-=====>常用-----一般在这个钩子做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息。2.更新阶段：由组件内部 this.setsate() 或父组件render触发。2.更新阶段：由组件内部 this.setsate() 或父组件render触发。1.初始化阶段：由ReactDoM.render(）触发—初次渲染。1.初始化阶段：由ReactDoM.render(）触发—初次渲染。
2022-09-12 11:22:16
298
原创 高阶函数 &&函数柯里化
常见的高阶函数有：Promise,setTimeout,arr.map()等等。通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码方式。2.若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。1.若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。
2022-09-04 17:48:42
130
原创 react创建类式组件&&state用法
1.创建类必须要继承React.Component。2.里面必须有一个render函数，且必须有返回值。
2022-09-03 19:41:17
201
原创 vue中使用el-table组件checkbox进行分页多选，回显、切换分页记住上一页所勾选和取消的选项
vue中使用el-table组件checkbox进行分页多选，回显、切换分页记住上一页所勾选和取消的选项
2022-07-14 13:46:31
1157
原创 ES6的空值合并运算符和可选链
ES6的空值合并运算符：//ES5写法if(value !== null && value !== undefined && value !== ''){ //...}//ES6写法if((value??'') !== ''){ //...}es6可选链：//ES5写法const name = obj && obj.name//ES6写法const name = obj?.name...
2022-05-09 23:04:52
224
原创 vue混入mixins时注意的问题
mixin.js - 方式一：导出对象：const mixin = { mounted () { console.log('eeeeeeeeee') }, methods: { }}export { mixin }使用时，就应该使用对象的方式导入，即：{ mixin }import { mixin } from './mixins/mixin.js'export default { mixins: [mixin]}mixin.js - 方式二：导出变量c
2022-05-07 00:38:21
419
原创 关于以逗号分隔的字符串和数组的互相转换以及map的使用
//以逗号分隔的字符串转数组let stringA = '1,2,3,4'let arrA = [];arrA = stringA .split();//输出arrA:[1,2,3,4]//数组转换为以逗号分隔的字符串let arrB = [1,2,3,4];let stringB = '';stringB = arrB.join();//输出stringB :'1,2,3,4'...
2022-04-27 15:37:01
766
原创 在js函数有默认参数情况下如何增加自定义参数而不覆盖原本的默认参数
<el-uploadname="file":action="uploadUrl":on-success=" ($event) => uploadEduSuccess(item, $event)":on-error="uploadError"> </el-upload>uploadEduSuccess(item, response) { console.log("--------item", response, item);},
2022-04-26 16:41:51
819
原创 vue el-select可多选可单选 选择全部后不能选择其他；其他可多选
<el-select size="middle" clearable v-model="form.ground" @change="handlePlat" placeholder="请选择小组" filterable multiple style="width: 400px;"> <el-option label="全部" value="全部"></el-option> <el-option v-for="(item, index) in groundL
2022-04-26 13:09:54
280
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人