拼搏的小叔-CSDN博客

原创 webpack5后台管理

1、系统基于panjiachen后台管理系统模板，升级webpack5。2、github地址:https://chengmanxiang/webpack5-vue2-admin3、线上地址：webpack5 vue2

2021-09-21 16:58:32 241

const arr = [{ id: 10, name: '小红' , children: [ {id: 21, name: '小红红' } ]}, { id: 11, name: '小明' , children: [ {id: 22, name: '小明明' } ]}];我们要修改arr数组里面id是10并且children里面id是21的name值为大红红，我们这样做，用spread展开操作，代码如下：const arrCopy1 = arr.map(obj=> { if(obj.id.

2021-08-31 20:57:37 761

原创 vue2.0+ 利用高德地图的巡航轨迹，做带进度条和倍速的轨迹回放

vue 利用高德地图的巡航轨迹，做带进度条和倍速的轨迹回放所用技术：vue，高德地图（amap），iview-slider绘制轨迹使用的是高德地图的轨迹展示功能对应demo地址：https://lbs.amap.com/api/amap-ui/demos/amap-ui-pathsimplifier/simple-demo，api地址:https://lbs.amap.com/api/javascript-api/reference-amap-ui/mass-data/pathsimp

2020-09-27 13:17:45 3117 2

原创 js reduce实现二维数组纵向和

reduce() 的用法详解过去有很长一段时间，我一直很难理解reduce()这个方法的具体用法，平时也很少用到它。事实上，如果你能真正了解它的话，其实在很多地方我们都可以用得上，那么今天我们就来简单聊聊JS中 reduce() 的用法。一、语法arr.reduce(function(prev,cur,index,arr){...}, init);其中，arr表...

2019-12-05 16:16:32 1054

原创最简便的list数据转树形结构方法（递归详细）

后台返回数据是一行一行的，但是前端展示要树形结构数据，所以需要我们自己处理函数了，小编在此献丑了，小写一个简便函数供大家参考，希望反馈一下。返回数据格式 :var list= [{ name: '根目录1', id: 1, parentId: 0 },{ name: '根目录2', id: 2, parentId: 0 },{ name: '目录1-1', id: ...

2019-05-31 10:27:54 16699 7

原创 js 某年的某月多少天（最优）

function getDaysInMonth(year, month) { // 接受俩个参数年，月 var date = new Date(year, month, 1); return new Date(date.getTime() - 864e5).getDate(); } getDaysInMonth(2018, 2); // 28天...

2018-04-09 09:32:59 379

转载 js常用的一些面试题。

1.如果我们使用JavaScript的"关联数组"，我们怎么计算"关联数组"的长度？var counterArray = { A : 3, B : 4};counterArray["C"] = 1;答案：Object.keys(counterArray).length2.什么是 instanceof 操作符？下面代码输出什么？ function foo(){

2017-09-14 13:24:01 622

原创 webpack搭建的vue-cli项目如何使用sass?

vue 项目使用sass1，使用save会在package.json中自动添加。npm install node-sass --save-devnpm install sass-loader --save-dev注：通常使用npm安装会出现以下报错，安装失败。（网路问题）可以通过淘宝的npm镜像安装node-sass，解决以上问题。

2017-09-07 09:42:14 818

原创 js数组去重复的最优写法

1.创建一个新的数组存放结果2.创建一个空对象3.for循环时，每次取出一个元素与对象进行对比，如果这个元素不重复，则把它存放到结果数组中，同时把这个元素的内容作为对象的一个属性，并赋值为1，存入到第2步建立的对象中。说明：至于如何对比，就是每次从原数组中取出一个元素，然后到对象中去访问这个属性，如果能访问到值，则说明重复。 Array.prototype.uniq

2017-08-21 15:46:25 2516

原创 Vuejs 用$emit 与 $on 来进行兄弟组件之间的数据传输

Vue2-单一事件管理组件通信 //准备一个空的实例对象 var Event = new Vue(); //组件A var A = { template: ` 我是A组件的数据->{{a}} `

2017-08-21 09:39:04 472

原创通过jQuery Ajax使用FormData对象上传文件

FormData对象，是可以使用一系列的键值对来模拟一个完整的表单，然后使用XMLHttpRequest发送这个"表单"。在 Mozilla Developer 网站使用FormData对象有详尽的FormData对象使用说明。但上传文件部分只有底层的XMLHttpRequest对象发送上传请求，那么怎么通过jQuery的Ajax上传呢？本文将介绍通过jQuery使用Form

2017-08-17 14:09:34 344

原创 win7 配置apache-tomcat环境

学习了一个月的java基础，终于要迈向java web领域。学习java web开发就离不开服务器的支持，由于本人是菜鸟，只好求助度娘谷哥。在此，把本人成功配置的步骤分享出来，一是当作笔记备份，说不定哪天系统崩溃了还得重新配置就不需要再次度娘了；二是给众多寻找度娘的朋友一个好的参考。Tomcat下载，你需要下载与JDK相配的版本，官方首页就有如下图所示，在这里就是Tomcat 7.0了

2017-08-16 18:09:50 373

原创 Google Chrome浏览器点击 input file上传按钮时延迟3-5秒

Google chrome 浏览器在52版本之后出现一个bug，就是点击 input file上传按钮时反应很慢，需要等待3-5秒种之后才能弹出选择文件的对话框。比如改为问题解决；但是还要支持zip、rar、pdf呢！再改成：不幸的是延迟弹出的bug再次出现。新版chrome在点击input file时，如果你仅仅上传图片，chrome是不会检查这些图片是否有危

2017-08-15 08:57:21 1801

原创 Normalize.css简书

简介Normalize.css只是一个很小的css文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的css reset，Normalize.css是一种现代的，为HTML5准备的优质替代方案。Normalize.css现在已经被用于Twitter Bootstrap，HTML5 Boilerplate，GOV.UK，Rdio，CSS Tricks以及许许多多其

2017-08-14 17:09:20 3150

原创 Vue路由History mode模式中页面无法渲染的原因及解决

Vue.js + vue-router 创建单页应用，是非常简单的。使用 Vue.js ，我们将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。一般开发的单页应用的URL都会带有#号的hash模式，因为整个应用本身而言就只有一个HTML，其他的都是通过router来渲染。url带#号会带来很多bug，例如：微信分享和微信支付配置等传的ur

2017-08-14 16:29:47 5438 2

原创解决手机自带浏览器上，用rem单位，内容超出屏幕宽度问题！（rem计算不准）

问题描述：在H5手机页面上，用rem单位布局，配合js计算出一个根节点的font-size（原理是屏幕宽度乘以一个固定比例，如1/100），之后页面中所有的px全都换算成了rem单位来写，优点是能适配各种不同屏幕尺寸的手机，不需要写媒体查询！例如：设计稿是750px，用js计算出来的根节点font-size是100px（证明此时屏幕宽度是750px），那最外层的容器宽度就写成7.5rem（计算

2017-08-09 17:28:13 4654 2

原创 javascript时间戳和日期字符串相互转换代码(超简单)

一、日期字符串转时间戳 // 获取当前时间戳(以s为单位) // 第一种方式 var timestamps = +new Date(); timestamps = timestamps / 1000; // 第二种方式 var timestamp = Date.parse(new Date()); timestamp = tim

2017-08-09 10:36:39 68357 7

原创 Webpack如何打包才能尽可能的缩小体积(详解)

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。当前各大主流框架默认配备的打包方案，对其如何使用，已有较完备中英文文档；并且，各主流框架也有对应 CLI 予以基础配置，故不作为探讨

2017-08-07 11:40:57 10205 1

原创 webpack如何使用webpack-dev-middleware进行热重载(详解)

学习webpack时，遇到webpack-dev-middleware时，不理解它的作用，故搜集资料，才明白起作用，写下文章，供大家学习。

2017-08-06 09:05:26 1235

原创 css3文字模糊代码（详解）

-webkit-transition:0.5s all ease;是会在0.5秒的时间执行li的所有指定的动画，text-shadow:0 0 10px black;这个是对文字设置黑色的阴影，opacity:0.8;这个是整体的透明度color:rgba(0,0,0,0);这个是设置文字的颜色为黑色，然后是指其透明度为全部透明

2017-07-31 15:14:44 5081 1

转载从零开始学_JavaScript_系列（40）——对象的扩展（3）当枚举、原型链遇见对属性的操作

0、一句话总结属性名，以及是属性的函数的简洁写法，写起来简单易阅读属性名可以用变量字符串拼接起来（话说以前也有吧？）函数都有name属性，但set和get也要加前缀Object.is判断两个变量是否相等Object.assign可以合并对象的非原型链上，且可枚举属性Object.getOwnPropertyDescriptor查看属性是否可枚举、可修改、可赋值Object.keys获取对象

2017-07-28 10:43:28 583

原创 ios底部输入框输入时被隐藏的bug解决

最近做项目的时候，底部的输入框用了fixed定位固定在底部，当点击输入时，键盘弹起盖住了输入框问题，小编对此问题进行了分析，给了一个完美的解决的方法，方法如下demo。底部输入框被隐藏的bug解决 * { padding: 0; margi

2017-07-27 21:08:24 2034

原创 elementFromPoint的用法（详解）

document.ElementFromPoint:根据坐标获得元素，可用于触屏设备上获取当前点击元素的名称语法：oElement = document . elementFromPoint ( iX , iY )参数：iX :　必选项。整数(Integer)。单位：象素(Pixel)。定位横坐标偏移量。iY :　必选项。整数(Integer)。单位：象素(Pixel)。定

2017-07-24 15:58:53 13562 1

原创 touch事件中的touches、targetTouches和changedTouches（详解）

touches: 当前屏幕上所有触摸点的列表;targetTouches: 当前对象上所有触摸点的列表;changedTouches: 涉及当前(引发)事件的触摸点的列表通过一个例子来区分一下触摸事件中的这三个属性：1. 用一个手指接触屏幕，触发事件，此时这三个属性有相同的值。2. 用第二个手指接触屏幕，此时，touches有两个元素，每个手指触摸点为一个值。当两个手指触摸相同

2017-07-24 15:49:20 6979

原创 javascript如何查找字符中的回文串？

题目：javascript如何查找字符中的回文串？所谓回文字符串，就是一个字符串，从左到右读和从右到左读是完全一样的。比如"level" 、 “aaabbaaa”function huiString(s) { var t = s.split("").join("#"); t = "~" + t + "#"; var c = 1, e = 0, cs

2017-07-24 14:55:11 775

转载 js最新手机号码、电话号码、身份证正则表达式（最新）

原文链接：http://caibaojian.com/regexp-example.html手机号码正则表达式验证。function checkPhone(){ var phone = document.getElementById('phone').value; if(!(/^1[34578]\d{9}$/.test(phone))){ alert("手

2017-07-22 13:01:33 2740 1

原创 js小数相加、相乘失去精度问题解析详解（最优方案）

我们得到后台返回的float类型的数字，用来相加、相乘失去精度，得到小数点显示很多位，为了这个问题，小编找到一个最优方法，贡献给大家参考。var CMX = CMX || {};/** ** 加 **/CMX.add = function (arg1, arg2) { var r1, r2, m, c; try { r1 = arg1.toString().split(

2017-07-22 11:17:57 9317

原创一维数组变二维数组的写法（详解）

最近遇到一个需求，需要把一维数组变二维数组，例如：var arr = [1,2,3,4,5,6,7,8,9];变为[[1,2],[3,4],[5,6],[7,8],9] ;小编写出来了，顺便分享给大家看一下；代码如下：function oneArrToTwoArr(data) { var newData = []; for (var i = 0; i < Math.ceil(d

2017-07-11 17:10:37 4070 1

原创 Vue2.0 从环境搭建到发布（新手完全填坑攻略）

一、Vue2.0 推荐开发环境二、安装环境2.1 安装brewruby -version1) 安装命令 ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)"2）假如已经安装了输入如下命令 ruby -e "$(curl -fsSL https://raw

2017-07-05 16:12:26 2264

原创 js仿照聊天记录的时间显示今天昨天

var time = '2017年06月02日 10:43:24'; // 时间统一函数 function getTimeText(argument) { var timeS = argument; var todayT = ''; // var yestodayT = ''; var timeCha = getTim

2017-07-04 15:25:02 8198 5

原创 vue2.0中vuex到底是干什么的？怎么使用？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态。这里的关键在于集中式存储管理。这意味着本来需要共享状态的更新是需要组件之间通讯的，而现在有了vuex，就组件就都和store通讯了。问题就自然解决了。这就是为什么官网再次会提到Vuex构建大型应用的价值。如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。

2017-07-04 15:05:54 4514

原创 javascript中for循环里面套定时器,始终打印结束值原因？

for(var i = 0; i < 10; i++) { setTimeout(function() { console.log(i); }, 1000);}由于变量 i 直接暴露在全局作用域内，当调用 console.log 函数开始输出时，这是循环已经结束，所以会输出10个10。这是我对题主问题的理解，希望能对题主有帮助，可能还有不完善的地方，我打算写篇博文好好总结下。

2017-06-29 10:56:14 6532 2

原创 vue2.0开发环境的搭建详解

一、node的安装和下载node下载官网地址：https://nodejs.org/en/download/ 选择下载适合自己电脑的版本；如果你的电脑已经有个node，但是版本低于4.xxx的话，因该考虑更新一下：npm install -g n //mac版本 sudo npm install -g n升级nodejs是有两种方法：第一种是升级到最新版本su

2017-05-20 20:58:36 416

原创 AngularJS 过滤器（详解）

一、简介　　AngularJS过滤器能够用来格式化数据，过滤器能够用在表达式和指令中，也能够注入到其他地方进行使用。AngularJS提供了9种常用的内置过滤器，我们还可以创建自定义过滤器来格式数据，以完成更多个性化的要求。二、使用方式　　下面是过滤器的三种使用方式，形式如下。1、在表达式中使用{{ text | uppercase }} //将字符串text大写输出

2017-05-19 18:04:23 1145

原创 angularJS--多个控制器之间的数据共享

为了在控制器之间共享数据，需要在服务中添加一个用来储存用户名的方法。记住，服务在应用的生命周期内是单例模式的，因此可以将用户名安全地储存在其中。 12-angularjs的多个控制器数据共享 firstData--{{person.name}}

2017-05-15 16:26:03 438

原创 angular 自定义指令 Directive(详解)

在angular中，Directive，自定义指令的学习，可以更好的理解angular指令的原理，当angular的指令不能满足你的需求的时候，嘿嘿，你就可以来看看这篇文章，自定义自己的指令，可以满足你的各种需求的指令。　　本篇文章的参考来自 AngularJS权威指南，　　文章中主要介绍指令定义的选项配置　　废话不多说，下面就直接上代码//angular指令的定义

2017-05-15 10:46:58 691

原创 angularJs中跳转到指定的锚点详解($anchorScroll)

$anchorScroll根据HTML5的规则，当调用这个函数时，它检查当前的url的hash值并且滚动到相应的元素。监听$location.hash()并且滚动到url指定的锚点的地方。可以通过$anchorScrollProvider.disableAutoScrolling()禁用。依赖：$window $location $rootScope使用：$anchor

2017-05-11 15:30:29 6999

原创 AngularJS中的一次性数据绑定 (bindonce)

一、理解双向数据绑定和监听器为了实现双向数据绑定，AngularJS使用了$watch API来观察期作用域中的模型变化。具体的作用域取决于你的代码如何编写。如果你没有创建一个自作用域，就是说没有使用ngController指令在你的DOM和你的控制器代码之间创建一个关联，你可能处理的是跟作用域$rootScope，这个作用域由ngApp自动创建，并且是应用中所有作用域的父作用域，当然

2017-05-11 14:55:06 1028

原创 Angularjs中ng-select和ng-options的用法详解

最近由于项目需要，学了一段时间的angularjs，发现还是比较容易上手的，里面有很多地方，的确震撼了自己。这里就简单的介绍一下angularjs中ng-select和ng-options的用法。一、ng-selectng-select用来将数据同HTML的标签进行绑定。这个指令可以和ng-model以及ng-options指令一起使用，构建精细且表现良好的动态表单。ng-opti

2017-05-10 17:22:17 2460

原创 AngularJs之Scope作用域(详解)

一、什么是scope　　AngularJS 中，作用域是一个指向应用模型的对象，它是表达式的执行环境。作用域有层次结构，这个层次和相应的 DOM 几乎是一样的。作用域能监控表达式和传递事件。　　在 HTML 代码中，一旦一个 ng-app 指令被定义，那么一个作用域就产生了，由 ng-app 所生成的作用域比较特殊，它是一个根作用域（$rootScope），它是其他所有$Scope 的

2017-05-10 13:59:45 947

navigator-path-demo2.zip

空空如也