- 博客(63)
- 资源 (2)
- 收藏
- 关注
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 利用Less修改element-ui组件的样式
利用Less修改element-ui组件的样式在vue项目中用的最多的便是嵌套,利用Less嵌套的方法,在全局中划出了一个作用域,这样便能直接修改当前使用的element-ui组件样式,且不会破坏全局其他样式。<style lang="less">.sms-alert { .el-dialog__header { font-size: 16px; font-weight:bold; } .el-dialog__body { padding-top: 0;
2020-08-19 15:24:25
4354
原创 移动端css适配方案
大多数时候开发页面需要做一定适配,这里记录两种1.设计图以PC为模板2.设计图以移动端为模板首先我们需要利用meta标签对viewport进行控制(如果不知道viewport可以先干完活去了解一下,不影响使用)content属性值:以下的meta标签即让当前viewport的宽度等于设备的宽度,同时不允许用户手动缩放;如果不这样设定好就会使用比屏幕宽的viewport,就会出现横向滚动条二、rem控制1.设计图以PC为模板代码如下:2.设计图以移动端为模板代码如下:......
2022-06-14 12:02:38
1922
1
原创 JavaScript 正则表达式获取url后的内容(第一个问号后的内容)
最近开发小程序遇到个需求,通过扫码进入小程序,需要获取到二维码带进来的内容。再将其转换为对象类型目标是获取问号后的数据,首先通过?将url分成两部分
2022-06-13 12:01:38
1207
原创 一文了解python操作excel(使用openpyxl)
二、关于修改load_workbook(path) 获取工作本,path填写相对应地址查看所有工作表选择工作表max_row 最大行 min_row 最小行max_column 最大列 min_column 最小列修改某一单元格读取单条数据保存工作本三、关于删除删除表 remove(sheet)...
2022-06-02 14:30:15
930
原创 解决 vite 中 import_meta.globEager is not a function的问题
项目场景:由于是旧项目通过vue-cli进行创建,使用的是webpack,随着业务的发展后台代码逐渐增多,本地开发每次等一两分钟。修改编译工具,改用vite问题描述接口、路由文件、store模块的自动化引入从require.context转为import.meta.globEager,启动vite,浏览器报错import_meta.globEager is not a function浏览器中定位错误发现,编译后的代码,将import_meta自动声明了解决方案:import.meta
2022-04-18 10:06:09
10443
7
原创 threejs加载GLTFLoader模型时出现未能解析three模块标识符
今天在学习three.js遇到了导入模块出错的问题我使用原生html导入GLTFLoader时遇到了报错import { GLTFLoader } from "./three.js/examples/jsm/loaders/GLTFLoader.js"我重复检查引入的地址都没有问题,我也没有使用three的标识符,官方的案例也是一样的引入,但是案例在引入前多了以下的代码<script type="importmap"> { "imports": { "three": ".
2022-02-09 17:29:25
3701
2
原创 JS点击按钮复制文本
在PC端上通过点击按钮复制对应文本的业务场景,不经常有,但是让我碰见了,也了解了下实现方法。1、通过createElement生成一个input输入框,并将其透明度设为0,使得用户无感知;2、将需要复制的内容赋值到输入框内,(一定要将输入框添加到页面body中)才能使用select函数选中。3、通过document.execCommand(“copy”)执行浏览器复制命令,就能将对应文本进行复制了function handleCopy(text) { const input = document
2021-12-24 10:31:18
1649
8
原创 在vue3.0的JSX语法下使用插槽
由于在vue2中JSX的语法在渲染和代码简洁度上有优化,偶尔也会用JSX的形式封装组件;新的项目里开始用vue3发现,以前丢插槽的两种方式行不通了,得想想办法才行。// vue2 插槽写法render (h) { const { $scopedSlots } = this // 第一种 const { title = () => h('p' , { style : 'margin-top: 0' } , this.title) , } = $scopedSlots
2021-12-23 18:06:39
2577
原创 elementUI 让Notification组件弹出到最上层
问题描述:在使用dialog对话框等有modal遮罩层的组件时,再使用Notification通知组件便会遇到,遮罩层把通知掩盖住了@Override public void run() { bytes = mmInStream.read(buffer); mHandler.obtainMessage(READ_DATA, bytes, -1, buffer).sendToTarget(); } 原因分析:提示:这
2021-12-22 14:36:20
3235
原创 一道题带你了解js闭包
function Foo() { var i = 0; return function() { console.log(i++); }}var f1 = Foo(), f2 = Foo();f1();f1();f2();// 上面这个js程序输出的是什么()?A、 0 1 0B、 0 1 2C、 0 0 0D、 0 0 2答案留到最后!一般来说函数执行完后它的局部变量就会随着函数调用结束被销毁,但是此题Foo函数返回了一个匿名函
2021-10-11 09:00:15
131
原创 有趣的排序思想
一、计数排序统计每个数字出现的次数12133221232个3个2个1122233应用场景:简单的单值排序问题,排序问题中数据的值域很有限leetCode1122.数组的相对排序便是用到计数排序的思想var relativeSortArray = function(arr1, arr2) { let cnt = new Array(1001).fill(0); for (let x of arr1)
2021-10-08 17:37:46
79
原创 在js中获取vue文件的style标签下的内容
前言:由于业务需求,将页面内容转成pdf,前端需要提供整个页面的dom元素提供给后端,但样式并不是在行内而是在<style>标签里。解决方案:通过原生属性 document.styleSheets 读取vue单页面组件加载过的所有css样式const cssBlock = document.styleSheets有了获取到的css样式表就能遍历去找到我需要的,由于是伪数组,我们先用ES6解构一下;点开可以发现他的顺序是从页面初始化开始,大概率我们需要的样式会在最后,所以我们用re
2021-08-06 09:48:35
2436
原创 CSRF及XSS认识
CSRF (Cross-site request forgery): 跨站请求伪造即攻击者盗用了你的身份,以你的名义发送恶意请求CSRF攻击是源于WEB的隐式身份验证机制!WEB的身份验证机制虽然可以保证一个请求是来自于某个用户的浏览器,但却无法保证该请求是用户批准发送的!简单阐述CSRF攻击的思想:1.user 浏览并登陆信任 网站 A2.网站A 验证通过,在 user 产生A的Cookie3.user 在没有登出A网站的情况下,访问危险网站B4.网站B 要求访问 网站A ,发出一个请求(r
2021-07-26 18:02:44
103
原创 Vue3 compile模块①——学习编写AST抽象语法树
文章目录前言一、AST抽象语法树是什么?二、看一眼AST语法树三、写一下AST语法树第1步、语义拆分,将标签拆分成数组第2步、数组转换成树,利用递归实现AST总结前言最近在看vue3.0的compile模块,用到了AST抽象语法树,在网上找资料发现国内比较缺乏相关内容,看到热门的是用一个插件去解析和操纵JavaScript版的AST语法树,但我想了解的是单页面应用里的标签是怎么形成语法树的,自己能否学着写一下。一、AST抽象语法树是什么?AST(Abstract Syntax Tree)是源代
2021-07-09 17:32:08
988
2
原创 js字符串函数substr替换使用技巧
替换字符串前言一、思路二、运用前言最近在业务场景中有些电话号码、银行卡等信息需要将中间几位替换为*,自然的想到了substrsubstr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。stringObject.substr(start,length)一、思路我们从传入的参数有4个/** * @param {string} str 原字符串 * @param {number} start 开始替换的位置 * @param {number} stop 停止替换的位置
2021-07-06 17:20:47
1963
原创 轻松解决element UI 表单重置问题
三步解决前言一、从ui框架入手二、上手表单1.设置表单初始值2.表单初始化赋值以及一些通用参数3.给表单抽屉/弹窗设置open方法总结前言在后台管理系统中,最常见的业务就是CURD,对数据进行增删改,通常情况下新增与编辑我们会做成一个通用组件,我们在不使用v-if的情况下如何重置我们的表单呢?技术栈:vue3.0 + elementPlus一、从ui框架入手方法名说明resetFields对整个表单进行重置,将所有字段值重置为初始值并移除校验结果clearValida
2021-06-29 17:57:26
4242
4
原创 js正则表达式获取文件名和后缀
获取文件名let fileName = file.name.replace(/(.*\/)*([^.]+).*/ig,"$2")获取文件名后缀// 匹配 . 之前除换行符以外的所有字符替换为""let fileType = file.name.replace(/.+\./, "")
2021-06-07 10:18:01
4562
1
原创 项目中遭遇监听input框操作报错 [object InputEvent]类型
发生场景在使用ant-design-vue的ui框架中,对查询表单做了个封装。希望在函数式组件监听input框修改内容时返回值。一开始是使用@input触发监听listeners[‘input’] (value)当输入内容时,便会报错[Vue warn]: Invalid prop: type check failed for prop “value”. Expected String, Number, got InputEvent 解决办法通过面向百度编程,我猜测由于vue双向绑定的关
2021-05-21 16:20:20
1359
原创 解决WebStorm编辑器的CSS文件链接图片时遇到泛红警告
前端Vue项目在WebStorm中打开,使用less语法链接的图片会受到编辑器的警告。我们只需打开File下的Settings,找到Webpack配置配置找到当前项目的node_modules@vue\cli-service\webpack.config.js确认稍等一下编辑器警告清除掉了...
2021-05-18 09:03:21
933
原创 从零开始创建Maven项目
Maven 相关使用命令向导一步步创建项目1)在硬盘上创建一个空的目录,用来存放Maven项目,如E:\temp\demoMaven。2)打开 CMD 窗口,用 cd 命令,切换到 demoMaven 目录比如一般有如下目录。3)在 CMD 窗口中输入“mvn archetype:generate”,按 Enter 键。联网初始化一段时间后(一般不少于 5 分钟),会一步步提示输入 groupId、artifactId、version、packageName 等信息。最后创建成功,而且可以在 E
2021-05-13 08:41:02
455
原创 学会就能看懂vue源码(一)—— 数据属性、访问器属性、Object.defineProperty方法、Object.getOwnPropertyDescriptors方法
学会就能看懂vue源码(一)前言数据属性访问器属性Object.definePropertyObject.getOwnPropertyDescriptors测验前言了解vue2双向绑定原理,决定从源码入手,引申了不少基础知识,决定记录一下。相信学会这些就能看懂双向绑定原理的部分源码了数据属性包含的是一个数据值的位置,在这可以对数据值进行读写。数据属性的四个特性:configurable :表示能否删除从而重新配置定义其属性,能否修改属性的特性,默认为trueenumerable :表示能否通
2021-05-12 14:19:42
494
1
原创 从浅入深——理解JSONP的实现原理
由于浏览器的安全性限制,不允许AJAX访问 协议不同、域名不同、端口号不同的 数据接口,浏览器认为这种访问不安全;可以通过动态创建script标签的形式,把script标签的src属性,指向数据接口的地址,因为script标签不存在跨域限制,这种数据获取方式,称作JSONP(注意:根据JSONP的实现原理,知晓,JSONP只支持GET请求);实现过程: 1.在客户端定义一个回调方法,预定义对数据的操作; 2.再把这个回调方法的名称,通过URL传参的形式,提交到服务器的数据接口; 3.服务器
2021-05-10 17:11:53
86
6
原创 webpack Proxy工作原理
webpack Proxywebpack Proxywebpack-dev-server工作原理跨域webpack Proxywebpack Proxy , 即wepack提供的代理服务,将客户端发送的请求转发给其他服务器目的是为了解决开发模式下的跨域问题想要实现代理首先需要一个中间服务器,webpack中提供服务器的工具为webpack-dev-serverwebpack-dev-serverwebpack-dev-server是webpack官方推出的一款开发工具,将自动编译和自动刷新浏览器
2021-05-07 10:12:22
887
1
原创 使用toString判断所有js数据类型
文章目录前言一、toString二、上代码三、扩展判断变量为空前言由于JavaScript是一种解释型编程语言,声明变量并不需要定义类型,变量可以随时更改存储数据的类型。我们都知道 typeof 可以判断数据类型,但遇到 null 、array等其他数据类型时,就需要用到更为详细的toString了一、toStringtoString() 是 Object 的原型方法,调用该方法,默认返回当前对象的[[Class]]。其格式为[object Xxx] ,其中 Xxx 即为目标的类型二、上代码
2021-04-29 17:50:27
693
原创 使用原生 JS 完成头部吸顶操作
使用原生 JS 完成头部吸顶操作1.通过 querySelector 获取 product 元素节点,获取 product 对象 到其上级层顶部的间隔 offsetTop2.使用 onscroll 原生方法 监听滚动条滚动的高度3.当 滚动的高度 大于对象到其上级层顶部的间隔 则对 product 定位进行固定4.当 其他情况则清空 product 定位的属性(function (product , productTop , scrollT) { product = document
2021-03-09 09:52:41
231
原创 Vue下实现element的select选择器下拉加载更多
select选择器实现下拉加载更多可以将此细分为,1.下拉到底部; 2.触发请求; 3.加载,难点便只是在下拉到底部。我们要想知道是否已经触底,首先找到拥有滚动条的元素在select 添加 ref<template> <el-select v-model="value" ref="select" placeholder="请选择" :loading="loading"> <el-option v-for="item in options"
2021-01-27 13:53:08
3294
7
原创 Swiper3 导航栏的轮播
Swiper3 导航栏的轮播最近迭代旧项目开发移动端,使用 swiper3 制作一个拥有的导航栏的轮播。单独截取的代码可能跑不起来(主要看 js 的逻辑)先看效果:上代码:记得提前引入 swiper3 的文件swiper_v3.4.2/swiper.min.cssswiper_v3.4.2/swiper.min.js还有 jquery 的 也是 3.0版本js<script><%-- 轮播 --%>$(document).ready(function()
2020-09-29 18:04:47
568
原创 div包裹input,出现的幽灵空间,都是vertical-align搞得鬼
div包裹input,出现的幽灵空间,都是vertical-align搞得鬼最近在做表单时发现了div和input框的位置有偏差,出现了幽灵空间,查阅过程找到大牛的文章(需要花比较长时间阅读)。分享一下:https://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/究其原因就是: input 是内联元素,有默认的 vertical-align,因为这个影响到了basel
2020-09-28 09:58:29
544
原创 Maven更新失败,Cannot resolve plugin org.apache.maven.pluginsmaven-deploy-pluginX.X
Maven更新失败,Cannot resolve plugin org.apache.maven.plugins:maven-deploy-plugin:X.X在接受新项目,使用 maven 更新的时候,偶尔会遇到包无法下载到本地 maven 仓库,就会报:(这里以2.7为例,其他也是同理)Cannot resolve plugin org.apache.maven.plugins:maven-deploy-plugin:2.7解决办法:首先打开 idea ->setting -> B
2020-09-25 10:58:55
2875
原创 一起学 python 批量修改目标文件名
1、os模块 在程序中,我们经常需要对大量文件和路径进行操作,比如:查询某一路径下的同种类型文件,批量修改文件名字等。这些操作就依赖于os模块。os模块提供了非常丰富的方法用来处理文件和目录。os模块参考文档:https://docs.python.org/zh-cn/3.7/library/os.htmlimport osprint(f'当前工作路径:{os.getcwd()}')结果当前工作路径:C:\Users2、re模块 正则表达式是本身是一种小型的、高度专业化的编程语言
2020-09-03 15:24:59
189
原创 为何 webpack 打包css文件 需要css-loader还要style-loader
打包 CSS 模块时,webpack 需要的是一个可以加载CSS模块的Loader,最常用到的是 css-loader。我们需要通过 npm 先去安装这个 Loader,然后在配置文件中添加对应的配置,具体操作和配置如下所示:$ npm install css-loader --save-dev # or yarn add css-loader --dev// ./src/webpack.config.jsmodule.exports = { entry: './src/index.css',
2020-09-01 14:35:03
664
原创 vscode && Intellij 好玩的插件——有趣有趣(缓慢更新)
好玩的插件——有趣有趣(持续更新)因为别人写过这些插件的安装和设置,我这只是整理自己觉得好玩的,并提供对应的链接activate-power-mode输入或者删除代码都会有弹出方块的效果,增加敲代码的乐趣,还能窗口抖动(比较鸡肋,看久了头晕)安装设置教程Intellij 全家桶的:https://blog.csdn.net/pri_sta_pub/article/details/79092338vscode 的:https://blog.csdn.net/muzilanlan/article/
2020-08-14 15:46:31
803
原创 解决 el-form 异步校验导致重复校验的问题
解决 el-form 异步校验导致重复校验的问题业务逻辑最近项目上有个业务,确认表单,需要用到手机验证码,验证是否为本人操作。这挺常见的,但是需要用户填写完,输入框失去焦点时就将验证码发送后台进行验证,而且验证码只能输一次。触发场景若用户输入完验证码后,鼠标焦点并未离开,直接点击确认的话,因为 validator 异步的关系,鼠标离开焦点触发一次校验,确认也触发一次校验,导致 重复校验,用户体验极差解决办法用watch 动态监听 form 表单里验证码输入框的值,并进行相应判断,输入长度为6时自
2020-08-14 14:34:50
2815
原创 傻瓜式玩阿里云服务ECS,上手简单,过程详细
傻瓜式玩阿里云服务ECS,上手简单,过程详细文章目录傻瓜式玩阿里云服务ECS,上手简单,过程详细找到打开你的云服务器登录服务器并配置宝塔相关深入链接纯小白没有服务器的知识也能配置着玩。因为学生的关系在阿里云白嫖了一个云服务器,想着不玩白不玩,刚好做完手头上的工作,开干找到打开你的云服务器登录阿里云以后,点开左上角的目录,选择你的云服务器。(老实说这么多术词,好像对小白有点不友善,可能是我太菜,一定是我太菜了)实例就是你的云服务了!网上有很多让你用windows的远程连接,去连接你的服务器,
2020-08-13 15:45:19
550
原创 Vue2中如何使用函数式组件
Vue中如何使用函数式组件文章目录Vue中如何使用函数式组件**使用场景****什么是函数式组件****如何创建一个函数式组件****为什么使用函数式组件****简单的例子****业务场景下的函数式组件**使用场景Vue 推荐在绝大多数情况下使用 template 来创建你的HTML。但是现实的业务场景中经常会遇到根据用户权限判断,显示不同的按钮。接下来我们由浅入深,通过两个例子来了解。首先了解什么是函数式组件。什么是函数式组件函数式组件在 React 中非常流行,那在 Vue 中我们也可以玩
2020-08-11 14:36:44
3666
6
原创 Sequzlize-cli工具的使用 二 ——(种子)
Sequzlize-cli工具的使用(种子)1、 种子构建项目中需要使用到的一些测试数据。这就要用到 Sequelize-cli 提供的种子: seeder 脚本。2、创建种子脚本执行种子文件生成命令sequelize seed:create --name UserInit3、编写种子脚本与 migration 脚本类似,它也有 up 与 down 。const crypto = require('crypto');module.exports = { up: async (q
2020-07-10 18:07:04
323
原创 Sequelize-cli工具的使用 一 ——(基础&迁移)
Sequelize-cli工具的使用(基础&迁移)1、Sequelize 与 Sequelize-cli1-1、Sequelize Sequelize是一个基于 Node.js 的 ORM 库1-2、ORM ORM 全称Object Relational Mapping - 对象关系映射 , 是通过使用描述对象和数据库之间映射的元数据,将面向对象语言程序中的对象自动持久化到关系数据库中。说简单一些,就是操作对象一样去操作数据库,而不是 SQL 。1-3、Sequelize-cli
2020-07-09 18:13:13
2772
1
原创 超详细!在vue 中二次封装 wangEditor 富文本
在vue 中二次封装 wangEditor 富文本wangEditor真的非常简洁好用,而且一直有更新,缺点就是文档内容比较少。wangEditor文档链接看网上很多二次封装都把逻辑放到 mounted 中,对于新手的我不太友好,逻辑不太清晰。决定自己封装一个。将各配置以方法分割,在初始化调用。//以下是封装的组件 SimpleEditor<template> <div> <div ref="editor" style="text-align:
2020-07-02 17:52:55
1723
原创 简述TCPIP协议族各层
简述TCP/IP协议族各层应用层应用层决定了向用户提供应用服务时通信的活动FTP(File Transfer Protocol,文档传输协议)、DNS(Domain Name System,域名系统)、HTTP协议(HyperText Transfer Protocol,超文本传输协议)也处该层传输层传输层对上层应用层,提供处于网络连接中的两台计算机之间的数据传输。在传输层有两个性质不同的协议:TCP(Transmission Control Protocol,传输控制协议)和 UDP(Us
2020-06-16 15:42:13
568
微软常用运行库.zip
2020-04-29
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人