@Demi-CSDN博客

原创 Vue+Element UI 整合下拉目录树（popover+ tree+input）

一、演示效果二、完整代码<template> <el-popover placement="bottom-start" title="" width="300" v-model="showTree" popper-class="el-popover-tree" trigger="click" content=""> <el-.

2022-05-31 10:41:23 1683 1

原创浏览器兼容性问题总结

1、HTML对象获取问题其他浏览器：document.getElementById("idName");IE浏览器：document.idnamedocument.getElementById("idName");解决办法：document.getElementById("idName");2. const定义常量问题其他浏览器：document.getElementById("idName");IE浏览器：document.idnamedoc..

2022-02-17 18:06:20 2290 1

原创 Nginx 学习

一、官网源码：nginx – nginx官网：nginx news二、介绍Nginx是俄罗斯人Igor Sysoev编写的轻量级Web服务器，它的发音为[ˈendʒɪnks]，它不仅是一个自由的、开源的、高性能的HTTP和反向代理服务器，同时也是一个IMAP/POP3/SMTP 代理服务器。Nginx以事件驱动的方式编写，所以有非常好的性能，同时也是一个非常高效的反向代理、负载平衡服务器。在性能上，Nginx占用很少的系统资源，能支持更多的并发连接，达到更高的访问效率；在功能上，Ng..

2021-09-29 11:01:44 1543 1

原创 Node进程管理工具—pm2

一、官网PM2二、简介PM2是一个内建了负载均衡器的node进程管理工具，可以利用它来简化很多node应用管理的繁琐任务，如性能监控、自动重启、负载均衡等，而且使用非常简单。当你要把你的独立代码利用全部的服务器上的所有 CPU，并保证进程永远都活着，0 秒的重载， PM2 是完美的。三、为什么需要pm2？目前Nodejs开发中有很多痛点，因为node本身是一个单线程应用，它的特点就是所有方法都是串行一次执行，并且node并没有能力像Java一样独自去创建一个新的线程来实现异步操作，如果在

2021-09-21 15:57:48 10999 3

原创远程服务连接工具—FinallShell

一、官网FinallShell二、介绍FinallShell是一款国人开发的一款非常好用的远程服务连接软件，轻松实现连接远程服务器和远程桌面工具，能够对远程的计算机进行连接控制操作，随时随地轻松操作电脑设备，让你远程办公更高效便捷。它不需要在远程的服务器所在地连接服务器，支持Windows系统、Mac系统、linux系统等多种系统平台的电脑连接，兼容性广泛，便于远程服务连接，除了远程连接功能外，软件还为用户带来内存和CPU使用率实时显示功能，实时掌握电脑性能情况。三、主要特性1.多平台

2021-09-20 22:07:27 12471 6

原创 Leaflet-学习

一、官网英文官网：Leaflet中文官网：Leaflet二、介绍Leaflet 是一个开源并且对移动端友好的交互式地图 JavaScript 库。它大小仅仅只有39 KB, 并且拥有绝大部分开发者所需要的所有地图特性。Leaflet 简单、高效并且易用。它可以高效的运行在桌面和移动平台, 拥有着大量的扩展插件、优秀的文档、简单易用的API和完善的案例, 以及可读性较好的源码。三、下载Leaflet【1】CDN// html头部引入<link rel="s...

2021-09-18 14:16:24 3499

原创 JavaScript实现类似sleep()的多种方式

编写复杂的JavaScript脚本时，有时会有需求希望脚本能停滞指定的一段时间，类似于 java 中的 Thread.sleep 或者 sh 脚本中的 sleep 命令所实现的效果。很多语言都有sleep函数，sleep() 方法的作用是在指定的毫秒数内让当前“正在执行的线程”休眠（暂停执行）但是JavaScript中并没有提供类似于 Java 的线程控制的功能，虽然有 setTimeout 和 setInterval 两个方法可以做一些定时执行控制，但并不能满足所有的要求。因为setTimeou

2021-09-15 15:32:54 4679 3

原创 jQuery使用Deferred对象执行异步操作

在JQuery 1.5之前，Ajax仅支持一个回调函数，但在JQuery的1.5版本中，引入了Deferred对象，它和ES6的Promise对象长的有点像，jQuery的Deferred对象也有resolve、reject、then方法，还有done、fail、always......方法。jQuery就是用这个Deferred对象来注册异步操作的回调函数，修改并传递异步操作的状态。它允许注册多个回调函数，并且能传递任何同步或异步函数的执行状态：成功或失败。简单说，Deferred对象就是jQuery..

2021-08-25 19:09:45 1042 1

原创 Vue — transition实现过渡动画

前言Vue提供了transition的封装组件，任何元素和组件在下列四种情形中，都可以添加进入或离开过渡动画条件渲染(使用v-if) 条件展示(使用v-show) 动态组件组件根节点一、transition用法<transition>元素作为单个元素/组件的过渡效果。<transition>只会把过渡效果应用到其包裹的内容上，而不会额外渲染DOM元素，也不会出现在可被检查的组件层级中。当插入或删除包含在 <transition&g...

2021-07-22 10:16:02 21144 1

原创前端高频面试题

前言多小伙伴为了面试会去看一些大厂的经典面试题，这里的“看”只是说加深一下以往的印象，也就是说你之前是用到过或者是学过，只是长时间用不到有点淡忘了。千万不要为了面试而死记硬背，这是程序员最大的悲哀，请记住一句话：“未经你思考的知识是不属于你的”楼主2018年毕业，三年前端开发经验。前段时间花了半个月时间面试，收到七八个offer，其中包括美的集团。以下是我对前端开发一些碎片化知识的总结，所谓碎片化，其实都是积木化，每一块积木都可以单独学习，自主拼接，进而组合成自己想要的形状，充分运用。..

2021-07-16 01:36:44 6794 4

原创 CSS伪类实现中间文字两边横线效果

一、通过display:table实现html<div class="line">中间文字</div>css .line { display: table; width: 100%; white-space: nowrap; border-spacing: .2rem 0; color: #ccc; } .line:before, .line:after { d

2021-07-13 17:31:09 1560

原创 canvas学习二

一、绘制文字【1】font字体属性canvas里的font属性和css的font属性是一样的，它可以设置文本的粗细、字号、字体等css设置字体：p{font:bold15px 微软雅黑;} canvas设置字体：ctx.font='bold15px微软雅黑'【2】textAlign水平对齐textAlign设置或返回文本内容的当前对齐方式start：默认,文本在指定的位置开始 end：文本在指定的位置结束 center：文本的...

2021-04-07 16:55:37 2602 2

原创 canvas学习一

一、什么是canvas？canvas是 HTML5 的标签元素，使用 JavaScript 在canvas里绘制图像。canvas画布是一个矩形区域，你可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。二、为什么需要学canvas？我们可以使用canvas 绘制复杂图形，处理图像，开发游戏，做动画，处理视频…div+csscanvas三、创建 canvas 元素通过 width 和 height 设置 canvas 画布的宽高，默认.

2021-04-06 18:01:40 3335

原创 JS的 execCommand 方法实现一个简单的富文本编辑器

一、document.execCommand()从其名字上可以看出execCommand()是用来执行命令的，当一个HTML文档切换到设计模式时，document暴露execCommand方法，该方法允许运行命令来操纵可编辑内容区域的元素。如保存文件、打开新文件、撤消、重做、剪切、复制、删除，字体大小、背景颜色等操作，有了这个方法就可以很容易的实现网页中的文本编辑器【1】语法let bool = document.execCommand(aCommandName, aShowDefa...

2021-04-02 15:31:07 4324 2

原创 TypeScript 面向对象编程

一、类面向对象编程中一个重要的核心就是：类，当我们使用面向对象的方式进行编程的时候，通常会首先去分析具体要实现的功能，把特性相似的抽象成一个一个的类，然后通过这些类实例化出来的具体对象来完成具体业务需求。【1】类的基础在类的基础中，包含下面几个核心的知识点，也是TypeScript与EMCAScript2015+在类方面共有的一些特性class关键字构造函数：constructor 成员属性定义成员方法 this关键字除了以上的共同特性以外，在TypeScript中...

2021-03-29 14:05:12 648

原创单张图片上传组件

一、input实现文件上传【1】type属性type='file'表示文件域，用于文件上传【2】accept属性input框的accept属性值，它规定能够通过文件上传进行提交的文件类型 eg: accept="image/gif, image/jpeg"【3】实例<input type="file" name="file" accept="image/png,image/jpg,image/gif,image/JPEG" />// 上面代码意思是：input...

2021-03-24 10:30:17 486

原创 TypeScript函数详解

一、函数的标注一个函数的标注包含参数返回值function fn(a: string): string {};let fn: (a: string) => string = function(a) {};type callback = (a: string): string;interface ICallBack { (a: string): string;}let fn: callback = function(a) {};let fn: ICallBack =

2021-03-22 11:33:22 1632

原创 TypeScript高级类型

一、联合类型联合类型也可以称为多选类型，当我们希望标注一个变量为多个类型之一时可以选择联合类型标注，或的关系function css(ele: Element, attr: string, value: string|number) { // ...}let box = document.querySelector('.box');// document.querySelector 方法返回值就是一个联合类型 string|numberif (box) { // ts .

2021-03-22 11:02:53 247 1

原创了解类型系统和TypeScript基础类型

一、什么是程序？程序 = 数据结构 + 算法 = 各种格式的数据 + 处理数据的逻辑二、数据是有格式（类型）的字符串（String）、数字（Number）、布尔（Boolean）、空（Null）、未定义（Undefined）对象（Object）、数组（Array）、函数（Function）、集合三、程序是可能有错误的计算错误（对非数字类型数据进行一些数学运算）调用一个不存在的方法，不同类型的数据有不同的操作方式或方法，如：字符串类型的数据就不应该直接参与数学运算四、动态类型语言

2021-03-22 10:05:33 258

原创 TypeScript 初体验 - 环境搭建与编译执行

一、TypeScript官网https://www.tslang.cn/二、环境搭建TypeScript编写的程序并不能直接通过浏览器运行，我们需要先通过TypeScript编译器把TypeScript代码编译成JavaScript代码，TypeScript的编译器是基于Node.js的，所以我们需要先安装Node.js三、安装Node.jsNode官网：https://nodejs.org安装完成以后，可以通过终端或者cmd等命令行工具来调用no...

2021-03-19 10:11:06 838

原创 Vue中实现Input框按Enter键增加一行并聚焦

很多公司官网的登陆页面都有这样的需求，当用户输入完用户名之后，按键盘的Enter键就可以切换到下一行的密码输入框，并将光标聚焦到密码框这一行，聚焦这个功能主要通过触发input框的focus事件来实现一、密码框聚焦（确定ref值）我们给密码框增加ref属性为passwordInput，监听用户名输入框的Enter事件，增加下列代码，即可聚焦到密码框this.$refs.passwordInput.focus(); 二、使用v-for为每一个Input动态添加ref现在我们的需求变了，不

2021-03-18 15:48:50 1688

原创 H5设备运动事件 DeviceMotionEvent 实现摇一摇功能

一、DeviceMotion介绍在 window 对象中存在一个专门的事件 devicemotion，它封装了运动传感器数据的事件，可以用来监听设备的加速度变化等信息。devicemotion事件对象有acceleration、accelerationIncludingGravity、rotationRate和interval四个属性 window.addEventListener("devicemotion", (e) => { console.log(e) })

2021-03-03 16:40:03 2025 1

原创移动端横竖屏检测

一、HTML方法检测在html中分别引用横屏和竖屏样式 <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" rel="external nofollow">  <link rel="styleshee

2021-03-03 10:27:56 625

原创解决移动端滑动事件冲突【有左右滑动轮播图，又有上下滑动滚动条，斜滑时会相互影响】

前言在移动端中，当我们的页面既有上下滑动又有左右滑动时，比如我们顶部有轮播图(左右移动)，页面还包含上下移动滚动条。当我们斜滑页面，页面也会斜着运动，即触发了左右移动事件又触发了上下移动事件。布局还可能会错乱，这不是我们想要的，我们只想它左右或者上下滑动，不同时滑动。接下来我们来解决这个问题一、touch触摸事件介绍touchstart：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发 touchmove：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用prevent

2021-03-02 17:43:42 5260 1

原创 vue中实现数组元素的上移和下移

有时候我们需要实现列表元素上移和下移交换位置，我们把数组数据渲染到视图中，通过数组元素交换位置实现上移和下移功能一、要移动的数组列表let questionList = [ { question: "第一个问题？" }, { question: "第二个问题？" }, { question: "第三个问题？" }, { question: "第四个问题？" }, { question: "第五个问题？" },]二、上移、下移函数 // 上移

2021-03-02 09:58:54 7071 6

原创 CSS长度单位

前言说到css的单位，大家应该首先想到的是像素单位px，我们在网页布局中一般都是用px，但是近年来自适应网页布局越来越多，em和百分比也经常用到了。然后随着手机的流行，web app和hybrid app的开发，都用到了css3技术，在css3中，新增了许多单位，rem、vw和vh、vmin和vmax、ch和ex等等，那现在对这些单位分别做一下详细的介绍吧。一、CSS单位CSS 有几个不同的单位用于表示长度，一些设置 CSS 长度的属性有 width，margin，padding，font-si

2021-02-02 17:05:01 2385

原创 React生命周期钩子函数

前言所谓的生命周期就是指某个事物从开始到结束的各个阶段，就好像是把人的出生到死亡分成一个个阶段，你肯定是在出生阶段起名字，而不会在成年或者死亡的阶段去起名字。当然在 React.js 中指的是组件从创建到销毁的过程，React 实例从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是React 的生命周期，各个阶段有相对应的事件钩子，用户可以在特定的阶段调用特定的方法。每个阶段组件内部的属性都是不一样的，所以一般特定的钩子做特定的事。一、React生命周期..

2021-01-28 17:33:32 7471

原创 Axios-指南

前言前端程序与服务器通信的最常见方式是通过HTTP协议。在我们没有接触 React、Angular、Vue 这类 MVVM 的前端框架之前，Jquery 除了优秀的前端 DOM 元素操作性以外，它的$.ajax()函数还能够非常便捷的发起 http 请求。现在我们已经开始使用MVVM框架进行前端开发，抛弃了对页面 DOM 元素的操作，难道为了方便的发起 http 请求，还需要在项目中加载 jquery 或者是手动创建 http 请求吗？答案当然是不用的，随着 Vue 作者尤雨溪宣布不再维...

2021-01-25 14:59:26 535

原创基于node.js的开发框架 — Koa

一、简介Koa基于nodeJs平台的下一代web开发框架，由 Express 幕后的原班人马打造，致力于成为一个更小、更富有表现力、更健壮的 Web 框架。使用 koa 编写 web 应用，通过组合不同的 generator，可以免除重复繁琐的回调函数嵌套，并极大地提升错误处理的效率。koa 不在内核方法中绑定任何中间件，它仅仅提供了一个轻量优雅的函数库，使得编写 Web 应用变得得心应手。目前有 1.x 和 2.x 两个大的版本其中 2.x 版本使用了 Node.js v7.6.0 之后支持的 ...

2021-01-18 10:49:33 488

原创怎么做好网站的SEO优化

-.搜索引擎工作原理在搜索弓|擎网站的后台会有一个非常庞大的数据库,里面存储了海量的关键词，而每个关键词又对应着很多网址，这些网址是被称之为"搜索引擎蜘蛛” 或“网络爬虫”。程序从茫茫的互联网上一点一点下载收集而来的。随着各种各样网站的出现，这些勤劳的”蜘蛛”每天在互联网上爬行，从一个链接到另一个链接，下载其中的内容, 进行分析提炼，找到其中的关键词，如果"蜘蛛” 认为关键词在数据库中没有而对用户是有用的便存入后台的数据库中。反之,如果"蜘蛛”认为是垃圾信息或重复信息，就舍弃不要，继

2021-01-04 15:30:30 1662 5

原创详解defineProperty和Proxy （简单实现数据双向绑定）

前言"数据绑定" 的关键在于监听数据的变化，vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。其实主要是用了ES5中的Object.defineProperty方法来劫持对象的属性添加或修改的操作，从而更新视图。听说vue3.0 会用 proxy 替代 Object.defineProperty()方法。所以预先了解一些用法是有必要的。proxy 能够直接劫持整个对象，而不是对象的属性，并且劫持的方法有多种。而且最后会返回劫持后的新对象。所以相对来讲，这个方法还是挺好用的。不过

2020-12-20 17:10:56 1136

空空如也

空空如也