- 博客(41)
- 收藏
- 关注
RSS订阅原创 关于使用axios请求带参数有数组时请求报错
问题描述封装axios请求，使用get请求时突然报错，对比了url发现，参数中有个参数是数组，请求时转url会保留"[“和”]"。当参数中包含数组时, 转换的URL会保留"["和"]"let params = { name: Tom, query: [ { filed: 'age' } ]}原因去查了一下发现，RFC3986标准是保留方括号的然后去axios github上看了下，之前就有人提出过方括号的问题，而且我目前使用的axios版本很低，所以估计当时版本axio
2022-05-19 19:13:03
2317
原创 ant-design-vue vue2图标选择器
基于vue2和ant-design-vue封装的一个图标选择器1.效果图2.代码iconPicker.vue<template> <div> <a-popover :trigger="trigger" placement="bottomLeft" v-model="visible" > <template slot="title"> <a
2021-10-11 16:32:47
2413
1
原创 canvas 的save()和restore()
save()保存当前Canvas画布状态并放在栈的最上面，可以使用restore()方法依次取出。注意：栈是先入后出，每次restore()取出的画布状态都是最近save()的画布状态保存的画布状态有以下这些：当前矩阵变换。参见transform()等。当前剪裁区域。参见clip()。当前虚线设置。参见setLineDash()。以及下面这些属性的值：strokeStyle，fillStyle，globalAlpha，lineWidth，lineCap，lineJoin，miterLimit，l
2021-07-22 11:10:21
2846
原创 VSCode运行TypeScript
1.文档https://www.tslang.cn/docs/handbook/advanced-types.htmlhttp://ts.xcatliu.com/2.步骤全局安装ts-node包javascript npm install typescript ts-node @types/node@* -g直接运行自己的ts文件 tsc index.ts然后可能会报错可能是vscode策略受限制，那么以管理员身份重新打开vscode，到控制台依次输入：get-Execution
2021-07-09 16:06:28
589
2
原创 跨域的理解和解决办法
一、跨域是什么？跨域，指的是浏览器不能执行其他网站的脚本当前页面的url 与 请求url的协议、域名、端口三个其中任意一个不同时都会产生跨域。当前url请求的url是否跨域跨域原因https://www.baidu.comhttps://www.baidu.com/a.js否同源https://www.baidu.comhttp://www.baidu.com/a.js是协议不同，一个是https，一个是httphttps://www.baidu.com
2021-07-05 17:46:24
495
原创 原生JS 文件上传
目的：实现上传图片功能效果：思路：用input标签自带的上传，先隐藏掉，给上传按钮添加点击事件，绑定input的点击事件代码：//html<input ref="img-upload-input" class="img-upload-input" type="file" accept=".png, .jpg" @change="submitUpload"><el-button style="margin-top: 20px" type="primary" @click="h
2021-04-09 15:12:52
3099
原创 mapv的使用记录
1.api2.官方示例3.在leaflet中使用引入：方法一：<script src="http://mapv.baidu.com/build/mapv.js"></script>方法二：cnpm install mapv 导入mapv的依赖import { tiandituTileLayer } from '@/libs/wmtslayer/L.TiandituTileLayer'import 'mapv'import * as mapv from 'mapv'
2021-03-17 10:56:08
1062
原创 vue web视频播放的一个记录
1.播放器选择1.dplayer2.liveplayer（此处选择这个）liveplayer2.安装npm install --save-dev video.jsnpm install @liveqing/liveplayernpm install flv.js3.liveplayer在vue中使用3.1 复制依赖文件安装 copy-webpack-plugin 插件, npm install copy-webpack-plugin@4.6.0,编辑你的 webpack.config.
2021-03-16 10:42:43
282
原创 webgis学习
1.掘金上的一篇webgis介绍：一个页面仔必备的 WebGIS2.常用坐标系汇总：常用坐标系汇总3.WMTS服务初步理解与读取： WMTS4.WebGIS前端地图显示之根据地理范围换算出瓦片行列号的原理：根据地理范围换算出瓦片行列号的原理5.天地图OGC WMTS服务规则：天地图OGC WMTS服务规则6.leaflet 插件Proj4Leaflet：Proj4Leaflet这个Leaflet插件增加了对使用Proj4js支持的投影的支持 。Leaflet内置了对Spherical Mer
2021-01-27 17:13:34
423
原创 前端开发笔记
js全屏插件https://github.com/sindresorhus/screenfull.js/下载$ npm install screenfull引入import screenfull from 'screenfull'使用fullScreen() { let ele = this.$refs.mainIframe this.$refs['btn_full'].addEventListener('click', () => {
2021-01-21 11:19:21
179
原创 vue JS 引用图片
VUE CLI中，静态资源可以通过两种方式进行处理：Vue Cli 文档1.在 JavaScript 被导入或在 template/CSS 中通过相对路径被引用。这类引用会被 webpack 处理。<img src="...">,background: url(...) 和 CSS @import 的资源 URL 都会被解析为一个模块依赖。如url(./image.png) 会被翻译为 require(’./image.png’)<img src="./image.png">
2020-12-17 18:02:33
444
原创 vue symbol svg-sprite-loader 使用图标
原理：symbol + use:xlink:hrefsvg-sprite-loader 生成雪碧图require.context 动态引入文件包装组件1.引入svg-sprite-loader ：npm install svg-sprite-loader2.最安全合理的做法是使用 webpack 的 exclude 和 include ，让svg-sprite-loader只处理你指定文件夹下面的 svg，url-loaer只处理除此文件夹之外的所以 svg，这样就完美解决了之前冲突的问题。
2020-12-11 19:19:04
249
原创 前端风格指南
1.css命名规范特别声明：此篇文章由David根据csswizardry的英文文章原名《MindBEMding – getting your head ’round BEM syntax》进行翻译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax以及作者相关信息——作者：csswizardr
2020-12-11 10:46:42
203
原创 css布局方式，实现四宫格，九宫格，16宫格等切换
1.借助absolute方位值，实现自适应的网格布局，用伪元素间隔absolute+四个方位值撑开局面、float+宽度百分比实现横向排列。高度百分比实现自适应。最外层的父元素使用absolute负责占位，给子元素们把空间拉开，或者固定宽高也行效果图ul{ height: 100%; padding: 0; position:absolute; left:0; top:0px; right:0; bottom:0;
2020-12-03 20:34:31
5256
原创 Vue Axios Consten-Type与文件上传
遇到问题：http请求415错误Unsupported Media Type提交媒体类型不对，然后更改headers的Constent-Type，同时提交的数据类型要是Json字符串const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, timeout: 30 * 1000, transformRequest: [function(data) { // 提交的数据类型要是Json字符串 re
2020-11-13 11:48:43
251
原创 echart legend不显示
1. 检查legend的data是否和series中data的name一致一般是这一步的问题2. 检查自己项目是不是按需引入echarts那么需要加上这个模块的引入import 'echarts/lib/component/legend'
2020-08-17 17:40:10
1639
1
原创 vue leaflet heatmapjs
首先下载包npm install leafletnpm install heatmap.js引入import * as L from 'leaflet'import 'leaflet/dist/leaflet.css'import 'heatmap.js'import HeatmapOverlay from 'heatmap.js/plugins/leaflet-heatmap'创建地图全局变量window.heatmaplayer = null; //定义全局图层变量html部
2020-08-06 18:24:27
634
原创 vue项目打包后，本地预览和简单使用nginx反向代理
使用vue cli3创建项目之后要打包部署，前端自己先预览时，可以试试本地预览和nginx代理1.本地预览就是按照https://cli.vuejs.org/zh/config/ 官方文档说的，用nodejs静态文件服务器npm install -g serve安装serve -s dist 这里的dist是打包生成的文件名然后注意，运行的时候再执行打包命令好像不行，就先 ctrl + c 选择退出2.nginx代理先下载nginx，然后进入nginx目录输入start nginx命令启
2020-08-04 15:29:45
1115
原创 前端开发时的小技巧
1.console.log()**用法1：console.log('abc') // abc用法2，打印全名变量： let a = 5 console.log({ a }) // {a: 5}用法3，高级格式化：let obj = { name: '深深', age: 18, stature: '3m'}console.log('深深的个人资料: %O', obj...
2020-05-07 16:59:41
160
原创 flex学习笔记
flex学习笔记参考参考连接语法：flex: none | auto | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]其中：flex-grow 分配固定空间flex-grow 剩余空间富余时，该如何分配flex-shrink 剩余空间不足时， 该如何分配 ,先设置个最小值，保证空间不足时还能...
2020-03-10 09:52:52
199
原创 js for循环闭包
js使用过程中，当使用for循环时for(var i=0; i<10; i++) { console.log(i)}得到结果当在for里面执行异步操作时，如setTimeout函数for(var i=0; i<10; i++) { setTimeout(() => { console.log(i) }, 300)}得到结果是输出10个10...
2020-02-13 15:09:46
1216
原创 Echart vue 自适应
使用echart时，想要网页尺寸变换时图表自适应。<div class="main"> <v-chart :options="option" class="main" ref="chart"></v-chart></div> window.addEventListener('resize', () => { ...
2020-02-12 11:25:43
148
原创 前端开发环境搭建
参考链接1.下载安装node.js网址：https://nodejs.org/zh-cn/在Windows上安装时选择全部组件，包括勾选Add to Path。然后cmd上查看版本node -vnpm -v然后得到版本号2.安装webpackcmd命令行mac: open terminalwindows：npm install webpack -g3.安装websto...
2020-02-05 21:21:20
134
原创 chrome初始使用方法
1.下载安装2.更改谷歌浏览器的默认搜索引擎设置点击这个图标，然后选中settings参考链接3.设置字体为中文language 下拉选择简体中文，保存重启
2020-02-05 16:40:09
434
原创 vue js 阻止事件冒泡
vue js 阻止事件冒泡本来想用preventDefault来阻止冒泡，但是没有效果于是试了vue.js提供的v-on的事件修饰符，参考博文其中 @click.stop阻止单击事件继续传播<template> <div class="rabbit" ref="rabbit" @click.stop="clickRun($event)"> </div&...
2019-12-13 15:34:11
517
原创 vue使用vue-clipboard2实现复制功能遇到的问题
vue使用vue-clipboard2实现复制功能遇到的问题今天遇到一个功能点需要点击table获取id再通过id获取url，然后复制这个url，然后尝试了各种方法都没有实现。第一个似的就是安装vue-clipboard2，但是搜到的都是很相似的的文章，但是自己试了完全没效果。好在去了官方文档看了https://www.npmjs.com/package/vue-clipboard2总算知道...
2019-11-26 17:36:58
5653
2
原创 学习-《你不知道的JavaScript 中》笔记
学习-《你不知道的JavaScript 中》笔记1.类型七种内置类型：空值 null未定义 undefined布尔值 boolean数字 number字符串 string对象 object（包括函数，数组）符号 symbol除对象外，其他都是基本类型...
2019-11-11 17:23:22
86
原创 CSS 关于子盒子设置margin，溢出父盒子的问题
CSS 关于子盒子设置margin，溢出父盒子的问题问题分析：通常情况下，一个盒子的width=border+margin+padding+width，然后当我的子盒子width设置100%自父盒子时，再设置margin-left或margin-right，就会发生盒子溢出现象。解决方法：方法一：给父盒子设置box-sizing: border-box，设置这个之后，padding mar...
2019-11-07 17:37:55
6068
2
原创 js正则-断言环视例子-数字从右边每三个插入逗号(1,234,567,891)
表达式：(?<=\d)(?=(\d{3})+(?!\d))let str = 123456789let check = /(?<=\d)(?=(\d{3})+(?!\d))/let finalValue = str.replace(check, ',')解释：插入逗号的位置是，左边有数字，右边是三的倍数的数字字符组环视四种情况：(?=…)肯定顺序环视右侧...
2019-11-06 10:45:45
613
原创 Vue Element Transfer 穿梭框使用
实现效果图主要希望能在点击左右交换的时候，能够监听事件，并即时提交至后台首先，使用组件 <h5 class="title">关联菜单元素管理</h5> <div class="block menu-element-block"> <el-transfer ...
2019-10-14 15:13:49
2595
13
原创 js Math生成随机数
Math.random(); // 生成0~1之间的随机数Math.random()*10 + 1; // 1~10的随机数num = Math.random() * 100 + new Date() //随机加上当前date
2019-09-18 12:03:13
338
原创 -webkit-line-clamp html限制段落多行，多余的用...代替显示
-webkit-line-clamp html限制段落多行，多余的用…代替显示 font-size 13px text-overflow ellipsis // 超出部分用'...'代替 -webkit-line-clamp 5 // 限制显示的行数 display -webkit-box // 弹性盒子模型 ...
2019-09-17 15:48:57
307
原创 Element UI checkBox只读
需求是希望用复选框的的形式展示数据，所以希望是只读模式结果图：思路：一开始希望是可选模式的蓝色，然后不可修改，如下图然后百度到这些方式，但是没试最后看到一个评论突然意识到，不应该与用户习惯相悖。因为正常思维下蓝色展示是可选的但是disable的选中框十分不明显，所以参考评论，将模式改为disable之后，更改一下checkBox的前景色 >>>.el-ch...
2019-09-11 15:42:01
5545
原创 Vue组件使用记录
Vue组件使用记录1.公用dialog组件，接受父组件的表头和表数据，当表单中不同的输入类型时，可以在传过来的表头中增加标识，如例子：父组件传过去的数据Info: { title: '', // 标题 item: [], // 输入项 typeselect: [] // type选项列表 }, // 弹框信息，title、item...
2019-08-29 18:10:00
242
原创 node.js Ajax登录学习
node.js Ajax登录学习下载安装node.js，参考链接Node.js 安装配置采摘自菜鸟驿站简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常...
2019-05-06 15:08:53
256
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人