网络学习日志
文章平均质量分 62
Markov Zheng
认真填坑
展开
-
React渐进式的图片加载组件
react渐进式图片加载插件原创 2022-07-05 15:01:09 · 496 阅读 · 1 评论 -
Vue + html2canvas截图时 不能使用跨域图片或图片不展示
Vue + html2canvas截图时 不能使用跨域图片的解决方案需要修改三个地方:1、修改源码 node_modules/html2canvas/dist/html2canvas.js5710行和5714行 case 2:this.context.logger.debug("Added image " + key.substring(0, 256));return [4 /*yield*/, new Promise(function (resolve, reject) { var img原创 2022-01-12 17:24:21 · 1558 阅读 · 0 评论 -
解决Unknown DraftEntity key null 插入图片,再输入中文会报错问题
解决Unknown DraftEntity key null 插入图片,再输入会报错问题最近在用react+draft.js编写富文本编辑器的时候遇到一个错误提示:Unknown DraftEntity key: null ,当时是写插入图片插入成功后在输入文字这一操作的时候出现的。对比官方Demo上有一个易错的点(注意一下 其中的insertAtomicBlock函数的第三个参数不是一个空字符串,而是一个含有空格的字符串!!!!!!)editorState: AtomicBlockUtils.ins原创 2021-12-11 10:52:09 · 928 阅读 · 0 评论 -
Js中? ?和? .
Js中??和?.和 ||空值合并操作符 ??只有当左侧为null或者undefined的时候才输出右侧的值逻辑或操作符 ||左侧的值为假值的时候就输出右侧的数假值:null undefined '' 0例子:console.log(null ?? 'ss') // 输出ssconsole.log(undefined ?? 'ss') // 输出ssconsole.log(0 ?? 'ss') // 输出0console.log(0 || 'ss') // 输出ss原创 2021-11-17 18:11:46 · 264 阅读 · 0 评论 -
双token校验机制
双token校验机制什么是tokentoken是客户端登陆的时候由服务端生成,之后每次请求都需要携带token进行请求。校验用户身份呢的作用为什么使用token减少敏感信息的传递可以校验用户身份的准确性以及有效期单token登录流程以及请求校验流程注意token是使用base64的形式进行加密的 是有一部分存储在客户端中,所以,token中不建议存放敏感信息双token校验机制场景设想: 用户正在app或者应用中操作 token突然过期,此时用户不得不返回登陆界面,重新进行一原创 2021-11-15 17:37:29 · 13155 阅读 · 3 评论 -
Js去格式粘贴和指定位置插入内容
Js去格式粘贴和指定位置插入内容描述: uniapp项目,使用webview新建了一个脱离于项目而存在的一个编辑器,并实现数据交互,事件共同的功能,此处仅记录去格式粘贴和指定位置插入内容页面中新建了div设置 contenteditable="true" 允许在指定位置插入复制 粘贴的内容 指定位置插入内容思路通过设定contenteditable=true开启div的编辑模式2个步骤:① 获取DIV中的光标位置② 改变光标位置去格式粘贴思路document绑定paste事件 然原创 2021-09-17 10:35:33 · 638 阅读 · 1 评论 -
点击去他区域 阻止input/textarea 失去焦点
点击去他区域 阻止input/textarea 失去焦点需求描述:点击搜索按钮 搜索框不失去焦点 或者 富文本编辑器(设置了 contenteditable=“true” 的编辑区)中点击上传图片的按钮 编辑器的光标不会消失以点击搜索按钮 搜索框不失去焦点需求为例子解决方案1 blur事件中 重新让input获取焦点<el-input @blur='blurFn' ref='inp'/>·····blurFn(){ this.$refs.inp.focus()}原创 2021-08-23 16:27:46 · 2297 阅读 · 0 评论 -
vue-cli@4.5下使用axios 结合typescript
vue3.0没有全局的vue对象 需要使用app.config.globalProperties 去扩展全局方法然后createApp(App).use(axios) 使用use的用法参数: {Object | Function} plugin ...options (可选)用法:安装 Vue.js 插件。如果插件是一个对象,它必须暴露一个 install 方法。如果它本身是一个函数,它将被视为安装方法。该安装方法将以应用实例作为第一个参数被调用。传给 use 的其他 options原创 2020-12-03 10:38:15 · 1995 阅读 · 4 评论 -
vue3.0+ts+element-plus项目初体验
vue3.0+ts+element-plus+axios项目初体验项目基于vue-cli@4.5下开发的,vue-cli4.5和之前的3.0以下的老版本不一样,安装命令也有所不同。首先得全局安装clinpm install -g @vue/cli //全局安装vue-cli最新版本第二步:实例化项目vue create mypro // 创建项目,mypro项目名,项目名中不允许出现大写字母要使用3.0 选择 >Default (Vue 3 Preview) ([Vue原创 2020-12-03 10:04:04 · 16863 阅读 · 5 评论 -
如何将GitBash整合进Webstorm
如何把Git Bash 整合进webstorm在选择cmd或者shell的时候需要注意 cmd无法运行ssh-copy-id命令 shell无法运行ssh或winrar.exe 使用中注意取舍第一步 、下载安装Git Bashhttps://gitforwindows.org/第二步、下载安装Webstorm这里不写了!教程多了去了第三步 、设置WebstormFile–>setting–>Tools–>Terminal–>Shell Pash第四步、重启Termi原创 2020-09-18 16:42:54 · 472 阅读 · 0 评论 -
antd走马灯组件自定义前进后退按钮
antd走马灯组件自定义前进后退按钮【ts + react】antd的Carousel没有提供前进后退按钮需要自己根据文档 实现此功能官方提供了next 和prev两个方法next() 切换到下一面板prev() 切换到上一面板代码如下:import React from "react";import "./Detail.less";import { Carousel,Image } from 'antd';import {LeftOutlined,RightOutlined} from原创 2020-09-04 10:50:24 · 3959 阅读 · 1 评论 -
win10环境下搭建IIS图片服务器
Win10环境下搭建IIS图片服务器背景交代:项目开发中在不依赖后端接口的前提下 前端基于mock获取数据,涉及到图片这块,需要完全还原线上场景,多以需要将图片放在服务器上。所以需要在本地利用window自带的IIS搭建IIS服务器1. 右键 此电脑 - 属性 - 控制面板主页,进入控制面板2. 程序 - 点击卸载程序3. 点击 启用或关闭windows功能4. 找到internet信息服务勾选和FTP服务器5. 控制面板 - 系统与安全 - 管理工具 - Internet Informatio原创 2020-09-02 14:55:01 · 2508 阅读 · 0 评论 -
React-cli使用Redux以及使用redux-persist处理刷新页面redux中数据丢失的问题
React-cli使用Redux以及使用redux-persist处理刷新页面redux中全局数据丢失的问题写在前面:项目基于 react + typescript + react-router + antd + redux + redux-persistReact-create-app中使用Redux首先目录结构如下| -- src | -- pages | -- Home | -- Home.tsx | -- Login | -- Login.tsx | -- st原创 2020-08-31 17:06:06 · 1215 阅读 · 0 评论 -
React中使用http-proxy-middleware跨域
React中使用http-proxy-middleware跨域基于create-react-app 和axios在create-react-app 2.0 之前,可以通过在package中添加proxy 来实现,如下package,.json"proxy": "http://0.0.2.89:300"2.0之后官方推荐使用http-proxy-middleware具体用法如下在sr...原创 2019-12-18 14:05:15 · 1228 阅读 · 0 评论 -
消除React中的warn Function declared in a loop contains unsafe references to variable(s) 'XXX'警告信息
消除React中的warn Function declared in a loop contains unsafe references to variable(s) 'mac_id’警告信息代码片段:import React from "react";export default class Main extends React.Component{ constructor(props...原创 2019-12-18 09:39:19 · 7865 阅读 · 0 评论 -
React的this.setState的异步问题
React的this.setState的异步问题先看一个问题描述import React from 'react';export default class Home extends React.Component{ constructor(props){ super(props); this.state={ country:"...原创 2019-12-16 17:00:15 · 1896 阅读 · 0 评论 -
解决安装Chrome翻译插件总是报CRX_HEADER_INVALID
解决安装Chrome翻译插件总是报CRX_HEADER_INVALID解决方案:将下载的*.crx的后缀名修改成 *.zip将文件解压,解压目录如下在chrome://extensions/ 中点击加载已解压的扩展程序找到 解压文件 的路径 就OK了...原创 2019-11-13 09:29:59 · 1014 阅读 · 0 评论 -
CSS补充
CSS补充IOS body标签无法绑定点击事件解决方案:在body标签中包一层div,将事件绑定在div上转换成可点击元素cursor: pointer;阻止IOS input的点击蓝色暗框-webkit-tap-highlight-color: transparent; /*阻止ios 点击蓝框*/CSS变量/*不支持IE6-8,安卓4.4.4以下*/:root{ --c...原创 2019-11-13 09:21:39 · 195 阅读 · 0 评论 -
移动端布局常见问题
移动端布局常见问题1 横竖屏限制问题 meta name="x5-orientation" content="portrait | landscape" /> 只支持x5内核,指的是强制进行横屏或竖屏,portrait是竖屏,landscape是横屏。 meta name="screen-orientation" content="portrait">原创 2018-01-11 08:45:19 · 1142 阅读 · 0 评论 -
Webpack随笔
Webpack使用指南 Webpack 是当下最热门的前端资源模块化管理和打包工具。什么是webpackWebpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载。通过 loader 的转换,任何形式的资源都可以视作模块,比如 CommonJ原创 2018-01-11 08:53:29 · 253 阅读 · 0 评论 -
PHP随笔(二)
file_put_contents()写文件。默认的是重新写文件,也就是会 替换原先的内容。追加的话使用参数FILE_APPEND/** CMS 内容管理系统** 静态的页面(html,css,js,jquery) 又称为模板* 静态页面+后台语言+数据库(Apache+解析模块) = 动态页面**结构性功能,模块化功能,数据的处理* 抽象出规律* 分类原创 2018-01-11 09:34:14 · 199 阅读 · 0 评论 -
数据库随笔
服务器的特点: http;只能有客户端向服务器发起请求。动态的取数据谷歌浏览器中会默认给html中的php文件添加注释数据库(本质文件 关系型,菲关系性 nosql)mysql(中小型数据库,对于数据的处理速度)mysql集群 ,高速缓存 结构化的处理方式,有规律,有逻辑,有关系的存储数据库,表,字段的概念(笔记本)库原创 2018-01-11 09:35:44 · 209 阅读 · 0 评论 -
Less随笔
LESS随笔less学习网址: http://www.bootcss.com/p/lesscss/引入在浏览器引入引入.less文件时需要设置rel的属性值为“stylesheets/less”"stylesheet/less" type="text/css" href="styles.less">然后引入less.js"less.js" type原创 2018-01-10 21:45:22 · 198 阅读 · 0 评论 -
JavaScript基础(一)
JavaScript组成:ECMAScript,描述了该语言的语法和基本对象。 变量,数据类型,运算符,流程( if for …),函数,对象文档对象模型(DOM),描述处理网页内容的方法和接口。 获取元素,属性,样式,内容浏览器对象模型(BOM),描述与浏览器进行交互的方法和接口。 地址原创 2018-01-11 10:47:18 · 174 阅读 · 0 评论 -
JavaScript基础(二)
07-28==比较判断符运算符关系运算符 运算结果是布尔值,值是ture/false = >= ===:全等 ==:判断两个值是否相等 =:代表赋值 ===:不仅比较数值还比较数值类型,判断是否全等比较两个数字比较正数>负数,负数 绝对值大的反而小字符串比较,比的是首字符对原创 2018-01-11 10:48:30 · 287 阅读 · 0 评论 -
JavaScript基础(三)
流程控制while循环语法while(条件){ 循环体}dowhile语法do{ 循环体}while(条件)while do while 的区别while:先判断条件是否成立,然后执行循环体do while :新执行一次循环体,在判断条件如果初始条件不成立,do while 会执行一次循环体for 和while 和do w原创 2018-01-11 10:50:15 · 1230 阅读 · 0 评论 -
HTML基础(一)
BOM(浏览器对象模型)window bom 核心对象;组成 history location dom screen frames navigator:浏览器制造商属性window——最顶层对象window.screenLeft //浏览器到屏幕左上角的距离window.screenTop原创 2018-01-11 10:56:37 · 293 阅读 · 0 评论 -
HTML基础(二)
JS中关于存储的东西日期属于js的内置对象Date 对象用于处理日期和时间。 1970/1/1 0:0:0 28万年月/日/年 时/分/秒获取当前时间Date()设置时间Date(月/日/年 时/分/秒) ______zifuchuan Date(年,月,日,时,分,秒) __Day不能设置 星期cookie原创 2018-01-11 10:58:39 · 227 阅读 · 2 评论 -
jQuery
jQueryhttp://jquery.com/ :官网js框架jQuery的目的用jQuery实现某些效果学习jQuery的编程思想(隐式循环,异步机制)了解到后面框架的走向发起http请求:script标签对 css 所有有链接的地方js语言的核心概念 :单线程异步机制如何优化HTML页面 加载 渲染速度 1.将js文件中放到HT原创 2018-01-11 11:02:44 · 391 阅读 · 0 评论 -
前端面试题(一)
浏览器内核谷歌 blink内核火狐 gecko内核ie trident内核opera presto内核js中定义一个类DOM元素.classList.add(“类名”)js中的数据类型初始数据类型:null undefined number boolean symbol string引用数据类型:数组 对象 函数装箱和拆箱装箱:把原创 2018-01-12 10:42:21 · 1448 阅读 · 0 评论 -
小程序踩坑日志(一)
微信小程序踩坑日志起步申请账号查看AppID—“设置”-开发设置 小程序的appid相当于小程序平台的一个身份验证安装开发者工具https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201818以及查阅开发者工具介绍https://mp.weixin.qq.com/debug/wxadoc/dev/d原创 2018-01-22 16:01:01 · 11523 阅读 · 0 评论 -
我为什么要学习微信小程序
我为什么要学习微信小程序在前端摸爬滚打的人大都听过微信小程序,不少公司招聘的的时候,也标注着 有微信小程序开发经验者优先,那么微信小程序的价值到底在哪里呢?特点首先我们需要知道他为什么存在,微信小程序的特点是小而块他主要解决的是小应用的问题,用完即走,不占用手机内存。触及范围广对于用户来说,小程序涉及PC端网页,公众号,H5,APP无法触及到的部分满足用户特殊需求当用户没有时间,想控制手机内存,原创 2018-01-15 11:05:05 · 2113 阅读 · 0 评论 -
小程序踩坑日志(二)--modal的使用
小程序踩坑日志(二)小程序弹出框modal的使用modal弹出框经常用在提示一些信息,比如退出应用,清除缓存,修改资料。常用属性 属性名 默认值 说明 title 标题 hidden false 是否隐藏整个弹窗 no-cancel false 是否隐藏cancel按钮 confirm-text原创 2018-01-23 16:03:37 · 1689 阅读 · 1 评论 -
React原理的认识
React原理的认识今天被一个朋友问到React的背景和原理,我记得自己以前总结过,但是还是有点懵,所以再写一下,增加自己的认知。React是MVC架构的V层,React把每一个组件当成一个状态机在通常web应用开发时,我们总是需要将数据实时的展示到页面中去,以往的开发模式是每当数据产生变化,总是重新渲染整个页面,即使只改变一小部分,也会渲染整个页面,这就导致了性能的低下。为此Re原创 2018-01-31 11:26:23 · 1052 阅读 · 0 评论 -
小程序踩坑日志(三)----Labrador
小程序模块化开发框架—–Labrador网址:https://github.com/maichong/labrador之前一直用的微信开发者工具去直接修改代码,倒不是说这样不行,就是不太友好,目录结构混乱,逻辑不清晰,身为开发者,我有时候都会混淆一些东西,更何况团队开发,所以不建议使用微信开发工具去直接修改代码,今天在网上看见一个Labrador框架,所以准备研究一下,正式学习之前需要原创 2018-01-31 15:09:50 · 2138 阅读 · 0 评论 -
Redux学习日志(一)
Redux学习日志(一)Redux中文文档:http://www.redux.org.cn/阮一峰的网络学习日志:http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.htmlRedux是js的状态容器,提供可预测化状态管理Redux除了和React一起用之外还支持 其他界面库他体原创 2018-01-25 14:00:34 · 422 阅读 · 0 评论 -
SomeProblem(二)
let O = function(name){ this.name = name || ‘world’; }; O.prototype.hello = function(){ return function(){ console.log(‘hello ’ + this.name); }; }; let o = new O; le原创 2018-01-26 10:28:26 · 299 阅读 · 0 评论 -
异步的问题
promise async await generators之间的关系和区别async/await的主要益处就是有效的避免的回调地狱async表示这是一个async函数,await只能用在这个函数里。async也是一个promise对象await表示在这里等待promise返回结果了,再继续执行await后面跟着的应该是一个promise对象Promise的含义Prom原创 2018-02-02 10:51:57 · 303 阅读 · 0 评论 -
正则随笔
正则随笔正则手册:http://tool.oschina.net/uploads/apidocs/jquery/regexp.html表达式全集 字符 描述 \ 将下一个字符标记为特殊字符,例如“\n”匹配一个换行符“\ (”匹配“(” ^ 匹配输入字符串开始 的位置 $ 结束的位置 + 前面的表达式匹配一次或者多次原创 2018-01-10 21:49:10 · 128 阅读 · 0 评论 -
node+vue随笔
nodejs->.msi 模块化编程vue resct 工作流的框架,,源于nodejs—–运行v8引擎上的javascript 运行在服务器上的操作文件数据库图形图像网络基于事件驱动,非阻塞型(异步机制)包=功能buffer=》缓冲器vim 编辑器i————-插入模式fs=require ——-定义一个文件mkdir——-创建文件原创 2018-01-10 22:08:24 · 290 阅读 · 0 评论