前端
2422400672
这个作者很懒,什么都没留下…
展开
-
html字符串转义与反转义
html字符串转义和反转义原创 2022-06-19 02:14:28 · 1400 阅读 · 1 评论 -
dom节点序列化与反序列化(XMLSerializer和DOMParser)
dom序列化和反序列化原创 2022-06-19 02:13:26 · 706 阅读 · 0 评论 -
dom节点遍历 TreeWalker
dom节点遍历原创 2022-06-19 02:12:41 · 304 阅读 · 0 评论 -
dom节点遍历 NodeIterator
dom节点遍历原创 2022-06-19 02:11:46 · 222 阅读 · 0 评论 -
前端页面生成pdf方案
前端pdf导出方案原创 2022-06-19 02:10:46 · 2575 阅读 · 0 评论 -
markdown渲染增加行号
markdown渲染代码增加行号原创 2022-06-16 00:24:34 · 1335 阅读 · 0 评论 -
网页渲染markdown(markdown-it)
使用markdown-it在网页上渲染markdown文件原创 2022-06-13 23:51:51 · 2516 阅读 · 1 评论 -
利用grunt本地管理svg,生成icon.js
本地实现svg生成icon.js功能,不用将图标上传到阿里矢量库原创 2022-06-10 16:03:44 · 366 阅读 · 0 评论 -
自定义输入框focus效果实现
input{ border: none; outline: none; background: linear-gradient(to bottom, transparent 95%, red 95%) no-repeat; height: 30px; background-size: 0 100%; transition: background-size ease-in-out 0.5s; } ...原创 2022-05-23 23:35:59 · 333 阅读 · 0 评论 -
antdesign限制时间段选择
const disabledStartDate = (startValue: any)=> { if(startValue.isAfter(moment())){ return true; } if (!startValue || !endTime) { return false; } const startDate = moment(startValue.valueOf()) const endDate = moment(end原创 2022-05-19 19:43:15 · 387 阅读 · 0 评论 -
fiddler使用
1、网络延时原创 2022-04-24 16:43:44 · 138 阅读 · 0 评论 -
js文本拷贝到剪切版
function copyText (text) { if ((navigator as any).clipboard) { (navigator as any).clipboard.writeText(text); } else { const textarea = document.createElement('textarea'); document.body.appendChild(textarea); textarea.style.position =原创 2022-04-20 16:34:32 · 150 阅读 · 0 评论 -
线性插值动画
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><canvas width="800" height="500" id="canvas"></canvas><script src="index.js"></原创 2022-04-15 15:32:15 · 309 阅读 · 0 评论 -
window.crypto.subtle进行rsa-oaep加密
const pemEncodedKey = `-----BEGIN PUBLIC KEY-----MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAxiuhgssxHclogWzB7OGyvkIB+HGUO4hODykrz3c0/SBLJZc78mq7VaL3EnicGpoXFJkao3I+1C7MD5Jpa27bSc22veI0frbd/nbiSutvwAnf3rpVJEQtFTMz3v4OpSRcjOhIxKsL6iZ0JTt5++gksqeyrMt...原创 2022-03-02 14:12:55 · 1346 阅读 · 0 评论 -
node-sass安装报错解决
修改本地使用的node版本可以解决二进制文件找不到的问题原创 2021-11-09 15:03:39 · 125 阅读 · 0 评论 -
konva缩放
this.stage.on('wheel', (e) => { const direction = e.evt.deltaY > 0 ? -0.1 : 0.1; this.scale = this.scale + direction; if (this.scale < 0.1) { this.scale = 0.1; return; } if (this.scale > 1) { ...原创 2021-10-30 20:32:41 · 1273 阅读 · 3 评论 -
service worker 缓存
this.addEventListener('install', function(event) { //安装应用 this.skipWaiting() event.waitUntil( caches.open('v3').then(function(cache) { return cache.addAll([ '/index.html', ]); }) );})原创 2021-07-12 18:24:59 · 259 阅读 · 0 评论 -
常见前端插件
Tippy.js tip提示插件popperjs 定位插件原创 2021-06-26 10:22:00 · 225 阅读 · 0 评论 -
前端基础知识
CORS通信原创 2021-06-25 21:56:54 · 80 阅读 · 0 评论 -
粘滞标题列表
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> .sticky-dom{ position: sticky; top: 0; } .sticky-dom-parent{ pos原创 2021-06-25 18:54:49 · 71 阅读 · 0 评论 -
html pointer-events
参考 https://www.cnblogs.com/kunmomo/p/11752669.htmlhttps://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events原创 2021-03-07 22:40:23 · 190 阅读 · 0 评论 -
d3.js zoom中的translateBy,scaleBy,translateTo,scaleTo
文章中假设svg的长为width,高为height1.scaleTozoom.scaleTo(selector,n,[x1,y1])scaleTo的放大过程:将svg的坐标x,y都放大到n倍,目标元素的相应属性也放大n倍,同时会将目标进行位移,默认的位移大小为x = 0 - width / 2 *( n - 1) , y = 0 - height/ 2 *( n - 1)。所以当元素放大后默认情况下元素会向左上方位移 ,但是当我们放大时,大多数情况我们还是希望元素还是停留在当前的一个位置,仅仅是他原创 2021-03-06 14:46:02 · 1672 阅读 · 0 评论 -
sequelize执行不同配置(环境)的数据库升级
{ "development": { "username": "root", "password": "123456", "database": "db", "host": "127.0.0.1", "dialect": "mysql" }, "test": { "username": "root", "password": "123456", "database": "test", "host": "127.0.0.1",原创 2021-02-13 16:10:29 · 323 阅读 · 0 评论 -
css控制文本的显示行数,多余显示省略号
//由于-webkit-line-clamp,-webkit-box-orient只有谷歌和部分其他版本的其他浏览器支持, //所以需要对不支持的浏览器也做些兼容 line-height: 22px; height: 66px; //在支持的浏览器上文本只会显示3行,多余会显示省略号 overflow: hidden; display: -webkit-box; -webkit-line-clamp...原创 2021-02-06 01:02:37 · 269 阅读 · 0 评论 -
egg使用ctx.getFileStream进行文件上传
stream = await ctx.getFileStream();stream.filename :文件名称,stream.fields:附加字段页面: formData.append('width', width) formData.append('height', height) formData.append('type', "1") formData.append('filename', file)formData.append(‘filename’, fi.原创 2021-02-03 22:14:12 · 2584 阅读 · 0 评论 -
egg.js中sequelize配置项
sequelize: {dialect: ‘mysql’,host: ‘127.0.0.1’,username: ‘root’,password: ‘123456’,port: 3306,database: ‘db’,define: {//查询是对字段驼峰类型和下划线类型进行转换underscored: true,//使用自己配置的表名,避免sequelize自动将表名转换为复数freezeTableName: true,//对于create_at,和update_at,禁止查出cr原创 2020-11-22 23:24:07 · 945 阅读 · 0 评论 -
egg.js单元测试中测试依赖session的接口
比如在Controller中,我们需要通过确认session中的userId验证用户是否登录过,在单元测试中便可以通过app.mockSession来模拟一个session app.mockSession({ userId: '1' });原创 2020-11-22 17:36:21 · 226 阅读 · 0 评论 -
egg.js测试文件上传的接口
'use strict';const { app } = require('egg-mock/bootstrap');describe('test/app/controller/picture.test.js', () => { it('should POST /api/picture', () => { app.mockCsrf(); return app.httpRequest() .post('/api/picture') .set('原创 2020-11-22 02:50:40 · 285 阅读 · 0 评论 -
web安全
XSS 攻击 ,对 Web 页面注入脚本,使用 JavaScript 窃取用户信息,诱导用户操作CSRF 攻击,伪造用户请求向网站发起恶意请求钓鱼攻击,利用网站的跳转链接或者图片制造钓鱼陷阱HTTP参数污染,利用对参数格式验证的不完善,对服务器进行参数注入攻击远程代码执行,用户通过浏览器提交执行命令,由于服务器端没有针对执行函数做过滤,导致在没有指定绝对路径的情况下就执行命令...原创 2020-10-01 23:06:05 · 84 阅读 · 0 评论 -
react测试(1)Test Utilities
由于我是用的是脚手架创建的react项目,所以测试所需要的库都是安装好的,如果非脚手架创建还需要安装相应的库组件我们用一个很简单的组件来举例,点击Reset按钮,count被设置为初始值,点击加号按钮或者减号按钮,count对应加一减一import React from "react"export default function MyCounter({initialCount}) { const [count, setCount] = React.useState(initialCoun原创 2020-08-06 23:47:27 · 390 阅读 · 0 评论 -
react hook(2)useImperativeHandle
useImperativeHandle 可以结合ref将自定义的值,方法暴露给父组件,直接看代码import React, {useImperativeHandle} from "react"//定义props的接口,ref接口interface ImProps { value: string;}interface ImRef { printValue: () => void;}const Imperative = React.forwardRef<ImRef原创 2020-08-01 00:16:03 · 753 阅读 · 0 评论 -
react hook(1)useState
在渲染函数中像在class中一样使用state先看一个可以暂停的时钟的例子import React, {useEffect, useState} from "react"//这里这样写是因为我使用了typescript,不需要的可以忽略,重点看函数里的实现interface Interface {}const MyTime: React.FC<Interface> = (props: Interface)=>{ // useState 可以返回一个 state,以及更原创 2020-07-31 00:24:46 · 297 阅读 · 0 评论 -
react项目中引入typescript
新建项目使用typescript如果你是要新建一个使用typescript的react项目,并且你用脚手架Create React App去创建,那没就非常的容易,你只需要在创建的时候将命令改为npx create-react-app "你的项目的名称" --template typescript已有项目引入typescript如果你是要在已有的react项目引入typescript或者你想创建一个新的react项目但是不想使用Create React App,那么你必须手动的安装typescri原创 2020-07-28 23:01:35 · 5632 阅读 · 0 评论 -
css居中
display: table,display:table-cell和text-align: center;.center 会在 .container 中垂直居中,再配合里层元素 .content 的 display: inline-block;text-align: center;.content相对于 .center 就是垂直和水平方向都居中 <div class="container"> <div class="center">原创 2020-07-26 19:37:54 · 124 阅读 · 0 评论 -
react中使用第三方类库
在这里我们采用官网的Chosen来举例引入第三方类库下载第三方类库jquery.min.js,chosen.jquery.js,chosen.css,这些第三方类库可以到对应官网下载,然后在我们的react项目的index.html中引入 <link rel="stylesheet" href="./chosen.css"> <script src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script原创 2020-07-25 21:42:16 · 1091 阅读 · 0 评论 -
react Refs 转发
一个使用ref的组件import React from 'react';export default class Card extends React.Component { render() { //从props中分离出ref(forwardedRef),应为ref是无法透传的,ref引用input元素 const {forwardedRef, ...rest} = this.props; return <div className={"w原创 2020-07-23 00:07:04 · 219 阅读 · 0 评论 -
react Context
创建一个Contextimport React from 'react';//创建一个默认值为light的Contextconst theme = React.createContext("light");export default theme;使用Contextimport React from 'react';import ReactDOM from 'react-dom';import App from './App';import Theme from "./theme"原创 2020-07-22 21:11:16 · 147 阅读 · 0 评论 -
前端好用的网站推荐
https://contrast-ratio.com/ 测试网页颜色对比度https://caniuse.com/ 前端兼容性查询原创 2020-07-20 21:47:28 · 368 阅读 · 0 评论 -
移动端适应不同屏幕大小
移动端适应不同屏幕大小移动端开发中几个个概念设备像素(物理像素)PPI(每英寸容纳的设备像素数)设备独立像素DPR(设备像素比)常见的兼容不同屏幕大小的方案通过 initial-scale来适应不同屏幕大小固定viewport,通过rem来适应不同的屏幕大小采用flex和rem来适应不同的屏幕大小移动端开发中几个个概念 移动开发中有4个比较重要的单位,物理像素(ppi),设备独立像素(dips),设备像素比(dpr)设备像素(物理像素)设备像素 指的就是我们平时所说的分辨率,比如说常见的我们常说原创 2020-05-22 22:11:55 · 533 阅读 · 0 评论 -
电子邮件正则表达式
电子邮件正则表达式电子邮箱账号规则(满足绝大部分的邮箱账号规则)/^[A-Za-z0-9\-_]+[A-Za-z0-9\.\-_]*[A-Za-z0-9\-_]+@[A-Za-z0-9]+[A-Za-z0-9\.\-_]*(\.[A-Za-z0-9\.\-_]+)*[A-Za-z0-9]+\.[A-Za-z0-9]+[A-Za-z0-9\.\-_]*[A-Za-z0-9]+$/ 1...原创 2020-04-29 17:35:47 · 4795 阅读 · 0 评论