自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

采花小盗周的博客

写博客是为了记笔记!

  • 博客(53)
  • 问答 (1)
  • 收藏
  • 关注

原创 纯前端实现复杂表格数据的导出——XLSX+FileSaver

使用XLSX + FileSaver 纯前端实现复杂表格的导出功能

2022-11-10 19:45:00 910 1

原创 vue动态设置页面title

vue项目,动态设置页面title

2022-09-15 20:00:00 6021

原创 字典回显避免重复调用后台接口

解决前端项目,表格中或页面中多次使用到字典回显,同时多次调用后台字典接口的问题

2022-09-07 20:30:00 408

原创 Cesium添加自定义弹窗并设置随地图移动位置移动

项目中使用`Cesium`制作三维地图,在地图上铺点,对点位进行点击,弹出自定义弹窗(`form`+`charts`),且弹窗随地图一起动,

2022-04-12 21:00:00 4075 3

原创 vue-cli3与vue3

vue-cli3与vue-cli2创建项目目录区别;vue3与vue2区别;vue3和vue-cli3区别;vue3目录是vue-cli3,跟vue3还是vue2没有关系。

2022-03-22 20:46:24 3575

原创 vue项目配置打包测试环境/生产环境

vue项目配置打包测试环境/生产环境:开发环境运行命令:npm run serve生产环境打包命令:npm run pro测试环境打包命令:npm run build步骤:1.项目中添加一个配置ip的js文件,比如如下的ip-config.js(位置不重要)2.在生成axios实例的时候引入,封装baseUrl3.在main.js中全局引入封装号的axiosimport http from "@/utils/request";Vue.prototype.$http = http;

2022-03-22 20:00:00 12216 5

原创 vue3无config文件夹打包后页面空白问题

vue3项目没有config文件夹,vue2项目有config夹,打包之后页面空白问题解决(全)

2022-03-11 19:00:00 1254

原创 封装$http(axios)与后台交互baseURL不生效

项目场景:封装axios方法,在项目模块页面展示数据结构相似时,使用mixins混入,在开发页面只需配置对应参数(接口url、参数、返回字段等),无需写与后台交互方法,达到节省开发时间、且节省代码,一目了然的目的。具体配置流程如下:问题:封装$http(axios)方法时,其中配置的baseURL不生效1. 第一步:配置ip-config文件2. 第二步:封装axios(配置request.js文件)import axios from "axios";import ipConfig from

2022-03-07 19:57:13 2565

原创 关于“低代码”的那些坑

关于低代码平台:我们公司是买的第三方广州的流辰IBPS信息管理平台,主要是看中了该系统的工作流,然后使用该系统对本公司之前的一个业务系统进行了重构,于是,填坑之路开始了…问题描述:现在“低代码开发”火热,各个公司都在开发低代码平台,例如钉钉的“宜搭”、腾讯云“微搭”等,不管公司大小,都想分一杯羹。然后低代码开发的宣传优势是:上手快、开发快、运行快、运维快。关于上手快:大致就是说使用低代码平台的人不需要十分强大的编码功能就可以,这个仁者见仁智者见智。就我目前的项目而言,使用的低代码平台很多功能不支

2022-01-07 13:11:34 944

原创 debugger和控制台都看不到的error

问题记录:在之前的项目中我想要的功能一直出不来,控制台也没有报错,打debugger跟踪问题到下图代码块中,然后走到红框位置自己debugger断掉消失,可是问题仍然在…作为一名程序员,不怕bug,但是怕不知道bug是什么,现在正是这种情况,后来请教了公司的前辈,加了两行代码,如下图:使用try{}catch(){},最后问题就在catch中打印出来了,说是构造函数问题,才发现断掉的地方Models没有对应属性,给BpmnButton.Models添加上就好了总结:不是很难的东西,但是本人第一

2021-11-18 15:32:38 371

原创 openLayer地图全屏事件的监听

写博客是为了做笔记!一、openLayer地图添加全屏控件二、添加全屏监听1.引入库2.添加监听三、Tips一、openLayer地图添加全屏控件在进行全屏监听之前肯定需要给地图添加全屏控件,使之有全屏的功能 import { FullScreen } from 'ol/control' map.addControl(new FullScreen())二、添加全屏监听1.引入库import { FullScreen } from 'ol/control'2.添加监听 let.

2021-10-15 17:16:14 474

原创 dataV大屏在vue中的使用

随着信息化的发展,大屏展示的需求越来越多,使用e-charts一个一个的做配置太麻烦,于是找到了封装好的dataV,直接拿来用就可以实现酷炫的大屏效果。

2021-06-16 22:15:37 10101 22

原创 vue3如何使用vue-router

文章目录一、第一步:安装vue-router二、第二步:main.js三、路由文件四、app.vue四、使用(比如跳转)一、第一步:安装vue-routernpm install [email protected]二、第二步:main.js先来对比一下vue2和vue3中main.js的区别:(第一张为vue2,第二张为vue3) 可以明显看到,我们在vue2中常用到的Vue对象,在vue3中由于直接使用了createApp方法“消失”了,但实际上使用createApp方法创

2021-06-16 22:13:07 10126 8

原创 JS Proxy代理

文章目录前言一、proxy是什么?1.语法2.参数二、使用步骤1.初学2.入门总结前言最近在项目中改别人的代码碰到了js中使用proxy代理的情况(代码较复杂,且涉及到内部代码不适合分享,本篇文章只是举了几个小例子),之前对它的了解只是停留在可以通过proxy代理配置解决跨域问题的基础上,然后就了解了一下,发现此proxy非彼proxy,js中的proxy代理也有大用处。一、proxy是什么?Proxy 也就是代理,Proxy 对象用于创建一个对象的代理,从而实现基本操作的拦截和自定义(如属性查

2021-06-10 23:18:16 571

原创 axios的拦截与封装

一、http.js文件:import axios from "axios";import isPlainObject from "lodash/isPlainObject";import ipConfig from "../../src/config/ipConfig.js";import qs from "qs";import { message } from "ant-design-vue";const http = axios.create({ baseURL: ipConfig.s

2021-06-07 23:39:48 114 2

原创 vue加载视频流,实现直播功能

文章目录前言一、视频流是什么?二、vue加载rtmp视频流1.方法一:video.js2.方法二:ckplayer三、vue加载hls视频流1.index.html中2.video-player.vue文件:前言最近在项目中有一个播放监控站点图像视频的功能(类似与直播),然后对此进行了一个记录与总结!在此功能中,后台本来给的是rtmp格式的视频流,后在网上找了几种方式,发现rtmp视频流需要使用flash播放器,然而各大主流浏览器已经放弃flash,因此最后又改用hls格式的视频流,最终完成这个功能

2021-06-07 23:39:18 4185 4

原创 vue之moment使用

文章目录一、moment是什么?1.日期格式化:2.相对时间:3.日历时间:4.多语言支持:二、使用步骤(例:默认查询时间24小时之前~当前时间)1.引入库2.在main.js中全局引入(也可单独在使用的文件中引入,具体看需求)3.在需要使用日期的地方使用三、日期格式一、moment是什么?moment 是一个 JavaScript 日期处理类库。注:以下所有时间相对于现在时间:2021/05/11/18:42 星期二1.日期格式化:moment().format('MMMM Do YYYY.

2021-05-11 19:47:28 38233 6

原创 vue之lodash使用

文章目录一、lodash是什么?二、使用场景(本篇文章以 lodash.pick 为例)1.需求2.在知道`lodash.pick`之前:3.在知道`lodash.pick`之后:三、总结一、lodash是什么?Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。 Lodash 的模块化方法 非常适用于:遍历 array、objec

2021-05-11 19:46:11 5567

原创 vue批量引入组件、注册和使用

文章目录一、使用场景二、使用步骤1.文件目录2.HTML代码3.js代码4.css代码(可不看,写出来只是为了代码完整性,拿来可以直接运行展示)三、总结一、使用场景在日常开发中,经常会有这样一种情况: import A from 'components/A' import B from 'components/B' import C from 'components/C' import D from 'components/D'遇到这种重复的代码,就在想,是否可以进行以下优化,一次性全部

2021-05-10 15:31:53 1165

原创 H5基础【3】—进度条、获取元素与拖拽

一、进度条二、h5获取元素的方式三、拖拽事件1.在h5之前,原生js的拖拽事件2.h5的拖拽事件

2021-05-08 23:07:40 1057 1

原创 H5基础【2】—音视频总结

最近抽了点时间,整理一下一些前端基础知识,写的不好的地方请大家踊跃留言,我会继续优化这一系列文章:一、音频audio二、视频video1.视频的资源格式2.视频播放三、全屏

2021-05-08 23:07:10 252 2

原创 H5基础【1】—form表单新旧属性

一、html中的form老属性二、h5中的form新属性1.邮箱email2.数字number3.手机号tel4.服务器网址url5.搜索search6.调节按钮(进度)range

2021-05-08 23:06:39 429 1

原创 CSS3【5】—动画总结

最近抽了点时间,整理一下一些前端基础知识,写的不好的地方请大家踊跃留言,我会继续优化这一系列文章:文章目录1.动画要素2.动画执行的曲线3.动画延迟4.动画重复5.逆向执行6.最终状态7.自发执行

2021-05-07 14:23:34 64

原创 CSS3【4】—2d/3d转换总结

一、2d转换`transform`1. 位移`translate()`2.旋转`rotate()`3.缩放`scale()`4.倾斜`skew()`二、3d转换1.位移`translate`2.旋转`rotate`3.缩放`scale`

2021-05-07 14:11:08 259 2

原创 CSS3【3】—before、after和content

一、before二、after三、content页面中的每一个元素中都默认已含有这两个子元素before :在什么什么之前after :在什么什么之后但是可以作为一个真正的元素承载内容,(有区别)离不开 content的样式值

2021-05-07 13:22:47 743

原创 CSS3【2】—特效总结

一、盒子阴影`box-shadow`二、文本阴影`text-shadow`与背景`background-clip`1.文本阴影`text-shadow`:2.背景`background-size|clip|image`三、自定义字体`font-family`四、圆角`border-radius`五、分页`column-count|gap|rule`

2021-05-07 10:04:45 149

原创 CSS基础【4】—浮动总结

一、标准文档流二、元素的浮动属性浮动的规则或作用:三、浮动带来的影像以及清除浮动1.浮动带来的影响:2.清除浮动:

2021-04-30 17:20:02 100

原创 CSS基础【3】—盒子模型总结

一、盒子模型之边框border1.四个方向2.三个属性:3.示例:上边框设置:二、盒子模型之内边距padding三、盒子模型之外边距margin1.有四个方向:2.margin之边框塌陷问题四、标准盒子模型和IE盒子模型1.标准盒子模型2.IE盒子模型

2021-04-30 16:53:05 223

原创 CSS基础【2】—CSS总结

一、CSS简介二、标签四大通用属性1.id2. class3. title4.style三、CSS的三种定义方式1.内嵌式2.行内式3.外链式三种方式优先级问题四、页面元素的属性分类1.块级元素2.行内元素3.行内块元素元素属性转换五、background相关1.关于背景`background`都有哪些值2.background属性连写

2021-04-30 15:52:08 99

原创 CSS基础【1】—选择器总结

基本选择器 元素/标签选择器 能够选择页面上指定的所有标签 css语法: 标签名{ CSS代码 }

2021-04-30 15:50:08 169

原创 CSS3【1】—选择器总结

一、兄弟选择器1.相邻兄弟选择器2.通用兄弟选择器二、属性选择器1.基础选择器2.并列属性3.表示更加精确的匹配:三、伪类选择器1.让标记更加的凸显2.结构伪类一、兄弟选择器1.相邻兄弟选择器基本语法: 参考选择器+目标选择器{样式}匹配规则: 参考选择器 下的紧挨着的那个兄弟,所有的 { 之前放的都是 选择器//加号左右有空格,匹配id为tag的标签紧挨着的p兄弟标签#tag

2021-04-30 15:49:12 124

原创 HTML基础【3】—表单总结

表单:表单: 就是能够收集用户信息 并且将信息提交给服务器的多个标签元素表单:表单域是最大的 里面可以存放 表单控件以及提示信息表单域: formaction=""服务器地址input type="text" 输入框常用属性value="" 输入框默认的内容placeholder="" 输入框提示文字name="username" 有name的输入框 表单提交时 才会提交数据https:

2021-04-29 17:36:14 128

原创 HTML基础【2】—table总结

table的常用属性:border="" 表格的边框宽度width="" 表格的宽度height="" 表格的高度cellspacing="" 单元格到周围的距离cellpadding="" 单元格内文字到单元格的举例align="left|right|center" 默认left 当前表格在页面中的对齐位置bgColor="red" 背景颜色borderColor="green" 表格的边框颜色tr的常用属性align="left|right|center" 当前行文

2021-04-29 15:37:52 270

原创 HTML基础【1】—标签总结

一.标签分类:单标签:独立一个标签就能完成功能,不需要内部嵌套内容;如 <br/>双标签:内部可以嵌套其他内容进行显示;如<h1>标题1</h1>二.标签列表:<meta charset="GBK"/><title>我是浏览器标签头部title</title><head>和title标签是嵌套关系</head><p> 段落标签/标记:上下各

2021-04-29 15:37:38 89

原创 VectorTileLayer更换style

问题描述:底图(矢量切片图层的url)不变,但是需要添加上不同的style形成动画轮播的效果。给图层更换样式不难,找到对应的feature,使用feature.setStyle就可以了。但是我在项目中遇到的问题是获取不到feature,或者获取到的feature不可用(我一同事就遇到了使用feature.setStyle不生效的情况,最后也没有找到原因,最后每次更换样式时添加不同样式的图层,然后添加了一堆的layers,导致地图非常庞大)。这篇文章就是讲的就是没有feature的时候如何更换样式——l

2021-04-26 18:34:00 1026

原创 a-table中的rowSelection清空问题

项目场景:选中a-table中的rowSelection之后,取消之前准备的操作,切换tab页,再次回来时rowSelection仍是选中状态问题描述:html中:<a-table :columns="column" :data-source="dataList" :rowKey="record => record.guid || record.stcd" :pagination="false"

2021-04-06 16:36:49 4964 7

原创 使用openLayer画箭头

项目场景&&问题描述:需求:从后台获取了一条线的geojson数据,现在需要把他画到地图上并添加箭头;百度(官网示例):得到下图1,每个折点都有箭头可是需求是:如下图2,只需要尾部一个箭头,中间不需要箭头原因分析:分析官网源码:所以在这里我需要改的就是这个遍历的东东,改完后我的代码如下: arrowFunction(feature){ var geometry = feature.getGeometry(); var styles = [

2021-04-02 16:30:02 882 1

原创 js中树与数组的相互转化(树的子节点若为空隐藏children字段)

写博客是为了记笔记前言在使用elmentUI或者antUI等中的 cascader 级联选择器时 ,需要树级结构,有时就会需要进行树与数组的相互转换,这里的树和数组的相互转换还一、树转数组 treeToArray(list, newArr = []) { list.forEach(item => { const { child } = item if (child) { delete item.child

2021-03-11 15:27:09 1163

原创 vue项目中的字典问题

前言我们在项目中经常会遇到一个字典问题,就是一个从后台获取的一个固定的数组,然后在系统中的很多地方都会通过select选择框用到。如果每次用的时候获取,就会经常出现两个问题:1.这个数组数据量过大的时候,有可能点击select下拉框,数据还没有返回来,导致select无法选择;2.每次都重新请求后台,当数据量过大,且同一页面其他接口也比较多时,导致页面加载缓慢。那怎么解决呢?如下:一、在utils中写一个dict.js的文件,内容如下://系统中封装好的axiosimport { httpPo

2020-12-28 16:31:20 3996 5

原创 antUI中a-modal 拖拽功能制作

写博客是为了做笔记!!!antUI中a-modal 拖拽功能制作文章目录一、在utils中创建drag.js文件,内容如下:二、在main.js中引入:三、使用:总结一、在utils中创建drag.js文件,内容如下:import Vue from 'vue'// v-dialogDrag: 弹窗拖拽Vue.directive('dragModal', { bind(el, binding, vnode, oldVnode) { const dialogHeaderE

2020-12-28 15:44:11 804 1

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除