ansheng02的博客

原创 lodash.js - 根据不同字段筛选出的数组 转 对象 转 数组

使用 lodash 完成数据处理；毕竟，一般认为，人与动物的本质区别在于制造与使用工具

原创 用 Gephi 画图 - 我画出了我和北妈的联系

没有预料到笔记本上没有Java环境，就安装配置了下Java环境，发文晚了一些，但是，虽迟但到。本篇主题是用 Gephi 绘制一张传播图，数据是用的 “北妈桃花岛”，一起来耍吧~

原创 Vue3.0 + pdf.js 实现pdf预览

pdf.js的对象结构遵循实际PDF的结构，通过渲染 canvas 完成 PDF 预览。

原创 ant-design-vue中 a-select组件 - 加载大量数据造成卡顿--已解决

解决方案：借鉴 列表的滚动加载，实现 a-select 数据展示时滚动加载隐藏问题：在ant-design-vue 中 ，select 可以通过 输入文字 匹配 数据源中的数据，但是在滚动加载中，如果暂时还没有加载到该条数据，则不能 匹配 到的这条数据。具体思路如下：监听下拉框展开，下拉框展开后，要重置展示的数据，默认每一次新展开就回到初始加载的数据展示。 监听数据滚动 - popupScroll 滚动条改变后 请求数据加载（可以异步请求，也可以一次性请求后，分批加载） 对滚动加载.

原创 [email protected] + [email protected] - 通过路由拦截判断移动端和PC端

本文实现的是 通过对设备的路由拦截 来判断当前设备是 移动端还是PC端，通过路由拦截可以有效避免 软路由判断时 刷新页面会回到首页的问题，当然之后也可以再出一个通过软路由实现移动端和PC端判断。

原创 vue3.0 引入i18n 做国际化 - 做动态语言切换

本文以 vue3.0 引入i18n 的使用为主，以 “中文” 和 “英文” 做演示，完成语言动态切换

原创 [email protected] - 旭日图+bar图 实现 小太阳

[email protected] 通过旭日图+极坐标图 合成一个小太阳~

原创 Vue3.0 - echarts5.x echarts-gl实现3D旋转地球

先试试

原创 vue-echarts：动态赋值series，更新options

这个是为了记录下解决的bug，问题场景：初次请求数据：国家参数为 5 个，这个时候，筛选国家列表数据， 当筛选的数据少于 5 个时，比如筛选了2个国家，则多出来的3条线会重合最后一条数据的线上，在点击图例“不显示该条数据”的时候，还是会显示剩余的三条线； 当筛选的数据多于 5 个，这个时候，筛选国家，会出现最少两个数据 的 折线和图例对不上，出现互换的情况。解析：出现这样的问题原本的猜测是 颜色设置有问题，考虑的解决方案是： 1. 在动态赋值 serie...

原创 Vue3.0按需引入vue-echarts6.x版本—0.4-Echarts5.x地图下钻

前两篇回顾：第一篇：Vue3.0按需引入vue-echarts6.x版本—0.1-绘制中国地图第二篇：Vue3.0按需引入vue-echarts6.x版本—0.2-Echarts5.x地图点击选中样式修改第三篇：Vue3.0按需引入vue-echarts6.x版本—0.3-Echarts5.x地图自动轮播数据时隔差不多一个半月再来更新这个系列，我可真是……虽迟但到？？！！我接受吐槽~言归正传，本片讲的是：“地图下钻”，具体的下钻之前是有讲过的，我在第一篇中也有提到，对echarts.

原创 Vue3.0按需引入vue-echarts6.x版本—0.3-Echarts5.x地图自动轮播数据

前两篇回顾：第一篇：Vue3.0按需引入vue-echarts6.x版本—0.1-绘制中国地图第二篇：Vue3.0按需引入vue-echarts6.x版本—0.2-Echarts5.x地图点击选中样式修改通过前两篇文章的讲解，目前我们已经可以绘制地图，至于是省级地图或者全国地图或者实际地图都不在话下，地图有了，那接着来给地图加上数据吧。正文 - 本篇知识点：今天来分享“Echarts5.x下的地图数据自动轮播”，先来关注几个小的知识点：Echarts5.x - visualMap

原创 Vue3.0按需引入vue-echarts6.x版本—0.2-Echarts5.x地图点击选中样式修改

本篇文章会基于第一篇：Vue3.0按需引入vue-echarts6.x版本—0.1-绘制中国地图进行配置项修改。声明首先声明，我并不是在水文章啊，是echarts5.x中相对于echarts4.x新增了一些属性。本系列“Vue3.0按需引入vue-echarts6.x”中主要用的是地图，所以目前仅针对地图样式改变的地方做出说明。这个系列结束后，会再开一个“大屏系列”，详细的会在这个系列中有介绍。Echarts5.0 配置项的改变先来说一下echarts5.0中的几个配置项的改变，暂.

原创 Vue3.0按需引入vue-echarts6.x版本—0.1-绘制中国地图

版本vue-echarts的文档链接"vue":"^3.0.0","echarts":"^5.1.2","vue-echarts":"^6.0.0-rc.6",正文今年开春后，开始使用vue3.0进行开发，以之前也做过的“地图下钻”为例，之前的地图下钻例子详情地址→// 之前的开发版本是："vue":"^2.5.2","vue-echarts-v3":"^2.0.1",vue-echarts在一个月前更新了“6.0.0-rc.6版本”，这个版本...

原创 vue 引入element-ui，样式不生效-（已解决）

https://www.cnblogs.com/Mr-lin66/archive/2019/05/25/13791884.html

原创 密码-正则校验（数字、字母、特殊字符-任意组合）

/** {6,30}--》输入字符长度在6到30位之间*/function fun(val) { //精准校验：必须含有数字、字母、特殊字符，三个缺一不可 // let exp = new RegExp( // "(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{6,30}" // ); //-->数字+字母；字母+特殊字符，特殊字符+数字 let exp = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\d.

原创 antV/[email protected]」世界地图+散点图

之前更新过@antv/L7->1.3.20版本-》北京地图+散点图，链接可点，源码也放在了公众号里，这一篇@antv/L7->2.2.19版本的源码也会放在公众号里，可在最后提取。以下是正文： 首先，安装antv/L7和antv/L7-maps，本项目用的是高德地图，目前antv/L7支持高德地图和Mapbox地图npm install --save @antv/l7 npm install --save @antv/l7-maps 接下来我会对我写的这两个antv/...

原创 vue 项目启动报错“Cannot GET /”

原创 vue-echarts-v3——浙江省地图下钻（eg:浙江省-嘉兴市-嘉善县）

vue-echarts-v3和echarts的地图下钻配置项其实是一样的，本身就vue-echarts-v3而言，它只是echarts在vue的使用中，打包成了一个组件。 浙江省地图下钻需要geoJson数据包，浙江省及浙江省下的省市，geoJson的数据，可以通过这个链接（阿里云DATAV.GeoAtlas）获取geo数据包，很好用~（超推荐！！！！）...

原创 vue组件-table.vue

借用table组件会说一下父子组件的传值。子组件Table.vue，排名用index，并且自递增，标题的值和数据都是通过父组件传过来的。子组件通过props设置tabHeades：Array，tabDatas：Array接收iu父组件传过来的数组。<template> <li class="tab-wrapper"> <ul class="tab...

原创 vue组件-BaseTime.vue

//BaseTime.vue<template> <div>{{ now }}</div></template><script>import moment from "moment";export default { data: function() { this.moment = moment; re...

原创 antV/[email protected]」实现北京地图+散点图

关于antV/L7除了官方文档，可翻阅的资料实在有限，关于地图的实现上，我真的是无力吐槽我自己……其实官方文档给的也还不错，emmm……深深的感受到作为一名开发者的自主学习能力有多么重要。额~对了，在本次的大屏开发上，尤其是图表渲染和地图，森森的感受到了自己的浅薄无知，每天都在“我没文化”、“我文盲”、“我看不懂”、“我不会”中怀疑自己，是英文的文档，考我英语阅读理解也就算了，竟然还有...

原创 大屏记录——相关技术知识技能（前期调研篇）

在本次大屏实现中，前期调研主要侧重于布局方面，功能点的拆分，以及可能用到的相关技术知识技能。 相关技术知识技能

原创 大屏记录——功能点拆分（前期调研篇）

大屏的设计稿已经在之前的大屏之布局篇中出现。 在本次大屏实现中，前期调研主要侧重于布局方面，功能点的拆分，以及可能用到的相关技术知识技能。 功能点拆分 具体我就不写了，一张思维导图应该可以搞定。 功能点拆封...

原创 大屏记录——布局（前期调研篇）

在本次大屏实现中，前期调研主要侧重于布局方面，功能点的拆分，以及可能用到的相关技术知识技能。 布局 刚拿到设计稿的第一眼，简单的分为了图A的样子，而我在前期实现的时候，通过栅格化布局，也确实按照这个来实现了，然而到最后的地图部分的时候，我有点懵了……这个地图看起来更像是背景图，额……那岂不是说，一开始的布局就是错误的？图A-布局01最开始的布局，中间部分，我用的是...

原创 GitLab上传项目

① git init (初始化仓库)② git remote add origin git @git.XXXX.git(链接远程仓库代码)③ git add . ( . 代表上传该文件夹下的所有文件，可以把 . 换成自定的文件名)④ git checkout -b dev （创建并切换到dev分支）⑤ git commit -m "文档说明"（提交文档的版本说...

原创 记录下《安生_Nseven+》用到的思维导图

安生_Nseven+是我仿七月老师的《旧岛》项目所做，具体用到的逻辑及思想，我整理了思维导图，可能有些乱，先暂时做一个纪念，还有一个关于组件化开发的思维导图正在整理中……...

原创 jQuery + clipboard.js——实现文本复制

出于项目需求，需要复制两种不同类型，一个是复制文本链接，一个是div内容。首先引入jquery文件和clipboard.js文件。clipboard.js官网1-复制文本链接<button class="btn btn-primary col-xs-11 btn-copy" data-clipboard-action="copy"data-clipboard data-...

原创 H5监听手机的物理返回按键——已完成

//监听手机物理返回，然后跳转首页function pushHistory() { var state = { title: "title", url: "#forward" }; window.history.pushState(state, null, "#forward"); } // 在需要监听的页面执行该方法p...

原创 小程序自定义组件化开发——思维导读（待完善）

原创 小程序——flex布局总结

本来题目写的是flex布局详解，突然觉得很不合适，还是我的个人总结吧。关于小程序对flex布局的友好支持，我是不用多说了，本篇文章主要讲我个人在开发过程中，对flex的总结，已整理成了思维导图。关于flex的布局实现是在我的项目里，暂时先不放出来，大概再有一个星期左右，这个项目完成后，我再来具体的写项目实现总结，并会放出自己的源码及小程序二维码。下一篇是关于组件开发的总结，预计是今天下...

原创 小程序搜索吸顶——《旧岛》（onPageScroll）

昨天听了七月老师的直播，我录屏了，整个直播是两个小时三十七分钟四十二秒。全程的直播着重讲了程序员的自我发展，最后讲了下技术的发展，这个直播我会在明天或者后天整理出来，作为自己前进的一项总结。 昨天下午开始学习七月老师的《旧岛》项目，这个我决定自己先写一遍，然后再听课、看源码、找不足。本篇是我自己在写《旧岛》项目时，关于搜索栏吸顶的记录。 很久不写...

原创 swiper组件实现tab——内容切换、动态数据请求、加载（续）——通过监测手指滑动实现导航吸顶

这篇文章是swiper组件实现tab——内容切换、动态数据请求、加载的续篇，主要内容是通过监测手指滑动方向来实现导航吸顶及归位。本篇文章是我在项目实现中的总结，本篇实现了在移动端监测手指滑动情况，通过上拉下滑检测与顶部的距离，实现导航吸顶及顶部轮播图的显示与隐藏。// 监测手指滑动事件$("body").on("touchstart", function(e) { // 判断...

原创 canvas绘制分享商品海报——已完成

记一次canvas经验，本次绘制生成分享海报，用到了绘制多张图片、绘制文字（颜色、换行显示）、绘制线条（颜色、粗细）、绘制圆形图片等。以下的代码是需要写在draw函数里的//html <canvas id="myCanvas" width="1000" height="1200">该浏览器不支持生成分享图片</canvas> //jsfunction ...

原创 jQuery返回顶部——记录

基本操作引包$().ready(function() { var $window = $(window); var $backTop = $('<div class="back-top"><i class="iconfont icon-top"><\/i><\/div>').appendTo("body"); ...

原创 freemarker + JS完成数据渲染——已解决

需求：商品详情页面添加“***购买了该商品”，滚动列表实现：①：获取信息列表数据postListData ②：循环该列表数据，获取其中用户名，时间 ③：先做JS判断用户名name----超过两个字符用**，时间time计算----距离当前时间多久（如下）//判断姓名if(name.length > 2){ name= nam...

原创 Beyond Compare 4——文件比对软件

试用期30天，昨天和今天用这个解决了我的粗心……心塞，写错了一个字母，一直编译报错。get了~记录下这个工具。。。。这个是破解版

原创 video标签隐藏右下角的下载——已解决

video::-internal-media-controls-download-button { display:none;}video::-webkit-media-controls-enclosure { overflow:hidden;}video::-webkit-media-controls-panel { width: calc(100% + 5...

原创 JSP+freemarker判断参数

[#if isRegimentalCommander == "yes"] <%if (product.productCategory.id != "55555" && product.productCategory.treePath.indexOf("55555") == -1 && product.maxCommission != "0.00" ) ...

原创 swiper做宣传画册——swiper动画

swiper做动画效果进行翻页，主要用于宣传推广，其实网上有很多这样的平台，像易企秀、兔展等……具体效果图如下：这个效果即将被替换，所以，先做个记录吧。该效果的实现主要使用了swiper插件，先引入关于swiper的几个文件：//这个是swiper的css文件<link href="css/swiperAnimate/swiper.min.css" rel="styles...

原创 swiper的轮播速度超快速，分页器不可用？？？——已解决

swiper的版本不同，造成在使用中的注意点，官网最新的swiper4.0和swiper3.0在分页器和自动播放上有差别（这是目前我遇到的，差点要放弃，还是不死心的查了下官网）。在这里还是放自己之前的一篇博客，这里有讲到版本差别，也可以看官网给的解释：https://www.swiper.com.cn/api/index.html。具体在代码中，表现如下：var swiper2...