自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

m0_66706006的博客

学习新知识,争做薪青年

  • 博客(75)
  • 收藏
  • 关注

原创 Tincymce

2. 分别建立index.vue,plugins.js,toolbar.js,dynamicLoadScript.js文件。1. 新建一个Tinymce文件夹。3. 在需要的位置使用。

2025-01-03 11:28:11 227

原创 vue3中实现腾讯地图和高德地图

注意:在使用的时候报错跨域问题的话, 可以在vite.config.ts文件加入这段代码。1. 新建一个地图组件,TMap.vue。2. 新建一个地图组件,GMap.vue。2. 在需要的地方使用TMap组件。2. 在需要的地方使用GMap组件。

2025-01-03 10:44:22 253

原创 获取指定字符的所有索引,得到一个索引数组的具体做法

【代码】获取指定字符的所有索引,得到一个索引数组的具体做法。

2024-12-04 10:21:41 122

原创 用000000代表周一至周日,1代表开启,0代表关闭,得到形如000000格式的日期数据

也就是,假设选择了周一,那么应该得到1000000,假如选择了周二和周五,那么应该得到0100100。

2024-11-27 16:20:50 218

原创 Ant Design Vue中使用change方法时如何传递自定义参数

一开始我是这样做的,但是这样打印的结果是value是undefined,index是正常的。正确的做法是利用回调函数来传递。

2024-11-25 15:50:35 559

原创 在vue3中使用ElementPlus的colorPicker组件

原本我还自己import { ElColorPicker } from 'element-plus'了,结果就是:会出问题,页面上根本就看不到组件,我找了很久的原因,发现就是这个显示引入的问题,不要自己import就可以了。一开始我没有注意区分我是vue3的项目,我一直在尝试使用element-ui的colorpicker框架,但是一直都有问题。会根据使用的组件自动引入相应的 Element Plus 组件,因此我们无需手动导入。进行使用,两个分别对应vue2和3两个版本,各自独立,无法跨级兼容。

2024-11-20 11:19:18 419

原创 vue3在使用antd的tabs组件时,如何根据不同的type值去显示不同长度的modal的标题样式

这样就有一个问题,标题的样式都是.ant-modal-header,它的下划线的长度的样式都是background-size: 75px 4px;比如点击tab1的子组件下的编辑按钮,它的弹窗的标题是“我是5个字”,而tab2的子组件下的编辑按钮,它的弹窗的标题是“我是8个字的字的”。这样就解决了上面的“不同标题长度不一样,需要不同的样式”的问题。解决办法就是:根据父组件传递过来的不同的type值,动态的改变background-size的值。我想要子组件根据不同的type值,去显示其弹窗的不同标题样式。

2024-11-19 10:33:37 290

原创 使用TinyMCE富文本编辑器

2. 在public下面新建tinymce文件夹,将node_modules中的tinymce中的skins复制到里面。3. 在public下面的tinymce文件夹下,新建一个langs文件夹,将下载的汉化包放里面。4.1 在utils文件夹下新建两个文件,isNumber.ts,uuid.ts。4.2 在components文件夹下,新建tinyMceVue组件。5. 在需要的位置使用TinymceVue组件。4. 在vue里面创建tinymce组件。1. 使用yarn安装Tinymce。

2024-11-18 14:06:02 730

原创 在vue中,在使用antdesign的table组件时,实现可以直接编辑修改某个单元格的值

例如,在一个表格中,有一列叫做“权重”,想要实现单独编辑某个权重。

2024-11-15 15:48:45 538

原创 在vue中,在使用antdesign的table组件时,实现特定column列的显示与隐藏

type的具体值是父组件传过来的,所以它会变化。具体可以利用columns的title属性来做。不同的type值,展示不同的columns列。我有一个变量type,默认值为1,也就是。我有这样一个columns列。所以我想要实现的是,

2024-11-15 14:16:48 568

原创 后台管理项目中“新增”和“编辑“回显弹窗的问题

这就意味着,我去回显第二条数据的时候,其中的roleIds的值是第一条数据的,那这样肯定是不对的。(比如第一条数据的sex值是男,第二条数据的sex值原本反的是空,回显的时候第二条数据显示sex值显示的是第一条数据的值——男)那当我点击第二行数据,我去调用详情接口,拿到了数据,但是其中的a是空的,那么此时的 Object.assign(formState, res.data);比如说我点击第一行数据,我去调用详情接口,拿到了数据,并且其中的a是有值的,注意,在调用获取详情的接口前,要先清空表单的值。

2024-10-10 11:50:41 422

原创 Antd的时间选择框a-range-picker如何分别获取起止时间

用change实现时间发生变化的时回调。用format设置日期格式。

2024-09-27 16:55:42 212

原创 Antd的table如何实现“可选择”

注意:rowKey的取值是该行的key值,官方默认是"key"是改行的key值(不写就算默认),而我的每行的key值是id,所以我需要写rowKey="id"。(要注意自己的数据的key值是什么)

2024-09-27 16:43:36 152

原创 Antd框架中的Select组件placeholder不显示

解决antd框架中的Select组件placeholder不显示的问题

2024-09-20 14:49:51 613

原创 a-table如何自定义图标并在指定位置控制展开缩进

1. 首先我从接口拿到的数据是用id来作为唯一标识的,而a-table是用key来作为唯一标识的,所以需要用到row-key这个属性来进行修改。3. 用expandedRowKeys(v-model)控制展开的行。4. 把原本默认的图标隐藏。2. 在指定位置使用。

2024-09-05 10:49:31 477

原创 图片列表如何选中多个图片

【代码】图片列表如何选中多个图片。

2024-09-03 16:23:24 276

原创 首屏优化如何做

因为在SSR中,服务器返回的是已经渲染好的HTML页面,而不是由JavaScript生成的动态内容。app.js中的页面拆分成单独的js文件,按需加载,加速app.js文件的下载速度从而减少首页加载时间。4. 更好的用户体验:由于SSR能够更快地呈现出首屏内容,用户可以更快地看到页面的基本结构和内容,减少了等待时间,提升了用户体验。文件中,我们引入压缩和合并后的静态资源文件,可以减少网络请求次数和文件大小,提高页面加载速度。同时,可以使用懒加载技术,延迟加载非首屏可见区域的图片,减少首屏的加载时间。

2024-07-02 17:39:11 686

原创 vue性能优化方案

3. 优化资源利用: 路由懒加载可以将应用划分为多个独立的模块,每个模块可以按需加载,提高代码的复用性和可维护性。同时,由于只加载当前需要的模块,可以更好地控制资源的使用,避免一次性加载过多的资源。2. 提升页面加载速度: 当用户访问某个具体的页面时,只需要加载该页面所需的代码,而不是一次性加载所有页面的代码。这样可以减少初始加载的代码量,提升网页的加载速度,特别是在应用有很多页面的情况下效果更为明显。组件缓存是指将组件的状态缓存起来,当组件再次被渲染时,可以直接使用缓存的状态,而不需要重新渲染组件。

2024-07-02 16:28:30 514

原创 element-ui如何做表单验证

负责管理表单数据和验证规则,而。用于定义需要验证的表单项。

2024-07-01 23:46:48 284

原创 大文件上传是怎么做的

这种方法可以减少单个请求的数据量,提高上传效率,并且可以在上传失败后只重新上传失败的部分,而不需要重新上传整个文件。断点续传:当文件上传过程中出现网络断开或其他异常情况时,可以通过记录已上传的部分,下次从上次上传的位置继续上传。1. 切割文件,将要上传的文件切割成多个小文件片段。3. 后端接收并保存文件片段,后端接收到每个文件片段后,将其保存在临时位置,并记录文件片段的序号和文件ID等信息。4. 续传处理,如果上传过程中断,下次继续上传时,通过查询后端已保存的文件片段信息,得知已经成功上传的文件片段,

2024-07-01 23:05:42 392

原创 前端无感登录(无感刷新token)

1. 登录成功后保存两个token(登录成功的token)和refresh_token(重新调用新token的接口的token)2. 后端返回过期时间,前端判断token的过期时间,去调用刷新token的接口。6. 如果refresh_token也过期了,就要清除所有token重新登录。1. 在响应器中拦截(判断token返回过期后,调用刷新token的接口)2. 在响应拦截器中对401状态码引入刷新token的api方法调用。4. 把错误对象里的token替换。3. 替换保存本地新的token。

2024-07-01 21:35:20 429

原创 前端开发中,当数据没有请求过来的时候,该怎么做

2. 利用if判断语句,如果有数据就显示,没有就隐藏。1. 可以在渲染数据的地方给一些默认的值。

2024-07-01 21:11:21 139

原创 浏览器的缓存策略

使用Service Worker可以实现更灵活的缓存控制,可以离线运行和更细粒度地控制缓存策略。通过在Service Worker中定义缓存策略,可以实现自定义的缓存行为。通过设置`Cache-Control`和`Expires`响应头来控制资源缓存的有效期。如果资源未过期,浏览器直接从缓存中加载资源,不会向服务器发送请求。浏览器在发起请求时,通过`If-Modified-Since`和`If-None-Match`使用CDN(内容分发网络)可以将静态资源缓存在离用户较近的服务器节点上,加快资源加载速度。

2024-07-01 20:19:02 318

原创 精灵图和base64的区别

精灵图:把多张小图整合到一张大图上,利用定位的一些属性把小图显示在页面上,这样访问页面的时候,可以减少请求次数,提高加载速度。base64:这是一种传输8bit字节代码的编码方式,是一种用64个字符来表示二进制数据的方法,最后组成字符串。1. Base64会和html,css一起下载到浏览器中,减少请求;一些低版本不支持,若base64体积比原图片大,不利于css的加载。2. 减少跨域问题;

2024-07-01 20:06:44 169

转载 get请求和post请求的区别

GET:由于数据包含在URL中,大多数浏览器和服务器对URL的长度有限制,这间接限制了GET请求所能携带的数据量,一般不超过2KB-4KB。POST:请求参数放在请求体(Request Body)中,不会在URL中显示,因此参数不会被浏览器记录在历史记录中,也不在地址栏展示。POST:相对安全,因为数据不在URL中显示,但需要注意,HTTPS协议应该被用于任何敏感数据的传输,无论使用GET还是POST。GET:幂等的,意味着对同一URL的多次请求应该产生相同的结果,不会改变服务器上的资源。

2024-07-01 17:40:44 78

原创 ES6的新特性有哪些

9. 新增了模块化(import,export)1. 新增了块级作用域(let,const)3. 新增了一种基本数据类型(symbol)2. 新增了定义类的语法糖(class)10. 新增了set和map数据结构。7. 对象和数组新增了扩展运算符。11. 新增了generator。5. 新增了函数参数的默认值。6. 给数组新增了API。12. 新增了箭头函数。4. 新增了解构赋值。

2024-07-01 16:50:57 440

原创 理解前端内存泄露

在处理DOM元素时,如果不当使用或引用DOM元素,可能会导致内存泄漏。例如,在处理DOM元素的引用时,如果没有正确解除这些引用,即使元素不再需要,它们仍然会保留在内存中。例如,在异步操作中使用闭包时,如果没有正确管理闭包内部的引用,可能会导致内存泄漏。JS里已经分配内存地址的对象,但是由于长时间没有释放或者没办法清除,造成长期占用内存的现象,会让内存资源大幅度浪费,最终导致运行速度慢,甚至崩溃的情况。)上添加事件监听器时,如果没有正确移除这些监听器,即使组件或页面不再需要它们,它们仍然会保留在内存中。

2024-07-01 14:41:12 356

原创 JS对数据类型的检测方式

3. constructor几乎可以判断基本数据类型和引用数据类型(如果声明了一个构造函数,并把它的原型指向了Array,这个时候constructor就判断不出来了)2. instanceof()只能判断引用数据类型,不能判断基本数据类型。1. typeof()对于基本数据类型没问题,遇到引用数据类型就不管用。

2024-07-01 01:12:15 310

原创 让一个元素水平垂直居中的方式

2. 定位+transform。1. 定位+margin。5. table布局。

2024-07-01 00:33:17 488

原创 uniapp分包

小程序启动默认下载主包并启动页面,当用户进入分包时,才会下载对应的分包,下载完进行展示。分包是为了优化小程序的下载和启动速度。

2024-06-29 21:32:27 379

原创 ::before和:after中双冒号和单冒号有什么区别

:before和::after也常常会用来进行样式布局。::before和::after一般用于清除浮动。

2024-06-29 18:40:04 120

原创 H5/C3面试题——语义化标签

3. IE8是不兼容H5标签的(需要通过html5shiv.js去处理)2. seo成分会更好,蜘蛛抓取会更好。1. 易读性和维护性更好。

2024-06-29 18:19:07 122

原创 工作记录2

首先通过调用接口获取机构在机构端对客服的一些配置,可以选择配置客服的方式(有h5和js客服),选择配置h5客服的话,就必须得填写客服链接,选择配置js客服的话,就必须得填写JS客服代码,如果获取到接口返回的信息表示机构配置的是h5客服,那就直接用window.opend打开当时填的客服链接即可,但如果是js客服的话,就可以调用螳螂客服的一些api来实现了。本来是可以前端自己去生成schemaUrl的,但是生成的链接有时效性,然后最新的那种明文码它好多设备不支持,所以最后决定让后端生成。

2024-06-20 11:25:53 547

原创 工作记录1

如果不是,就校验名字是否重复,名字校验没问题的话,就开始校验手机号,手机号没问题的话,就开始校验图片验证码,图片验证码也没问题的话,就会开始倒计时,此时按钮变成“重新发送 (${timer}s)”。首先校验输入的验证码是否为空,如果为空就给setCodeStatus赋值为1,不为空后,再校验输入的验证码是否为6位数,不为6位数字的话,就给setCodeStatus赋值为2,剩下的就给setCodeStatus赋值为3,并在页面中做判断以展示不同状态对应的不同页面。并做判断不同的名称状态给出不同的提示。

2024-06-16 20:37:28 759

原创 上班必备——项目部署环境

ui,产品和测试的同事在前端开发的过程中,都会时刻关注着进度,是要看页面效果的,这个时候怎么看呢?部署到公司私有的服务器或者局域网服务器上,主要用于测试是否存在bug,一般不会让用户和其他人看到,并且测试环境会尽量与生产环境相似。开发环境:开发环境时,程序员们专门用于开发的服务器,配置可以比较随意,为了开发调试方便,一般打开全部错误报告和测试工具。生产环境:是指正式提供对外服务的,一般会关掉错误报告,打开错误日志,是最重要的环境。大家都知道,互联网行业有很多的岗位,前端,后端,产品,测试,ui等。

2023-12-10 22:37:04 279 3

原创 上班必备代码托管工具git

将本地仓库的代码推送到远程仓库(github,gitee,gitlab等之一),然后你的同事就可以通过一个git命令拉下你推送到远程仓库的代码了。1 // 在拉取远程代码的时候,必须执行上面两步,将你刚写的代码存放到本地仓库,如果你不执行上面两步,那你刚写的代码就会被拉下来的代码覆盖。同样,只有你的同事将他写的代码推送到远程仓库后,你执行git命令才能把他写的代码拉下来,合并到你的代码里。使用分支,可以更加有条理的进行代码管理。拉取远程的代码到master分支(将同事的代码和你之前提交到远程的代码拉回来)

2023-12-10 21:48:40 137

原创 实现单行/多行文本溢出

在日常开发展示页面,如果一段文本的数量过长,受制于元素宽度的因素,有可能不能完全显示,为了提高用户的使用体验,这个时候就需要我们把溢出的文本显示成省略号。-webkit-box-orient: vertical // 和1结合使用,设置或检索伸缩盒对象的子元素的排列方式。text-overflow: ellipsis // 多行文本的情况下,用省略号"..."隐藏溢出范围的文本。-webkit-line-clamp: 2 // 用来限制一个块元素显示的文本行数。

2023-10-01 20:02:56 373

原创 响应式设计的实现方式

页面的设计与开发应当根据用户行为以及设备环境(系统平台,屏幕尺寸,屏幕定向等)进行相应的响应和调整。比如当浏览器的宽度或者高度发送变化时,通过百分比单位,可以使得浏览器中的组件的宽和高随着浏览器的变化而变化,从而实现响应式的效果。CSS3中增加了更多的媒体查询,就像if条件表达式一样,我们可以设置不同类型的媒体查询,并根据对应的条件,height,width属性的百分比依托于父标签的宽高,但是其他盒子属性则不完全依赖父元素。任意层级元素,在使用vw单位的情况下,1vw都等于视图宽度的百分之一。

2023-10-01 15:23:14 456

原创 相等运算符==和全等运算符===

相等运算符,全等运算符,相等运算符和全等运算符的比较

2023-09-28 09:30:11 370

原创 常见的BOM对象

这个方法会根据最有效的方式刷新页面,如果页面自上一次请求以来没有改变过,页面就会从浏览器缓存中重新加载,如果要强制从服务器中重新加载,传递一个参数true即可。history对象用来操作浏览器URL的历史记录,可以通过参数向前,向后或者向指定URL跳转。window.open(),既可以导航到一个特定的url,也可以打开一个新的浏览器窗口。window.close(),仅用于通过window.open()打开的窗口。比如,如何进行页面的后退,前进,刷新,滚动条的滚动等等。五. history。

2023-09-27 16:17:37 111

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除