其他
叶子_o
这个作者很懒,什么都没留下…
展开
-
解决 element-ui 打包后 icon 图标乱码问题
解决 element-ui 打包后 icon 图标乱码问题原创 2022-12-30 14:20:38 · 2867 阅读 · 0 评论 -
sessionStorage / localStorage / cookie 存储的都是字符串类型
sessionStorage原创 2022-11-09 15:57:42 · 456 阅读 · 0 评论 -
git 将一个分支的代码完全被另一个分支代码替换
将master分支的代码完全被dev分支代码覆盖:git checkout mastergit reset --hard devgit push origin master --force转载 2022-01-04 16:01:54 · 1019 阅读 · 1 评论 -
通过 ua-parser-js 获取系统环境信息
npm地址:https://www.npmjs.com/package/ua-parser-js1.安装npm install ua-parser-js2.引入import uaParserJs from 'ua-parser-js';3.使用const uaParser = uaParserJs();const { browser, cpu, device, engine, os, ua } = uaParser;const u = ua.toLowerCase();/*{原创 2021-12-22 17:48:18 · 2468 阅读 · 1 评论 -
bff 项目基础知识
bff项目一、bff1. Back-end For Front-end: 服务于前端的后端可以调用不同的系统的一个或者多个接口进行数据的聚合、过滤,而只向外部暴露一个接口即可2.优点:前后端彻底分离业务更向前靠拢,琐碎的api由前端开发自己决定留给后端更清晰的服务边界,只需要提供粗粒度的接口即可3.缺点:响应时间延迟(服务如果是内网之间访问,延迟时间较低)编写起来较为浪费时间(因为在基础服务上添加的一层转发,所以会多写一部分代码)业务异常处理(统一格式化业务异常的返回内容)4原创 2021-11-09 10:36:04 · 913 阅读 · 0 评论 -
安装/卸载插件报错npm ERR! Unexpected token } in JSON at position 125178 while parsing near ‘...n“: “^1.2.2“
解决方法:删除根目录下的package-lock.json文件,再重新安装。package-lock.json在安装完依赖包后,会重新生成。原创 2021-10-14 13:59:08 · 334 阅读 · 0 评论 -
解决 idea 关闭但是服务正常运行的问题
由于idea激活码经常失效,idea就会自己关闭,但是启动的服务还在运行(端口号依然被占用)。再次打开idea启动服务提示端口号被占用。解决(关闭被占用的进程):1.打开cmd命令窗口,根据端口号查找对应的进程号(以8081端口为例)netstat -ano | findstr 80 //列出进程极其占用的端口,且包含 80这里8081端口的进程号是10570802.taskkill -PID <进程号> -F //强制关闭某个进程参考自:idea 服务关了项目还能正常跑。ki原创 2021-08-11 10:05:22 · 3617 阅读 · 0 评论 -
echarts 图表切换后数据显示错误(图表重绘/清空)
知识点:图表重绘清空数据问题描述:用 echarts 实现一个展示【等级/季度/销量】的图表,切换年份后再选择回当前年份,发现图表中多显示了三四季度的数据,当前年份实际获取的数据里是只有一二季度的。原因:切换年份后,图表重绘时有它自己的想法,就算对图表数据进行了重新赋值,虽然没有三四季度的数据,但是重绘的时候还是沿用了上次选择年份的三四季度的数据…解决:图表绘制前,清空数据代码:// 引入echarts<script type="text/javascript" src="原创 2021-06-24 11:37:27 · 2047 阅读 · 0 评论 -
线上请求接口提示:`CAUTION: request is not finished yet!`
问题描述:这两天做一个公众号h5项目中,遇到一个很头疼的问题:最初本地环境开发的一个页面没有任何问题,但是部署到线上后获取页面数据的接口请求状态返回 200,但是没有返回任何数据,而且 Timing 提示 CAUTION: request is not finished yet!,浏览器卡死怎么都点都不动。用到的技术栈: vue3.0 + vant问题页:商品评价页(可多个商品分别评价)过程描述:前期开发自然是本地环境调试的,当时做的过程中出过一个问题,搜了很多资料怀疑可能是出现了死循环,经过原创 2021-01-29 20:13:37 · 14106 阅读 · 1 评论 -
微信浏览器点击按钮跳转到公众号
制作一个链接,点击该链接跳转到公众号关注页面。1、从公众平台登进入公众号2、点击开发>>开发者工具3、F12 >>Elements4、ctrl+f 搜索 uin_base645、将下面链接的__biz值更换成uin_base64的值,然后用微信打开该链接即可。https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=64位uin加密值&scene=110#wechat_redirect示例:转载 2020-11-26 16:17:29 · 2099 阅读 · 0 评论 -
vue 公众号 使用腾讯地图的 地图选点组件 实现定位、搜索、选择地址
需求公众号要做一个选择收货地址的功能,要求跳转到地图页面,自动定位当前位置,可搜索位置也可直接选择地图上的点。过程搜索了一些文章,发现有一些是通过调用微信的获取定位接口再结合其他地图(高德、百度)实现的,还发现一种方式,是直接使用腾讯地图的地图选点组件。查看腾讯地图的地图选点组件实例,自己扫码试了一下,发现这个不管是在开发上还是页面体验上都比较简单易用,页面效果如下。官方文档:腾讯地图 ---- 地图选点组件代码1.引入腾讯地图,无需安装,直接在 index.html 加上这一行<原创 2020-11-04 14:36:29 · 5262 阅读 · 9 评论 -
公众号开发网页授权登录弹窗问题
微信授权登录静默授权:scope 为 snsapi_userinfo非静默授权:scope 为 snsapi_userinfo问题描述微信公众号测试时,即使是用scope为snsapi_userinfo(即非静默授权)方式,授权登录弹窗依然没有弹出。原因如果用户已关注公众号,即使使用scope为snsapi_userinfo,也是静默授权,用户无感知。...原创 2020-11-02 16:40:59 · 3075 阅读 · 0 评论 -
微信公众号 测试号配置
1.登录微信公众号,左侧菜单栏最下边找到 开发-开发者工具 -> 公众平台测试账号2.填写信息(接口配置信息要找后台要)另外:就算是一个公众号有多个开发者,每个开发者申请的测试号也都是单独的3.开发者和测试人员需要扫码关注才能使用4.调用微信授权登录接口需要配置这里...原创 2020-10-28 11:25:34 · 1096 阅读 · 0 评论 -
解决微信开发者工具黑屏
在C盘搜索WeappLocalData这个文件,我这里的路径为: C:\Users\Administrator\AppData\Local\微信开发者工具\User Data\1a695ca2de1a85735f93a43fb366c83f\WeappLocalData ,在这里新建一个文件 localstorage_b72da75d79277d2f5f9c30c9177be57e.json文件内容为如下,直接复制即可。之后保存,打开微信开发者工具即可正常使用。{"show":false,"curr原创 2020-06-19 10:39:49 · 1408 阅读 · 0 评论 -
将请求返回的html代码展示在页面中
今天项目中遇到了这样一个问题,点击按钮请求接口时返回的是整个html代码。这时候需要将返回的结果(这里是代码)显示到后台管理的页面中。百度了一些,有的说重写整个页面的,还有说用jquery解析返回的html数据的。尝试了解析html数据的,由于数据量太大,字符串拼接太麻烦,果断放弃了。这时候想到了一个另辟蹊径的方法,由于之前的前端做的从清单列表到该清单详情页,就没有请求接口,而是直接采用链...原创 2020-04-17 18:05:09 · 5800 阅读 · 0 评论 -
echarts 报错 this.dom.getContext is not a function;
原因:因为在初始化echarts的时候,echarts.js规定只能使用dom原生方法获取标签,即 document.getElementById('main');错误代码:var myEchart = echarts.init($('#main'));正确代码:var myEchart = echarts.init(document.getElementById('main'));...转载 2020-04-17 14:13:04 · 2321 阅读 · 0 评论 -
input的text类型和number类型与maxlength
// 为text类型时,maxlength限制最大长度有效<input type="text" maxlength="4" />// 为text类型时,maxlength限制最大长度无效<input type="number" maxlength="4" />...原创 2019-12-11 16:28:06 · 421 阅读 · 0 评论 -
使用formData实现内容和文件上传
一、FormData简介FormData类型其实是在XMLHttpRequest 2级定义的,它是为序列化表以及创建与表单格式相同的数据(当然是用于XHR传输)提供便利。二、FormData的主要用途将form表单元素的name与value进行组合,实现表单数据的序列化,从而减少表单元素的拼接,提高工作效率。异步上传文件三、FormData的使用1.基本使用创建一个formDat...原创 2019-12-02 11:18:05 · 3774 阅读 · 0 评论 -
网站上线后获取不到图片、css和js文件
前端时间一个小项目遇到一个问题,网站在本地服务器上没有任何问题,部署到github上显示也没有任何问题,但是放到线上服务器上,所有的图片,css和js文件都获取不到,开始以为是路径的问题,后来发现不是路径的问题,原来是因为用的海外的服务器没有配置https协议。最后从前端的角度解决了问题。代码head部分有这么一行,<meta http-equiv="Content-Security-P...原创 2019-12-01 21:34:19 · 552 阅读 · 0 评论 -
yarn的安装和使用
yarn的简介:Yarn是facebook发布的一款取代npm的包管理工具。yarn的特点:速度超快。Yarn 缓存了每个下载过的包,所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率,因此安装速度更快。超级安全。在执行代码之前,Yarn 会通过算法校验每个安装包的完整性。超级可靠。使用详细、简洁的锁文件格式和明确的安装算法,Yarn 能够保证在不同系统上...转载 2019-11-27 10:35:54 · 885 阅读 · 0 评论 -
跨域解决方案
详见参考链接:什么是跨域?跨域解决方法前端解决跨域的九种方法原创 2019-11-12 23:46:49 · 82 阅读 · 0 评论 -
浏览器cookie数量与大小限制
浏览器对cookie数量和大小有限制的!如果超过了这个限制,你的信息将丢失,你知道吗?下面看看这些限制:一、一个域名下可以有多少个cookiefirefox 3.6可以存150个cookieie6最多有50个cookie二、当超过cookie最大个数时,浏览器如何响应firefox 3.6 剔除最老的设置新的ie6 剔除最老的设置新的三、一个cookie最大字符数fir...转载 2019-11-12 21:07:15 · 2508 阅读 · 0 评论 -
面试题整理(更新中)
浏览器兼容性类css类1.a标签中的img标签在IE7,8浏览器中有蓝色边框img{border:0 none},2.不同浏览器的标签默认的外补丁(margin)和内补丁(padding)不同解决方案:css里增加通配符*{margin:0;padding:0}3.IE6双边距问题;在IE6中设置了float,同时又设置margin,就会出现边距问题解决方案:设置display:i...原创 2019-11-07 23:31:37 · 217 阅读 · 0 评论 -
实现html页面自动刷新的几种方法
1、通过在head标签中添加meta标签来实现<!--页面每1秒刷新一次--><meta http-equiv="Refresh" content="1";/> <!--5秒钟后页面自动跳转到指定页面--><meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" ...原创 2019-11-07 20:47:51 · 1278 阅读 · 0 评论 -
移动端触摸滑动轮播图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...原创 2019-11-07 19:37:49 · 894 阅读 · 1 评论 -
LF与CLRF
在vscode中做vue项目时,eslint出现了如下错误提示:Expected linebreaks to be 'LF' but found 'CRLF'.eslint(linebreak-style)crlf 和 lf 是文本换行的不同方式:这是由于不同的操作系统的换行字符表示不同。CR:对应ASCII中转义字符\r,表示回车LF:对应ASCII中转义字符\n,表示换行,用于Un...原创 2019-11-03 22:41:40 · 951 阅读 · 0 评论 -
git 修改用户名等配置文件
查看git全局配置git config --global --list修改配置1.方法一:通过命令行:git config --global user.name 你的目标用户名;git config --global user.email 你的目标邮箱名;2.方法二:直接修改git的配置文件:打开全局的.gitconfig文件的命令为:vi ~/.gitconfig然后在文...原创 2019-10-25 00:07:54 · 1508 阅读 · 0 评论 -
babel-polyfill 将ES6代码转为ES5代码
Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而可以在现有环境执行。所以你可以用ES6编写,而不用考虑环境支持的问题。下面是一个例子://转码前allen.map(item => item + 1);// 转码后allen.map(function (item) { return item + 1;});一:命令行转码:Babel提供babel-...转载 2019-10-23 20:09:42 · 1309 阅读 · 0 评论 -
项目上线与回滚流程
1.上线流程将测试完成的代码提交到git版本库的master分支将当前服务器的代码全部打包并记录版本号,备份将master分支的代码提交到线上服务器,生成新版本号2.回滚流程将当前服务器的代码打包并记录版本号,备份将备份的上一个版本号解压,覆盖到线上服务器,并生成新的版本号...原创 2019-10-16 23:40:46 · 2885 阅读 · 0 评论 -
cookie、localStorage与sessionStorage的区别
一. cookie原本用于前后端交互,但也有本地存储的功能缺点:存储量太小,只有4kb所有http请求都携带到ajax中,会影响获取资源的效率API简单,需要封装才能用二. localStorage与sessionStorageHTML5专门为存储而设计,最大容量5MAPI简单易用:localStorage.setItem(key,value)localStorage.g...原创 2019-10-16 22:19:27 · 360 阅读 · 0 评论 -
响应式瀑布流插件minigrid.js
介绍一款最近用过的轻量级的瀑布流插件,大小只有2kb,而且是响应式的,在移动端也可以使用。使用案例如下:1.html部分//为父容器和子元素分别加上class:grid和grid-item<div class="grid"> <div class="grid-item"></div> <div class="grid-item"&原创 2019-01-14 14:24:06 · 943 阅读 · 1 评论 -
HTTP协议
1.HTTP协议主要特点简单快速:每个资源是固定的 URI ,处理简单灵活:通过一个http协议,就可以完成不同的数据类型传输无连接:连接一次就会断掉,不会保持连接无状态:客户端和服务端是两种身份,发生请求时,HTTP协议负责建立连接和传输,是无连接状态的,单从http协议,无法区分两次请求的身份和状态2.HTTP协议报文的组成请求报文:请求行(包含HTTP方法、页面地址、HTT...原创 2019-03-16 15:35:41 · 125 阅读 · 0 评论 -
原型链
1.创建对象的3种方法// 第一种:字面量var o1 = {name:'o1'};var o11 = new Object({name:'o11'});// 第二种: 通过构造函数var M = function(){ this.name = 'o2';}var o2 = new M();// 第三种:Object.create()方法var P = {name:'p'}...原创 2019-03-16 17:08:01 · 82 阅读 · 0 评论 -
网络攻击与防御 ----- CSRF、XSS
1.CSRF概念:CSRF通常称为跨站请求伪造攻击原理:网站中某一个接口存在漏洞用户在注册网站登陆过防御措施:加Token验证:同cookie验证,浏览器不会自动加,需手动加加Referer验证:页面来源隐藏令牌:类似Token2.XSS概念:跨域脚本攻击攻击原理:向页面注入脚本,运行其想做的事...原创 2019-10-17 18:07:30 · 107 阅读 · 0 评论 -
同源策略限制与跨域通信
同源策略:协议、域名、端口,其中一个不同,就是源不同,也就是跨域同源策略限制:不是一个源的文档,无法操作另一个源的文档主要限制的操作:Cookie、LocalStorage和IndexDB无法读取DOM无法获得AJAX请求不能发送前后端通信方式:AJAX 同源下的通信方式WebSocket 不受同源策略的限制CORS 支持跨域也支持同源通信跨域通信的几种方式1...原创 2019-10-17 18:07:17 · 113 阅读 · 0 评论 -
JS运行机制、浏览器缓存
一、渲染机制1. DCOTYPE及作用DTD:告诉浏览器是什么文档类型(XML/HTML),决定哪种协议来解析 及切换浏览器模式DCOTYPE:用来声明文档类型和DTD规范,一个主要用途是文件的合法性验证。若文件代码不合法,那么浏览器解析时便会出错。DCOTYPE类型和写法:2. 浏览器渲染过程3. 重拍Reflow定义:DOM结构中的各个元素都有自己的盒子(模型),这些都需要浏览...原创 2019-10-17 18:06:51 · 196 阅读 · 0 评论 -
hybrid
hybridhybrid即“混合”,即前端和客户端的混合开发。需要前端开发人员和客户端开发人员配合完成某些环节也可能涉及到服务器端hybrid存在价值可以快速迭代更新【关键】(无需app审核)体验流畅(和客户端的体验基本类似)减少开发和沟通成本,双端公用一套代码webviewwebview是app中的一个组件(app可以有wenview,也可以没有)用于加载h5页面,...原创 2019-05-13 20:46:08 · 743 阅读 · 0 评论 -
Webpack基本使用
一、webpack默认只打包js模块1.webpack下载npm init -y 生成一个初始化文件npm i webpack webpack-cli -D 下载webpack开发依赖2.在根目录新建一个配置文件 webpack.config.jsconst path = require("path"); module.exports = { entry: "./src/i...原创 2019-06-22 20:18:57 · 185 阅读 · 0 评论 -
解决移动端click事件延迟300毫秒问题 -- fastclick
移动端点击延迟事件移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟原因: 移动端的双击会缩放导致click判断延迟解决方式禁用缩放<meta name = "viewport" content="user-scalable=no" >缺点: 网页无法缩放更改默认视口宽度<meta name="viewport" content="wid...转载 2019-07-22 22:57:01 · 586 阅读 · 0 评论 -
多行文本省略,点击展开显示全部内容
方法一:利用多行文本省略号<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; ...原创 2019-08-30 14:57:28 · 3884 阅读 · 0 评论