
前端
文章平均质量分 81
编码行者
这个作者很懒,什么都没留下…
展开
-
异步更新队列 - Vue2 响应式
被隐藏的内容</div><input @click="getDiv" value="按钮" type="button">data: {//控制是否显示#div},methods:{})原创 2023-08-17 19:40:00 · 350 阅读 · 0 评论 -
VNode 是什么?
在 vue.js 中存在一个 VNode 类,使用它可以实例化不同类型的 vnode 实例,而不同类型的 vnode 实例各自表示不同类型的 DOM 元素。例如,DOM 元素有元素节点,文本节点,注释节点等,vnode 实例也会对应着有元素节点和文本节点和注释节点。从上面的代码可以看出,vnode 只是一个名字,本质上来说就是一个普通的 JavaScript 对象,是从 VNode 类实例化的对象。转载 2023-08-17 19:35:03 · 175 阅读 · 0 评论 -
Typora收费了,于是乎我自己写了一个
Typora受大家欢迎的一点莫过于两大核心优势 所见即所得,简洁的功能、和丰富的主题。但是缺点也挺明显的第三方、有道云笔记(上传图片受限,需要开会员,快捷键难用)。于是乎我就诞生了自己写一个的打算,当然不可能从0开始,于是乎我逛遍百度、Google、发现大家都遇到了类似问题。下面是我考察用使用人数较多的markdown腾讯开源的https://github.com/Tencent/cherry-markdownhttps://github.com/Vanessa219/vditorVditor 是一款原创 2022-12-05 11:46:18 · 1152 阅读 · 1 评论 -
ES2015+ 备忘清单
快速浏览 ES2015、ES2016、ES2017、ES2018 及以后的 JavaScript 新特性。原创 2022-11-12 22:28:39 · 726 阅读 · 0 评论 -
Emmet 备忘清单
Emmet 是一个用于提升 HTML 和 CSS 代码编写的 Web 开发人员工具包,它允许您使用著名的 CSS 选择器以光速编写大型 HTML 代码块。让我们开始将您的开发提高到光速。孩子: >自定义属性文本: {}a{Click me}p>{Click }+a{here}+{ 继续}ID 和 CLASS 属性# header.titleform#search.widep.class1.class2.class3隐式标签名称.classem>.classul>.c原创 2022-11-12 22:24:25 · 3680 阅读 · 0 评论 -
el-element UI el-select分组 el-option-group Java 后台工具类格式转换
/** * @description: * @author: mabh * @create: 2022/1/9 19:31 **/public class SelectGroupOptionEntity { private String label; private String value; public SelectGroupOptionEntity(String label, String value) { this.label = label;原创 2022-01-10 09:52:18 · 1771 阅读 · 0 评论 -
如何关闭表单自动填充 - Web 安全
不想看废话的这里 autocomplete="new-password"本文介绍了网站如何禁用表单字段的自动完成功能。本文介绍了网站如何禁用表单字段的自动完成功能。默认情况下,浏览器会记录用户网页上提交的输入框的信息。这使得浏览器能够提供自动补全(在用户开始输入的时候给用户提供可能的内容)和自动填充(在加载的时候预先填充某些字段)功能。这些功能通常是默认启用的,但可能涉及用户的隐私,因此浏览器允许用户禁用这些功能。然而,一些数据可能会在将来失效(例如一次性密码)或包含敏感信息(例如唯一的政府..转载 2022-01-10 09:47:29 · 1559 阅读 · 0 评论 -
Vue this.$refs 获取子组件 undefined
<el-dialog> 中使用时 需要确保 :open=true ,再 this.$refs 否则就会undefined//这里要注意,el-dialog 里引用组件要this.$nextTick(function () { this.$refs['Employee'].init(id); });原创 2021-12-26 20:19:42 · 664 阅读 · 2 评论 -
Spring Boot+Vue 文件上传,如何携带令牌信息?
关于文件上传这块,松哥之前也写了好几篇文章了,甚至还有视频:Spring Boot+Vue+FastDFS 实现前后端分离文件上传但是,之前和小伙伴们提到的方案,是基于 session 来做认证的,所以并不需要考虑携带令牌的问题,但是在前后端分离开发中,我们可能采用 JWT 或者是 OAuth2+JWT 的方式来做认证,如果是这样的话,那我们就要手动传递令牌了。今天就来和大家说说手动传递令牌的事。1.传统方案我们先来看看,基于 session 认证,文件上传要怎么做。在 Vue.js 中,如转载 2021-06-07 10:07:02 · 246 阅读 · 0 评论 -
前端多线程大文件下载实践,提速10倍+
#背景没错,你没有看错,是前端多线程,而不是Node。这一次的探索起源于最近开发中,有遇到视频流相关的开发需求发现了一个特殊的状态码,他的名字叫做 206~为了防止本文的枯燥,先上效果图镇文。(以一张3.7M 大小的图片为例)。动画效果对比(单线程-左 VS 10个线程-右)时间对比(单线程 VS 10个线程)看到这里是不是有点心动,那么请你继续听我道来,那我们先抓个包来看看整个过程是怎么发生的。GET /360_0388.jpg HTTP/1.1Host: limit.qiufeng.转载 2021-06-04 18:16:47 · 984 阅读 · 0 评论 -
从破解某定设计网站谈前端水印(详细教程)
#前言最近在写公众号的时候,常常会自己做首图,并且慢慢地发现沉迷于制作首图,感觉扁平化的设计的真好好看。慢慢地萌生了一个做一个属于自己的首图生成器的想法。制作呢,当然也不是拍拍脑袋就开始,在开始之前,就去研究了一下某在线设计网站(如果有人不知道的话,可以说一下,这是一个在线制作海报之类的网站 T T 像我们这种内容创作者用的比较多),毕竟人家已经做了很久了,我只是想做个方便个人使用的。毕竟以上用 PS 做着还是有一些废时间,由于组成的元素都很简单,做一个自动化生成的完全可以。但是研究着研究着,就看到了转载 2021-06-03 17:04:09 · 521 阅读 · 0 评论 -
前端安全系列(二):如何防止CSRF攻击?
背景随着互联网的高速发展,信息安全问题已经成为企业最为关注的焦点之一,而前端又是引发企业安全问题的高危据点。在移动互联网时代,前端人员除了传统的 XSS、CSRF 等安全问题之外,又时常遭遇网络劫持、非法调用 Hybrid API 等新型安全问题。当然,浏览器自身也在不断在进化和发展,不断引入 CSP、Same-Site Cookies 等新技术来增强安全性,但是仍存在很多潜在的威胁,这需要前端技术人员不断进行“查漏补缺”。前端安全近几年,美团业务高速发展,前端随之面临很多安全挑战,因此积累了大量的实转载 2021-03-31 10:21:43 · 650 阅读 · 0 评论 -
前端安全系列(一):如何防止XSS攻击?
前端安全随着互联网的高速发展,信息安全问题已经成为企业最为关注的焦点之一,而前端又是引发企业安全问题的高危据点。在移动互联网时代,前端人员除了传统的 XSS、CSRF 等安全问题之外,又时常遭遇网络劫持、非法调用 Hybrid API 等新型安全问题。当然,浏览器自身也在不断在进化和发展,不断引入 CSP、Same-Site Cookies 等新技术来增强安全性,但是仍存在很多潜在的威胁,这需要前端技术人员不断进行“查漏补缺”。近几年,美团业务高速发展,前端随之面临很多安全挑战,因此积累了大量的实践经验转载 2021-03-31 09:55:48 · 3071 阅读 · 0 评论 -
Chrome v80+ SameSite问题解决之路
jdk生成临时数字证书在命令行输入如下:keytool -genkey -alias "tomcat" -keyalg "RSA" -keystore "C:\tomcat-8.5-64\tomcat.keystore"-alias:证书的名字-keyalg:证书签名算法-validity:证书有效时间-keystore:生成文件存放路径2.配置tomcat 的server.xml文件<Connector port="8443" protocol="org.apache.coyo原创 2021-03-25 20:13:24 · 919 阅读 · 0 评论 -
渐进式Web应用程序
Web应用程序清单是一个JSON文件,它告诉浏览器您的Progressive Web App及其在用户桌面或移动设备上安装时的行为。典型的清单文件包括应用程序名称,应用程序应使用的图标以及启动应用程序时应打开的URL。Chrome,Edge,Firefox,UC浏览器,Opera和Samsung浏览器支持清单文件。Safari有部分支持。创建清单文件#清单文件可以具有任何名称,但通常是manifest.json从根目录(您网站的顶级目录)来命名和提供的。该规范建议扩展名应为.webmanifest,但原创 2021-02-28 20:29:20 · 466 阅读 · 0 评论 -
正则表达式工作利器你还不会?
什么是正则表达式?正则表达式是一组由字母和符号组成的特殊文本,它可以用来从文本中找出满足你想要的格式的句子。一个正则表达式是一种从左到右匹配主体字符串的模式。 “Regular expression”这个词比较拗口,我们常使用缩写的术语“regex”或“regexp”。 正则表达式可以从一个基础字符串中根据一定的匹配模式替换文本中的字符串、验证表单、提取字符串等等。想象你正在写一个应用,然后你想设定一个用户命名的规则,让用户名包含字符、数字、下划线和连字符,以及限制字符的个数,好让名字看起来没那么转载 2020-12-11 15:16:15 · 227 阅读 · 2 评论 -
Flex布局
常见父项属性以下6个属性是对父元素设置的属性描述flex-direction设置主轴的方向justify-content设置主轴上的子元素排列方式flex-wrap设置子元素是否换行align-content设置侧轴上的子元素排列方式(多行)align-items设置侧轴上的子元素排列方式(单行)flex-flow复合属性,相当于同时设置flex-direction 和 flex-wrapJustify-content 设置主轴上的子元原创 2020-11-14 13:28:40 · 147 阅读 · 0 评论 -
Vue环境初始化
键入命令:vue ui 使用Vue可视化进行创建脚手架原创 2020-09-28 11:36:53 · 181 阅读 · 0 评论 -
css父高度塌陷-清除浮动
浮动元素脱离文档流,所以不占位置,当父元素没有设置高度时,不能撑开,导致父元素的高度塌陷,所以我需要清除浮动。子元素加clear在浮动元素后面加一个空的子元素,并给其css属性clear: <div style="clear:both"></div>Clear 取值: left | right | bothleft: 清除左浮动right: 清除右浮动both: 清除所有浮动父元素加宽高直接规定父元素的宽高,请不存在塌陷问题了。问题是,父元素的扩展性不好,比原创 2020-08-29 10:06:23 · 459 阅读 · 0 评论 -
css3自适应布局单位vw,vh你知道多少?
*视口单位(Viewport units)*什么是视口?在PC端,视口指的是在PC端,指的是浏览器的可视区域;而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Viewport(视觉视口),Ideal Viewport(理想视口)。视口单位中的“视口”,PC端指的是浏览器的可视区域;移动端指的就是Viewport中的Layout Viewport。根据CSS3规范,视口单位主要包括以下4个:1.vw:1vw等于视口宽度的1%。2.vh:1vh等于视口高度的1转载 2020-06-30 20:00:50 · 2638 阅读 · 0 评论 -
form表单提交或上传附件 页面刷新问题,后台返回JSON完美处理方案
一般我们用的第三方库基本上都是内部封装好的,也都是这种方式,比如jquery 的 AjaxSubmt,他在上传的时候就是临时生成iframe form 用户上传,要不然他也做不到。<form style="margin: 20px 30px 10px 45px;" class="layui-form userForm" action="user/save" enctype="multipart/form-data" method="post"原创 2020-06-29 13:19:58 · 712 阅读 · 0 评论 -
Ajax提交与Form表单提交数组
Ajax 提交数组@PostMapping("/save")public void saveUser( @RequestParam("userRole[]") List<Integer> roleIds) {$.post('/save',{ userRole:[10002,30043] },function(data){ //todo });Form表单提交数组普通第一种方式就够了,第二种属于要上传附件,还要提交数组。当然了不上传附件也可以用啦!!!@PostMappi原创 2020-06-29 13:09:58 · 1041 阅读 · 0 评论 -
td 溢出文本... 显示后导致table宽度无效问题 -
table{ width:100px; table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */}td{ width:100%; word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */...原创 2020-05-08 14:10:19 · 532 阅读 · 0 评论 -
Chrome浏览器样式Copy成 jquery('#el').css({})怎么搞?正则帮你一键格式化
var chromeCSSText = ` `;chromeCSSText = chromeCSSText.replace(/([^\s]+(?=:))/g,"'$1'");chromeCSSText = chromeCSSText.replace(/:\s*([^;]+(?=;))/g,":'$...原创 2019-11-06 17:53:39 · 260 阅读 · 0 评论 -
GreenDao学习笔记
插件安装 http://greenrobot.org/greendao/documentation/introduction/实体建模 http://greenrobot.org/greendao/documentation/modelling-entities/开始编写 http://greenrobot.org/greendao/documentation/how-to-get-sta...原创 2019-10-22 10:52:33 · 171 阅读 · 0 评论 -
webpack简单学习
1. 安装环境安装 nodejs官网 下载LTS版安装完毕后执行以下命令检查版本:node -v应该会显示所安装的 nodejs 的版本,比如我的:v8.9.3安装webpacknpm install -g webpacknpm install webpack-cli -gnpm 是 nodejs 管理插件用的工具,install 表示安装,-g 表示全局安装,这样...原创 2019-10-22 10:51:24 · 211 阅读 · 0 评论