一开始我以为数组转树是一个很复杂的事,因为你可能要写一个在树中寻找某个父节点的方法,还要判断哪个是最顶级节点。 但是利用下面这个方法,化繁为简。真是牛P。...最核心的是map[ownercn].children.push(item) 这句 ,这里的ownercn可以看做是父节点的id。...ownercn]) { map[ownercn].children.push(item) } else { console.log(`没有找到cn为${ownercn}的节点...result.push(item) } }) console.log(JSON.stringify(result)) 数据是一下, cn为id owner 中cn等号后面的值是父节点id 垃圾的后台
前言 对于Javascript处理 Excel 文件来说,js-xlsx 库是目前 Github 上 star 数量最多的库了,功能非常强大,强大到入门时瑟瑟发抖。文档有些乱,不适合快速上手。...关于 node-xlsx Node-xlsx 是一个Node.js的扩展,通过名字应该能够猜到是干什么的,主要是用于解析和构建 Microsoft Excel 表格,这个插件基于 js-xlsx(也就是上面提到上手难度贼大的那个...node-xlsx 的技术特性 底层基于强大的 SheetJS 构建,对 xlsx 文档的格式兼容性足够好 支持导出和读取 xlsx 文档,一个工具库解决导入导出需求 只有少数几个 api ,使用非常简单...也很简单。...node-xlsx 地址 https://github.com/mgcrea/node-xlsx 注意事项 node-xlsx 只能处理结构相对简单的数据文档,如果数据格式比较复杂,可以到 SheetJS
什么时候用懒加载 当页面中需要一次性载入很多图片的时候,往往都是需要用懒加载的。 懒加载原理 我们都知道HTML中的 标签是代表文档中的一个图像。。说了个废话。。...随着滚动条的向下滚动, bound.top会越来越小,也就是图片到可视区域顶部的距离越来越小,当 bound.top===clientHeight时,图片的上沿应该是位于可视区域下沿的位置的临界点,再滚动一点点...函数节流 在类似于滚动条滚动等频繁的DOM操作时,总会提到“函数节流、函数去抖”。 所谓的函数节流,也就是让一个函数不要执行的太频繁,减少一些过快的调用来节流。...,此时浏览器是这样 此时第二张图片完全显示了,而第三张图片显示了一点点,这时候我们看看请求情况 img3的请求发出来,而后面的请求还是没发出~ 全部载入时 当滚动条滚到最底下时,全部请求都应该是发出的...()方法的返回值一样boundingClientRect目标元素的矩形区域的信息intersectionRect目标元素与视口(或根元素)的交叉区域的信息intersectionRatio目标元素的可见比例
本文作者:IMWeb 林鑫 原文出处:IMWeb社区 未经同意,禁止转载 介绍 sChart.js 作为一个小型简单的图表库,没有过多的图表类型,只包含了柱状图、折线图、饼状图和环形图四种基本的图表...sChart.js 基本可以满足这四种图表的需求。而它的小,体现在它的体积上,代码只有 8kb,如果经过服务器的Gzip压缩,那就更小了,因此不用担心造成项目代码冗余。.../js/sChart.min.js"> 使用简单: new sChart(canvasId, type, data, options); 即可生成一个图表。...其他类型的图表data格式都相同,可以同个数据生成不同图表。 vue相关 vue-schart:是用vue.js封装了 sChart.js 的一个库。方便在vue的项目中使用。...Chart.js、echarts等等,有着丰富的图表和炫酷的效果。
介绍 sChart.js 作为一个小型简单的图表库,没有过多的图表类型,只包含了柱状图、折线图、饼状图和环形图四种基本的图表。麻雀虽小,五脏俱全。sChart.js 基本可以满足这四种图表的需求。.../js/sChart.min.js"> 使用简单: new sChart(canvasId, type, data, options); 即可生成一个图表。...canvasId:canvas标签的id,必填。 type:图表类型,必填。 options:图表配置参数,可选,具体参考文档。...其他类型的图表data格式都相同,可以同个数据生成不同图表。 vue相关 vue-schart:是用vue.js封装了 sChart.js 的一个库。方便在vue的项目中使用。...Chart.js、echarts等等,有着丰富的图表和炫酷的效果。
使用场景 1、检查接口可用性 主要用于在没有引入 jQuery 等工具的页面上需要验证一些 api 能否调得通的时候,可以快速调出浏览器调试界面发请求。 这在判断是否存在跨域问题的场景下,特别好用。...2、验证接口用于爬虫 另外,因为在浏览器调试界面发起的请求跟页面自身的 js 发起的请求是一样的,所以可以不用关心登录状态等上下文环境的问题。...这在写爬虫的时候特别实用——抓到一个链接之后,直接在浏览器上进行验证,先调用一下试试好不好用再说。...3、减少依赖 因为可以直接使用原生 js,因此无需添加 jQuery、axios 等第三方工具就可以发送 http 就请求,可以减少应用的体积。
什么时候用懒加载 当页面中需要一次性载入很多图片的时候,往往都是需要用懒加载的。 懒加载原理 我们都知道HTML中的 标签是代表文档中的一个图像。。说了个废话。。...随着滚动条的向下滚动, bound.top会越来越小,也就是图片到可视区域顶部的距离越来越小,当 bound.top===clientHeight时,图片的上沿应该是位于可视区域下沿的位置的临界点,再滚动一点点...函数节流 在类似于滚动条滚动等频繁的DOM操作时,总会提到“函数节流、函数去抖”。 所谓的函数节流,也就是让一个函数不要执行的太频繁,减少一些过快的调用来节流。...img3的请求发出来,而后面的请求还是没发出~ 全部载入时 当滚动条滚到最底下时,全部请求都应该是发出的,如图 ?...()方法的返回值一样boundingClientRect目标元素的矩形区域的信息intersectionRect目标元素与视口(或根元素)的交叉区域的信息intersectionRatio目标元素的可见比例
十分好用,就开源了,react十分好用,性能也不错,代码逻辑相对来说也挺简单,所以很多人开始用,也有人说这是未来web的趋势 ?...……还有很多各式各样的框架,如今前端正火,甚至还有很多前端游戏引擎的JS,十分强大,在这里就不多说了 好了,貌似有点废话了,那么入正题吧,写JS,其实也要面向对象,在08年小编我刚入坑工作的时候,JS并不受大家重视...,甚至CSS都是让美工人员做的,现在已经大不一样,来看看一个简单的登录是如何用面向对象的方式做的吧: 先来看看登录页面的代码,十分简单,就是一个用户名和密码 ?...重头戏在js部分,我单独写了份login.js ?...作为后端人员,JS其实一定要会,那些页面的逻辑性脚本要会写,其次,jquery要能看懂,要能灵活运用,到最后,要去使用某个js插件的时候你就能灵活运用了,比如jqgrid啦,ztree啦,其实都是如出一辙
以下列出的图表,图形和数据可视化的最佳软件,从创建基本的2D图表到产生复杂的数据集的数据可视化,这些PHP,Javascript、Flash的图表,对于任何一个严谨的开发者都是必须一览的。 1....Maani bXML/SWF 图表是个简单、强大的工具,支持XML数据创建吸引人的图表。XML提供灵活的数据生成,而Flash提供最好的图像质量。 3....J powered PHP图形脚本可非常简单的嵌入动态生成图形和图表到PHP应用或HTML页面中。该图形软件使用简便,可几分钟内制作专业水准的实时图形。...Highcharts Highcharts是纯粹的JavaScript写的图表库,提供简单的方式添加交互图表到站点或web应用,支持各种图表类型。 9....图表数据来自外部的XML文件。 14. Zing Chart ZingChart可创建独特的Flash图表和图形。安装、使用都非常简单。 15.
我们通常看到的小而美的图表,一般都是经过图表制作者深层次加工过的成品。 而要想了解一个规范的商务图表制作过程,对图表的拆解与还原就显得非常重要。...今天的案例是关于三家电子消费业巨头:三星、苹果、华为的研发支出统计图。 ? 三组填充面积图并肩而立,看起来清晰明了,信息表达直观准确、图表风格简约美观。...但是只有亲手去复制一个图表案例,你才会体会到简约的图表中蕴含的不简单。 图表中所呈现的数据信息如下(近似值): ? 要想高度还原该图表案例,我想到的方法所需要的数据结构如下: ?...X轴为辅助时间轴,其余四列全部添加制作面积图,并将三、四列(Huawei、Huawei-占位)两列图表类型更改为堆积面积图模仿原图中的强调色填充区域。 ?...最后修改图表线条及填充区域颜色,格式化至与原图一致为止。 ? 最后合理布局单元格,布局图表元素,调整并拍照引用: ? 以下是原图与案例图的对比: ?
= e || event; document.title="X:"+e.clientX+"Y:"+e.clientY; //获取对应的大图的坐标...//将大图的滚动条的位置调整到小图的鼠标坐标的4被的位置 big.scrollLeft = e.clientX\*4-80;...big.scrollTop = e.clientY\*4-80; //让对应的大图显示 big.style.display="block..."; } small.onmouseout = function(){ //鼠标移除之后让你的大图隐藏
升级R一直是一件比较痛苦的事情,你需要先安装新的R,然后在逐一安装以前装过的包。最快的办法也是把以前的包文件夹拷到新的R中,然后在新的版本中运行包更新。...由于官方的源一般都提供最新R版本的二进制文件,所以为了更好的稳定性一般也要跟着升级。所以这是一件相对痛苦又不得不做的事情。...现在installr程序包提供了自动化升级的途径,你只需要回答几个问题就可以将R升级至最新版本,同时相应的程序包也会及时的得到更新。...你需要做的只是: install.packages("installr") library(installr) updateR() 然后就会提示最新的R版本,和是否需要拷贝老版本的R程序包目录,是否需要移除老的程序包目录以及是否更新新的版本中的程序包...一切搞定之后会提醒你是否需要打开新的RGui,程序会默认将系统的默认R设置为最新版,因此RStudio也会自动切换到最新的R版本。
我在使用基于 vue.js 2.0 的UI框架 ElementUI 开发网站的时候 , 就遇到了这种问题 : 一个页面有很多表单 , 我试图将表单写成一个单文件组件 , 但是表单 ( 子组件 ) 里的数据和页面...store.state.show"> export default {} 是不是方便了许多 , 这就是 vuex 最简单的应用..., 不要被网上其他教程吓到 , vuex 原来可以这么简单 !...: dialog_store } }) 这里我们引用了一个 dialog_store.js , 在这个 js 文件里我们就可以单独写 dialog 组件的状态了 : export default...如果还有其他的组件需要使用 vuex , 就新建一个对应的状态文件 , 然后将他们加入 store 文件夹下的 index.js 文件中的 modules 中。
升级R一直是一件比较痛苦的事情,你需要先安装新的R,然后在逐一安装以前装过的包。最快的办法也是把以前的包文件夹拷到新的R中,然后在新的版本中运行包更新。...由于官方的源一般都提供最新R版本的二进制文件,所以为了更好的稳定性一般也要跟着升级。所以这是一件相对痛苦又不得不做的事情。...现在installr程序包提供了自动化升级的途径,你只需要回答几个问题就可以将R升级至最新版本,同时相应的程序包也会及时的得到更新。...你需要做的只是: install.packages("installr") library(installr) updateR() 然后就会提示最新的R版本,和是否需要拷贝老版本的R程序包目录,是否需要移除老的程序包目录以及是否更新新的版本中的程序包...总的来看,R的升级还是很成功的,使用起来也很方面。
大家好,又见面了,我是你们的朋友全栈君。...虽然,jQuery已经非常好用了,但是实际的开发项目中,还是有很多限制,比如项目组奇葩的要求,不能使用任何插件,当然,也是考虑插件占用资源,毕竟100+KB对与小型项目来说还是非常大的。...我最近就遇到做个点击展开二级菜单的要求,当然只能用原生的JS去写来实现,我借鉴了网上的一个案例,补充一下,分享一下: 如果,默认打开页面进来时二级菜单是隐藏的,需要点击才能展现二级菜单,再点击就是隐藏二级菜单...这里有两个点,实现展现和隐藏用display=”block“和display=”none”,另外就是要做一个判断,if else的判断当前是block还是none。 <!...如果,你的页面默认进来二级菜单是展现的,点击时才关闭。直接把style标签的样式display=”none”去掉就可以。同时需要修改一下js。
用 Three.js 做这样的一个全景图浏览工具,是再简单不过的事情,只需要几行代码,但却很有用。 那我们就来学一下 Three.js 怎么做全景图浏览吧。...Three.js 基础回顾 我们简单回顾下 Three.js 的基础: Three.js 是通过场景 Scene 来管理 3D 场景中的各种物体的,有一个三维坐标系,每个物体放在不同的位置,然后在某个位置放置相机...这就是 Three.js 的 3D 场景的创建和渲染成 2D 的流程。 简单回顾了下基础,那全景图改怎么浏览呢?.../js/three.js"> <script src="....其实实现全景图浏览更<em>简单</em><em>的</em>方式是直接给 Scene 设置立方体纹理,不用再单独创建立方体或球体,用 CubeTextureLoader 加载六张图,设置到 Scene <em>的</em>背景上就行。
最后决定用pxe + kickstart 的方式完成。原理、方案弄完了之后,开始搭建,结果被DHCP给挡住了。这不就得研究研究最简单最实用的DHCP使用方法。...* 红色的是必须有 * 绿色的是要注意 * 蓝色的是包安装时,要有的程序包 1. DHCP的实现 2....DHCP的实现 DHCP服务必须给本网段提供一个地址池。...4.1.1/dhcpd.conf.sample /etc/dhcp/dhcpd.conf # vi dhcpd.conf ddns-update-style interim( 这项不能少,否则服务起不来的...配置文件实例 简单的样例:(红色部分必须有) # vi /etc/dhcp/dhcpd.conf # dhcpd.conf # Sample configuration file for ISC dhcpd
技术是最简单的,最简单的也是技术。有很多事情只有我们经历了明白,有些事情我们可以从别人身上学到,有些则永远学不到。 动画片里的人们以一种预想的方式生活着,这个世界被设定为这样那样。...最简单的是赚钱 在《魁拔妖侠传》开始的时候,对于主人公母亲的一个教诲是: 最简单的是赚钱 无论主人公想去做什么,都会补上一句赚钱是最简单的,不要去想别的。...技术是最简单的 过去一直在想的是提高技术,而提高技术本身而成为了一件有意思的事。 没有太多的工作经验,过去一直试想的是: 当我们技术足够好的话,我们可以很容易地从一个项目切换到另外一个项目。...软件开发者最擅长的就是学习。 上面我们假设了一个前提是——最后两个人有差不多一样的技术领域知识。并不是因为这个工作多年的人不再学习了,而是在这个领域里已经没有足够的领域可以学习了。...人际关系 人际关系是一种复杂的东西,相比于上面的领域知识来说。我们需要去处理和不同人之间的关系,无论是在项目上,还是在哪?但是这真的一点都不简单。 技术才是最简单的。
例如tornado用的是自己的异步非阻塞“wsgi”,flask则只提供了最精简和基本的框架。Django则是直接使用了WSGI,并实现了大部分功能。 2....编写路由 路由都在urls文件里,它将浏览器输入的url映射到相应的业务处理逻辑。 简单的urls编写方法如下图: 编写业务处理逻辑 业务处理逻辑都在views.py文件里。...至此,一个最简单的django编写的web服务就启动成功了。 返回HTML文件 上面我们返回给用户浏览器的是什么?一个字符串!实际上这肯定不行,通常我们都是将html文件返回给用户。...你的CSS,JS和各种插件都可以放置在这个目录里。...至此,一个要素齐全,主体框架展示清晰的django项目完成了,其实很简单是不是?
原文:https://www.cnblogs.com/mufengforward/p/9198612.html 为开发一个测试程序,特搭建一个简单的ssm框架,因为网上看到很多都是比较老旧的教程,很多包都不能用了...| autoMappingBehavior PARTIAL, 指定MyBatis 是否并且如何来自动映射数据表字段与对象的属性。PARTIAL将只自动映射简单的,没有嵌套的结果。...语法,所以在webapp下新建js文件夹,并放入jquery文件,点击下载 不要问为什么要用jquery,怎么不用原生js,因为我愿意。...好吧,其实是为了代码的简洁高效,毕竟封装了很多方法,让我们可以更注重逻辑 当然原生的也不是不能写,下面是原生的js方法,只需将此方法放入index.jsp里边的script标签中即可,如果没有引入jquery...idea搭建简单ssm框架的最详细教程,idea搭建简单ssm框架的最详细教程,idea搭建简单ssm框架的最详细教程
领取专属 10元无门槛券
手把手带您无忧上云