- 博客(40)
- 收藏
- 关注
RSS订阅原创 vue+elementUI实现树形穿梭框
思路二：利用elementUI的filter API对选中节点进行筛选，左侧筛选出未选中的，右侧筛选出选中的，用的还是同一棵树，用一个属性来区分是否选择，好处是子节点选中，父节点会跟随保存，不用重新构建树结构。将左侧选中的节点移动到右侧，还要保持树结构，意味着移动子节点，需要把该子节点对应的父节点甚至父节点的父节点一并移到右侧形成一个新的树结构，树结构的层级和原来的树保持一致，只是右侧展示的子节点为选中的子节点，filter API用法。
2024-03-20 15:21:38
908
原创 前端使用url实现文件下载
通过后端返回的文件的服务器地址，实现文件的点击下载，而不是直接打开文件（浏览器支持预览的文件，访问地址时会直接打开，不支持预览的文件才会下载），以下方法就会直接打开，而不会在浏览器打开预览
2023-10-16 10:32:18
1211
原创 Webpack 初识
1.简介Webpack是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。官网地址：https://webpack.docschina.org/从上图可以看出，Webpack可以将多种静态资源js，css，less转换为一个静态文件，减少页面请求。2.主要配置介绍本质上，webpack是一个用于现代javascript应用程序的静态模块打包工具。当webpack处理应用程序时，他会在内部从一个或多个入口点构建一个依赖图，然后将你项目中
2022-05-12 23:51:45
122
原创 RESTful Web API设计
1.良好的API设计应旨在支持：（1）平台独立性。不管API内部实现方式如何，任何客户端都应该能调用该API。这就需要使用标准协议并非创建一种机制，使客户端和web服务能够就交换数据的格式达成一致。（2）服务演变。Web API应能在不影响客户端应用程序的使用情况下改进和添加功能。随着API的发展，现在客户端应用程序应可继续运行而无需进行任何修改。所有功能应该是可发现的，使客户端应用程序能够充分利用它。2.什么是REST？REST是一种基于超媒体构建分布式系统的架构风格。一种接口设计模式。REST独
2022-05-12 23:13:13
268
原创 flex布局，子元素撑开父元素
1.将父元素设置为display:flex时，子元素不设高度时（宽度需要设置）会默认撑开满父元素高度：2.经典两栏布局如果child1有子元素的话，并且子元素宽度过大，会撑开child1，将child2的宽度挤压，如下：解决办法将child1的宽度设置为：width:0;...
2022-04-03 18:58:06
8843
原创 js中使用toFixed()时的精度问题
js中使用toFixed()时的精度问题在js中使用toFixed()进行小数点保存时需要注意的问题，示例如下：由上图可以看出，在通过toFixed(2)获取到的小数实质为字符串，在乘100时进行了转换，而由于浮点数精度问题，造成了计算结果不准确，改进方法如下：先乘100进行计算后在进行取小数点后两位操作。以下多做了几次乘法实例，更加可以看出精度问题导致的计算不准确：参考：IEEE二进制浮点数算术标准（IEEE 754）...
2022-03-22 16:50:55
1577
原创 js各种数据类型与布尔值之间的转换
js各种数据类型与布尔值之间的转换数据类型转为true的值转为false的值BooleantruefalseString非空字符串空字符串Number非零数值(包括无穷值)0，NANObject任意对象nullUndefinedN/A(不存在)undefined注：摘自《JavaScript高级程序设计》...
2022-03-02 16:37:33
432
原创 forEach 跳出循环
forEach跳出循环foreach不能使用return或者break跳出循环，因为foreach的参数为回调函数，会遍历执行多个回调函数，return会直接跳出执行的当前的回调函数，其他的回调函数会继续执行，而用break会直接报错，最好的办法是抛出异常，捕获到异常终止遍历1.return var arr = [1, 2, 3, 4, 5]; arr.forEach((item) => { if (item === 2) { return;
2021-10-15 11:42:43
1728
原创 three.js几何体沿特定轨迹运动
three.js几何体沿特定轨迹运动<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"
2021-10-15 11:07:39
418
原创 vue + ant design of vue表单校验
vue + ant design of vue表单校验实现方法总结表单示例为FormModel表单1.通过rules绑定，不需要自定义，适用于一般校验html<a-form-model ref="ruleForm" :label-col="{ span: 6 }" :wrapper-col="{ span: 15 }" :model="formData" :rules="rules" > <a-form-model-item la
2021-10-15 10:37:04
694
原创 three.js 纹理贴图
three.js 纹理贴图1.单个图片通过纹理贴图加载器TextureLoader的load()方法加载一张图片可以返回一个纹理对象Texture，纹理对象Texture可以作为模型材质颜色贴图.map属性的值。材质的颜色贴图属性.map设置后，模型会从纹理贴图上采集像素值，这时候一般来说不需要再设置材质颜色.color。.map贴图之所以称之为颜色贴图就是因为网格模型会获得颜色贴图的颜色值RGB。// 纹理贴图映射到一个矩形平面上var geometry = new THREE.PlaneGeo
2021-10-13 17:35:23
979
原创 vue 可搜索树组件封装
vue 数组件封装组件代码：<template> <div class="content"> <div class="tree-item" v-for="(item, index) in data" :key="index"> <div class="item" :class="{ active: choice === item.id, }" :style="{ 'padding-left': padLeft
2021-10-12 11:37:40
197
原创 axios 利用CancelToken中断请求
axios 利用CancelToken中断请求1.发送请求处 一般我们将axois请求封装为request.js文件并暴露出接口以便外部使用。在外部调用的过程中，如遇到不符合要求或需要新增的config参数是允许覆盖和新增的，编写如下：import axios from 'axios';import request from '@/utils/request';//这里采用传递executor函数到CancelToken的构造函数来创建cancel tokenconst CancelToke
2021-10-12 11:18:02
867
原创 d3+svg画图基础应用
d3+svg画图基础应用1.svg1.1 简介SVG，是一种用于描述二维的可缩放矢量图形，基于XML的标记语言，像JPEG和JPG不同，SVG格式提供的是矢量图，这意味着它的图像能够被无限放大而不失真和降低质量，并且可以方便的修改内容。1.2 常用标签和属性svg：SVG容器；defs：SVG允许定义以后需要重复使用的图形元素，建议所有需要再次使用的元素定义在defs元素里面；可以增强SVG内容的易读性和可访问性defs元素中定义的图形元素不会直接呈现，可以在视口的任意地方利用use标签呈现；
2021-10-11 16:36:20
1642
原创 Three.js基础-简单几何体
Three.js简单应用Three.js是基于原生WebGL封装运行的三维引擎，在所有WebGL引擎中，Three.js是国内文资料最多、使用最广泛的三维引擎。相关链接：github链接：https://github.com/mrdoob/three.jsThree.js官网：https://threejs.org/以下为简单几何体实现：主要步骤：1.创建场景对象2.创建几何对象3.创建网格模型对象3.创建材质对象4.将材质对象和几个对象添加到网格模型对象5.将网格模型对象添加到场景
2021-10-11 16:17:55
121
原创 Google Chrome开发插件，在特定网页执行js脚本
Chrome开发插件，在特定网页执行js脚本当想在某些网页网页之中执行自己写的js脚本文件，而又无法直接嵌入别人的源码之中怎么办？可以利用Chrome的插件功能，自己开发配置一款插件，使其浏览器每次打开特定页面时，执行特定的js脚本。具体步骤如下：1.创建一个新的文件夹2.在文件夹中创建配置文件，名称固定为：manifest.json可以利用记事本创建，后缀名改为.json,文件内容如下：字段解释：manifes_version：声明是我们使用的版本。name和description：分别
2021-03-12 16:52:05
4680
原创 Angular cli搭建项目
Angular cli搭建项目1.安装node.js（最好是最新稳定版）2.安装完node.js后会自动安装上npm，但npm通常下载文件资源较慢，建议下载安装cnmp：在命令行直接输入： npm install -g cnpm --registry=https://registry.npm.taobao.org3.全局安装Angular cli脚手架在命令行直接输入npm install -g @angular/cli 或者cnpm install -g @angular/cli4
2020-11-03 11:46:16
455
原创 React启动服务时报错
React启动服务（npm start）时报错错误详情：有的说是端口问题，有的说是环境变量的问题，如果那些方法都没有解决的话就有可能是下面这种问题：react-script版本问题：在package.json文件内部将版本降级，安装2.几的版本：安装成功后重新启动服务：npm start最后服务启动成功...
2020-10-20 12:35:40
323
原创 Vue（自定义事件+组件）实现简易表单
Vue组件实现简易表单描述：封装Vue组件，组件可以复用，只需改变组件内容，通过遍历vue实例对象内的数据内容，将数据放进组件，并在组件内部通过$emit()将需要操作的事件以及参数传递出去，由父组件接收后再利用vue实例里的函数进行相应操作，注意这里不要直接在组件内部调用vue实例的函数，必须要通过父组件。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <
2020-09-28 13:43:07
290
原创 递归实现深拷贝
递归实现深拷贝var isObject=function(obj){ //判断是否是对象var type=typeof obj;return type===‘function’||type===‘object’&&!!obj;}var deepClone=function(obj){if(!isObject(obj))return obj //如果不是直接返回基本值var result=new obj.constructor(); //如果传入的是数组
2020-09-27 00:32:37
114
原创 自定义call函数
自定义call函数什么是call函数call() 方法是预定义的 JavaScript 方法。它可以用来调用所有者对象作为参数的方法，通过 call()，您能够使用属于另一个对象的方法。也就是能够改变this的指向，下面是通过一个自定义call（）函数来了解其原理function a(){ console.log(this)}var b={ x:1}Function.prototype.realizeCall = function (context) { c
2020-09-16 19:37:08
371
1
原创 jQuery实现炸裂轮播
jQuery实现炸裂轮播图最终效果：图片炸裂成碎片，同时更换图片css代码：<style> *{ margin: 0; padding: 0; } .box{ width: 600px; height: 400px; border:1px solid #000000; background-color: darkslategrey; position:
2020-09-16 19:21:54
210
原创 JQuery实现流体导航栏
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> .nav{
2020-09-16 18:54:22
134
原创 JQuery实现防抖节流
用JQuery实现防抖与节流防抖：事件触发多次，只执行最后一次节流：事件触发多次后，单位时间内只执行一次引入JQuery：<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>想要执行的函数： function move(e){ console.log(2222); }防抖函数：function debounce(fn)
2020-09-09 14:36:45
3794
原创 HTML+CSS+JS实现堆叠轮播
如何通过html+css+js实现堆叠轮播效果：轮播图在向一个方向移动的同时，要对其每一个图片的大小，位置，透明度以及层级进行改变原理：轮播图向左移动时将第一个子元素剪切到末尾，轮播图向右移动时，将末尾子元素剪切到最前面，以此实现无缝轮播效果，再因为li剪切后，下一个li会补上（例如第一个子元素被剪切到最后时，第二个字元素会补上成为第一个子元素），所以li下标不变，以次来修改每一个位置的li的属性（大小，位置，透明度，层级）HTML代码： <body> <div c
2020-09-06 17:15:53
1321
原创 数组扁平化/数组拉平
数组扁平化/数组拉平方法一：用ECMAscript 2019 中的flat方法 var arr=[1,[2,3],[4,5],[6,[7,8],9,[[[10,[[11,12],13],14],15,16],17],18]]; arr.flat(Infinity); //参数为层数，默认一层注意：flat和flatMap方法为ES2019(ES10)方法，目前还未在所有浏览器完全兼容。方法二：利用arr.toString(），将数组转换为字符串再利用str.split（‘ ，’），
2020-08-09 16:49:04
481
原创 undefined与null的区别
JavaScript中undefined和null的区别undefined表示变量定义了，但没有赋初值。null表示变量定义了，并且赋初值，只是值为空；通常用于变量赋值，当不再需要变量时，将变量设置为null，切断与堆空间的联系，有助于堆内空间释放。...
2020-08-06 00:23:04
74
原创 javascript笔记
javascript基础 包含ecmascript，DOM ，BOM事件，各种API语言特征 脚本语言 解释型语言 弱类型语言数据类型基本数据类型 原始值 值类型 number 数字 string 字符串 undefined 未定义 boolean 布尔值 null 空值空对象 引用数据类型 对象（无序集合）为什么要分为基本数据类型和引用数据类型 二者有何区别?1.基本数据类型直接在栈内存中保存数据值，按值访问，数据类型的变量与变量之间是
2020-08-06 00:07:02
77
DataV地图资源数据包
2023-08-24
monaco-editor实现的sql编辑器
2023-02-22
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人