HTML
文章平均质量分 62
Markov Zheng
认真填坑
展开
-
双token校验机制
双token校验机制什么是tokentoken是客户端登陆的时候由服务端生成,之后每次请求都需要携带token进行请求。校验用户身份呢的作用为什么使用token减少敏感信息的传递可以校验用户身份的准确性以及有效期单token登录流程以及请求校验流程注意token是使用base64的形式进行加密的 是有一部分存储在客户端中,所以,token中不建议存放敏感信息双token校验机制场景设想: 用户正在app或者应用中操作 token突然过期,此时用户不得不返回登陆界面,重新进行一原创 2021-11-15 17:37:29 · 12925 阅读 · 3 评论 -
Js去格式粘贴和指定位置插入内容
Js去格式粘贴和指定位置插入内容描述: uniapp项目,使用webview新建了一个脱离于项目而存在的一个编辑器,并实现数据交互,事件共同的功能,此处仅记录去格式粘贴和指定位置插入内容页面中新建了div设置 contenteditable="true" 允许在指定位置插入复制 粘贴的内容 指定位置插入内容思路通过设定contenteditable=true开启div的编辑模式2个步骤:① 获取DIV中的光标位置② 改变光标位置去格式粘贴思路document绑定paste事件 然原创 2021-09-17 10:35:33 · 589 阅读 · 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 · 2180 阅读 · 0 评论 -
css问题整理
CSS问题整理在移动端上运行,发现,点击某些带事件的DOM后,出现瞬间的闪动,a标签点击的时候还是出现黑色的背景。 解决方案在css中添加*{ -webkit-tap-highlight-color:transparent;//方法一main -webkit-tap-highlight-color: rgba(0, 0, 0, 0);//方法二}c...原创 2018-05-09 16:29:47 · 122 阅读 · 0 评论 -
React中的diff算法
React中的diff算法使用React是为了维护状态,相比于Vue,React的生态系统更加完善,不同于Vue的双向数据绑定,采用独特的单项数据绑定,这就决定着数据流也是单项的,对于复杂应用来说,单项数据流是统一状态管理,比如redux的前提。双向数据绑定的优势在于,显示需要实时更新的项目,比如,股市,多级联动等。总之就是,需要开发大型复杂项目,适合react全家桶。在传统的DOM操...原创 2018-04-24 16:50:04 · 454 阅读 · 0 评论 -
在线压缩图片---*.jpg *.png
在线压缩图片的网址使用方式—–直接将需要压缩的文件拖入指定区域,压缩完成后可直接下载压缩包 https://tinypng.com原创 2018-04-17 11:54:16 · 966 阅读 · 0 评论 -
JS问题整理(三)
JS踩坑整理(三)push:数组尾部添加pop:数组尾部删除shift:数组开头删除一个元素,返回删掉的值unshift:数组开头添加一个或多和元素,返回长度声明变量的提升无论在哪个地方声明了变量,js引擎都会将他的声明放在 范围作用域的顶部函数声明的提升代码执行之前会读取函数的声明,也就是说函数的调用可以放在函数的声明之前无论在那个地方声明了变量,js...原创 2018-04-10 15:14:39 · 185 阅读 · 0 评论 -
CSS踩坑
CSS跳坑视差滚动网页再向下滑动的时候,控制背景的移动速度比前景的移动速度慢,造成视差CSS3方式,开发时间短,性能开发性良好,缺点是不能兼容低版本jQuery实现 ,控制不同层的滚动速度插件的方式, eg parallax-scrolling::before和:after中的双冒号和单冒号的区别单冒号 css3伪类选择器,双冒号用于伪元素选择器::befo...原创 2018-03-21 10:36:06 · 283 阅读 · 0 评论 -
nw.js学习日志(一)
NWjs学习日志首先nwjs能干什么通过它可以用 HTML 和 JavaScript 编写原生应用程序。它还允许您从 DOM 调用 Node.js 的模块 ,实现了一个用所有 Web 技术来写原生应用程序的新的开发模式。完全支持nodejs所有api及第三方模块可以使用DOM直接调用nodejs模块它以前被称为“node-webkit”项目,package.json必须...原创 2018-03-06 14:34:20 · 935 阅读 · 0 评论 -
APP兼容4.X版本
APP的向下兼容今天再做APP向下兼容4.X版本,发现他不支持ES6的新语法,包括模板字符串,箭头函数等, js的向下兼容使用babel编译,具体步骤如下安装gulp和babelnpm install gulp --save-devnpm install gulp-babel --save-devnpm install babel-preset-es2015 --save-d...原创 2018-06-07 10:40:31 · 270 阅读 · 0 评论 -
SEO优化(二)
SEO优化(二)蜘蛛爬取我们的网站信息很重要一点,就是通过html代码爬取信息,那么有选择性的让爬虫爬取网站中重要信息是十分必要的,这里是一些优化html代码的方式head中添加title标签title标签可以告诉爬虫,接下来的内容的主要思想是什么,一般来说title中可包含接下来内容的关键字3-5个左右,并且和内容高度相关,每个页面都应该有自己的title标签headin...原创 2018-06-15 11:09:20 · 374 阅读 · 0 评论 -
Express结合聚合数据获取快递信息
Express结合聚合数据获取快递信息今天在项目中遇到获取物流信息的需求,于是查阅了快递100,快递鸟,聚合数据的文档,从零开始获取物流信息,这里主要介绍聚合数据在前端界面的的开发中直接将其提供的API与测试地址使用Ajax进行请求,结果,毫无疑问的报错,跨域请求被拦截,报 500 的错。所以需要服务器中转一下,聚合数据提供的请求地址:http://v.juhe.cn/exp/inde...原创 2018-07-23 17:20:29 · 1062 阅读 · 0 评论 -
在网站中接入 客服QQ
在网站中接入 客服QQ,实现联系在线客服打开网址http://shang.qq.com/v3/widget.html<div data-toggle="tooltip" data-placement="left" title="联系客服"> <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&am原创 2018-10-19 11:03:18 · 1299 阅读 · 2 评论 -
css 控制 段落 超出三行的部分显示...
css 控制 段落 超出三行的部分显示…代码如下<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><meta http-equiv="Content-Type" content="text/html; charset=utf原创 2018-12-28 14:10:51 · 8336 阅读 · 3 评论 -
input 事件
input 事件1.onfocus 当input 获取到焦点时触发2.onblur 当input失去焦点时触发,注意:这个事件触发的前提是已经获取了焦点再失去焦点的时候会触发相应的js3.onchange 当input失去焦点并且它的value值发生变化时触发4.onkeydown 在 input中有键按住的时候执行一些代码5.onkeyup 在input中有键抬起的时候触发的事件,...原创 2018-12-24 11:42:33 · 5673 阅读 · 0 评论 -
小程序踩坑日志(四)-----Wepy
Wepy踩坑日志(一)Wepy是 腾讯参考了Vue 等框架对原生小程序进行再次封装的框架,更贴近于 MVVM 架构模式, 并支持ES6/7的一些新特性。对于经常接触vue的开发者,当然更愿意接触这个框架官方文档:https://tencent.github.io/wepy/document.html#/?id=快速入门指南全局安装wepy命令行工具npm install wepy-cli ...原创 2019-03-15 11:41:18 · 917 阅读 · 0 评论 -
JS判断手机是安卓还是IOS,以及监听软键盘弹出收起
JS判断手机是安卓还是IOS,以及监听软键盘弹出收起直接上代码,踩得坑都在代码里var u = navigator.userAgent; //获取到的是个字符串,包括很多信息,我只匹配我想要的信息var isAnd = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1; //判断是安卓手机var isIOS = !!u.m...原创 2019-09-02 17:09:10 · 1014 阅读 · 2 评论 -
SheetJS---(js-xlsx)
SheetJS的使用(js-xlsx)使用纯前端的方式实现对excel表格的读取和导出功能github地址:https://github.com/SheetJS/js-xlsx学习地址:https://www.jianshu.com/p/74d4059403051.导入功能实现下载js-xlsx到dist复制出xlsx.full.min.js引入到页面中 然后通过File...原创 2018-03-06 10:28:30 · 21405 阅读 · 5 评论 -
React-Native基础知识
React-NativeReact-Native看起来很像React,不同的是,基础组件是原生组建而非web组件,编写“hello world”import React,{Component} from "react";import {AppRegistry,Text} from "react-native";class Hello extends Component{ ...原创 2018-03-19 09:53:06 · 936 阅读 · 0 评论 -
js踩坑汇总(一).md
JS问题整理js的typeof返回的值function number undefined object boolean强制类型转换和隐式类型转换强制 parseInt parseFloat number隐式 == ===split()和join()的区别split()切割成数组的形式join()是将数组幻化成字符串的形式pop()shift(...原创 2018-03-14 18:23:38 · 745 阅读 · 0 评论 -
HTML基础(二)
JS中关于存储的东西日期属于js的内置对象Date 对象用于处理日期和时间。 1970/1/1 0:0:0 28万年月/日/年 时/分/秒获取当前时间Date()设置时间Date(月/日/年 时/分/秒) ______zifuchuan Date(年,月,日,时,分,秒) __Day不能设置 星期cookie原创 2018-01-11 10:58:39 · 219 阅读 · 2 评论 -
前端面试题(一)
浏览器内核谷歌 blink内核火狐 gecko内核ie trident内核opera presto内核js中定义一个类DOM元素.classList.add(“类名”)js中的数据类型初始数据类型:null undefined number boolean symbol string引用数据类型:数组 对象 函数装箱和拆箱装箱:把原创 2018-01-12 10:42:21 · 1423 阅读 · 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 · 11494 阅读 · 0 评论 -
我为什么要学习微信小程序
我为什么要学习微信小程序在前端摸爬滚打的人大都听过微信小程序,不少公司招聘的的时候,也标注着 有微信小程序开发经验者优先,那么微信小程序的价值到底在哪里呢?特点首先我们需要知道他为什么存在,微信小程序的特点是小而块他主要解决的是小应用的问题,用完即走,不占用手机内存。触及范围广对于用户来说,小程序涉及PC端网页,公众号,H5,APP无法触及到的部分满足用户特殊需求当用户没有时间,想控制手机内存,原创 2018-01-15 11:05:05 · 2089 阅读 · 0 评论 -
小程序踩坑日志(二)--modal的使用
小程序踩坑日志(二)小程序弹出框modal的使用modal弹出框经常用在提示一些信息,比如退出应用,清除缓存,修改资料。常用属性 属性名 默认值 说明 title 标题 hidden false 是否隐藏整个弹窗 no-cancel false 是否隐藏cancel按钮 confirm-text原创 2018-01-23 16:03:37 · 1654 阅读 · 1 评论 -
React原理的认识
React原理的认识今天被一个朋友问到React的背景和原理,我记得自己以前总结过,但是还是有点懵,所以再写一下,增加自己的认知。React是MVC架构的V层,React把每一个组件当成一个状态机在通常web应用开发时,我们总是需要将数据实时的展示到页面中去,以往的开发模式是每当数据产生变化,总是重新渲染整个页面,即使只改变一小部分,也会渲染整个页面,这就导致了性能的低下。为此Re原创 2018-01-31 11:26:23 · 1022 阅读 · 0 评论 -
小程序踩坑日志(三)----Labrador
小程序模块化开发框架—–Labrador网址:https://github.com/maichong/labrador之前一直用的微信开发者工具去直接修改代码,倒不是说这样不行,就是不太友好,目录结构混乱,逻辑不清晰,身为开发者,我有时候都会混淆一些东西,更何况团队开发,所以不建议使用微信开发工具去直接修改代码,今天在网上看见一个Labrador框架,所以准备研究一下,正式学习之前需要原创 2018-01-31 15:09:50 · 2128 阅读 · 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 · 398 阅读 · 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 · 291 阅读 · 0 评论 -
异步的问题
promise async await generators之间的关系和区别async/await的主要益处就是有效的避免的回调地狱async表示这是一个async函数,await只能用在这个函数里。async也是一个promise对象await表示在这里等待promise返回结果了,再继续执行await后面跟着的应该是一个promise对象Promise的含义Prom原创 2018-02-02 10:51:57 · 275 阅读 · 0 评论 -
微信小程序的开发问题
微信开发者工具开发微信遇到的问题1~~~无法调用npm包虽然微信小程序开发工具打包时实现require函数加载依赖,但并不是完整的commonJS依赖管理。因为require函数仅仅能够加载项目中的JS文件,必须严格的定义文件路径2~~~无法使用Babel转码无法使用babel的根本原因还是无法加载npm包,也就是不能使用es6的新语法,得和无尽的callback作斗争。原创 2018-01-29 16:35:25 · 730 阅读 · 0 评论 -
http请求(一)
HTTP请求详解首先http请求如下域名解析—-发起TCP的三次请求—建立TCP连接后发起http请求—服务器响应http请求,浏览器得到html代码—浏览器解析html代码,并请求代码中的资源(js css 图片)—浏览器渲染页面以chrome为例1.域名解析(DNS)DNS(Domain Name System,域名系统),万维网上作为域名和IP地址相互映射的一个分原创 2018-02-05 17:18:23 · 263 阅读 · 0 评论 -
前端面试题(二)----前端模块化和组件化的区别和联系
前端组件化开发和模块化开发的区别之前一直以为模块化开发和组件化开发是一个意思,有次看到了类似这样的题,发现自己还是太年轻,现在整理一点出来。首先,组件化和模块化的意义都在于实现了分治,目前我们开发的项目复杂度不断的上升,早已不是我们一个人能完成的工作,团队合作的话又会产生配合困难等各方面问题,组件化和模块化便应运而生,结合webpack,glup,grunt等代码混淆工具,完成代码压缩原创 2018-01-30 10:07:39 · 8297 阅读 · 4 评论 -
vuex踩坑日志(一)
VUEX踩坑日志源码地址https://github.com/zhengyixun/VUEX我使用的是vue-cli+vuex,vue-cli的安装和使用想必就不用我多说了,我这里主要说一下vuex在vue-cli中的使用方法首先在你的vue-cli下安装vuexnpm install vuex --save--dev在你的src目录下新建一个Store文件夹,用来存放st原创 2018-02-07 11:36:16 · 1301 阅读 · 0 评论 -
labrador开发问题汇总(一)
labrador开发问题汇总(一)1.component中直接写catchtap事件index.xml中<view class="tab-bar" id="tab" catchtap="tab"> tabBar</view>index.js中tab(){ console.log("tab");}开发者工具中运行报错原创 2018-02-27 11:21:58 · 247 阅读 · 0 评论 -
线程和进程
线程和进程进程:是系统进行资源分配和调度 的基本单位线程:是被系统调度和CPU调度的基本单位一个进程可以包含多个线程,一个线程只能属于一个进程死锁的产生相互等待共同的资源而产生一种僵持状态,如果没有外力干预,将一直维持这个状态打个比方,假设有P1和P2两个进程,都需要A和B两个资源,现在P1持有A等待B资源,而P2持有B等待A资源,两个都等待另一个资源而不肯...原创 2018-03-07 10:39:52 · 104 阅读 · 0 评论 -
HTML基础(一)
BOM(浏览器对象模型)window bom 核心对象;组成 history location dom screen frames navigator:浏览器制造商属性window——最顶层对象window.screenLeft //浏览器到屏幕左上角的距离window.screenTop原创 2018-01-11 10:56:37 · 288 阅读 · 0 评论