- 博客(43)
- 资源 (7)
- 收藏
- 关注
RSS订阅
原创 技术日报分享
平时在浏览各类文章时，看到一些比较有意思或者好的会记录下来做一个分享，希望让自己拓展一下认知面，也希望对大家有一些帮助。分享以前端技术体系为主要分享课题，会有各类文章、新闻、工具等。点击这里查看：传送门欢迎大家讨论和star...
2020-10-23 09:56:41
178
原创 vue-ace 代码编辑器
目录Ace Editor相关网址实现效果具体实现使用Ace EditorAce是一个功能非常强大的编辑器。它实现了语法着色，缩进，代码提示功能。且具有大量的主题，支持大量语言。但是官方并没有提供vue的官方版本，不过跟 vue 集成的步骤并不复杂。相关网址1、官方地址实现效果具体实现1、首先需要执行命令 npm install ace-builds -S 安装依赖2、创建一个名称为 codeEditor.vue 文件，代码如下<template> <div cl
2020-09-30 10:57:02
8178
6
原创 wicket API 解读
在前端开发中，可能也会有空间数据转换的场景。而 wicket 就是一个轻量级、可在前端使用、提供了基础转换的能力。主要用于在WKT 和各种客户端地图框架数据之间进行转换，地图框架可以是Leaflet 、Google Maps API 、ESRI ArcGIS JavaScript API 、高德AMap 等。它主要提供了读、写、合并、GeoJson与WKT互转等方法，如果你的业务中刚好有类似的需求，那么你可以选择使用wictek 。
2023-02-15 11:09:20
546
原创 react中css引入构建失败问题
如下该项目使用`vite` 打包，构建时有如下错误，原因是依赖中有使用波浪线的形式引入，vite不能识别。解决方式是添加alias。同时，对于webpack构建时，对于不写波浪线引入css时，可能出现依赖文件找不到的问题，原因是css-loader的版本问题。例如我遇到的业务中使用了sass-loader，8.x的版本必须要使用 ~，否则无法正常编译，10.x的则正常。......
2022-07-13 10:47:47
1281
原创 react中使用web worker
Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。一、Web Worker 具体用法import React, { Component } from 'react';import worker_script from './worker-script';export default class PageHome extends Component { constructor(props) {
2021-07-15 20:43:38
3475
1
原创 react中类组件与函数式组件ref使用
在某些场景中，我们可能需要通过ref来实现某些功能，比如父组件调用子组件的方法。父组件为类组件 import React, { createRef } from 'react';import ClassChild from './ClassChild.jsx';import FunChild from './FunChild.jsx'; export default class DemoLayout extends React.Component { constructor()
2021-07-14 17:52:14
2226
原创 ERROR: Cannot uninstall ‘requests‘. It is a distutils installed project and thus we cannot accuratel
ERROR: Cannot uninstall 'requests'. It is a distutils installed project and thus we cannot accurately determine which files belong to it which would lead to only a partial uninstall.解决方法：pip安装airtest时，报错解决方式，执行命令pip install --ignore-installed re
2020-12-01 14:15:55
797
原创 vscode code-runner运行报错
问题在vscode中使用 Code Runner 直接执行js脚本报如下错误‘code-runner.run’ not found问题发生这个问题的原因是micromatch引起的解决方式1、首先找到扩展安装路径C:\Users(用户)\Administrator(你的用户名).vscode\extensions2、打开formulahendry.code-runner-0.9.10/out/src/codeManager.js3、把以下位置的代码注释掉，禁用micromatch
2020-11-04 11:14:05
2597
4
原创 vue中使用layzr.js实现图片懒加载
vue中使用layzr.js实现图片懒加载文章目录vue中使用layzr.js实现图片懒加载前言一、Layzr.js是什么？二、使用步骤1.引入库2.设定图片3注意事项前言什么是懒加载：懒加载是一种网页性能优化的方式之一，它能极大的提升用户体验。比如图片加载一直是影响网页性能的主要元凶，一张图片超过几兆已经是很经常的事了，尤其是图片量大页面卡顿更明显。如果每次进入页面就请求所有的图片资源，可能等图片加载出来用户也早就走了。所以，我们需要懒加载，进入页面的时候，只请求可视区域的图片资源。懒加载的原
2020-10-21 15:56:49
268
原创 如何解决windows系统错误1079：此服务的帐户不同于运行于同一进程上的其他服务的帐户
防火墙出现无法启动的情况时，可以参考如下操作方式操作地址另，在操作完成之后重新启动防火墙服务时如若还有错误，还应进行如下操作：1、单击开始，在搜索中输入regedit并回车2、展开至HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\SharedAccess\Parameters\FirewallPolicy3、执行上述操作4、Win+R输入cmd，进入命令行，netsh advfirewall reset （有些系统是netsh f...
2020-10-20 17:31:09
7655
5
原创 基于vue-cli3.x脚手架下打包的spa项目缓存机制方案
基于vue-cli3.x脚手架下打包的spa项目缓存机制方案欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所
2020-07-08 11:03:08
336
原创 页面中动态插入css插件
在某些应用场景中我们需要动态的插入css样式字符串，比如在项目中使用了第三方的UI组件库，有时候需要动态配置来改变该组件的部分样式，同一组件可能有多种不同样式的时候，这时候动态插入css样式就派上用场了。这里也是推荐一个插件，appendStyleCss使用方式也很简单首先安装依赖npm install append-style-css -S在页面中引入import appendStyle from 'append-style-css'最后就是使用该方法，插入css
2020-06-17 14:40:44
521
原创 html5 video视频播放时自动全屏，播放完时自动退出全屏
直接上代码注：这里是在vue中使用的，根据需要自行调整<template> <video ref="myVideo" class="w-100 h-100" controls="controls" :src="videoUrl"></video></template><script>export default { name: 'video', mounted() { const myVi
2020-05-09 17:26:43
5644
原创 h5开发小魔法点
1、meta标签设置<meta name= "viewport" content= "width=device-width initial-scale=1 minimum-scale=1 maximum-scale=1">设置当前viewport的宽度等于设备的宽度phys.width，device-width: 一般我们所指的宽度width即为phys.width，而d...
2020-04-17 11:07:00
260
原创 echarts自定义renderItem柱状图，每个系列柱子数不一样
话不多说，先上图业务需求是，在【前期库存中】，显示四年的数量；后面的1-12月每个系列中最多显示两个柱子。在echarts官方实例中，系列的数量是由 series 数组中的数量决定的，也就是说该数组中有几个数据项，就有几根柱子，但是每个系列项的柱子数是一样的。这样是不满足我的需求的。所以接下来就要开始寻找其他解决方式。后来发现了echarts提供了自定义的渲染方式，series-c...
2020-04-11 11:44:02
18753
21
原创 IE浏览器http请求,中文传参报400错误
近日在测试中，使用IE浏览器提交某个参数为中文的数据时，接口报400错误，但是在谷歌浏览器是没有问题的。分析问题的过程，大概是一下几步：1、首先，HTTP 400错误，问题原因一般是前端提交数据结构与服务端不符，或者数据类型不符；2、测试时发现，传入非中文的参数是不报错的，只有参数为中文时会报错；3、按照这个思路，查询了一下服务日志，remark字段的编码格式如下图，而在c...
2019-10-18 13:51:20
2308
原创 threejs加载完成之后，input输入框无法输入的问题，无法获取焦点
最近在使用threejs时发现，3D图加载完成之后输入框都无法获取焦点，多处查询发现，在使用OrbitControls时有第二个参数，对于官方文档的描述是这样：OrbitControls( object :Camera, domElement :HTMLDOMElement)object: (required) The camera to be controlled. The ...
2019-06-24 17:34:12
2163
3
原创 js递归遍历树形json数据，根据关键字查找节点
var nodes = [{id:1,name:1,children:[{id:4,name:4}]}]实现方式//递归实现//@leafId 查找的id，//@nodes 原始Json数据//@path 供递归使用function findPathByLeafId(leafId, nodes, path) { if(path === undefined) {...
2019-06-12 20:01:59
25929
5
原创 前端生成下载文件，兼容浏览器写法
通过获取后端接口，返回二进制内容，前端根据二进制数据生成文件这里以excel为例，具体生成文件可以修改文件名即可API_SYSTEMSET.logDownload(param).then(data => { let content = data let filename = '名称.xls' const blob = new Blob([content])...
2019-05-13 11:31:37
876
原创 element-ui中el-input数字和小数输入
oninput ="value=value.replace(/[^\d]/g,'')"//只能输入数字oninput ="value=value.replace(/[^0-9.]/g,'')"//只能输入数字和小数
2019-04-01 10:22:06
28707
2
原创 vue项目前端node部署方式
前端在开发完成之后，首先需要部署，然后才能访问。当然打包部署的方式有很多种，这里简单介绍一下使用vue开发时，前端简单进行打包并部署的方式，方便快捷，毫不费力。首先在根目录下增加两个文件，分别是server.js和webpack-server-config.js，如图所示其中，server.js中内容如下：const express = require('express')...
2019-04-01 10:20:32
2907
原创 在 vue 的幸福国度，当 v-if 遇见 v-for
在vue这个幸福国度中，可惜的是v-if 遇到 v-for 注定不会有好的结果。更狠的是，我们永远不要让它们在一个地方遇见（不要把 v-if 和 v-for 同时用在同一个元素上）一般我们在两种常见的情况下会倾向于这样做：为了过滤一个列表中的项目 (比如 v-for="user in users" v-if="user.isActive")。在这种情形下，请将 users 替换为一个计算属...
2019-03-01 11:48:43
349
原创 编写现代 JavaScript 代码的5个小技巧
平时写代码和参考其他大神的一些代码的一些总结。1 Array.includes 与条件判断一般我们用判断或用 ||// conditionfunction test ( fruit ) { if ( fruit == "apple" || fruit == "strawberry" ) { console.log("red"); }}如...
2019-01-15 18:05:54
192
原创 vue浏览器全屏实现
项目中有要实现全屏的需求，而且全屏和非全屏的状态有差异。1、项目中使用的是sreenfull插件，执行命令安装npm install --save screenfull2、安装好后，引入项目，用一个按钮进行控制即可，按钮方法如下：toggleFullscreen() { if (!screenfull.enabled) { this.$message({ ...
2018-11-06 11:43:01
10148
原创 关于npm引入gojs以及去除水印的方法
最近项目中有需要画图的需求，挑来挑去还是选了go.js。虽然这个画图工具的效果略显老套，但是总起来说api还算友好，可以自定义自己想要的东西，灵活性也较好。但是但是，在项目开始之后想要npm安装一直错误，安装不上，执行的命令是npm install gojs --save检查多次，也没有发现问题，很是忧伤。最后执行下面的命令就ok了，别我问我为什么，我也不知道-/\-npm i gojs --sa...
2018-05-16 16:32:15
5281
18
原创 ES6之----数组的扩展
1 扩展运算符扩展运算符是三个点（...）。可以将一个数组转化为用逗号隔开的参数序列。console.log(...[1,2,3])// 1 2 3console.log(1, ...[2,3,4], 5)// 1 2 3 4 5该运算符主要用于函数调用function add(x, y) { return x + y}const number = [2, 50];add(...n...
2018-04-28 11:06:57
209
原创 前端npm环境服务
开发的npm registry 管理工具 nrm, 能够查看和切换当前使用的registry, 使用起来还是很方便的，可以随意切换，包括自定义一些私有npm服务的，还是很有用的。安装npm install -g nrm安装 nrm NPM registry 管理工具添加nrm add testnpm http://test.com:4873/增加私有npm服务器查看nrm ls npm ---
2018-03-05 18:04:25
703
原创 Tortoisegit ssh拉取远端代码
### 前述git获取远端代码的方式主要有两种https和ssh，这两种方式的主要区别在于：使用https url克隆会比较方便，复制https url然后到git Bash里面直接用clone命令克隆到本地就好了，但是每次fetch和push代码都需要输入账号和密码，这也是https方式的麻烦之处。而使用SSH url克隆却需要在克隆之前先配置和添加好SSH key，因此，如果你想要使用SSH ...
2018-03-01 10:39:13
15071
原创 CSS盒子垂直水平居中
居中的方式有多种，根据喜好自己选择：1、定位 盒子宽高已知， position: absolute; left: 50%; top: 50%; margin-left:-自身一半宽度; margin-top: -自身一半高度;2、table-cell布局 父级 display: table-cell; vertical-align: middle; 子级 margin: 0 auto;...
2018-02-27 18:17:39
229
原创 vue项目中引入noVNC远程桌面
注：看大家都在问按照以下方式会报错，原因是版本问题。看API文档新的版本，一些传参形式发生了变化，可能需要自己按照新版本的文档进行完成。如果不想改的话，我这里用的版本是0.6.11 首先，先简单介绍一下概念。VNCServer 是一个为了满足分布式用户共享服务器资源，而在服务器开启的一项服务，对应的客户端软件有图形化客户端 VNCViewer，而 noVNC 则是 HTML5 VNC 客户...
2018-01-23 18:03:09
12783
12
原创 js数据类型详谈
javaScript有七种内置类型未定义（undefind）空值（null）数字（number）字符串（string）对象（object）布尔（boolean）符号（symbol es6新加入）以上除了对象，其他统称为‘基本数据类型’我们可以通过typeof来查看数据类型，返回的是类型的字符串值。有意思的是，这七种类型与它们的字符串值并不完全相等。typeof undefind === 'unde
2018-01-19 11:17:15
200
原创 vue-cli打包问题
关于npm run build打包问题在项目中使用vue-cli脚手架搭，由于实际项目问题，与自定义安装的项目目录略有差异。 自定义安装的项目是：test => src => 源码也就是在test项目下，安装node依赖，进入src下，是项目的源码部分。 然后实际项目部分是，test2 => src => vue1、vue2在src目录下是真正的项目部分，
2018-01-15 14:03:23
1077
原创 node-sass安装失败问题
在node 中安装sass依赖总会出现各种各样的问题，第一次遇见这样的问题Cached binary found at C:\Users\ltzhouhuan\AppData\Roaming\npm-cache\node-sass\4.5.3\win32-x64-57_binding.node报了这个错误，大概含义是本地环境发生了一些改变可以手动下载，然后放到nod
2017-10-13 11:14:09
5393
原创 vue 实现表格合并
1 背景本身有vue进行渲染的数据表格，，但是出于整体考虑，需要对相同的列信息进行单元格合并。由于使用的是vue，想到MVVM是要用数据驱动的思想，所以考虑在Model做手脚，而不是渲染出数据来后做DOM操作，当然基本的CSS还是要有的。因此这个方法对所有 数据驱动的框架都有效，比如说Angular和React。最后的实现效果是这样的：2 思路原本的正常表格是这样的：<table >
2017-08-11 10:42:30
6045
11
原创 JSON.parse() 和 JSON.stringify()
语法详解作用：这个函数的作用主要是为了系列化对象的。可能有些人对系列化这个词过敏，其实很简单。就是说把原来是对象的类型转换成字符串类型（或者更确切的说是json类型的）。JSON.parse()JSON.parse() 方法解析一个JSON字符串，构造由字符串描述的JavaScript值或对象。可以提供可选的reviver函数以在返回之前对所得到的对象执行变换。语法JSON.parse(text[,
2017-08-05 10:24:29
375
转载 vue打包后样式会变化
有段时间发现本地npm run dev的时候样式好好的，npm run build后在手机里样式就变了，后面发现是一个插件搞的鬼，修改/build/webpack.prod.conf.js文件：...new OptimizeCSSPlugin({ cssProcessorOptions: { safe: true }}),...重点就是这个cssProcessorOptions
2017-07-31 11:08:17
17713
1
echarts自定义树状图，且每个系列柱子数不一
2020-04-11
gojs去除水印方式
2018-05-18
js jsontree2list list2jsontree方法
2018-05-14
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人