
前端问题
前端问题汇总
独行侠_阿涛
2015年211院校毕业,于2020年考取软考高级证书-系统架构设计师,高分通过(61-64-52)。毕业前6年,一直专注于技术全面开花,有python/Node/Java/Elk系列等项目开发经验;熟悉搜索引擎解决海量数据搜索问题,Node代替Java开发服务后端,python自动化程序编写。目前持续沉淀过去的知识,陆续推出前端0+1专栏,容器技术等专栏,目前正在更新ELK7.2。
展开
-
Node切换版本
mklink 后面/d表示创建的是文件夹/目录的软连接,必须要加,不然创建了也识别不了。我们使用软连接代替真实版本的node路径,这样切换版本的时候,就无需修改环境变量了。所以,既然官方的方式不行,就选择直接面对了:我们自己创建对应版本的软连接。第二个路径表示原始文件夹路径,这边就是我们的node的版本目录了。以非安转版本方式安装Node,经常会需要进行Node的版本切换。官方的做法是:nvm use version。但是这种方法经常会失败。第一个路径表示软连接的路径。原创 2023-10-28 12:22:27 · 322 阅读 · 0 评论 -
uview 2.x版本 tabbar在uniapp小程序里头点击两次才能选中图标
有了上面的结论,我觉得只要定义一个全局的变量来记录当前的图标位置,脱离当前组件的控制,问题应该就解决了,所以我在vuex里头定义了一个变量tabIndex,每次切换修改这个变量。找了一圈,没找到答案,但是我分析了下,可能是uni.switchTab导致当前的组件发生某种不可描述的问题吧。但是很快就发现了,使用了其中的tabbar组件,出现如题的问题。问题点击我的,页面成功切换到了我的,但是图标没被选中(第一次会选中我的,然后闪变会首页,只是图标闪变,页面保持)。...原创 2022-07-30 10:44:59 · 2423 阅读 · 4 评论 -
node.js child_process 执行命令 出现中文乱码解决方法
问题使用node的child_process的exec方法执行cmd命令的时候,执行结果带有中文的部分乱码解决原先写法是:var child_process = require('child_process');child_process.exec('ipconfig', { encoding:“utf-8”}, function(err, stdout, stderr){ console.log(stdout, stderr)});需要纠正下,改成如下写法即可:原创 2021-05-12 18:28:10 · 7813 阅读 · 3 评论 -
node配置淘宝镜像源
npm config set registry https://registry.npm.taobao.orgnpm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/原创 2022-04-14 21:38:18 · 2006 阅读 · 0 评论 -
vantUi密码框密码显示与隐藏(密文/明文)
问题vantUI开发登录界面,密码输入框没有常用的密码显示与隐藏功能。解决没有现成的功能,只能通过如下方法曲线实现功能:通过输入框可以增加右侧的图标,增加一个eye的图标 动态设置输入框的类型 添加图标点击事件,修改输入框的类型源码:<template> <van-form @submit="onSubmit"> <van-field label-class="phone-input"原创 2021-05-08 10:33:05 · 2726 阅读 · 0 评论 -
vantui cdn方式引入 js-api使用方法
问题vant以cdn的方式引入到vue的项目里头,使用vant里头的各种js的api,直接使用会报错,比如Toast('提示内容');报错信息:vue.min.js:6 ReferenceError: Toast is not defined at a.mounted (App.vue?234e:57) at He (vue.min.js:6) at Yt (vue.min.js:6) at Object.insert (vue.min.js:6) at原创 2021-05-08 16:17:24 · 735 阅读 · 0 评论 -
dtree图标显示不出来
知其然定要知其所以然。最近在app上基于h5做了一颗dtree组件的树。问题抛出:图标显示异常,显示不出来。问题追究:把在h5上的页面打开,打开调试模式,找到了显示异常的地方,发现,图标相对路径不对。查看了配置图标路径的地方(在dtree.js中100行左右的位置),发现图片路径是相对js的路径,dtree.js渲染这些图标的时候,是直接把配置的地址拿起来做渲染。那么问题就出现了,如果html跟d...原创 2018-07-04 12:32:06 · 1950 阅读 · 0 评论 -
vue
Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。Vue 只关注视图层, 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。学习网站:vue.js官网vue.js菜鸟教程...原创 2018-02-16 20:57:38 · 315 阅读 · 0 评论 -
vue+typescript+elementui浏览器兼容性1
背景应公司战略需要,需要对一个使用了vue2.6.5+typescript3.9.3+elementui2.14.1的项目进行浏览器兼容性处理。需要适配的浏览器包括:ie9-11 chrome(2019~) firefox(2019~) edge 搜狗(2019~) 360(2019~) qq(2019~) safri现状经过初步的测试,发现到了ie9,elementui仍然可以支持,但是部分组件的交互已经失真了,比如下拉框组件。受限于csdn的现阶段的改版,不允许增加过原创 2021-03-19 10:28:46 · 676 阅读 · 1 评论 -
vue+typescript+elementui浏览器兼容性2
进展经过数个demo的测试,初步得到结论:无需做特殊配置vue2+typescript+elementui就可以兼容上一篇说的浏览器兼容性问题:外部插件并非es5版本的语法,导致ie兼容异常针对该问题,vue也有对应的解决方案。配置也比较简单。解决问题的原理是这样的:由于vue-cli默认不会编译node-module下的所有的文件,而有时候我们一来的第三方插件都是安装在node-module下面,因此,我要做的就是告诉vue有一些包我们还是需要编译的。比如,项目里头运用了如下的依赖:原创 2021-03-19 10:53:53 · 756 阅读 · 0 评论 -
vue+typescript+elementui浏览器兼容性4-iframe-localStorage失效
问题项目包括一个系统族,多个系统之间共享登录,因此构建基于客户端的单点登录功能,实现方式:一个单点登录系统负责存储单点登录的信息 多个业务系统 业务系统通过内嵌iframe的方式实现跟单点登录的通信从而实现单点登出功能但是在实现过程发现,谷歌火狐都能通过iframe拿到单点登录系统域名下的localStorage信息,在ie11和safri上却不行解决经过设计,单点登出功能,没办法在不刷新页面的背景下实现,因此单点登出的时候,先跳转单点登录系统先退出单点登录的用户,然后再跳转回原先业务原创 2021-04-15 14:37:36 · 687 阅读 · 0 评论 -
vue+typescript+elementui浏览器兼容性3-ie缓存
问题谷歌里头通过axios发起get请求可以正常访问,但是ie里头没办法正常的发起最新的请求解决这个问题,在非常早以前,已经解决过了,只不过许久没有接触兼容ie的需求,所以一开始没发现。上面问题表现为:ie11打开f12页面数据才会正常刷新原因:在使用get请求时,如果参数值没有发生变化,在ie11中会把这之前的get请求缓存下来,从而使得页面视图数据没有及时更新解决方式:在get请求入参加上个动态变化的参数如:date:new Date().getTime(),以此来去除缓存原创 2021-04-14 15:19:20 · 308 阅读 · 0 评论 -
DWR
DWR运行原理:(1)部署阶段:1)读dwr.xml,在该xml文件中定义的Javascript(如名为cc),它对应的类为如DWRTest,这里cc相当于DWRTest,通过反射生成cc.js,其中DWRTest中的方法也就是调用后台类的方法;(2)运行阶段:触发事件调用一个方法——>从自己的js中调用了上面的cc.js中的方法t1——>调用客户端的AJAX引擎发出请求——>以...原创 2018-02-16 23:37:27 · 934 阅读 · 0 评论 -
element-ui el-input-number精度设置
按照官方的文档介绍,看似使用起来很简单,但是计划赶不上变化。官方文档:https://element.eleme.cn/#/zh-CN/component/input-number按照官方给的样例,我也这么写,但是发现,每次设置到小数点后第二位的时候,鼠标移开输入框的时候,都会自动将小数点的第二位自动变成了0.后来通过设置step属性为0.01,问题解决了。...原创 2021-04-24 13:16:50 · 5095 阅读 · 0 评论 -
vue+typescript+elementui浏览器兼容性5-window.open打开窗口被拦截
问题在ie11和safri下,通过window.open或者通过js点击a标签实现打开新窗口的功能,新窗口会被浏览器拦截下来。谷歌和获取浏览器是正常的。解决经过排查,发现这是浏览器的安全机制导致的,因为浏览器认为不是用户直接触发来打开窗口都是不安全的,因此,建议如下做整改:要打开新窗口,统统使用a标签,并且要由用户主动触发...原创 2021-04-15 14:41:27 · 646 阅读 · 0 评论 -
js去掉空格
//去掉空格函数function trim(str){ //删除左右两端的空格 return str.replace(/(^\s*)|(\s*$)/g, "");}function ltrim(str){ //删除左边的空格 return str.replace(/(^\s*)/g,"");}function rtrim(str){ //删除右边的空格 return str.re...原创 2018-02-17 14:29:16 · 257 阅读 · 0 评论 -
websocket搭建
今天,随手尝试了下websocket的搭建。发现还是蛮不好弄的。websocket是啥,就是实现实时通信的一种方式,是一种长连接的http协议。平常,我们做在线聊天室会用到。不过我们平常更常用的是通过ajax的轮询进行实现。但是显然ajax定时请求后台,耗时耗力。废话太多了,直接贴上,怎么实习WEBSOCKET搭建吧。demo源码我已经上传到了csdn的资源库了,url: 我是demo...原创 2017-03-23 18:26:09 · 2430 阅读 · 0 评论 -
JSON数据格式化展示
项目做多了,就发现,总结非常有必要。今天分享的是,json数据格式化展示的两种方法。 方法一 表格形式的数据展示: 效果如下: 实现代码如下://////jsp代码如下:<table id="mess" class="frm" style="width:584px;height:362px;"></table><script>content='{ "navnums": { "0":原创 2017-04-17 19:17:15 · 1708 阅读 · 0 评论 -
【web前端进阶】客户端缓存解决,web页面缓存解决
问题平常开发web应用,难免会遇到一个页面刷新但是仍然停留在旧的页面里头,最新的代码效果没有生效,这个是客户端的缓存。尤其是浏览器。而最近,我遇到一个问题,就是html网页,嵌入到桌面应用里头,当我的页面已经发生了改变了,但是桌面应用仍然停留在上第一个版本的状态。对于前后端分离的应用,这个问题,应该也比较经常出现,表现为:由于vue项目上线后,用户页面异常,打开 F12 显示很多请求出现404,原因大概率在于当前页面使用了浏览器的缓存,请求旧的资源失败分析上述讲解的问题其实就是缓存应用带来的原创 2021-05-24 17:01:02 · 5082 阅读 · 1 评论 -
防抖&&节流
背景在做页面的开发过程。不知道大家有没有遇到如些一些问题:1、 (移动端) 页面有多个图标,打开的是不同的页面,这个时候手速快一点,连续在不同的图标之间点击,会发现会一次性打开多个页面,体现在点击返回会不是直接返回到初始页面而是每次返回到被打开的多余的页面。2、 搜索框,根据内容变化自动发起搜索请求,这个时候手速快一点,连续输入n个字符,会连续发起n个请求。但是其实对于用户来讲,前n-1个请求其实都是多余,他并不想要,只是他输入的比较快而已。而这样高频率的请求同样会给服务端带来非常猛的载荷压力.原创 2021-08-30 10:21:47 · 195 阅读 · 0 评论 -
一起用futureJsonp解决你跨域的烦恼吧
jsonp什么叫做jsonp,其实就是一种通过利用script标签可以跨域的特性来解决我们不能跨域访问的问题 的方式,所以jsonp不是什么高大上的东西,就只是一种帮助我们解决问题的方式。常用的jsonp的实现方式常规情况下,我们通常会用ajax的jsonp请求,或者vue-resource的vue.$http.jsonp的请求来实现跨域访问。不得不说的一点是:其实jsonp请求在彻底...原创 2019-07-06 11:31:41 · 308 阅读 · 0 评论 -
jquery.nestable实现拖动排序
jquery.nestable是目前经常用的拖动排序插件。很多论文或者博客,都说用到了ace.min.css,但是好像这个下载的有点困难,于是笔者自己精简出这部分代码,形成了行内样式,同时提供了静态实例。具体的demo下载地址:jquery.nestable实现的拖动排序实例单独附上ace.min.css代码:/*ace.min.css精华缩略代码*/ .dd{pos...原创 2018-09-03 00:13:32 · 1437 阅读 · 0 评论 -
jquery-resizable使用
最近因为项目需要,所以学习了jquery.ui的是resizable的使用,大概说下功能,可以支持页面的div通过拖拽改变这个div的大小,同时可以改变同一行的另外一个容器的大小。上个我做的demo的图片给大家看看,是不是就是你们想要的:这个ui插件,其实菜鸟教程都有教,但是都太基础了。我自己呢,几乎也是找遍了所有了的博客,没有找到相关自己中意的,于是自己就搞了一套,经过三次迭代,包括...原创 2018-09-02 22:58:28 · 2085 阅读 · 0 评论 -
页面回车键事件
对象绑定keydown事件1、$('#rely-key').keydown(function(e){ var e = e || window.event; if(e.keyCode == 13){ add_rely($(this)); } });2、function EnterPress(e){ //传入 event ...原创 2018-02-17 23:09:34 · 546 阅读 · 0 评论 -
js数组删除
数组删除:删除的数组的某一项splice(index,len,[item]) 注释:该方法会改变原始数组。splice有3个参数,它也可以用来替换/删除/添加数组内某一个或者几个值index:数组开始下标 len: 替换/删除的长度 item:替换的值,删除操作的话 item为空如:arr = ['a','b','c','d']删除arr.splice(1,1) //['a','c','d']...原创 2018-02-17 23:05:34 · 462 阅读 · 0 评论 -
闭包初探
概念分析1、闭包就是能够读取其他函数内部变量的函数。由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成"定义在一个函数内部的函数"。所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。2、使用闭包的注意点1)由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方...原创 2018-02-17 22:58:07 · 202 阅读 · 0 评论 -
js字符串截取 substring substr slice
stringObject.substring(start,stop) :start从0开始 到stop(不包含stop,stop参数可以省略代表截取全部)结束 不接受负的参数。stringObject.substr(start,length):从start开始截取length长度个字符stringObject.slice(start,end):start从0开始 到end(不包含end,end参数...原创 2018-02-17 20:38:34 · 278 阅读 · 0 评论 -
js 对象属性的获取方式
一个对象的属性名可以是任何有效的 JavaScript 字符串,,或者可以被转换为字符串的任何东西,包括空字符串。然而,一个属性的名称如果不是一个有效的 JavaScript 标识符(例如,一个有空格或短横线,或者以数字开头的属性名),就只能通过方括号标记访问,否则就可以通过点来获取了。总结:一个js对象的属性获取方式两种:obj.property obj[property]obj....原创 2018-02-17 20:14:54 · 629 阅读 · 0 评论 -
jQuery插件开发-table插件开发
使用过bootstarp-table插件的人都知道bootstrap给我们提供了一个非常好看的表格渲染插件,我基于此,也模拟开发了一个比较简单的表格渲染插件。html代码<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>组件</title>原创 2018-02-17 14:47:44 · 522 阅读 · 0 评论 -
jQuery拓展
了解两点:jQuery.extend/jQuery.fn.extendjQuery.extend概念分析如果把jQuery理解为一个类,那么jQuery.extend,就是基于类的拓展,拓展出来的所有函数或者属性都是类函数(静态方法)类属性。示例实现//自执行函数,解释代码时候就运行了这个方法为jQuery拓展了一个wltTest方法(function($){ $.extend({ ...原创 2018-02-17 14:21:28 · 220 阅读 · 0 评论 -
javascript自执行匿名函数
概念分析1. 什么是自执行的匿名函数? 它是指形如这样的函数: (function {// code})();2. 疑问 为什么(function {// code})();可以被执行, 而function {// code}();却会报错?3. 分析(1). 首先, 要清楚两者的区别: (function {// code})是表达式, function {// code}是函数声明.(2)...原创 2018-02-17 14:04:16 · 212 阅读 · 0 评论 -
ajaxfileupload.js实现无刷新上传文件
笔者利用ajaxfileupload.js和springmvc/struts2进行文件无刷新上传的操作。下面只分享ajaxfileupload.js结合springmvc实现文件上传的过程。需要ajaxfileupload.js结合struts2实现文件无刷新上传的在评论区留下邮箱,我会整理好给你发送过去的。FileUploadController.javaimport java.io.File...原创 2018-02-17 22:07:49 · 352 阅读 · 0 评论 -
ajax data属性类型
标准ajax提交格式: $.ajax({ type : "POST", url : "http:www.baidu.com/", dataType : 'json', data:data, async:false, success : function(result) { ......原创 2018-02-17 20:08:35 · 373 阅读 · 0 评论 -
select标签常用操作
获得选中select值$('#testSelect option:selected').text();//选中的文本$('#testSelect option:selected') .val();//选中的值$("#testSelect").get(0).selectedIndex;//索引赋值的方式 $("#testSelect").val("0");...原创 2018-02-17 20:53:29 · 227 阅读 · 0 评论 -
cookie和web storage选哪个
分析比较cookie功能:临时存储cookie : 一般由服务器生成,可设置失效时间。如果在浏览器生成,默认是关闭浏览器之后失效 存储大小:4k 每次都会携带在HTTP头中,如果使用 cookie 保存过多数据会带来性能问题 一般由服务器端生成,用于标识用户身份缺点 : 原生的cookie用起来有点麻烦,如果用jQuery,则需要引入jquery库及jquery.cookie库优...原创 2018-02-07 10:14:00 · 413 阅读 · 0 评论 -
ajax设置header
方法一、setting参数 headers$.ajax({ headers: { Accept: "application/json; charset=utf-8" }, type: "get", success: function (data) { }});方法二、beforeSend方法$.ajax({ type: "GET", ...原创 2018-02-08 14:53:53 · 6319 阅读 · 1 评论 -
页面滚动条置顶、置底
置顶操作$('html,body').animate({scrollTop: '0px'}, 10);置底操作$('html,body').animate({scrollTop: document.body.clientHeight+'px'}, 800);原创 2018-02-17 21:23:19 · 3616 阅读 · 0 评论 -
页面添加样式让特定区域不可选不可复制
让整个网页不可复制不可选:<script type="text/Javascript">document.oncontextmenu=function(e){return false;};document.onselectstart=function(e){return false;};</script><style>body{-moz-user-sel...原创 2018-02-17 21:24:29 · 562 阅读 · 0 评论 -
设置网页标题图标
<link rel="shortcut icon" type="image/x-icon" href="<%=path%>/login/snow.ico" />原创 2018-02-17 21:25:38 · 348 阅读 · 0 评论 -
jsp title和body 中文乱码
解决方案:1、里面的<%@ page charset=" %> 要设置成utf-82、同时meta要设置成utf-83、同时 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />要在title标签前面...原创 2018-02-17 22:33:34 · 566 阅读 · 0 评论