- 博客(86)
- 收藏
- 关注
RSS订阅原创 根据URL模拟点击下载事件
const saveFile = (data: BlobPart) => { var name = new Date().valueOf() + ".zip"; var a = document.createElement("a"); var url = window.URL.createObjectURL(new Blob([data], { type: "application/zip" })); var body = docu...
2020-08-27 00:03:04
474
原创 网络连接失败时添加页面展示，添加方法
window.addEventListener("offline", function() { let title; let content; let language = sessionStorage.getItem("language"); if (language === "en") { title = "Internet connection failed"; content = .
2020-08-26 23:41:01
311
原创 CSS有关
设置隐藏滚动条::-webkit-scrollbar-thumb {display: none;}button中小图标需要垂直居中，给小图标height：100%即可。
2020-08-24 23:05:01
205
原创 解决echarts中饼图标签重叠的问题
饼图中的series有个avoidLabelOverlap属性，avoidLabelOverlap:是否启用防止标签重叠策略，默认开启，在标签拥挤重叠的情况下会挪动各个标签的位置，防止标签间的重叠设为false时：设为true时：
2020-07-27 15:13:13
5329
原创 Echarts饼状图生成内外圈且高度不一致效果
var myChart = echarts.init(document.getElementById("echartsDemo")); let colorsInner = ["#5987BF", "#5ABC9B", "#F6C253"]; let outerColorList = [ ["#3264A4", "#5987BF", "#4272AF", "#3264A4"], ["#4ac99f"
2020-07-27 00:06:07
1454
原创 Mac 下NVM的安装与使用
NVM是什么？NVM是一个用于管理nodejs版本的工具。删除本地node依次在终端执行如下命令：sudo npm uninstall npm -gsudo rm -rf /usr/local/lib/node /usr/local/lib/node_modules /var/db/receipts/org.nodejs.*sudo rm -rf /usr/local/include/node /Users/$USER/.npmsudo rm /usr/local/bin/nodesud
2020-07-15 21:51:29
307
原创 在react中使用react-route-dom路由
1. 安装npm i react-route-dom --save-dev2. 参数解析路由分为两种，分别是：BrowserRouter（服务器路由）：每次路由改变时，会向服务器发送请求，服务器未配置对应的路径指向对应文件时，会导致404情况的出现，因此使用时需要加一层服务器配置（node/nginx），官方跟推荐使用这种方式，因为有更多的方法操控URL。HashRouter（前端路由）：会在路径上添加/#/，/#/后面的所有都不会发送到服务器，对于服务器而言，路径依旧是localh
2020-07-13 18:36:03
278
原创 将代码部署到服务器的几种方式
1.将代码部署到服务器，本质上就是将代码从一个地方（本地 / gitlab仓库）拷贝到服务器的指定目录。因此，要么人工手动拷贝，要么通过一些自动化的手段让机器自己拷贝。2.通过 gitlab + jenkins 自动化部署比较推荐在开发阶段使用这种方式。具体的原理和如何使用参考：利用 gitlab+jenkins 进行自动构建+部署如果是已经存在的老项目，参考上述 wiki 进行配置即可。如果是新项目，推荐使用 CLI 工具来创建项目（使用 create-hobot-app 创建 web 项目），
2020-07-01 19:46:36
17915
原创 前端推荐使用第三方库
功能npm包名参考cookie 操作js-cookiehttps://github.com/js-cookie/js-cookieurl 参数解析qshttps://github.com/ljharb/qs网络操作axioshttps://github.com/axios/axiosmd5blueimp-md5https://github.com/blueimp/JavaScript-MD5图表bizchartshttps://bizchar...
2020-07-01 19:42:02
746
原创 MongoDB可视化软件studio 3t的简单使用
双击进入软件后，点击屏幕中间的open点击new connectname随便填写，server填ip切换到AuThen那页,选择SHA-1填写name，password和DB（database）填好了之后点左下角test connect，点ok,然后点右下角save双击查看删除数据，选择数据右击 Remove Dialog查看详情 右击选择Document下面的Edit Document...
2020-05-22 19:49:41
1480
原创 前端导出csv文件的实现
用npm在项目中安装下面插件:npm install file-saver --save在你要编写项目的文件中导入插件:import FileSaver from 'file-saver'写一个方法逻辑将数据生成csv文件:// 点击批量导出数据生成csv文件 exportList = ()=>{ // 拿到所有的数据 const {data}=this.s...
2020-05-06 10:20:16
885
原创 ES6：Unexpected string concatenation (prefer-template)报错
原因：ESLint推荐用ES6的Template String来拼接字符串，而不能用+号。解决办法：我是字符串部分，${我是参数部分}，我是字符串部分
2020-05-06 09:02:37
6486
2
原创 git将本地项目提交到远程仓库
1、进入项目文件夹，通过命令git init将项目初始化成git本地仓库git init2、将项目内所有文件都添加到暂存区git add .3、对本次的提交进行备注，以便后期版本回退等操作git commit -m ‘xxx’ //xxx是本次提交备注的内容4、在github上新建一个仓库，复制仓库地址，然后使用命令将本地仓库与远程仓库建立连接git...
2020-04-08 22:46:09
426
原创 【React】React.Children.only expected to receive a single React element child报错
原因：Ant Design中 组件内部最外层只能接受一个元素，内部用div包裹即可解决办法：
2020-04-07 19:36:18
4696
原创 Antd中，Form和Select联合使用，导致placeholder不生效
在使用antd的form组件时候，需要对Select组件进行语体示，placeholder，但是写的值并不生效效果如下，并没有生效经检测发现，传入的state中的初始值为空，但组件需要传递的是undefined，所以给state中的初始值设为undefined即可或...
2020-04-07 19:30:27
697
原创 react中实现水印效果
实现的是如下效果，使用的是用户的登录名生成的水印代码如下：（只贴了有关代码）export default class Forum extends React.Component { componentWillMount() { this.getbg('forum') } getbg = (data) => { const watchCa...
2020-03-30 23:06:50
2649
原创 在react中随机生成图形验证码
先看一下效果贴该部分代码// 我的项目中使用了eslint,所以会有些报错，没有使用的下面eslint有关的注释可不必添加/* eslint-disable react/self-closing-comp *//* eslint-disable no-undef *//* eslint-disable prefer-template *//* eslint-disable reac...
2020-03-30 22:19:50
2168
原创 cnpm : 无法加载文件 C:\Users\xiuyu\AppData\Roaming\npm\cnpm.ps1
安装cpnm(安装方式，输入如下命令npm install -g cnpm --registry=https://registry.npm.taobao.org)后，运行cnpm i时遇到错误解决方法：以管理员身份运行power shell；输入set-ExecutionPolicy RemoteSigned 回车再输入A 回车...
2020-03-29 23:38:50
304
原创 html5 video 设置视频
<video width="" height="" controls controlsList="nodownload"> <source src=“”type="video/mp4"/> <source src=“” type="video/ogg"/> <source src=“” type="video/webm"/> &...
2020-03-13 20:18:43
686
原创 react+antd在使用中遇到的问题
1. 图片的引入import Logo from '../../../assets/pirates/favicon.png'render(){ return( <img alt='' style={{ height: '100%' }} src={Logo} /> )}2. 关于tab切换效果第一种export default class Forum exten...
2020-03-01 21:09:02
1151
原创 git使用中遇到的问题
打开git.bash1、配置用户信息git config --global user.name [username]git config --global user.email [email]2、查询用户信息git config --list3、如果push/pull遇到在输入密码是熟错后，就会报这个错误fatal: Authentication failed for解决办法：gi...
2020-02-24 11:31:38
186
原创 canvas实现粒子连线效果
代码如下：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta htt...
2020-01-21 18:23:52
718
原创 黑客帝国-代码雨
黑客帝国-代码雨，代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e...
2020-01-21 18:07:40
1064
原创 vscode插件vscode-reveal 程序员做PPT的必备神器
首先，文件要使用.md后缀名可以使用#空格 来控制文字大小，有点类似与markdown语法幻灯片换页使用---后面跟一个空行的形式可以将幻灯片在网页打开或下载为pdf格式，也可变写变预览还有更多功能有待研究…...
2020-01-13 12:07:14
4750
1
原创 echarts中图例显示
今天使用echarts图时，发现给legend设置了data数据，但并没有显示图例，研究发现是legend中data的数据需要与yAxis中的name一致效果如下：
2020-01-13 11:57:19
4600
原创 Echarte柱状图文字位置
我们在绘制柱状图时，如果想要柱条上显示文字，可以设置如下属性：文字在柱条上的位置是默认居中的，可以通过position属性来设置文字位置echarts bar series下的label position的属性值：inside(自适应，柱状内部中央)top（柱状外的正上方）bottom(柱状外的正下方)left(柱状外的左边)right(柱状外的右边)insideTop(柱状...
2020-01-13 11:47:00
14491
3
原创 css3实现动画闪烁效果
CSS3 animation 属性 网址 代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l...
2019-12-27 16:16:19
2183
原创 moment.js有关
官方文档:moment.js安装moment.jsnpm install moment 其他安装方式见文档在vue中获取当前年月日this.$moment().format('YYYY年MM月DD日')在vue中获取当前星期几this.$moment().locale('zh-cn').format('dddd')星期几默认英文，这种是转换为中文在vue中获取当前时间this....
2019-12-27 11:17:05
1619
原创 canvas实现刮刮卡效果
使用了globalCompositeOperation属性globalCompositeOperation 属性设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上。源图像 = 您打算放置到画布上的绘图。目标图像 = 您已经放置在画布上的绘图。属性如下：source-over 默认。在目标图像上显示源图像。source-atop 在目标图像顶部显示源图像。源图像位于目标图...
2019-12-27 10:31:59
439
原创 Dropdown下拉菜单下的DropdownItem添加点击事件无效
element-ui 或者view UI组件中的Dropdown下拉菜单中的列表添加点击事件时无效，添加.native就可以了即为@click.native=" "
2019-12-25 16:42:09
3562
原创 vscode格式化代码插件配置
在vscode使用过程中，遇到了格式化代码后，很多代码报红的情况，怀疑是插件间起了冲突如果你安装了ElinstVeturPrettier-Code formatter ，这三个插件只需要这份配置就可以通用处理这些插件间的问题：文件-首选项-设置-点击这里打开setting.json文件，复制下面代码进去即可{ // tab 大小为2个空格 "editor.tabSize":...
2019-12-25 14:09:15
12319
2
原创 nodejs写接口-入门
首先默认装好了node环境1、npm init 创建package.json文件；2、创建一个app.js文件,当然别的名字也可以，这个文件是你整个程序的入口。var express = require('express');var app = express();//安装bodyParser后var bodyParser = require('body-parser'); /...
2019-12-23 17:01:00
1542
原创 reactreact创建项目
npm install -g create-react-appcreate-react-app my-app //此处的my-app为文件夹名cd my-appnpm start此时创建完成
2019-12-23 16:21:42
84
原创 vue-cli搭建项目
安装node.js官网下载最新版本安装命令行输入 npm -v 出现版本号即为安装成功安装webpacknpm install webpack -g输入webpack -v 出现相应版本号即为安装成功安装vue-clinpm install vue-cli -g输入webpack -V 出现相应版本号即为安装成功（该处为大写字母V）通过vue-cli初始化项...
2019-12-23 16:21:07
73
原创 3-echarts使用中遇到的问题
第一步引入开发包；第二步，普通初始化图表；var myChart = echarts.init(document.getElementById("echart"));第三步，设置option属性，来给图表设置数据option是数组元素，tooltip：提示框，legend图例，calculable可设置是否拖拽，series设置数据（data类型也为数组类型）其他重新渲染...
2019-12-17 17:00:54
160
原创 使用canvas中的贝塞尔曲线绘制弧形等
ctx.quadraticCurveTo(x1, y1, x, y);从上一点开始绘制一条二次曲线，到(x, y)为止，并且以(x1, y1)作为控制点ctx.beginPath();ctx.strokeStyle = 'green';ctx.lineWidth = 4;// 起始点ctx.moveTo(100, 400);//（从上一点）ctx.quadraticCurveTo(2...
2019-12-12 17:35:12
252
原创 在同一个canvas中绘制多个不同形状，颜色的图形
今日踩坑在同一个canvas中绘制多个不同形状，颜色的图形时，后面的总是将前面的颜色覆盖解决方法：beginPath() 和 closePath()这两个函数可以起到类似 <div> 的作用，用它来把每个图形包围，就可以绘制不同颜色的图形了。例如 // 绘制矩形 ctx.beginPath() ctx.rect(486, 455, 58, 4...
2019-12-12 16:00:58
3873
原创 vue : 无法加载文件 C:\Users\lihongjie\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 htt ps:/go.micr
以管理员方式打开powershell运行命令：set-ExecutionPolicy RemoteSigned出现：执行策略更改执行策略可帮助你防止执行不信任的脚本。更改执行策略可能会产生安全风险，如 https:/go.microsoft.com/fwlink/?LinkID=135170中的 about_Execution_Policies 帮助主题所述。是否要更改执行策略?[Y]...
2019-11-29 14:54:00
971
原创 小程序入门
小程序介绍以及优势小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。任何一个普通的开发者，经过简单的学习和练习后，都可以轻松地完成一个小程序的开发和发布。优势：入口众多。在微信中，小程序拥有众多入口，例如附近的小程序、小程序码、分享、发现-小程序等五十多个的入口。这些入口有助于企业更好的获取流量，从而进行转化、变现。使用便捷。用户在使用小程序...
2019-10-23 20:19:30
178
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人