技术操作技巧
张贺_
合抱之木,生于毫末;九层之台,起于累土;千里之行,始于足下
展开
-
windows下使用Linux
window 下安装 Linux 子系统windows应用商店下载 Ubuntu配置 控制面板–》程序与功能–》启动或关闭Windows功能 勾选 适用于Linux的Windows子系统,重启。安装完成Ubuntu即可在window下使用 linux连接到Linux 服务器连接到服务器 ssh [email protected]输入密码???进入目标文件夹cd /usr/share/nginx/frontEnd/dsy-web删除目标文件夹rm -rf dist断开连接e原创 2022-01-13 16:13:02 · 1407 阅读 · 0 评论 -
npm login超时或npm publish报权限错解决方案
最近研究脚手架,在npm时遇到问题,记录一下心得。npm login 长时间无响应或如下报错错误原因:npm 使用了淘宝镜像导致的。解决方法:切换源为npm考虑到我们npm 下载时候需要淘宝镜像,所以需要在镜像间切换。方法:全局安装nrm小工具做快速切换npm install -g nrm nrm use taobaonrm use npm然后再登录 npm:npm login根据提示输入用户密码及邮箱即可。查看登陆信息:npm who am i问题解决。...原创 2021-04-29 19:23:48 · 3067 阅读 · 0 评论 -
el-select组件的options条数过多时的解决方案
业务场景当使用el-select组件时,如果options数量过多,会存在的弊端:页面渲染出大量el-option节点,会导致页面卡顿甚至卡死,用户体验极差。选择时条目众多,查找困难。本次我遇到的场景是options数量为6-9千的情况。解决思路从总options中取出固定条目的小option(renderOption)用于页面渲染,利用el-select提供的filter-method方法进行搜索过滤,在搜索时用过滤结果更新renderOption。代码实现下面是vue的组件封原创 2020-06-11 14:12:13 · 5501 阅读 · 6 评论 -
代码编辑器插件:Monaco Editor的基本使用
安装1、monaco-editor和monaco-editor-webpack-plugin安装npm install monaco-editor --save-devnpm install monaco-editor-webpack-plugin --save-dev2、配置vue.config.js(vue-cli3.0需在根目录中新建)const MonacoWebp...原创 2020-04-22 13:55:21 · 5842 阅读 · 0 评论 -
element-ui中el-select下拉框选项过多的优化方案
el-select中options数据超过3000条就会造成前端页面明显卡顿,本次我的遇到的业务场景数据是近2w条,因此在不优化的情况下页面压根无法使用,下面给出我的优化过程。一种优化思路:element-ui的select有一个remote-method,支持远程搜索,我们让服务端支持一下不就可以了,当然这是一种解决的方案。但是有时候这种方法对我并能够不适用,因为这样会出现回显问题,回...原创 2019-11-25 11:08:34 · 18779 阅读 · 5 评论 -
js通过html2canvas,jspdf,canvg来对网页进行截图生成pdf
通过html2canvas,jspdf就能够生成截图以及pdf,但是如果对图表(svg)就需要canvg来转换svg生成为图片,再插入到pdf里。1.html2canvas用法:首先需要引入这两个文件,最新的可以去git下载示列:function down2(){ var str = $('#example-2'); //console.log(str); htm...转载 2019-10-25 18:04:29 · 1019 阅读 · 0 评论 -
前端对图片处理的方法总结
将以base64的图片url数据转换为Blob 可以直接上传文件/** * 将以base64的图片url数据转换为Blob 可以直接上传文件 * @param urlData * 用url方式表示的base64图片数据 */function convertBase64UrlToBlob(urlData){ var bytes=window.atob(urlData.spl...原创 2019-10-24 19:06:23 · 379 阅读 · 0 评论 -
[Vue warn] : Props with type Object/Array must use a factory function to return the default value.
解决方案:把props中的props:{ obj:{ type:Object, default:{} },},修改为props:{ obj:{ type:Object, default:()=>{} },},原理:系统报错Invalid default value ...原创 2019-01-29 18:36:16 · 11875 阅读 · 5 评论 -
vue中删除数组(对象)的某一项
delete和Vue.delete删除数组的区别:delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。Vue.delete直接删除了数组 改变了数组的键值。 var a=[1,2,3,4] var b=[1,2,3,4] delete a[1] console.log(a) this.$delete(b,1...原创 2019-02-25 10:38:19 · 39229 阅读 · 0 评论 -
vue中watch的使用
watch:{ obj:{ handler (v) { //逻辑处理 }, deep:true, //若obj是对象或数组,要加deep:true才能监听到 immediate:true, //添加本条为立即执行侦听 ,即从obj的默认值开始侦听 }},数组中内容改...原创 2019-02-20 11:35:25 · 192 阅读 · 0 评论 -
vue用命令直接修复ESLint
步骤如下:1、打开package.json,在script里找到修改为:(中间插入--fix)"lint": "eslint --fix --ext .js,.vue src test/unit",2、终端运行npm run lint修改代码样式3、最后终端运行npm run dev就不会报ESLint错误了。...原创 2019-04-17 17:53:52 · 1702 阅读 · 0 评论 -
vue init webpack-simple与vue init webpack的区别
vue init webpack-simple这样的方式适合小项目,vue init webpack这样的方式适合中大型项目;两种方式初始化Vue-Cli的项目的目录差别比较大,你可以发现使用vue init webpack这样的方式来初始化项目,默认提供了很多的webpack的配置,也更加的方便你对代理(跨域)、最终打包资源放到服务器什么目录、以及js、css、img和项目在打包过程等优化的...原创 2019-04-17 18:28:08 · 3969 阅读 · 0 评论 -
词云解决方案:js2wordcloud
JavaScript生成词云图。基于wordcloud2.jsGitHub传送门:Js2WordCloudInstallation:通过script标签引入:<script src="dist/js2wordcloud.min.js"></script>npm安装:npm install js2wordcloud --saveUsage:v...原创 2019-04-18 16:46:51 · 4721 阅读 · 5 评论 -
UEditor的使用
一、下载包:从Ueditor的官网下载1.4.3.3jsp版本的Ueditor编辑器,官网地址为: http://ueditor.baidu.com/website/下载解压后会得到如果下文件目录:将上述Ueditor文件夹拷贝到vue项目的static文件夹中,此文件夹为项目的静态服务文件夹;二、修改配置在ueditor.config.js中修改如下代码:/...原创 2019-04-28 14:48:47 · 3007 阅读 · 0 评论 -
chrom下修改input输入框默认背景色
chrom浏览器的自动填充表单功能Autofill 在使用时,填充的表单输入框会变成奇葩默认的黄色底色,这对网页整体的观感造成了很大影响,而且处理起来很麻烦。分析:之所以会出现这种情况是因为 chrom会自动为 input 增加以下样式:input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofi...原创 2019-08-22 18:05:21 · 5194 阅读 · 0 评论 -
复制控制台中打印的json对象
1. 右键点击需要处理的对象,会出现Store as global variable,点击;2. 选择之后会发现控制台出现以temp开头的变量3. 执行 copy(变量)。如copy(temp1)。 注意是对象,不是字符串。4. 按Crtl+V就会发现对象已经在你的剪切板了。...原创 2019-09-16 14:01:40 · 957 阅读 · 1 评论 -
iview中关闭模态框处理表单验证提示信息
首先给模态框设置显示属性v-model,模态框中需要验证的表单取名字ref:确定与取消绑定事件最后需要对isShow进行监听,如果模态框状态发生变化,就reset...原创 2019-01-14 20:57:42 · 2990 阅读 · 0 评论 -
iView中DatePicker设置开始时间和结束时间约束
vue代码:<FormItem label=""> <Row> <Col span="11"> <DatePicker type="date" :options="startTimeOptions" @on-change="startTimeChange" placeholde原创 2019-01-14 20:50:06 · 5502 阅读 · 0 评论 -
iView中DatePicker的表单验证问题
1. type="datetime"的验证方式:<DatePicker v-model="form.chooseDate" placeholder="选择日期" type="datetime" format="yyyy-MM-dd"/>chooseDate: [{required: true, message: '日期不能为空!', trigger: 'blur',原创 2019-01-24 17:29:17 · 8920 阅读 · 8 评论 -
Sublime Text3下载及插件安装方法详解
下载与安装打开官网下载链接http://www.sublimetext.com/3,下载Sublime Text 3 插件安装首先安装Package Control: Package Control为插件管理包,所以我们首先要安装它。有了它,我们就可以很方便的浏览、安装和卸载Sublime Text中的插件。方法:按Ctrl+ `(此符号为tab按键上面的按键) 调出console,输入下面代码回...原创 2018-06-01 23:20:32 · 3840 阅读 · 0 评论 -
前端常用工具操作技巧
1.VS Code栏1.快速打开侧边栏 ctrl+b2.打开收缩终端 ctrl+`(是tab上面的那个点键)2.自定义插件快捷键:文件>首选项>键盘快捷方式3.选中所有 ctrl+shift+L4.vscode下选中多行:win 下 alt + shift +鼠标拖放5.设置保存格式化:文件->首选项->设置edit.Format On Save ...原创 2018-07-23 16:32:50 · 198 阅读 · 0 评论 -
京东放大镜效果的实现
放大镜效果的实现原理就是按照比例实现元素移动,因此,一定要搞清楚比例关系。首先进行布局 <div class="wrap"> <div id="spic"> <img src="images/2.jpg" alt=""> <div id="sf&qu原创 2018-08-10 10:49:34 · 1048 阅读 · 0 评论 -
js类型检测方式
从最垃圾的方式到最牛逼的方式依次排列为:typeof --> constructor --> instanceof --> toString1.typeof检测对象类型太过模糊,function、object、array类型都会返回object,所以此方法垃圾,但实用性很强,气场很强大2.constructor 实例对象的构造函数 (实例对象.constructo...原创 2018-08-14 21:57:03 · 179 阅读 · 0 评论 -
js中搞定兼容常用的方式总结
1.用if ...else...判断2.|| 符号3.三目运算符4.try...catch... finally原创 2018-08-20 19:18:46 · 154 阅读 · 0 评论 -
js中的callback与promise
在工作中遇到了promise上的问题,搞定之后静心做一下总结。首先,js中的callback与promise的区别实际就是宽度和深度的区别。1.回调函数:函数当参数,传递另外一个函数定义:在JavaScript中,回调函数具体的定义为:函数A作为参数(函数引用)传递到另一个函数B中,并且这个函数B执行函数A。我们就说函数A叫做回调函数。如果没有名称(函数表达式),就叫做匿名回调...原创 2018-08-23 21:55:03 · 8299 阅读 · 2 评论 -
跨域的解决方法总结
首先谈一下跨域:要了解跨域,必须要知道浏览器的同源策略,同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说,受到请求的 URL 的域必须与当前 Web 页面的域相同。同源策略是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。所以,我们跨域就是由于同源策略的...原创 2018-08-24 10:09:21 · 228 阅读 · 0 评论 -
gulp环境配置与使用方法手册
首先gulp的运行环境是node.js因此要先安装node.js : node下载传送门 首次使用gulp要先 全局安装 gulp:(摘自官网)$ npm install --global gulp作为项目的开发依赖(devDependencies)安装:$ npm install --save-dev gulp注意:这一步必须在项目里面安装:在项目根目录下创建一个名为...原创 2018-08-31 17:32:17 · 780 阅读 · 0 评论 -
sass环境配置
1.sass编译环境依赖于ruby 先下载ruby 本次下载的是 rubyinstaller-2.3.1-x64版本 安装2.将sass文件下载到本地 cmd 命令: get install 路径 :路径为本地sass文件路径 3.测试是否安装成功:ruby -v gem -v sass -v 查看安装的sass版本号4. 将...原创 2018-08-29 19:43:36 · 2353 阅读 · 0 评论 -
sass报错Invalid GBK character "\xE5"解决方案
今天在使用sass的时候发生错误:看得出是文档编码错误,在网上搜索解决方案,都说头部添加@charset "utf-8";即可;然而我头部添加有仍然会报此错误,后来找到答案:需要配置ruby环境:具体方案:找到ruby安装目录,我的是默认安装路径修改sass.ruby文件(编辑器打开):在所有的require XXXX 之后添加一行代码:Encoding.defa...原创 2018-08-29 21:54:21 · 2880 阅读 · 2 评论 -
webpack4.0配置及快速进行react模块化开发
webpack 4 入口出口的零配置新建一目录webpack-4 运行npm init -y 运行命令npm i webpack wepback-cli -D 修改package.json文件,加入 "scripts":{"build":"webpack"} 运行命令npm run build 出现入口文件模块没找到的错误的提示(webpack会自动查找入口目...原创 2018-11-15 09:02:21 · 409 阅读 · 0 评论 -
tomcat的"ctrl + c" 问题(启动假死状态)
用startup.bat启动tomcat之后,处于假死状态,服务无法开启;解决办法:是右键点击tomcat窗口,属性-》选项-》去掉“快速编辑模式”的勾。原创 2018-12-20 09:42:22 · 2143 阅读 · 0 评论 -
iview使用总结
1.表单验证:表单添加refs属性;绑定rules属性;给需要验证表单项添加prop属性,并且在项中进行数据绑定v-model:定义验证规则:点击时进行验证:注意点:点击取消时进行表单重置;验证规则可以不添加trigger: 'blur' 属性2.日期在双向绑定之后格式为:2018-12-22T16:00:00.000Z 想要的格式为2018-1...原创 2018-12-18 21:15:06 · 442 阅读 · 0 评论 -
如何快速完全删除node_modules
1.安装npm包–rimrafnpm install rimraf -g2.在cmd指令下,进入所需删除的node_modules文件夹的位置,再输入指令rimraf node_modules3.等待删除完成原创 2019-01-11 11:05:15 · 10830 阅读 · 0 评论 -
iview的Render渲染
h('Tooltip', { props:{ content:"业务修订", placement:params.index>2?'top-end':'bottom-end' }, }, [...原创 2019-01-07 20:56:05 · 859 阅读 · 0 评论