じòぴé南冸じょうげん-CSDN博客

原创 Git .gitignore 文件不生效的原因及解决方法

Git忽略文件失效问题解决方案摘要：当.gitignore文件失效时，通常是因为文件已被Git跟踪、.gitignore位置错误、语法错误或缓存未清除。解决方案包括：1)使用git rm --cached移除已跟踪文件；2)确保.gitignore位于项目根目录；3)检查忽略规则语法；4)清除Git缓存。建议项目初期就设置好.gitignore，并定期检查更新。不同项目类型(如Node.js/Python/Java)需要配置特定的忽略规则，可使用GitHub提供的模板简化配置。

2025-09-12 18:10:28 339

原创探讨图片以Base64存数据库的合理性

**摘要：**Base64编码存储图片到数据库适合极简架构或需要事务一致性的场景，但存在明显弊端：数据膨胀33%，影响数据库性能、网络带宽和缓存效率；无法利用浏览器缓存、CDN加速和HTTP/2优势；处理图片需反复编解码。生产环境推荐替代方案：元数据和路径存数据库，图片存储在文件系统或对象存储（如AWSS3），兼具扩展性、高性能和低成本优势。

2025-09-11 17:47:50 914

原创 uni.navigateTo传参方式（包含简单复杂及混合传参）

本文介绍了UniApp中使用uni.navigateTo进行页面跳转并传递参数的多种方法，包括：1.传递简单参数（字符串/数字）通过URL拼接；2.传递复杂参数（对象/数组）需JSON字符串转换；3.混合传递简单和复杂参数；4.其他参数设置（动画效果/页面通信等）。同时指出了URL长度限制、参数编码处理等注意事项，建议复杂数据使用状态管理或本地存储替代URL传递。

2025-09-11 11:49:32 911

原创 git config user.name “xxx“命名报错fatal: not in a git directory

摘要：本文介绍了Git用户名设置的方法及常见错误。当在非Git仓库目录下设置用户名时会报错，需先进入项目目录或初始化仓库。设置方式分为本地配置（在仓库目录执行）和全局配置（加--global参数），本地配置会覆盖全局配置。设置完成后可通过gitconfig--list查看验证。文章还提供了初始化仓库和设置用户信息的完整命令行示例。

2025-09-08 15:07:08 275

原创微信小程序如何进行分包处理？

小程序分包是将小程序拆分为主包和多个功能模块分包的技术，主要用于突破2MB单包体积限制（可扩展至20MB）和优化启动性能。主包包含启动必备的核心页面和公共资源，分包则按功能划分，实现按需加载。配置时需在app.json中声明subPackages字段，将非核心页面移至分包目录。独立分包可完全脱离主包运行，适合独立功能页面。注意事项包括：TabBar页面必须放在主包、严格控制主包体积、正确处理跨包引用关系，并可使用预加载机制提升用户体验。

2025-09-05 15:27:03 980

原创小程序的project.private.config.json是无依赖文件，那可以删除吗？

摘要：project.private.config.json是微信小程序开发中重要的个性化配置文件，由开发者工具自动生成。它包含开发者个人设置（如项目名称、编译选项等），会覆盖project.config.json中的相同配置。虽然静态分析工具会将其标记为"无依赖文件"（因其未被代码直接引用），但删除它将导致个人设置丢失，开发者工具会重新生成默认配置文件。该文件通常被排除在版本控制之外，以避免不同开发者之间的配置冲突。建议保留该文件以维持开发环境稳定性。

2025-09-05 10:45:19 764

原创开发过程中leafle和高德地图该如何选择？哪个更专业？

Leaflet和高德地图是两种不同性质的地图工具，它们的专业性体现在不同维度：Leaflet是一个开源JavaScript库，提供高度定制化的地图渲染能力，适合处理复杂地理数据可视化，但需要自行解决数据源和功能实现；高德地图是商业地图服务，提供现成的中国本土化地图数据和LBS功能，开发成本低、合规性好，但定制性较弱。两者也可以结合使用，用Leaflet控制地图渲染，同时调用高德API实现搜索导航等功能。选择取决于项目需求：数据可视化项目选Leaflet更专业，大众LBS应用选高德地图更专业。

2025-09-03 16:08:49 713

原创 GeoJSON的数据是从哪里来的?

GeoJSON数据主要来源于机器自动生成和人工辅助处理：1）机器生成是主流方式，包括卫星遥感测绘、程序化转换GIS数据、算法计算行政边界等；2）人工辅助主要用于数据校验修正，如专业测绘人员在GIS软件中勾勒地图要素，或通过众包平台（如OpenStreetMap）补充数据；3）纯人工输入坐标的情况极少，仅适用于极小数据量或特殊场景。GeoJSON本质上是机器生成、人工辅助协作的产物，而非单纯人工绘制。

2025-09-03 14:22:05 797

原创 SVG为什么需要 viewBox？理解“画布”与“视口”

SVG的viewBox属性定义了虚拟画布坐标系，通过它与width/height属性的配合实现图形自适应。当画布尺寸变化时，viewBox能保持内容比例不扭曲。文章通过画家与画框的比喻，对比有无viewBox的区别，并演示了三种典型场景：固定尺寸与响应式尺寸的对比、纯CSS控制的SVG图标，以及通过preserveAspectRatio控制对齐方式。关键点在于viewBox建立了独立于显示尺寸的坐标系，结合CSS可实现完美缩放的矢量图形，而preserveAspectRatio则进一步控制不同比例下的显示效

2025-09-01 18:12:55 1068

原创让你从零开始全面掌握 SVG

本文介绍了SVG（可缩放矢量图形）的核心概念和应用。SVG作为基于XML的矢量图像格式，具有无限缩放、体积小、可编程交互等优势，适用于图标、数据可视化等场景。文章详细讲解了SVG基础语法、基本形状元素（矩形、圆形等）和强大的路径元素，并演示了如何使用CSS进行样式设置。此外，还介绍了SVG动画与交互的三种实现方式：CSS动画、SVG原生动画和JavaScript控制。最后指出SVG还有更多高级功能需要进一步学习。

2025-09-01 17:46:07 1136

原创 docker: Error response from daemon: Conflict.The container name “xxx“ is already in use by contain报错

【Docker容器名称冲突解决方案】运行时报错显示容器名"ceshiApp"已存在，提供三种处理方案：1）强制删除旧容器（docker rm -f ceshiApp）后重建；2）使用新名称启动（如ceshiApp_new）；3）重命名现有容器后再启动。注意端口3060需未被占用（netstat检查），删除容器会永久丢失未备份的数据。其他常用命令包括docker ps -a查看容器、docker stop停止容器等。

2025-08-15 16:22:11 454

原创解决ECharts图表上显示的最小刻度不是设置的min值的问题

ECharts图表y轴最小值显示问题的解决方案：当设置yAxis.min为110时，图表可能从111开始显示刻度。本文提供三种解决方法：1）强制显示最小值标签（showMinLabel）；2）设置固定刻度间隔（interval）；3）动态计算刻度间隔（通过调整算法确保110成为刻度点）。同时介绍了数据标签的配置方法，包括显示位置、格式设置和颜色修改。这些方案可有效解决ECharts中y轴最小值显示不准确的问题，适用于各种数据可视化场景。

2025-08-15 15:43:56 738

原创 Vue响应式数据管理：如何根据需求控制数据响应性呢？

本文探讨了Vue开发中数据响应性的管理策略。首先分析了控制数据响应性的必要性，包括性能优化、安全需求和特殊场景应用。接着详细介绍了创建非响应式数据的方法，如组件外定义数据、Object.freeze()冻结对象以及深度冻结技术。对于响应式数据的创建，分别讲解了Vue2和Vue3的实现方式，并特别提醒Vue3中解构可能导致的响应性丢失问题。最后，对比了不同场景下的推荐方案，并提供了注意事项和优化建议。通过合理选择响应式或非响应式处理方式，开发者可以提升应用性能、增强代码安全性并避免常见陷阱。

2025-07-24 10:56:34 609

原创 React项目运行环境与执行顺序及动态路由等使用注意点

本文探讨了React项目中动态路由在不同环境下的执行问题及解决方案。文章指出开发和生产环境分别涉及Node和浏览器环境，分析了文件执行顺序差异导致动态路由无法正确渲染的问题。针对Ant Design Pro/Umi框架，提出了三种解决方案：运行时动态路由（推荐）、构建时预取数据（需插件支持）和自定义构建脚本。同时解析了package.json文件的关键配置，包括元数据、脚本命令、依赖管理等。最后总结了常见环境问题，强调浏览器API访问时机的重要性，建议在useEffect中执行相关操作，并正确处理环境变量。

2025-07-23 18:06:59 1167

原创报错error:0308010C:digital envelope routines::unsupported解决方案

Node.js版本与加密算法不兼容导致npm run serve报错（error:0308010C）。主要原因是Node.js v17+升级OpenSSL 3.0后废弃了旧算法（如MD4），而旧版Webpack仍在使用这些算法。解决方案：1）临时方案：添加NODE_OPTIONS=--openssl-legacy-provider环境变量；2）长期方案：升级Vue CLI到5.x或Webpack到5.x；3）降级Node.js到v16.x及以下版本。推荐使用nvm管理Node版本切换。

2025-07-22 16:47:54 1868 1

原创简单了解下npm、yarn 和 pnpm 中 add 与 install（i）命令的区别（附上两图带你一目明了）

本文比较了pnpm、npm和yarn中包管理命令的区别： pnpm中add专用于添加新依赖（pnpm add react），i通用安装（pnpm i或pnpm i react）； npm无add命令，仅支持i/install（npm i react）； yarn中add添加依赖（yarn add react），i/install仅安装全部依赖（yarn）。三者关键差异在于：add是否作为独立命令存在，以及install的功能范围。

2025-07-22 10:47:00 619

原创 Vue中最简单的PDF引入方法及优缺点分析

Vue项目中实现PDF预览的4种方法：原生HTML标签法：使用<embed>、<object>或<iframe>标签直接嵌入PDF 零依赖、简单易用但功能受限存在跨域限制和固定样式的缺点 PDF.js解决方案：引入pdfjs-dist库实现高级功能支持文本提取、缩放、分页等交互功能需要配置Worker路径，支持远程和本地PDF 提供完整的API控制能力实现对比：简单场景推荐原生标签法复杂需求选择PDF.js方案需权衡功能需求与实现复杂度

2025-07-22 10:17:52 930

原创解决el-select数据类型相同但是显示数字的问题

在Element UI的el-select组件中，当选项无法显示中文标签时，问题通常出在el-option的配置上。原代码只绑定了value属性而未绑定label属性，导致显示的是数字值而非中文标签。解决方案是：1)在el-option上添加:label="option.label"属性；2)确保v-model绑定值与option.value类型一致；3)可以简化标签内容。修改后的代码示例展示了如何正确配置，使下拉框能正常显示中文选项。

2025-07-05 16:44:40 305

原创 vue切换路由进入页面不会刷新页面解决方案

Vue路由切换时页面不刷新是SPA特性。解决方案包括：1)监听$route变化重新加载数据；2)给router-view绑定key强制组件重建；3)使用导航守卫处理数据刷新；4)手动刷新(不推荐)。动态路由参数变化推荐watch监听，不同路由可用key强制刷新。默认不刷新是为优化性能，复用组件减少渲染开销。根据场景选择合适方案即可实现数据重新初始化。

2025-06-30 11:57:25 1124

原创 Emitted value instead of an instance of Error) ＜tr＞ cannot be child of ＜table＞, according to HTML...

HTML表格报错摘要：报错原因为Vue模板中直接使用<tr>作为<table>子元素，违反HTML规范要求<tr>必须位于<thead>、<tbody>或<tfoot>内。提供两种解决方案：1）添加<tbody>包裹<tr>元素；2）使用Vue的<template>标签循环渲染。方案1更推荐，既简单又符合规范，还能保持原有样式。修改后表格结构更规范，提高了SSR兼容性并规避未来浏览器兼容问题。

2025-06-27 11:37:56 585

原创 git远程分支重命名（纯代码操作）

Git 的远程分支是不能够直接重命名的.要重命名 Git 的远程分支，可以通过本地分支重命名后推送并删除...如果没有的话，先拉下线上的最新代码，然后创建一个...设置上游后，本地分支会与远程分支建立跟踪关系，后续操作...

2025-04-21 18:15:34 1893

原创前端Invalid attempt to destructure non-iterable instance. In order to be iterable, non-array 报错解决方案

出现了控制台TypeError: Invalid attempt to destructure non-iterable instance. In order to be iterable, non-array objects must have a [Symbol.iterator]() method.的报错本来是没有报错的，提供默认值确保数据已正确加载使用可选链和空值合并操作符添加类型检查...

2025-04-09 16:37:51 1864

原创什么是Cache-Control？如何使用？使用好可优化web性能

一小时后："老板，这箱苹果过期了，检查下还能卖吗？这样每次请求的 URL 都不同，浏览器就不会缓存。决定了资源是否可以被缓存、缓存多久、如何验证缓存。→ 专门控制 CDN 缓存时间（优先级高于。，浏览器可以使用本地缓存，减少数据传输。→ CDN 边缘节点缓存 1 小时。→ CDN 会回源验证资源是否过期。等可缓存指令，CDN 会存储资源。（更严格，但可能增加服务器负担）。的内容（如用户信息、动态配置）。（如 JS/CSS/图片），使用。首次请求：下载资源并缓存（根据。会导致不必要的验证请求，不如。

2025-04-03 11:42:56 1997

原创一个文件夹里面有很多项目，怎么一下把他们的node_modules全部删了

定义是 Node.js 项目中自动生成的目录，用于存放通过 npm（Node Package Manager，Node 包管理器）安装的 npm 包。功能：该目录使得项目能够方便地管理和使用第三方库和框架。通过引入这些包，项目可以快速地实现各种功能，提高开发效率和代码质量。但是好久没用的项目的包会占用大量的空间，可以使用命令删除...

2025-04-03 10:12:26 536 1

原创预处理器Stylus的介绍及使用，并同Less、Sass进行对比（简单介绍）

Stylus是一种CSS预处理语言，它允许开发者使用更加强大和富有表现力的方式来写CSS代码...

2024-12-13 15:35:26 1455

原创修改this.$confirm的按钮位置、图标、文字及标题

在Vue.js项目中，this.$confirm通常是基于某些UI库的对话框确认方法...使用h函数创建的虚拟DOM节点...

2024-11-20 16:45:05 2185

原创 vue的this.$forceUpdate()和this.$set()

使用this.$forceUpdate()可以强制组件重新渲染。在Vue.js中，Vue的响应式系统会自动追踪依赖的响应式属性，并在这些属性变化时自动更新DOM。但在某些情况下，如果你手动改变了 Vue 实例上某个数据属性的值...

2024-07-23 20:00:14 2184 1

原创前端报错adding CSS “touch-action: none“ to this element解决方案

报错定位：本人在这个页面引入了一个组件，而那个组件是需要进行拖拽或者滑动之类的操作，在此之前没有出现报错的，应该就是这里的问题...这应该与浏览器尝试优化滚动性能或触摸事件的处理有关...

2024-07-16 10:54:34 943

原创＜component＞标签的介绍和使用

在 Vue.js 中，是一个特殊的元素，它允许你动态地绑定到一个组件。这意味着你可以根据某些条件或数据动态地渲染不同的组件....元素有一个特殊的is属性，该属性用于指定要渲染的组件...

2024-06-21 11:09:47 5906

原创 Treeselect是介绍及使用（梳理了我使用这个组件遇到的大部分问题）

这里梳理了我使用这个Treeselect组件遇到的大部分问题，希望大家多多补充，感谢

2024-06-20 11:09:26 9650 4

原创省市区下拉选择：3个el-select（附完整代码+json）

下拉的@change事件因为只能得到绑定的val的改变，但是我想拿到里面的item，并且能够回显。假如我们把item绑定到value上的话，el-select的回显是全等的，而我绑定了一个对象，回显肯定是有问题的哈...下面提供了两种json文件，分别示例了里面的结构，看自己使用哪个吧，但是因为文件只能绑定一个，我在这上传了第一种的code.json,都包含了码值...

2024-06-20 10:00:58 2004

原创 Access to image at ‘xxx‘ from origin ‘xxx‘ has been blocked by CORS policy解决方案

这个错误表明你尝试从某个源（origin）加载阿里云上的图片时，浏览器因为CORS（跨源资源共享）策略阻止了这次请求。尽管图片能正常显示，但浏览器的控制台仍然会报告这个错误，因为请求不满足CORS的要求

2024-05-24 09:57:37 3653

原创数据扁平化的介绍及使用

简单来讲就是：他是一个数据处理的过程或步骤，通常用于将嵌套的数据结构（如嵌套数组或对象）转换为非嵌套（或“扁平”）结构。这个过程在编程中很常见。

2024-05-22 11:42:00 1354

原创 position:fixed无法固定到父盒子上面的解决方案

粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。简单来讲的话一个元素在滚动到某个位置之前为相对定位，然后当它达到指定的偏移位置时，它会“粘”在那里（就像固定定位一样通常是视口的顶部或底部），直到滚动出视口。需要注意的是，为了使粘性定位生效，元素必须有一个toprightbottom或left属性的非auto值。sticky元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和。

2024-05-14 12:33:13 2158

原创高德地图：标点-连线-自定义图标-文字提示的使用

下面是使用高德地图进行标点连线的使用：1.定义一个装载地图的容器，并定义进行标点和连线的数据 ...

2024-05-13 15:52:37 3763

原创什么是$t？$t的介绍及使用

$t是一个通常用于国际化（i18n）的函数。具体来说，当你使用 Vue.js 并结合某些国际化库（如 vue-i18n）时...在你的项目中创建一个目录（例如src/i18n）来存放你的国际化资源文件...

2024-05-12 19:06:30 3015

原创 window.location.href的介绍及使用

是 JavaScript 中一个非常常用的属性，它用于获取或设置当前窗口或标签页的 URL。这个属性返回的是完整的 URL。在URL的末尾使用符号后跟一个标识符来指定的。这个片段标识符通常用于标识文档（如HTML页面）内的某个位置，如特定的段落标题或锚点（anchor）。通俗的讲就是一个在当前页面的跳转到一个具体的位置，就如上面的目录点击跳转到n级标题，其实就是一个更加简便的操作当用户点击或浏览器导航到带有片段标识符的URL时，浏览器会自动滚动到该标识符所指向的文档位置。

2024-05-11 17:52:52 19642