- 博客(58)
- 收藏
- 关注
原创 4.前后端联调(Vue3+Vite + Express + MySQL)
等端口,浏览器会触发「同源策略」拦截请求,必须配置 CORS(跨域资源共享)。对敏感信息(如用户密码)进行加密(如 MD5/SHA256),避免明文存储。简化 Express 中 JWT 认证中间件的编写(替代手动验证)生成 JWT Token + 验证 Token 合法性(核心)正确建立通信,实现跨域支持、请求解析、统一响应、环境适配。确保后端监听的地址和端口对前端可见。确保后端能正确解析前端传递的。1.2 在app.js中配置。所有接口统一前缀(如。
2025-12-13 11:49:31
248
原创 3.MySQL 数据库集成
一个库里有多个表,每个表存一类数据(比如 “超市数据” 库里有:✅ 会员表(存会员 ID、姓名、电话);一个 MySQL 里可以建多个 “库”,每个库对应一个业务(比如 “超市数据” 库、“员工考勤” 库),互相隔离;SQL(结构化查询语言)是和 MySQL 对话的 “语言”,你输入指令,MySQL 执行对应的操作(增 / 删 / 改 / 查数据)。为了区分每一行数据,给表指定一个 “唯一标识字段”(比如会员表的 “ID”),保证每行都不一样(不会有两个 ID=1 的张三)。
2025-12-13 11:39:09
819
原创 2.Express 核心语法与路由
express-validator 支持链式校验(如 check('username').notEmpty().isLength({ min: 6 }));app.use((req, res, next) => { res.success = (data) => res.json({ code:200, msg:'成功', data });// 或加虚拟前缀:app.use('/static', express.static('public'))处理文件上传(multipart/form-data 格式)
2025-12-13 11:16:56
441
原创 1.基础环境搭建与核心认知
模块是 Node.js 实现 “请求 - 响应” 模型的核心,用于创建 HTTP 服务器 / 客户端,对应前端通过。服务器返回给客户端的信息(如状态码、响应头、数据),对应前端 fetch 拿到的。客户端发给服务器的信息(如 URL、请求方法、参数),对应前端 fetch 的。发起请求的逻辑(前端是 “请求方”,Node.js 是 “响应方”)。获取路径中的文件后缀(如 .js、.json);为 Node.js 服务(服务器端,同步加载)),支持.node/.json 等。
2025-12-13 11:16:04
524
原创 对接deepseek(全面版)【前端写全局图标和对话框】
前端实现功能:全局图标点击和拖拽吸附侧边功能。点击图标弹出对话框,对话框支持自由拖拽和调节大小。对话框中实现基础问答,复制答案,会话整理等。注意:难在对项目中页面优化适配功能。2.点击图标弹出对话框,对话框支持自由拖拽和调节大小。后端接口实现:对话标题修改,对话内容返回等等。鼠标拖拽,判断距离左右两侧那里更近就吸附哪边。3.处理了自适应问题,确保图标在可视区域内。3.对话框中实现基础问答,复制答案,会话整理。1.全局图标点击和拖拽左右吸附侧边功能。1.处理了鼠标拖拽和鼠标单击的不同。2.实现拖拽和缩放。
2025-12-08 17:29:57
343
原创 uniapp+vue3项目中的常见报错情况以及解决方法
uniapp+vue3虽然有很多适配兼容方面的问题,但是优点也是很多,并且UniApp官方也推荐新项目使用Vue3,未来生态将更多聚焦Vue3。
2025-12-04 17:51:10
460
原创 项目引入DeepSeek对话【前端--简化版】
vue3+pina1.实现基本对话功能。2.实现聊条记录回显功能。实现分页展示,每次刷新展示最后一页数据,滚动条在最下方展示。3.实现拖拽头部在项目展示区域内任意移动功能。4.实现上下左右鼠标放在边上可以自由放大缩小功能。注:每次实时对话都可以缓存本地,退出登录或者清除缓存就清空。每次联调历史记录对话,为了优化频繁调接口,可以在第一次点开的时候存值后续不需要调用接口。实现效果。
2025-10-22 17:38:29
315
原创 uniapp学习【整体实践】
安装uView# 或通过uni_modules安装在uni-app插件市场搜索uView,导入到项目中<template><button</button>type: {},size: {},})if (!</script></style>"pages": ["style": {"navigationBarTitleText": "首页","navigationStyle": "custom", // 自定义导航栏-- 自定义导航栏组件 -->
2025-10-13 18:16:18
394
原创 uniapp学习【项目创建+项目结构解析】
打开 HBuilderX,点击 “文件> 新建 > 项目”。选择 “Uniapp 项目”,填写以下信息:目录:选择本地文件夹(建议新建一个专门的开发文件夹,避免路径含中文)。模板:选择 “默认模板(Vue3)”(务必选 Vue3,否则后续无法使用 Vue3 语法)。勾选 “启用 TypeScript”(可选,小白建议先不勾,用 JavaScript 更易上手)。勾选 “创建 git 仓库”(可选,用于版本管理)。点击 “创建”,项目初始化完成(首次创建会自动下载依赖,需等待 1-2 分钟)。
2025-10-11 15:52:53
580
原创 uniapp学习【准备工作+环境搭建】
安装完成后,打开 HBuilderX,进入 “工具> 插件安装”,确认 “Uniapp 编译插件” 已安装(默认已装,若没有则手动安装)。开启服务端口:进入 “设置> 安全设置”,勾选 “开启服务端口”(HBuilderX 需通过此端口连接微信开发者工具)。打开 HBuilderX,进入 “工具> 设置 > 运行配置 > 微信开发者工具路径”。,下载 “App 开发版”(含 Uniapp 核心插件,无需额外安装)。安装完成后,打开工具,登录微信账号(需绑定小程序账号,个人账号也可)。,下载对应系统的版本。
2025-10-11 11:58:51
301
原创 2.canvas学习
术语专业解释作用粒子实例池(Particle Pool)用数组(或列表)存储所有活跃的粒子对象,统一管理粒子的创建、更新、渲染和销毁避免零散管理粒子导致的逻辑混乱,便于批量操作批量更新(Batch Update)遍历粒子数组,对每个粒子执行状态更新(如位置、速度、生命周期、颜色变化等)确保所有粒子按统一节奏遵循物理规则(如重力、阻力),保持运动一致性批量渲染(Batch Render)遍历粒子数组,对每个存活的粒子执行绘制操作(如绘制圆形、矩形或纹理)
2025-09-18 18:10:35
993
原创 6.Cesium 学习
在 Cesium 中,“自定义图层叠加 SVG/Canvas 图层到地球”,核心是利用 Cesium 提供的接口,将 SVG(矢量图形)或 Canvas(动态绘制图形)作为 “图像资源”,贴到地球表面的指定区域或全局,实现个性化图形标注、动态数据可视化等需求。为什么能叠加?地球表面的影像(如卫星图、地图)本质是通过提供的 “图片”,SVG/Canvas 本质也是一种 “可绘制的图像”,因此可以自定义一个,让它返回 SVG/Canvas 生成的图像,再贴到地球对应位置。SVG vs Canvas 的区别?
2025-09-15 18:10:05
1000
原创 5.Three.js 学习(基础+实践)
什么是着色器?着色器 (Shader) 是一种专门处理图形渲染的小程序,运行在 GPU 上。就像画家画画有步骤一样,计算机渲染 3D 图形也需要特定步骤,着色器就是负责这些步骤的。顶点着色器:处理物体的 "骨架",决定每个顶点的位置片元着色器:处理物体的 "皮肤",决定每个像素的颜色什么是 ShaderMaterial?在 Three.js 中,Material (材质) 决定了物体的外观。而 ShaderMaterial 是一种特殊的材质,允许你编写自己的顶点着色器和片元着色器,实现各种炫酷效果.
2025-09-13 16:23:26
1505
原创 4.WebGL 学习(基础+实践)
Canvas 与 WebGL 上下文:Canvas 是绘制区域,WebGL 上下文是操作接口着色器:顶点着色器:处理顶点位置片元着色器:处理像素颜色着色器使用 GLSL 语言编写,类似 C 语言程序编译与链接:先编译各个着色器再将编译好的着色器链接成一个程序程序是 WebGL 实际执行的代码单元缓冲区操作:缓冲区用于存储顶点数据数据需要从 JavaScript 传递到 WebGL 缓冲区通过顶点属性将缓冲区数据与顶点着色器关联。
2025-09-12 15:20:49
709
原创 1.技术认知
Cesium 的核心是 “GIS 数据对接”,先搞懂 “经纬度如何转换为 3D 空间坐标”,否则模型会出现 “飘在天上” 或 “埋在地下” 的问题。1.在原有的基础上学习一些图形学技能,对于自身的逻辑思维和项目优化渲染都很有帮助,我们如果一直做一些常规的事,不仅会疲劳还会在重复的工作中麻木。Three.js 是 “WebGL 的封装库”,帮你屏蔽了底层的着色器 / 缓冲区细节,专注于 “3D 场景搭建”3D 技术的核心是 “数学 + 图形学原理 + JS 进阶”,这是所有学习的基础。
2025-09-11 11:55:15
728
原创 关于less/sass两个css预处理器的总结
对比维度LessSass(SCSS)语法友好度更接近 CSS,学习成本低略复杂,但功能更全面功能丰富度基础功能满足日常需求支持复杂逻辑(循环、多条件),内置函数更多生态与工具工具较少,依赖 Less.js生态完善(如 Compass 框架),工具支持广泛适用场景小型项目、快速开发、团队熟悉 CSS大型项目、复杂样式逻辑、需要高度定制化。
2025-08-19 19:05:24
908
原创 自定义指令
在应用入口文件(通常是main.js)中使用方法全局注册// 全局注册 v-focus 指令// 当被绑定的元素插入到 DOM 中时...// 聚焦元素el.focus()})el.focus()})//使用<template>
2025-07-09 14:45:42
381
原创 通用弹窗展示效果(div+css)
2.进行边界展示处理:右侧空间不足时,弹窗显示在鼠标左侧 上方空间不足时,弹窗显示在鼠标下方。4.进行鼠标穿透,避免造成弹窗频繁闪烁问题。3.窗口 Resize 时重新计算弹窗位置。1.弹窗跟随鼠标移动。
2025-06-28 11:29:02
322
原创 前端有关位置信息各种参数详解
本文介绍了前端开发中常用的位置信息参数及其应用场景。主要包括:浏览器定位API(经纬度、海拔等GPS参数)、DOM元素布局参数(偏移量、视口尺寸等)、地图API坐标系统(WGS-84、GCJ-02等),以及移动端特有的定位参数。文章详细列举了各类参数的具体属性和用途,同时指出应用时的注意事项,如浏览器权限管理、坐标系转换和性能优化等。这些位置参数广泛应用于地图导航、附近服务、元素定位等场景,开发者需要根据实际需求选择合适的参数类型。
2025-06-13 10:22:30
968
原创 vue3#hooks解析
实际项目中,你可以创建以下自定义 Hooks:useFetch:封装网络请求逻辑useLocalStorage:本地存储响应式数据useIntersectionObserver:实现元素可见性检测useWindowSize:监听窗口尺寸变化useDarkMode:管理深色模式切换useForm:处理表单状态和验证try {if (!controller?.abort();// 取消未完成的请求});
2025-06-13 10:11:24
1886
原创 vue3使用docxtemplater将页面数据导出为word
例如:object:{aa:'11',bb:'22',cc:[data1:'',data2:'',data3:'']}数组中数据遍历展示:{#cc}{data1} {data3}{/cc}3.调取封装好的方法,给一下模板地址和模板名称。使用第三方插件封装了一个导出方法,开箱即用。2.需要在项目中上传一个我们写好的模板。单个数据展示:{aa}
2025-06-11 17:10:52
579
原创 实现大屏背景图缩放+拖拽+边界处理功能
position.x = Math.min(0, Math.max(position.x, 最大右移距离))position.y = Math.min(0, Math.max(position.y, 最大下移距离))// 确保图片不会移出右/下边界(position.x/y ≤ 最大右移距离)3.缩放拖拽时考虑边界问题,确保背景图在缩放和拖动时不会超出容器边界。// 确保图片不会移出左/上边界(position.x/y ≥ 0)// 计算图片最多能向右/下移动多少(负数)
2025-06-11 15:03:45
284
原创 小demo:选中树结构最后层级拿到所有层级中的deviceName并按照要求拼接
完成核心:遍历树结构使用Map保存所有节点信息,拿到当前节点,回溯父节点直至根节点。要求:选中5874,要求返回生产部123-部门1-部门2-5874。
2025-05-17 15:01:32
243
原创 获取当天和前n天的年月日、当月和前n月的年月、以及当年和前n年的年份
当跨越月份或年份时,日期计算会自动处理,例如从 1 月 1 日往前推一个月会正确返回去年 12 月。循环,每次循环将年份往前推一年/月/日。写成一个公共得函数获取。
2025-05-09 12:00:11
189
原创 实现年月日日期展示+点击按钮实现日期的增减
需要实现逻辑:1.点击上一日按钮(年月日)日期选择器中的日期进行变化,如下图所示 2.点击下一日按钮,日期对应进行变化。
2025-04-24 11:53:23
328
原创 关于vite打包时遇到的问题(代理+图片显示)
1.在开发环境和生产环境中配置代理的地址# 生产环境--后端不需要设置/api# 开发环境2.在配置中server: {host: '0.0.0.0', //监听动态可用的网络接口3.在定义axios中的baseURL配置定义baseURL为空,开发环境还是生产环境只要没有设置地址,就会自动的调用方法来获取ip地址和端口去拼接访问的地址。
2025-04-14 10:00:12
477
原创 获取字符串的拼音首字母/全部拼音,并去除拼音中的表情--字符检索(包含字符本身和对应的拼音,不区分大小写)
方法获取字符串的拼音首字母。方法获取字符串的全拼。
2025-04-07 09:57:09
283
原创 对前端后端网络,传输文件,图像,音频视频等一些数据问题进行记录
二进制数据的编码方式,将二进制数据转换为文本字符串,使得二进制数据能够在一些只支持文本的环境中传输和存储二进制大对象,用于表示一个不可变的、原始的二进制数据块。它可以存储大量的二进制数据,提供了一种统一的方式来处理二进制数据,与具体的文件类型或数据格式无关,可以存储大量的二进制数据。
2025-04-01 10:53:38
1022
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人
RSS订阅