关注
分享
秦岭熊猫
喜欢运动，喜欢结交朋友，希望可以结识更多的志同道合的朋友一起学习成长。欢迎留言交流。联系邮箱：liinux@qq.com
展开
-
bootstrap-table动态合并相同行和列的方法
先看看效果：var getData = ctx + "demo/table/list"; $("#table").bootstrapTable( { dataType : "json", method : 'post', cache : false, url : getData, columns : [ { checkbox : true }, { field : 'userId', title原创 2021-05-21 22:15:18 · 2866 阅读 · 1 评论 -
基于Echarts5实现的动态排序柱状图
动态排序柱状图，先看看效果吧：后端代码：https://gitee.com/tigerxue/springboot-echarts-examples/blob/master/tompai-parent/tompai-echart/src/main/java/com/tompai/wsocket/controller/EchartsController.java具体前端代码：<!DOCTYPE html><html style="height: 100%" la.原创 2021-01-31 22:21:14 · 8781 阅读 · 13 评论 -
在线协作编辑算法简介- OT算法
相信大家或多或少都有使用过在线文档，国内的像我们在做的腾讯文档还有其他家的很多类似产品。今天主要为大家揭开在线协作的神秘面纱，那就是OT算法。0x01 背景在线文档，抽象一下，这些产品的模式都是富文本编辑器+后台，富文本编辑器产生内容，展示内容，然后后台负责保存。富文本编辑器现在业界已经有很多成熟的产品，像codeMirror，这一块本身也是很复杂的一块，也不是咱们这次关注的重点方向。不知道大家平常在用这些产品的时候有没有思考过一个问题，在线文档编辑的时候产生冲突怎么办？0x02 举个栗子...原创 2020-11-14 19:55:07 · 3551 阅读 · 2 评论 -
Quill富文本编辑器—多图片视频混合上传示例
Quill is a modern WYSIWYG editor built for compatibility and extensibility.https://quilljs.comQuill 的使用快速开始开始构建一个quill编辑项目包括引入文件、创建自定义工具栏、创建编辑容器以及初始化这几部分。<!-- 引入css文件 --><link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="sty.原创 2020-06-07 12:41:38 · 577 阅读 · 0 评论 -
Echarts数据可视化特效散点图点动态闪烁效果
效果如下：Echarts数据可视化series-effectscatter特效散点图全解mytextStyle={ color:"#333", //文字颜色 fontStyle:"normal", //italic斜体 oblique倾斜 fontWeight:"normal", //文字粗细bold bolder lighter 100 | 200 | 300 | 400... fontFa原创 2020-05-31 14:41:26 · 7884 阅读 · 0 评论 -
JavaScript中Null和Undefined的区别
Null：null是js中的关键字，表示空值，null可以看作是object的一个特殊的值，如果一个object值为空，表示这个对象不是有效对象。Undefined:undefined不是js中的关键字，其是一个全局变量，是Global的一个属性，以下情况会返回undefined:1）使用了一个未定义的变量；var i;2）使用了已定义但未声明的变量；3）使用了一个对象属性，但该属性不存在或者未赋值；4)调用函数时，该提供的参数没有提供：function func(a){原创 2020-05-30 23:00:56 · 410 阅读 · 0 评论 -
小白学前端之：JavaScript null 和 undefined 的区别
nullnull 表示一个变量被声明了，并被赋值为空var lzh = null;console.log(lzh); // nullconsole.log(typeof lzh); // objectundefined简单的理解：undefined 表示一个变量被声明了，但是还没有赋值，比如：var lzh;console.log(lzh); // undefinedconsole.log(typeof lzh); // undefined详细一点的理解：在 Jav原创 2020-05-30 22:57:31 · 213 阅读 · 0 评论 -
用setTimeout代替setInterval
解决setInterval占用内存问题，用setTimeout代替/**************************************************** tomTimer 自定义定时器方法，解决setInterval占用内存问题 ****************************************************/function tomTimer(f, timerName, time) { return function walk() {原创 2020-05-28 00:05:59 · 325 阅读 · 0 评论 -
禁止前端页面用户打开HTML页面调试功能的初级方法
禁止用户打开HTML页面调试有些时候，我们可能想要禁止用户修改或者调试我们HTML页面的代码，这个时候需要组织用户打开调试窗口，下面介绍一些能够阻止用户在浏览器中打开调试窗口的方法，这些方法只能一定程度的提高打开调试的门槛，并不能完全杜绝。禁用F12对于使用F12打开调试窗口的方法，我们只要注册F12按键的处理方法，并阻止默认事件行为即可：window.onkeydown = window.onkeyup = window.onkeypress = function (event) {原创 2020-05-27 23:48:48 · 1178 阅读 · 0 评论 -
JavaScript中清空数组的三种方式对比以及JavaScript常用数组操作方法
方式1，splicevar ary = [1,2,3,4];ary.splice(0,ary.length);console.log(ary); // 输出 []，空数组，即被清空了定义和用法splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。注释：该方法会改变原始数组。语法arrayObject.splice(index,howmany,item1,.....,itemX)参数 描述 index 必需。整数，规定添加/删除项目的位置原创 2020-05-26 00:41:32 · 1011 阅读 · 0 评论 -
Echarts数据动态加载的实现样例
Echarts数据动态加在的实现样例原创 2020-05-26 00:30:02 · 269 阅读 · 0 评论 -
超快的HTML5 2D渲染引擎Pixi.js入门
PixiJS是一个2D渲染引擎，能自动侦测并使用WebGL或Canvas。PixiJS使用JavaScript或HTML5基础来显示媒体，创建动画或管理交互式图像，从而制作游戏或应用。PixiJS适合制作游戏但并非是游戏引擎，其核心本质是尽可能快速有效地在屏幕上移动物体。PixiJS作为JavaScript的2D渲染器，目标是提供快速轻量且兼容所有设备的2D库。提供无缝Canvas回退、支持主流浏览器，包括桌面和移动设备。PIXI只做三件事Loading and displaying o原创 2020-05-24 22:09:20 · 1615 阅读 · 1 评论 -
时间和日期的JS库Moment.js常见用法总结
Moment.js常见用法总结Moment.js是一个轻量级的JavaScript时间库，它方便了日常开发中对时间的操作，提高了开发效率。 日常开发中，通常会对时间进行下面这几个操作：比如获取时间，设置时间，格式化时间，比较时间等等。接下来，我将按照这些操作对Moment.js中的Doc进行整理分类，方便学习和日后的查阅。获取时间 Start of Time moment().startOf(String) 获取今天0时0分0秒 moment().start原创 2020-05-24 21:39:35 · 688 阅读 · 1 评论 -
时间和日期的JS库Day.js入门教程
dayjs是一个轻量的处理时间和日期的 JavaScript 库，这里是dayjs的github网址https://github.com/iamkun/dayjs。dayjs好处???? 和Moment.js有着相同的API和模式 ???? 不可变、持久性 ???? 提供链式调用 ???? 国际化标准 ???? 超小的压缩体积，仅仅有2kb左右 ???? 极大多数的浏览器兼容dayjs安装NPM:npm install dayjs --savevar dayjs = req原创 2020-05-24 21:38:07 · 1421 阅读 · 0 评论 -
WebSocket刷新断开原因、设计心跳机制防止自动断开连接
1、断开原因WebSocket断开的原因有很多，最好在WebSocket断开时，将错误打印出来。ws.onclose = function (e) { console.log('websocket 断开: ' + e.code + ' ' + e.reason + ' ' + e.wasClean) console.log(e)}错误状态码：WebSocket断开时，会触发CloseEvent, CloseEvent会在连接关闭时发送给使用 WebSockets 的客户端. 它在原创 2020-05-24 16:44:33 · 8253 阅读 · 0 评论 -
前端一键复制粘贴插件——clipboard.js的使用
将文本复制到剪贴板应该不难。配置它不需要几十个步骤，也不需要加载数百KB的js文件 。但最重要的是，它不应该依赖Flash或任何臃肿的框架。这就是clipboard.js存在的原因。安装从npm安装npm install clipboard --save或者，如果您不喜欢包管理，只需下载一个ZIP文件设置 script引入 <scriptsrc="dist/clipboard.min.js"></script> 三方CDN引入现在需...原创 2020-05-22 21:05:33 · 1058 阅读 · 0 评论 -
Jquery ajax, Axios, Fetch区别之我见
引言前端技术真是一个发展飞快的领域，我三年前入职的时候只有原生XHR和Jquery ajax，我们还曾被JQuery 1.9版本版本以下不支持大文件请求这个问题卡了半天（最后自己写了原生的XHR请求）。一晃眼，JQuery ajax早已不能专美于前，axios和fetch都已经开始分别抢占“请求”这个前端高地。本文将会尝试着阐述他们之间的区别，并给出自己的一些理解。1 JQuery ajax$.ajax({ type: 'POST', url: url, data: data原创 2020-05-18 22:58:05 · 390 阅读 · 0 评论 -
H5桌面通知： Notification API 的应用
这是利用html5桌面通知Notification API实现的，先看看代码，再分析Notification。// 桌面通知 (() => { // 请求权限 Notification.requestPermission().then(function(permission) { if(permission === 'granted'){ console.log('用户允许通知了'); }else原创 2020-05-11 00:02:27 · 539 阅读 · 0 评论 -
sweetalert2使用教程
背景：项目的开发中经常会遇到弹窗的问题，但是我们用到的弹窗都特别low，而且网上找了一下，发现easy-ui以及layer对应的弹窗都不是我想要的，后来发现sweetalert，发现评论还不错，所以个人尝试一下，并记录一下使用过程，便于他人借鉴。SweetAlert2是一款功能强大的纯Js模态消息对话框插件。SweetAlert2用于替代浏览器默认的弹出对话框，它提供各种参数和方法，支持嵌入图片，背景，HTML标签等，并提供5种内置的情景类，功能非常强大。SweetAlert2是SweetAle原创 2020-05-08 23:53:54 · 1056 阅读 · 0 评论 -
Spring Boot 中使用WebJars引入javasript依赖
WebJars能使Maven的依赖管理支持OSS的JavaScript库/CSS库，比如jQuery、Bootstrap等；WebJars是将Web前端Javascript和CSS等资源打包成Java的Jar包，这样在Java Web开发中我们可以借助Maven这些依赖库的管理，保证这些Web资源版本唯一性。基本原理如下：With any Servlet 3 compatible c...原创 2020-04-08 00:21:02 · 223 阅读 · 0 评论 -
Web研发模式演变史
简单明快的早期时代可称之为 Web 1.0 时代，非常适合创业型小项目，不分前后端，经常 3-5 人搞定所有开发。页面由 JSP、PHP 等工程师在服务端生成，浏览器负责展现。基本上是服务端给什么浏览器就展现什么，展现的控制在 Web Server 层。这种模式的好处是：简单明快，本地起一个 Tomcat 或 Apache 就能开发，调试什么的都还好，只要业务不太复杂。然而业务总会...原创 2020-04-06 22:12:10 · 175 阅读 · 0 评论 -
Video.js Plugins
Video.js PluginsOne of the great strengths of Video.js is its ecosystem of plugins that allow authors from all over the world to share their video player customizations. This includes everything fro...原创 2020-04-03 22:22:48 · 929 阅读 · 0 评论 -
Video.js Options Reference
Video.js Options ReferenceStandard<video>Element OptionsEach of these options is also available as astandard<video>element attribute; so, they can be defined in all three manners...原创 2020-04-03 22:21:43 · 1363 阅读 · 0 评论 -
videojs学习随笔记录
下载与介绍Video.js是一款web视频播放器，支持html5和flash两种播放方式。更有自定义皮肤，插件，组件，语言还有丰富的选项配置。 官网下载地址：https://videojs.com/getting-started/ GitHub下载地址：https://github.com/videojs/video.js入门使用引入video.js和video-js.cs...原创 2020-04-03 22:02:17 · 402 阅读 · 0 评论 -
webpack前端工程打包入门级教程
Webpack是什么首先可以看下官方文档，文档是最好的老师。这里也有国外的一个朋友写的入门介绍。Webpack是由Tobias Koppers开发的一个开源前端模块构建工具。它的基本功能是将以模块格式书写的多个JavaScript文件打包成一个文件，同时支持CommonJS和AMD格式。但让它与众不同的是，它提供了强大的loader API来定义对不同文件格式的预处理逻辑，从而让我们可以将...原创 2020-03-29 23:41:17 · 219 阅读 · 0 评论 -
使用 Node.js 开发简单的脚手架工具
像我们熟悉的 vue-cli，react-native-cli 等脚手架，只需要输入简单的命令vue init webpack project，即可快速帮我们生成一个初始项目。在实际工作中，我们可以定制一个属于自己的脚手架，来提高自己的工作效率。为什么需要需要脚手架？减少重复性的工作，不再需要复制其他项目再删除无关代码，或者从零创建一个项目和文件。 根据交互动态生成项目结构和配置文件等。...原创 2020-03-15 23:46:23 · 158 阅读 · 0 评论 -
HTML5 桌面通知：Notification API的基础用法
Notification API 是 HTML5 新增的桌面通知 API，用于向用户显示通知信息。该通知是脱离浏览器的，即使用户没有停留在当前标签页，甚至最小化了浏览器，该通知信息也一样会置顶显示出来。用户权限想要向用户显示通知消息，需要获取用户权限，而相同的域名只需要获取一次权限。只有用户允许的权限下，Notification 才能起到作用，避免某些网站的广告滥用 Notificat...原创 2020-03-14 23:48:47 · 339 阅读 · 0 评论 -
前端常见的加密算法介绍
在信息安全越来越受重视的今天，前端的各种加密也变得更加重要。通常跟服务器的交互中，为保障数据传输的安全性，避免被人抓包篡改数据，除了 https 的应用，还需要对传输数据进行加解密。目前常见的加密算法可以分成三类对称加密算法：AES、… 非对称加密算法：RSA、… Hash 算法：MD5、…二、对称加密算法对称加密(也叫私钥加密)指加密和解密使用相同密钥的加密算法。它要求发送...原创 2020-03-14 23:36:02 · 701 阅读 · 0 评论 -
Spring Boot+Vue从零开始搭建博客系统veblog（一）：项目前端_vuejs环境搭建
前言博主本身是一直从事Java后端开发，一直想独立开发一套完整前端和后端技术结合的项目来提升自己的技术水平，经过对业界的一些热点技术的了解并对技术栈选型考虑后，博主打算利用Vue.js和Spring Boot技术栈来开发一个属于自己的博客系统，等开发完成把自己平时遇到的技术分享出来。由于对前端技术不是太了解，所以想从零开始把开发的整个过程记录下来，第一篇文章就先把前端环境搭建起来再弄后面的。...原创 2020-03-14 14:14:58 · 381 阅读 · 0 评论 -
VSCode搭建vue前端开发工程的配置文件-launch.json
说明：launch.json配置文件{ // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwli...原创 2020-03-11 21:27:39 · 2911 阅读 · 0 评论 -
解决npm安装时出现run `npm audit fix` to fix them, or `npm audit` for details
解决npm安装时出现run `npm audit fix` to fix them, or `npm audit` for details1、第一种解决办法npm audit fixnpm audit fix --forcenpm audit2、第二种解决办法1 删除已经安装的：node_modules 和 package-lock.json2 修改 package.js...原创 2020-03-11 17:55:51 · 6334 阅读 · 0 评论 -
解决Error: Can't find Python executable "python", you can set the PYTHON env variable
错误原因：Node.js 在安装模块的时候报错，缺少python环境。解决办法：第一种方式：安装Python及环境变量配置，一定要安装python2.7的版本，配置python环境变量的方法请自己查询；如果第一种方式不行，可以试试第二种。第二种方式：运行下面的代码：npm install--global--production windows-build-tool...原创 2020-03-11 17:02:48 · 1387 阅读 · 0 评论 -
单页面应用（SPA）与多页面应用（MPA）的区别对比
首先我们先来了解一下单页应用出现背景背景：在早期的 Web 应用中，前端的作用很弱，业务逻辑和数据处理都在后端，后端给前端返回一个 HTML 页面，前端只负责展示。在这种模式下，单个 HTML 页面被当做一个功能原件，表单提交，超链接跳转都可以用来重新请求新的 HTML 页面，从而达到给用户展示新的页面的目的。在这种方式中，你可以感觉到页面总是在不停的刷新，一个点击可能都需要等待很久，这是...原创 2020-03-11 16:46:17 · 630 阅读 · 0 评论 -
最简单的vscode使用入门教程
本文主要介绍vscode在工作中常用的快捷键及插件，目标在于提高工作效率本文的快捷键是基于mac的，windows下的快捷键放在括号里 Cmd+Shift+P(win Ctrl+Shift+P)零、快速入门有经验的可以跳过快速入门或者大致浏览一遍1. 命令面板命令面板是vscode快捷键的主要交互界面，可以使用f1或者Cmd+Shift+P(win Ctrl+Shift+P)打...原创 2020-03-10 23:59:21 · 1997 阅读 · 0 评论 -
Visual Studio Code（VS code）简单使用入门以及常用快捷键
写在前面 在前端开发中，有一个非常好用的工具，Visual Studio Code，简称VS code。 都不用我安利VS code，大家就会乖乖的去用，无数个大言不惭的攻城狮，都被VS code比德芙还丝滑的强大功能所折服。 我是来给大家安利插件的，想做个比较全面的插件集合给大家。网上的我也看过一些，但是都比较零散，时间也久了一些，我结合最近的情况，总结一下 造福...原创 2020-03-10 22:50:02 · 2547 阅读 · 0 评论 -
人物关系图谱:ECharts 实现
1、什么是EChartsECharts是百度开源的纯 Javascript 图表库，目前开源可以与highcharts相匹敌的一个图表库，相信有很多国内用户使用。官网http://echarts.baidu.com/2、开始简单配置关系图1、首先配置series的type为graph。2、layout为force，layout可以选择none、circular和force...原创 2020-01-08 13:58:46 · 8181 阅读 · 1 评论 -
D3实战(1):力导向图
一，D3简介近年来，可视化越来越流行，许多报刊杂志、门户网站、新闻媒体都大量使用可视化技术，使得复杂的数据和文字变得十分容易理解，有一句谚语“一张图片价值于一千个字”。D3 正是数据可视化工具中的佼佼者，基于 JavaScript 开发，项目托管于 GitHub。从 D3诞生以来，不断受到好评，在 GitHub 上的项目仓库排行榜也不断上升。可视化越来越流行，许多报刊杂志、门户网站、新闻、媒体...原创 2020-01-08 13:38:58 · 1913 阅读 · 0 评论 -
Web前端实现锁屏/解锁功能
功能描述：打开一个网站的网页，过5分钟不动作，就会锁定页面，隐藏内容容器，显示一个容器用于输入密码，输入正确的密码来解锁。锁定后即使用户刷新页面，还是保留原来的状态。如已经锁定的，需要继续锁定，否则显示内容。示例代码如下，通过document.onmouseover来实现多少分钟没有动作，使用计时器来实现。<!DOCTYPE html PUBLIC "-//W3C//DTD XH...原创 2019-12-25 14:20:57 · 2920 阅读 · 1 评论 -
HTTP请求和MIME介绍
HTTP请求由三部分组成，分别是：请求行，消息报头，请求正文。请求行(格式)：Method Request-URI HTTP-Version CRLFMethod:方法。GET 请求获取由Request-URI所标识的资源。 POST 在Request-URI所标识的资源后附加新的数据。 HEAD...原创 2019-12-24 23:25:15 · 1309 阅读 · 0 评论 -
企业知识管理与协同软件Confluence搭建与配置
Confluence是一个专业的企业知识管理与协同软件，也可以用于构建企业wiki。使用简单，但它强大的编辑和站点管理特征能够帮助团队成员之间共享信息、文档协作、集体讨论，信息推送。0：环境__系统信息：CentOS release 6.8__服务器IP：192.168.1.203__mysql 5.6.29 、jdk1.7.0_06__所需安装包:confluence_keyg...原创 2019-12-21 22:34:28 · 689 阅读 · 0 评论