我也要用
前端开发
拿我格子衫来
积土成山，风雨兴焉；积水成渊，蛟龙生焉；积善成德，而神明自得，圣心备焉。故不积跬步，无以至千里；不积小流，无以成江海。骐骥一跃，不能十步；驽马十驾，功在不舍。锲而舍之，朽木不折；锲而不舍，金石可镂。蚓无爪牙之利，筋骨之强，上食埃土，下饮黄泉，用心一也。蟹六跪而二螯，非蛇鳝之穴无可寄托者，用心躁也。
-
原创 设备拓扑图
开发需求背景今天领导派了一个小活，要求我将公司的物联网平台的网络拓扑图画出来。做一个数据展示的页面，集成到现有的iot平台上。说到拓扑图，大家都也都比较清楚，能够清晰地表示网络链路的链接关系。官方一点的解释是：网络拓扑结构是指用传输媒体互连各种设备的物理布局（将参与LAN工作的各种设备用媒体互连在一起有多种方法，但是实际上只有几种方式能适合LAN的工作）。网络拓扑图是指由网络节点设备和通信介质构成的网络结构图。一般的拓扑图都是这样子的还有这一种这些设计图都是架构师使用软件画出来的，数据都2021-04-04 23:53:22
40
1
-
原创 Delete `␍`eslint(prettier/prettier) 错误的解决方案
由于系统平台不一致，对换行的处理有所区别而导致的。方案一yarn run lint --fix方案二配置.prettierrc文件"endOfLine": "auto"最优方案git config --global core.autocrlf falsetip：git全局配置之后，你需要重新拉取代码。参考该文章 https://segmentfault.com/a/1190000021803437...2021-03-31 10:15:47
414
0
-
原创 使用echarts画设备拓扑图
开发需求背景今天领导派了一个小活，要求我将公司的物联网平台的网络拓扑图画出来。做一个数据展示的页面，集成到现有的iot平台上。说到拓扑图，大家都也都比较清楚，能够清晰地表示网络链路的链接关系。官方一点的解释是：网络拓扑结构是指用传输媒体互连各种设备的物理布局（将参与LAN工作的各种设备用媒体互连在一起有多种方法，但是实际上只有几种方式能适合LAN的工作）。网络拓扑图是指由网络节点设备和通信介质构成的网络结构图。一般的拓扑图都是这样子的还有这一种这些设计图都是架构师使用软件画出来的，数据都2021-03-26 15:23:47
177
0
-
原创 几道错误测试题记录及解析
解析 待续。。。。。2021-03-11 11:55:12
33
0
-
原创 Vite2.0搭建Vue3.0应用实践
前言最近Vite2.0很火热，说是要替代webpack作为下一代前端构建工具。上个周末搬完房子仔细研究了一下，照着我们目前的项目环境，尝试搭建了一套基础环境,简单了解了Vite2.0的配置，以及各种库的集成。这里对Vite2.0不做过多的介绍，主要优点就是快，快，快。环境配置一条命令创建一个空的vite项目npm init @vitejs/app vite-project在终端,输入以上命令，会让你选择模板。看文章标题我们就知道，我们选择的是vue的模板，这是创建后的文件目录结构，和vu2021-03-04 16:33:12
713
3
-
原创 使用 Tampermonkey 编写高级跨网站自动化任务脚本
文章目录Tampermonkey 介绍官方介绍作用快速安装有关平台TM 的 API 解读，及简单脚本的编写基础 API 的解读基础脚本编写，以修改 CSDN 样式、表单自动填写为例高级 API 应用程序接口高级脚本的编写分析 技术方案 以 M2C 为例总结Tampermonkey 介绍官方介绍为了照顾读者中一部分对 Tampermonkey（国内成油猴，以下都简称 TM）不熟悉的读者，这里我借助官方对 TM 的介绍和教程帮助入门用户做以下介绍。Tampermonkey 是一款免费的浏览器扩展和最为2021-02-22 11:57:41
284
0
-
原创 如何快速了解一个新的前端项目？
庖丁解牛 游刃有余在接受一个新的项目后，要想快速了解它，就需要一种抽象思维进行剥茧抽丝，遵守项目搭建的基本规律，犹如庖丁解牛，游刃有余。 以达到可能给快速跟上团队成员的节奏进行开发。下面我就给大家总结一下，拿到一个新的前端项目后，如果进行解牛。这些思路可以延伸到其他项目，java，python，php。正所谓一法通，万法通。让我们开始吧。梳理数据流转数据流转指的是用户页面上的表单数据是创建的，获取表单数据后，调用了什么方法，做了什么验证，拦截，调用的那个http库发起的xhr请求，以及如何后端返2021-02-20 12:31:50
335
2
-
原创 饲料他山之石
https://trackingjs.com/examples/brief.htmlhttps://trackingjs.com/examples/face_tag_friends.htmlhttps://trackingjs.com/examples/color_fish_tank.htmlhttps://trackingjs.com/examples/face_hello_world.htmlhttps://trackingjs.com/examples/color_hello_world.ht2021-01-26 19:10:58
36
0
-
原创 可以直接用于HTML中的特殊字符表 unicode字符集
目录 箭头类 基本形状类 货币类 数学类 音乐符号类 对错号 全都是星星 星座类 国际象棋类 扑克牌类 希腊字母 十...2021-01-23 11:43:03
182
2
-
原创 CSDN自定义模块的高度定制
在只允许使用html，不能使用js和css的情况下，也能把CSDN的自定义模块玩出花来设置字体颜色<font color="#206EF7FF">自定义字体颜色</font></b>使用 font标签加color属性加粗字体视同<b>标签 或者 h1,h2,h3,h4, 标签来显示加粗，加大字体<b>我是<b>标签加粗字体</b><h1>h1标签</h1><h2>h2标2021-01-23 11:35:44
50
0
-
原创 js最简单的 数组转树
一开始我以为数组转树是一个很复杂的事，因为你可能要写一个在树中寻找某个父节点的方法，还要判断哪个是最顶级节点。但是利用下面这个方法，化繁为简。真是牛P。最核心的是map[ownercn].children.push(item) 这句 ，这里的ownercn可以看做是父节点的id。获取父节点idownercn后，使用map[ownercn] 获取父节点。将当前节点push到父节点中。完美。这种方法就是有点占内存。毕竟你还要维护一个map。const result = []const map = {}2021-01-15 19:14:10
106
0
-
原创 svg替换原有伪类图标
将svg文件内容转义之后 加上前缀data:image/svg+xml;utf8, 来装载.el-icon-arrow-down::before { content: url("data:image/svg+xml,%3Csvg t='1610605001506' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='9843' xmlns:xlink='http:2021-01-14 15:06:47
115
0
-
原创 @vue/composition-api 中无法使用ref对象的
当使用@vue/composition-api 去获取一个组件中的ref对象时如<div ref="myref"></div>setup() { const myref= ref(null) onMounted(() => { // 在渲染完成后, 这个 div DOM 会被赋值给 myref ref 对象 console.log(myref.value) // <div/> }) return { myref, }},请2021-01-12 14:25:18
120
0
-
原创 封装antv/g2折线图所遇到的问题及解决办法
使用antv/g2的心得普罗米修斯数据结构转化成图表可用数据源封装折线图渐变编辑图自定义legend自定义tooltip第一次点击lenged筛选图例，发生位移双倍tooltip的解决办法x轴为时间戳时需要注意的几点...2021-01-05 20:21:38
210
0
-
原创 使用腾讯JS-SDK实现汽车沿轨迹行驶
使用腾讯地图开发一个动态移动轨迹路线图最近公司有个地图功能开发，根据车辆的行驶的经纬度，来画出车辆的移动轨迹，并模拟车辆在该线路的行驶过程。效果图大致是这样的。这个伟大的任务交给了我，经过一番调研我决定使用腾讯地图JS SDK来实现这一功能，为什么那？因为使用腾讯地图可以轻松移植到微信小程序里。而且他们最近更新和优化了很多API。诸如，定位，地点搜索，路线规划，个性化地图。简易入门说干就干，首先要使用腾讯地图SDK，必须要先申请appkey，点击链接申请注意类型我们要选择JavaScri2020-12-26 18:03:52
367
2
-
原创 JS实现复制截图，自动显示图片，并上传图片到后端，源码自取
写博客的时候，很多作者会用到截图上传的功能，通过微信截图，QQ截图，直接将截取的图片通过Ctrl+v 复制到编辑器里。编辑器自动将图片上传，并返回图片地址，将图片渲染到页面上。今天我就给大家实现一个这样的功能。主要的知识点是，浏览的paste事件，clipboardData，有关这两个属性的浏览器支持情况paste 一个标准的Dom事件，粘贴事件，会在用户按下Ctrl+v ,或者通过鼠标复制时触发.像其他事件一样，我们可以通过addEventListener为一个Element添加一个粘贴事件的监2020-12-14 11:54:42
240
0
-
原创 使用Nodejs获取自己所有的CSDN博客附源码与效果图
最近一直在想着做一个自己博客的数据统计。做数据统计，报表，必须要先有数据，于是写了一个使用Nodejs获取自己CSDN所有博客链接的程序，并将这些博客数据通过页面展示出来。先看下效果图下面说一下做这个程序的具体历程，一方面是自己的总结，一方面是与大家探讨如何使用自己掌握的技术解决自己的难题分析需求做一个程序前，我们首先要思考的问题是，这个程序是要解决什么问题，如果问题过于大，耗费时间长，代功复杂，那么这个问题是否可以分成几部分来完成，自己有什么技能能够完成这项任务。很多软件之所以没有成功是因为设定2020-12-11 09:51:15
63
0
-
原创 快速下载一个网站
有时候我们需要分析一个网站，或者基于一个网站进行魔改，这个就需要一些特殊的手段将网站源码下载到本地了，其实目前大部分网站都是有代码压缩的，很难去有修改。这里我就教大家如何快速获取一个网站的所有资源，包括源码，图片，js，css。以这个页面为例https://loading.io/spinner/这个页面所显示的图标都是付费的，但我们可以通过一些简单的手段将所有资源下载到本地。其实这并不是什么神奇的技能，有需求，就有供应，就有牛逼的程序来教你做事。第一种CTRL+S浏览器打开https://lo2020-12-11 09:49:59
120
0
-
原创 指引线leader-line库的使用
今天给大家介绍一个用于做指引线的库，叫做leader-line。简单好用，非常容易上手。这个库是用于在二个dom元素之间，画上一条线。可以用作产品详细点补充说明，也有用作相关关系表明。这样说有点空洞，先看一下几个示例。引入与简单使用leader-line库不依赖任何库，你无需引入jquery，vue，或其他的第三方库。一个简单的案例<!DOCTYPE html><html><head> <title>demo</title&g2020-12-11 09:45:10
602
0
-
原创 入门级 HTML 测试题
如何在html中引入样式表？有几种方式？ 块级标签与行内标签有什么区别？分别有哪些？ 显示图片使用哪个标签？标签的属性有哪些？分别有什么作用？ 设置一个链接使用哪个标签? 该标签有哪些属性？ 如何在html中引入JavaScript脚本?有几种方式 head标签中一般都是存放什么内容？ 写一个五行4列的表格 写一个表单，有具有一个输入框，一个密码输入框，一个选择器，一个文本域，一个提交按钮，一个清空按钮。 写一个无序列表和有序列表 在一...2020-11-27 16:24:12
151
3
-
原创 目前挖的坑，等待去填
很多时候，自己总是灵光乍现，然后想要做这，想要做那，想做一个CSS的项目，想做一个Jeknkins的主题，想学习Python，还有读者留言问我，之前写了一篇直播小程序的文章，没写完，就写了个待续。一直没完成。还有一个fabricjs文档及教程的整理，做一个作业批改，宣传海报，作图的vue3.0开发还要学一下Jenkins脚本的编写另外我的使用页面配置GitLab 流水线的功能一直搁置。 总之，想做的事情有很多，就是不能聚焦。不能完美地完成一个。是我一个人的能力有限嘛？ 也是啊。一个中..2020-11-18 18:17:54
129
3
-
原创 万粉博主，回报社区，初心不改，砥砺前行
今天打开博客，看到粉丝已经9994，心里不免感慨，明天就要做万分博主了，算是跨过了一个门槛。以后有人问起有多少粉丝的时候，我也可以骄傲地说已经，我的粉丝已经5位数了。 粉丝增长那么快的原因，一部分是因为CSDN的文章可以设置粉丝可见，必须关注了才能读完整的文章,另一部分是要归功于自己坚持不懈，笔耕不辍地写博客。今年每个月最少7篇起步,其实我也知道，很多博客是没有经过仔细地雕琢的，很多想流水账或者笔记，资料收集，精心雕刻的不多，但这并不会影响我的博客能够帮助很多人，每个星期都有...2020-11-15 22:58:58
138
1
-
原创 大前端教程之Dokcer，部署方式，CICD的解决方案
Dokcer篇 1：Docker的用处2：Docker的三个概念3：Dokcer启动镜像的参数介绍 4：如何制作一个镜像，Dockerfike的编写 命令的讲解 5：使用Docker启动一些常用的项目 前端部署方案1：Nginx，IIS， tomcat2：Dokcer镜像3：OSS CDN 流水线篇 CI/CD流水线部分 1：Gitlab，Runner，流水线，Devops 的概念介绍及安装 2：流水线内容编写，指令讲解，制作一个最简单的流水...2020-11-13 23:27:20
171
0
-
原创 赏析一段优秀的开源sass代码
// Variables$prefix: 'shake' !default;$trigger: 'shake-trigger' !default;// Placeholders%shake { display: inherit; transform-origin: center center;}%paused { animation-play-state: paused; }%running { animation-play-state: running; }@func.2020-11-13 10:10:02
104
0
-
原创 帮助前端同学学习参与开源，如何使用vue开发组件，学习一些CSS的高级技巧
这是一个帮助前端同学学习如何参与开源，如何使用vue开发组件，学习一些css的高级技巧。很多同学咨询我，想要参与前端开源项目,希望能够接触更多的开源的大佬。我想了想，创建了这个项目使用vue搭建。主要功能是将一些css的特效做成一个一个的组件，封装起来。如这样的这些都是使用纯css制作的特效。而我们的任务就是将他们封装成组件，以供大家使用。你可以在整个过程中，如何使用css的高级技巧，如何参与开源项目，如何使用vue封装组件。项目刚刚开始，我们需...2020-11-09 23:00:41
1418
15
-
原创 js处理文本域内容，每一行转化为数组元素存储数据
文本域中的换行符为 \n 使用myValue.splict(`\n`)即可将文本域的内容处理成一个数组2020-11-09 11:04:37
218
0
-
原创 前端创建文件，并写入自定义内容下载
创建一个a标签，往a标签里增加href 与download 属性herf里 需要写入文件的MIME， 文件所对应的MIME 可以查看我的另一篇博客 完整的 mime type 列表这个属性规定文件的格式是否正常，encodeURIComponent 是用于转化文件内容的.download属性可以设置下载的文件名此方法在chrome上测试正常。 最新版的火狐也可以function createAndDownYaml(content) { const element = do...2020-11-06 15:35:33
322
0
-
原创 CSS3 弯道超车
假舆马者，非利足也，而致千里；假舟楫者，非能水也，而绝江河。君子生非异也，善假于物也。前端开发要想实现酷炫的交互效果，选对工具是关键。工欲善其事，必先利其器。这次的Chat带大家分析几个CSS特效库，简单易用,特效MAX。站在前人的肩膀上，每一个人都可以成为大神。“肩膀”已备好了，就看你敢不敢站。点击下方链接参与Chat，让我们在CCS的山路上飙起来。使用 CSS 库实现酷炫的页面交互效果...2020-11-03 10:34:13
146
0
-
原创 一些常用的链接，cdn资源，以及要调研学习的库
https://animate.style/animate.min.csshttps://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js2020-10-29 09:59:40
185
0
-
原创 取消 echart 环形图鼠标放置放大的效果 hoverAnimation: false
鼠标防止环形区域 放大的效果使用hoverAnimation:false,即可取消鼠标悬浮放大的效果取消放大效果https://echarts.apache.org/zh/option.html#series-pie.hoverAnimation2020-10-28 17:57:01
2048
0
-
原创 echart 环形饼图设置中心固定信息
UI图中间的1/3是固定值 不会因为交互而改变使用title 属性来显示中间的信息如 将title 的top 与left位置设置为center 这样title就会居中 在饼形图中心option={ title: { text: `1/3`, top: 'center', left: 'center', textStyle: { color: '#fff', fontSize: '12', }, }}效果图..2020-10-28 15:22:36
519
0
-
原创 CSS资源分享主题的相关链接及资源以备使用
https://www.imooc.com/article/1286https://github.com/chokcoco/iCSShttps://github.com/bansal-io/pattern.css2020-10-30 15:33:20
81
1
-
原创 el-input-number 组件无法修改默认值为空
<el-input-number v-model="num" :min="1" :max="10" label="描述文字"></el-input-number>当num设置为 null 或者 "" 都不能将输入框的值变为空后来发现 将num 设置为undefined2020-10-23 15:11:48
2009
0
-
原创 js 字符串转义 与取消转义
转义序列 字符 \b 退格（BS 或 ASCII 符号 0x08 (8)） \f 换页（FF 或 ASCII 符号 0x0C (12)） \n 换行（LF 或 ASCII 符号 0x0A (10)） \r 回车（CR 或 ASCII 符号 0x0D (13)） \t 水平制表符（HT 或 ASCII 符号 0x09 (9)） \' 单引号 \" 双引号 \& &(and)符号 \\ 反斜杠 .2020-10-20 19:08:56
869
0
-
原创 配置 服务器安装code-server 并通过ip+端口 访问
服务器安装code-servernpm i code-server -g编辑配置文件vim ~/.config/code-server/config.yaml修改 或添加bind-addr: 0.0.0.0:8082再次启动 code-server输入配置文件中的密码 进入 首页2020-10-12 19:43:51
1098
0
-
原创 使用async批量获取博客链接
主要使用了superagentcheerioasync目的获取所有的博客链接，需要的参数有 博客地址以及总页码let superagent = require('superagent')let cheerio = require('cheerio')const async = require('async')let baseBlogLink = 'https://fizzz.blog.csdn.net/' // 博客地址let articleSelector = '....2020-10-10 16:30:04
90
2
-
原创 微服务qiankun中使用子应用复用主应用的ueditor组件，子应用复用主应用组件
以vue-cli 3.0版本生成的单页面项目为例从官方下载ueditor的压缩包后解压到主应用的public目录下如下图安装vue-ueditor-wrap 插件npm i vue-ueditor-wrap -D主应用main.js 中加入这两句import VueUeditorWrap from 'vue-ueditor-wrap'window.commonComponent = { VueUeditorWrap };子应用使用时这样写...2020-10-08 19:35:08
1505
1
-
原创 windows 的vscode 无法链接远程服务器
错误1：Could not establish connection to "xx.xx.x.x"错误2：使用vscode 的remote-server 无法链接服务器，没有输入密码的地方错误3 ：初始化链接失败此外 如果没有输入密码的地方 请将配置1：必须要安装最新版本的git for windows配置2：C:\Users\Fizz\.ssh\known_hosts （自己的路径自己找） 关于该ip的信息删掉配置3: setting.json配置remote.SS...2020-10-07 01:02:00
3731
2
-
原创 create-react-app 教程2 创建一个自定义的组件
紧接上文如果我们要创建一个自定义的组件来使用可以这样做在src下创建components/Button在Button目录下创建 Button.css 和Button.jsButton.js内容import React ,{Component} from 'react'import './Button.css'class Button extends Component { render() { return <div className="Button">2020-09-30 11:30:15
364
0
-
原创 create-react-app 教程1 项目初始化，目录介绍
使用以下命令来创建一个react-appnpm init react-app my-appcd my-appnpm run start默认启动服务的端口为3000启动后访问 localhost:3000 即可看到效果项目目录介绍my-app/ README.md node_modules/ package.json public/ index.html favicon.ico src/ App.css Ap..2020-09-30 11:25:02
447
0