- 博客(305)
- 资源 (3)
- 问答 (15)
- 收藏
- 关注
RSS订阅
原创 Vue3+TS——打造AIVista Image Studio的在线生图工具
总的来说，结合了 Vue 3、Element Plus和强大的 AI 画图技术，做出了这个叫 AIVista Image Studio 的在线工具。它不仅能让你细致地调整各种画图参数，还通过模板、预设、参考图这些功能，让你用起来更方便、更有趣。分工合作: 把界面显示和跟 AI 沟通的代码分开写。记住状态: 用 Vue 的方法来管理用户输入和界面状态。用户感觉: 从引导页面到加载动画，再到按钮样式，都尽量做得好用、好看。安全第一。
2025-04-10 11:04:14
976
1
原创 Vista AI 演示——游戏开发指南
本指南详细介绍了基于大模型开发交互式文字游戏的方法，包括场景生成、角色关系管理和故事线构建。"最强剑魔是高三生"是一款基于AI生成的交互式文字冒险游戏，玩家扮演一位高三学生兼游戏主播，需要在学习和游戏之间寻找平衡。场景生成是游戏的核心机制，DeepseekClient提供了专门的API：场景结构每个生成的场景包含以下结构：进度系统设计游戏进度通过以下结构管理：游戏结束机制当玩家的任一进度指标（游戏成就、学习进度、社交关系、神秘能力）达到1
2025-03-25 11:45:21
1131
原创 探索AI的无限可能，体验智能对话的未来，大模型 API 演示
这是一个基于 Vue 3 + TypeScript + Vite 构建的 Vista AI 演示项目，旨在提供一个简洁易用的界面来展示 Vista AI 大语言模型的能力。项目包含 API 演示和交互式游戏两个主要功能模块，同时支持两种不同风格的 API 调用方式。
2025-03-24 21:00:00
793
原创 构建知识库和联网搜索对话平台：从零到一的完整开发指南
AI对话平台开发指南摘要本文详细介绍了如何从零开始开发一个集成知识库和联网搜索功能的AI对话平台。项目采用分层架构设计，前端使用原生JavaScript+TailwindCSS，后端调用RAGFlow API实现AI功能。核心功能包括：智能思维链 - 实时可视化AI思考过程文档引用系统 - 支持PDF预览和引用标记流式响应 - 实时显示AI回复内容企业级UI - 采用LayUI组件库构建响应式界面开发流程涵盖项目初始化、消息系统设计、思维链处理、文档引用和流式响应实现等关键阶段，并提供完整的
2025-06-03 13:20:47
965
原创 从零开始打造HTML5拼图游戏：一个Canvas实战项目
在开始动手之前，我想分享一下为什么选择HTML5 Canvas来开发拼图游戏。相比于传统的DOM操作，Canvas提供了更高效的图形渲染能力和更灵活的像素级控制。对于拼图这种需要处理不规则形状和复杂交互的游戏来说，Canvas无疑是最佳选择。性能优异：即使在移动设备上也能流畅运行视觉效果好：支持不规则拼图形状、平滑动画和精确的图像裁剪交互体验佳：磁性吸附、拖放操作和触摸支持让游戏体验更加友好代码结构清晰：便于理解和扩展。
2025-03-31 16:14:10
754
1
原创 用cursor接入mcp协议并体验Magic生成AI网站
在开始使用之前，我们要稍微理解一下什么是mcp协议。（模型上下文协议）MCP 是一种开放式协议，它规范了应用程序向 LLM 提供上下文的方式。把 MCP 想象成人工智能应用的 USB-C 接口。
2025-03-18 16:30:09
1081
原创 打造智能聊天体验：前端集成 DeepSeek AI 助你快速上手
先看完整效果：Deepseek语言模型视频演示效果图：基于 Vue 3 + TypeScript + Element Plus 开发的 AI 聊天助手，集成了 DeepSeek 的 API 服务。提供打字机模式和流式输出两种对话模式，支持多种 AI 模型切换。2. 环境配置创建 文件：项目结构组件详解1. ChatContainer.vue聊天界面的核心容器组件。完整代码如下：2. ChatInput.vue输入组件特点：完整代码如下：3. MessageBubble.vue消
2025-02-08 15:46:34
6837
21
原创 vue3封装el-tour漫游式引导
这里需要注意一下第四个部分，我这里因为要直接绑定第三方组件Vant的。如果是引导饿了么的组件获取dom类型可以从官网上查看，比如绑定在。如果不用官网的方法也可以直接使用js方法获取，当然你也不需要。引入的第三方库方法我这里就不写了，可以自行去官网查找。// 引导组件显示状态（双向绑定）// 跳过按钮处理函数（暂未启用）的所以需要使用Vant中自带的。// 引导步骤项目接口定义。// 上一步按钮处理函数。// 下一步按钮处理函数。// Props 定义。// 步骤变化处理函数。// 下一步按钮文本。
2025-01-15 11:04:41
1081
原创 TypeScript 中 `type` 和 `interface` 的区别有哪些？
对比了 TypeScript 中 `type` 和 `interface` 的区别：`type` 更灵活，适合复杂类型；`interface` 更适合对象结构和类设计，两者可互补使用。
2024-12-11 10:44:59
501
原创 如何用 Vue3 和 Element-Plus 打造一个交互式音乐播放器
如何用 Vue3 和 Element-Plus 打造一个交互式音乐播放器
2024-12-03 09:59:41
1681
3
原创 H5页面在线预览pdf
一般的做法是在浏览器中打开pdf文件，但是这种方式会导致浏览器的工具栏和地址栏也一起显示出来，影响用户体验。因此，我们需要在H5页面中实现一个预览pdf的功能，例如在网页或微信小程序中嵌入 PDF 文档，方便用户直接预览文件。在 HTML 中，创建一个全屏的容器 pdf-container 用于展示 PDF 页面，并通过 CSS 设置其宽高为 100vw 和 100vh，确保容器充满屏幕。由于 PDF.js 默认使用 1 倍的缩放比例，导致生成的图片在移动端显示模糊。为了解决这个问题，我们可以通过设置。
2024-10-30 11:10:32
2980
2
原创 关于使用CDN方式引入原子化js时出现闪屏问题解决方法
先看问题在使用原子化 CSS（如 、 或 ）时，可能会遇到页面刷新后所有样式类丢失，再加载时体验较差的问题。这是因为样式通过 JavaScript 动态加载渲染，页面初始时 JavaScript 尚未解析完成，导致样式无法获取。通过给 元素设置 ，等到 JavaScript 完成解析后再显示页面内容，可以解决这个问题。CSS 部分：JavaScript 部分：引入 JavaScript 文件：这样，页面在加载完成后才显示内容，避免用户看到样式丢失的过程，提升了用户体验。
2024-09-13 10:50:37
358
原创 Vue3+Ts+Element-Plus多级表头以及动态合并单元格
【代码】Vue3+Ts+Element-Plus多级表头以及动态合并单元格。
2024-08-06 13:58:04
1272
3
原创 TypeScript—— 泛型
用来约束泛型类型，比如我想写一个函数，用来检查对象中是否存在某个 key，如果存在则返回 true，否则返回 false，我们可以使用泛型约束来实现这个功能(此处后面会提到)比如我想写一个函数，用来检查对象中是否存在某个 key，如果存在则返回 true，否则返回 false，我们可以使用泛型约束来实现这个功能。用来获取对象的 key，比如我想写一个函数，用来获取对象的 key，我们可以使用泛型约束来实现这个功能。泛型类型允许我们创建可以适用于多种类型的类，类中的成员可以使用泛型类型进行声明和使用。
2024-07-30 15:19:54
838
1
原创 判断对象是否为空的多种方式
本文介绍了 6 种判断对象是否为空的方法，并对比了它们的性能。其中，是最快的方法，适合在性能要求较高的场景中使用。而性能较差，不建议用于大对象的判空操作。
2024-06-25 10:38:20
790
原创 我的创作纪念日
我大概是从2022年的时候了解IT行业并首次注册CSDN这个关于IT网站的账号，也是我做前端开发的开始，到如今已经差不多三年了，写博客的初衷也就是想自己学习一些技术并实时分享，记录等，当然也是对我文章感兴趣的同学们老师们进行技术的沟通，当然在这里也遇到很多的未知的坑。我希望能够在技术分享的领域更加深入和专业，不仅仅局限于基础知识的传播，更能够参与到前沿技术的讨论和研究中。那些来自读者的反馈，无论是肯定的赞扬，还是指导性的批评，都成为了我不断改进和进步的动力。每一次数字的跳动，都仿佛是在为我的努力鼓掌。
2024-06-24 10:14:41
430
原创 原生js制作svg 图标生成动态 tab栏切换效果(结尾附代码)
先看效果：我想做一个 tab 栏比较美观的效果，当然切换的数据可以自己做一下，这里不演示，说一下特效如何制作。当我点击时要将空心变为实心的这么一个效果，所以准备两个五角星样式一个是空的一个是实心的 svg 图片结构大致是这样首先需要一个父元素可以定义一个标签然后就是需要一个数组里面存放文字，颜色，填充色以及描边的阴影，我这里用六个色调为一组，如果自己想设置什么颜色或者想要每个不同可以自行考虑更换2. 创建遍历元素，并添加到父级中。其中是用来做五角星发光的边框阴影接下来就是做竖着的线条的
2024-06-19 17:06:22
1233
原创 Turbo Console Log自定义配置
因为vscode的其他快捷键可能会和这个插件产生冲突，所以可以从这里设置自定义不重复的快捷键。可以用下vscode中的。还有其他的设置可以参考这篇文档。我用的是显示第多少行和路径名。
2024-06-13 10:03:16
1672
原创 超级大转盘！(html+less+js)（结尾附代码）
有个会议需要用到转盘抽奖，有机会赢得不同奖品。html+less和 js实现先上效果：旋转动画的话其实就是中的 transform 属性，改变转盘旋转的速度以及动画结束时间JS 部分因为数据肯定是活的，所以我们这里要把数据单独拎出来圈里的图片可以自己查找替换定义变量把奖品放入这个函数中抽奖部分转盘转动角度完整代码：结尾当然中什么可以自己根据id控制中什么（我中不了奖就是有黑幕！）
2024-05-08 15:40:33
974
1
原创 vue3——H5页面调起微信订阅通知
/ 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。// 必填，需要使用的JS接口列表。// 必填，公众号的唯一标识。// 必填，生成签名的时间戳。// 必填，生成签名的随机串。
2024-04-08 11:47:47
1432
1
原创 HarmonyOS4.0 系列——06、渲染之条件渲染、循环渲染以及懒加载渲染
ArkTS 提供了渲染控制的能力。条件渲染可根据应用的不同状态，使用 if、else 和 else if 渲染对应状态下的 UI 内容。写法和 TS 的一样，简单看一下即可效果：另外，@State 定义的变量归父组件所有。因此，当子组件实例被删除时，该变量不会被销毁。子组件通过@Link装饰器引用状态。状态必须从子级移动到其父级（或父级的父级），以避免在条件内容或重复内容被销毁时丢失状态。
2024-01-13 16:02:15
1463
原创 HarmonyOS4.0系列——05、状态管理之@Prop、@Link、@Provide、@Consume，以及@Watch装饰器
看下面这张图Components部分的装饰器为组件级别的状态管理，部分为应用的状态管理。开发者可以通过@StorageLink/@LocalStorageLink 实现应用和组件状态的双向同步，通过@StorageProp/@LocalStorageProp 实现应用和组件状态的单向同步。
2024-01-10 11:15:37
2022
原创 HarmonyOS4.0系列——04、@Styles、@Extend、@Extend事件以及多态样式stateStyles
通用样式类似于css中的class放在struct内调用总结：@Styles 内部样式和外部样式，内部样式优先级高于外部样式，内部不要需要用函数function定义，外部需要function;缺点：只能用于通用样式，@Styles不能进行传参那么如何进行传参呢？
2023-12-29 19:30:00
894
原创 HbuilderX使用Uniapp+Vue3安装uview-plus
如果你是vue2版本想使用uniapp去配置uviewui库可以参考之前的文章小程序的第三方ui库推荐较多的还是uview的，看起来比较美观，功能也比较完善，下面将提一下Vue3安装uview-plus库的教程。
2023-12-08 22:00:00
8212
原创 HarmonyOS4.0系列——03、声明式UI、链式编程、事件方法、以及自定义组件简单案例
当我们需要写多个文本不同但样式相同的效果，需要使用自定义组件来实现，下面是需要注意的几点@Component装饰器仅能装饰struct关键字声明的数据结构。struct被@Component装饰后具备组件化的能力，需要实现build方法描述UI，一个struct只能被一个@Component装饰。@Entry放在哪个组件前面，哪个就在页面上显示在Entry组件中，build()中必须有且只有一个更组件自定义组件必须定义build()函数定义一个的组件@Component。
2023-12-04 11:10:15
876
原创 HarmonyOS4.0系列——02、汉化插件、声明式开发范式ArkTS和类web开发范式
我们在每次退出编辑器后再次打开会直接进入项目文件中，这样在新建项目用起来很是不方便，所以这里跟着设置一下就好。这样下次进入就不会直接跳转到当时的文件项目中！→重启DevEco-Studio完成汉化。也就是所谓的前端开发方式。
2023-11-24 15:24:21
1026
原创 策略模式——多重if-else解决方案
策略模式 💤：是一种行为设计模式，它允许你在运行时根据不同情况选择不同的算法或行为。设计模式 🤌：就是提前第一次了解全过程，第二次直接规划不必要的坑。
2023-10-16 15:54:06
1338
原创 ThreeJS——在3D地球上标记中国地图板块
用于获取地图的位置以及到下一个目的地的总路程，可以将实际路程转成自己配置的路程，以及正在路上的标识，可以用头像表示，经过的地方可以嵌入链接点击进行跳转如果是 Vue 写的话需要从生命周期中获取 Dom 元素动画渲染函数用于制作开始场景镜头动画(由远到近并附带略微旋转)这个动画在后面会用到，是根据滚动下方内容进行左右镜头旋转的动画效果此时星空就已经搭建好了，可以左右旋转试试效果其实也就是创建一个球，然后贴个准确的贴图放在圆上调整一些光感即可绘制红色圆点和点与点之间的飞线效果用画布渲染
2023-08-14 13:14:51
3768
原创 微信小程序——XR-frame图像跟踪效果
可以尝试点击切换模式查看效果，会发现两个模式都能够正常渲染普通的页面。然后我就打算尝试按照官网给出的例子继续尝试下去，之后就遇到的问题。在使用xr-frame时，遇到很多坑，这里给出解决办法。这里面是不带这个新的渲染引擎的包。为了避免这个坑，可以使用这个包。
2023-08-08 09:49:29
891
原创 Mindar.JS——实现AR图像追踪插入图片或视频
上面图片提到需要一个Mind文件，这个文件就是图像识别的图片，工具在这里。如果我想扫描图片展示视频该如何去操作呢？我这里加了两张png图片用来做暂停按钮。如果是图片识别显示图片的话就很简单了。// alert('播放')// alert('暂停')// alert('执行')层级往内移动 或者 让。
2023-07-28 13:05:49
3352
4
原创 Three.js——十五、Box3、相机动画、lookAt()视线方向、管道漫游案例、OrbitControls旋转缩放限制、以及相机控件MapControls
正投影相机和透视相机的区别如果都以高处俯视去看整个场景，正投影相机就类似于 2d 的可视化的效果，透视相机就类似于人眼观察效果如果你想整体预览全部立方体，就需要调整相机的渲染范围，比如设置上下左右的范围。使用场景：正投影可以用来预览中国地图，或者 2D 可视化的效果透视投影相机一般是人在场景用漫游，或者高俯视整个就是将整个模型的所有顶点包裹起来形成一个长方体，此长方体就是 Box3改变相机的位置.position，三维场景在 canvas 画布上呈现不同的效果，如果连续改变相机的位置.positi
2023-07-17 10:24:06
2631
原创 Threejs——十四、关于深度冲突、重叠、以及加载模型进度条效果实现（附完整代码）
两个模型重叠的模型，通过浏览器旋转预览，会发现模型旋转的时候会发生闪烁。这种情况，主要是两个模型重合，电脑分不清谁在前谁在后，这种情况，可以理解为深度冲突。效果：适当偏移，解决深度冲突，偏移尺寸相对模型尺寸比较小，视觉上两个几何体近似还是重合效果。这种情况我这里遇到过一次，通过压缩模型后进行放大缩小会发现出现模型闪烁的 bug，所以这里可以用解决冲突问题。注意：如果两模型面间隙过小，或者重合，，此渲染器对数深度缓冲区也是没有效果的区别：不加这里拿来测试这里可以进行判断，如果等于100，也就
2023-07-17 09:44:41
1223
原创 Three.js——十三、自定义大小画布、UI交互按钮以及3D场景交互、渲染画布为文件（图片）
- canvas元素默认是行内块元素 --> < div class = " model " style = " background-color : #ff0000;-- canvas元素默认是行内块元素 --> < div class = " model " style = " background-color : #ff0000;
2023-07-17 09:41:24
1296
原创 Three.js——十二、MeshPhysicalMaterial清漆层、粗糙度、物理材质透光率以及折射率（结尾附代码）
和都是拥有金属度、粗糙度属性的PBR材质，是的子集，除了继承了他的这些属性以外，还新增了清漆、透光率、反射率、光泽、折射率等等清漆层属性可以用来模拟物体表面刷了一层透明的模的范围0到1，默认0。关于MeshPhysicalMaterial材质是Three.js中的一种材质类型，它是基于物理的渲染（PBR）材质，可以模拟真实世界中的光照和材质反射。它支持金属和非金属材质，可以设置粗糙度、金属度、环境光遮蔽、法线贴图、位移贴图等属性，以实现更真实的渲染效果。还支持高光反射和透明度，可以用于创建逼真的玻璃、水
2023-07-17 09:37:13
1652
原创 Three.js——十一、PBR材质金属度、粗糙度以及环境贴图的使用
如果想使用环境贴图对scene所有Mesh添加贴图材质，可以通过Scene的场景环境属性.environment实现,把环境贴图对应纹理对象设置为.environment的属性值即可。用于设置环境贴图的强度。当然在实际开发中，环境贴图的不同也会对渲染效果造成影响，也需要选择合适的贴图，往往这种贴图可以让美术提供即可。表示模型表面的光滑或者说粗糙程度，越光滑镜面反射能力越强，越粗糙，表面镜面反射能力越弱，更多地表现为漫反射。总结：粗糙度越小，反射效果越强，如果设置为0，那么他将完全镜面反射，等同于镜子。
2023-07-11 12:08:49
2114
Vue3中的vant怎么通过用户输入的数量生成一样的input框，但绑定的值不一样
2022-08-12
vue3中的vant怎样解决点击弹出层的确认按钮后两个都发生一样的变化的问题
2022-08-15
有什么方法可以遍历出动态的v-model
2022-08-03
vue3怎么使用mock去引入本地图片
2022-08-16
vue3的H5页面该怎么打包，这里生成的dist文件是个空的
2022-08-09
vue3中使用mock后可以将mock数据打包出来吗？
2022-08-10
引入pinia中的state会报警告，这个应该怎么解决
2022-07-28
这样的结构怎么转换成下面这个样子
2022-08-04
怎么获取带索引的键名里的值
2022-08-04
在vant框架中有一个标签栏，怎样判断在点击每个标签的时候只请求一次数据
2022-01-05
vant3怎么通过 ref 可以获取到 Form 实例并调用实例方法
2022-07-21
Vue3的路由传参该怎么去传？
2022-07-27
vant怎么自定义dialog
2022-07-27
TS如何把两个对象进行合并
2022-07-26
请问一下为什么我手机访问不了电脑的localhost的本地项目
2022-02-09
uniapp可以使用better-scroll插件吗
2022-01-12
vue-cli写的h5打包成app出现错误，导致页面不渲染
2022-06-14
使用better-scroll插件为什么会出现回退到初始位置
2021-12-20
javascript一键生成数量
2024-04-15
小程序WebGLRenderer渲染报错
2023-07-10
ios中用微信浏览器加载glb模型频繁刷新
2023-07-05
js如何简化判断x,y,z分别为正负的八种可能
2023-05-22
在threejs中如何用css2dobject的标注被模型遮挡
2023-05-16
threejs通过CSS2Dobject为什么点击获取不到标点返回信息
2023-05-19
前端怎么用自动化部署把dist文件部署到服务器上
2023-04-07
vue3物理返回键直接退出程序如何解决
2022-11-04
vue3+ts怎么实现App物理返回两次退出软件
2022-10-25
怎么将背景图添加画笔，将画好的图案和背景再次生成一张图片
2022-10-20
怎么将背景图添加画笔，将画好的图案和背景再次生成一张图片
2022-10-20
在图片上方用canvas做的图片标记能生成一张新的图片
2022-10-20
jq如何对p标签动态绑定背景图
2022-10-11
jq获取动态标签并添加图片
2022-10-11
vant有什么办法可以获取日历中区间的所有值吗？
2022-09-08
怎么通过出生年月来获取人的岁数
2022-08-18
TA创建的收藏夹 TA关注的收藏夹
TA关注的人