- 博客(59)
- 收藏
- 关注
RSS订阅原创 页面添加水印
页面添加水印实现思路实现代码实现思路原理：通过子绝父相的方式生成一些div，再通过循环的方式将水印的默认配置项设置为这些div的样式，最后调整父级节点的位置。实现代码 // 添加水印之前判断之前有没有水印，如果有先删除之前的水印，否则水印会越来越深 waterMask = (newSetting) => { if(document.getElementById('mask_div00') === null){ this.addWaterMask(); }els
2021-11-18 20:00:39
703
原创 react-dnd实现任意拖动与互换位置
react-dndreact-dnd用法hooks组件实现任意拖拽拖拽互换位置react-dnd用法hooks组件1.使用DndProvider定义一个可以拖拽的范围import { HTML5Backend } from 'react-dnd-html5-backend';import { DndProvider } from 'react-dnd';class App extends Component{ render () { return ( <div&
2021-11-17 19:44:26
5003
1
原创 Webpack(01)-打包各类资源
webpackwebpack五大模块webpack的使用webpack五大模块entry:打包入口文件，入口文件引用了a文件和b文件，a、b文件又引用了其他文件，这样一层层调用，会将项目中用到的文件生成一个树状的结构图。output：打包资源输出位置，指定打包好的资源输出到哪里，如何命名loader：webpack只能够处理js，json文件，css、img文件需要通过loader翻译成可以处理的文件plugin：插件，可以做一些执行范围更广的任务，如代码压缩mode：(1).de
2021-10-28 15:36:16
644
原创 react实现无限循环滚动信息
需求后端传递过来的数据滚动显示，鼠标移入后停止滚动，鼠标移出后继续滚动，参考公司门户的公告信息栏实现思路思路一在componentDidMount中定义一个定时器，每过1000ms触发一次事件，将数组中第一条数据push到数组中，再删除掉第一条数据，最后给div添加onMouEnter和onMouseLeave事件，让鼠标移入时清除定时器，鼠标移出时重新开启定时器。代码：class Roll extends React.Component{ state = { list: [
2021-10-19 14:53:28
3088
原创 Dva初步学习
dvadva安装及创建项目目录结构dva安装及创建项目安装全局依赖npm install -g dva-cli创建项目dva new new-dva-project进入项目并启动cd new-dva-project npm start目录结构
2021-09-29 17:25:35
128
原创 时间复杂度与空间复杂度
时间复杂度与空间复杂度算法的复杂度时间复杂度空间复杂度常见排序算法的复杂度算法的复杂度在我们学习算法的过程中,为了衡量不同算法，我们使用复杂度来区分它们的优劣。而复杂度又分为时间和空间两个维度。时间复杂度时间纬度是指执行当前算法所消耗的时间，我们通常用时间复杂度来描述。算法执行时间需通过依据该算法编制的程序在计算机上运行时所消耗的时间来度量。我们一般使用大O符号表示法来表示算法的时间复杂度常见的时间复杂度量级常数阶O(1)线性阶O(n)对数阶O(logN)线性对数阶O(nlogN)
2021-04-09 21:52:09
102
原创 css实现三角形
设置border属性实现实现思路: 将盒子的宽高都设置为0, 再通过设置border-top等属性来实现<style> #app{ width: 0px; height: 0px; border-bottom: 100px solid blue; border-left: 50px solid green; border-right: 50px solid gray; margin: 20px; }
2021-03-29 16:21:11
82
原创 重绘与重排
重绘与重排浏览器渲染过程重绘重排如何减少重绘与重排浏览器渲染过程HTML代码被HTML解析器解析成DOM树CSS代码被css解析器解析成CSSOM树结合DOM树与CSSOM树,生成渲染树生成布局（flow），即将所有渲染树的所有节点进行平面合成将布局绘制（paint）在屏幕上在这些过程中,生成布局与布局绘制最耗费性能,因此我们应该减少不必要的这两种操作.重绘重绘: 我们对DOM的修改造成元素样式的改变，但并未造成元素几何属性的变化（比如修改元素的背景色或字体颜色）。因此浏览器并不需要重
2021-03-23 11:30:51
103
原创 强缓存与协商缓存
强缓存与协商缓存强缓存expiresCache-Control协商缓存Etag/If-None-MatchLast-Modify/If-Modify-Since优先级区别浏览器缓存包含两种方式: 强缓存与协商缓存强缓存在第一次请求资源时，服务器返回所请求资源与有效时间,，浏览器将其缓存在本地，在第二次请求该资源时， 浏览器判断该资源是否在有效期中，如果在有效期就直接调用该资源，不向服务端发起请求。expiresExpires是http1.0的规范，它的值是一个绝对时间的GMT格式的时间字符串，这个
2021-03-19 16:17:38
465
原创 js作用域
js作用域变量作用域全局作用域函数作用域块级作用域内部变量覆盖外层变量循环变量泄露为全局变量变量作用域js中有两种作用域: 全局作用域和函数作用域全局作用域直接编写在JS的script标签中的全局作用域在页面打开时创建，在页面关闭时销毁有一个全局对象window，代表一个浏览器窗口，由浏览器创建，我们可以直接使用全局作用域中 创建的变量都作为window对象的属性保存全局作用域中 创建的函数都作为window对象的方法保存全局作用域中的变量是全局变量，页面任意部分都可以调用 //变
2021-03-02 11:37:25
164
1
原创 Vue项目优化之保存密码
vue中的cookie保存密码功能思路实现代码实现效果保存密码功能在目前大多数网站中,在你登录时都拥有保存密码的功能.因此在我的vue项目优化过程中添加该功能思路实现过程: 在点击登录按钮后,如果是正确的账号密码,就将账号作为cookie名称,将密码作为cookie的值进行保存;在第二次登陆时,账号输入框失焦后触发事件,开始查找以当前输入框账号为名称的cookie值,如果找到就返回密码,如果未找到就返回空字符串.实现代码先创建一个js文件用于引入export function setCooki
2021-02-18 11:51:47
488
原创 前端性能优化之图片按需加载
按需加载为什么要做性能优化？什么是按需加载按需加载思路代码为什么要做性能优化？1、加快页面展示和运行速度(增强用户体验)2、节约服务器带宽流量3、减少服务器压力什么是按需加载按需加载是前端性能优化的一大措施。顾名思义，按需加载就是根据需要去加载资源。比如在html代码中我们会使用img标签来插入图片，而加载图片需要时间，一旦图片过多过大，就需要用户等待很长时间才能将页面加载出来。因此我们可以用体积较小的占位图来代替暂时不需要展示的图片，以此来减少加载时间。很明显占位图比正常图片小很多,这样就可
2021-02-11 16:51:00
806
原创 防抖与节流
防抖与节流简介防抖节流区别简介在给DOM绑定事件时，有些事件我们是无法控制触发频率的。 如鼠标移动事件onmousemove, 滚动滚动条事件onscroll，窗口大小改变事件onresize，瞬间的操作都会导致这些事件会被高频触发。如果事件的回调函数较为复杂，就会导致响应跟不上触发，出现页面卡顿，假死现象。<script> window.onmousemove=function(event){ let X = event.clientX console.l
2021-02-06 12:18:01
94
原创 MySQL操作
MySQLMySQL数据库数据库操作增删改查一、普通查询：二、条件查询： select 列名 from 表名 where 条件三、排序：四、限制：五、聚合：六、多表连接查询：MySQL数据库数据库(DataBase)：数据库是按照数据结构来组织、存储和管理数据的仓库。数据库管理系统（Database Management SystemDBMS）：是专门用于管理数据库的计算机系统软件。数据库管理系统能够为数据库提供数据的定义、建立、维护、查询和统计等操作功能，并完成对数据完整性、安全性进行控制的功能。数
2021-01-04 22:37:50
226
原创 JQuery考点
jQueryjquery简介jquery操作jquery入口程序jquery对象jQuery选择器jQuery属性jQuery样式操作操作标签控件的html内容操作表单控件的值(文本、选择框)jquery简介jQuery是由美国人John Resig于2006年初创建的，至今已吸引了来自世界各地的众多JavaScript高手加入其team，包括来自德国的Jörn Zaefferer 、罗马尼亚的Stefan Petre等等。它的体积很小，代码风格独特而又优雅，改变了JavaScript程序员编写程序
2021-01-02 22:35:38
207
原创 HTTP和计算机网络
计算机网络浏览器访问网站的过程TCP三次握手四次挥手浏览器访问网站的过程1, 浏览器地址栏中输入地址2, 浏览器通过用户在地址栏中输入的url 构建https请求3, 浏览器发起DNS解析请求, 将域名转换为 IP地址4, 浏览器将请求的报文头, 发送给服务器5, 服务器接收到请求报文头, 并解析6, 服务器处理用户请求 并将处理的 结果封装成 http响应7, 服务器将 http响应 报文头发送给 浏览器8, 浏览器接收到服务器 响应的http报文, 并解析9, 浏览器
2020-12-29 22:13:35
145
原创 HTML/CSS考点(更新中...)
html/csscss权重及引入方法a标签的作用css权重及引入方法css权重越大,优先级越高先说说 CSS 7 种基础的选择器：ID 选择器， 如 #id{}类选择器， 如 .class{}属性选择器， 如 a[href=“segmentfault.com”]{}伪类选择器， 如 :hover{}伪元素选择器， 如 ::before{}标签选择器， 如 span{}通配选择器， 如 *{}CSS 优先规则3：优先级关系：内联样式 > ID 选择器 > 类选择器 = 属
2020-12-23 16:14:56
229
原创 Echarts数据可视化
EchartsEcharts 简介Echarts快速上手柱状图柱状图的基本使用其他常见效果通用配置项titletooltiptoolboxlegend折线图折线图基本配置其他效果饼状图Echarts 简介Echarts 缩写来自 Enterprise Charts（商业级数据图表），是百度的一个开源的数据可视化工具Echarts 能够绘制 2D 和 3D 的饼状图、柱状图、折线图等几乎所有我们能够见到的图形Echarts 能够在 PC 端和移动设备上流畅运行，兼容当前绝大部分浏览器
2020-12-20 22:45:55
20207
2
原创 React受控组件及组件通讯
组件受控组件组件通讯父子组件传值父向子子向父兄弟组件受控组件受控组件通常指的是表单，因为表单是可输入的，必须有对应的状态与之绑定React 将 state与表单的 value值绑定到一起给表单元素绑定change事件，将表单元素的值设置为state的值，接收表单值变化import React from 'react'import ReactDOM from 'react-dom'class App extends React.Component{ // 1. state 中设置数据
2020-12-15 22:48:19
124
原创 React组件基础及组件状态
组件组件分类函数组件类组件组件抽离事件处理事件对象函数形式实现事件组件状态state的基本使用修改state中的数据this的指向组件分类函数组件使用函数创建的组件叫做 函数组件函数名称首字母必须以大写字母开头函数组件必须有返回值，而且是 JSX 结构； 返回值可以为 null， 意思是不渲染任何内容使用函数名作为组件标签名import React from 'react'import ReactDOM from 'react-dom'function App(){ return
2020-12-14 22:57:38
179
原创 React路由
react路由使用方法路由执行过程默认路由编程式导航精确匹配使用方法使用步骤：安装： npm i react-router-dom导入路由的三个核心组件： Router / Route / Link使用 Router 组件包裹整个应用内容使用 Link 定义路由使用 Route 定义路由对应的组件import React from 'react'import ReactDOM from 'react-dom'//1. 导入路由模块import {BrowserRouter as R
2020-12-12 22:10:04
225
1
原创 React框架的基本使用
ReactReact概述React简介React特点项目搭建React项目结构说明React基本使用jsxjsx中的表达式条件渲染循环渲染样式处理总结React概述React简介React 是一个 MVC 框架React 主要是用来构建 UIReact 是起源于Facebook的内部项目，用于构建 Instagram 网站，在 2013.05 开源React特点声明式：使用 React 编写UI界面和写HTML几乎一样高效： React通过对DOM的模拟，最大限度地减少与DOM的交互
2020-12-11 14:51:12
10033
原创 跨域及解决方法-jsonp
跨域什么是跨域如何解决跨域jsonp案例点击事件发送jsonp请求函数的封装什么是跨域简单来说就是 A 网站的 javascript 代码试图访问 B 网站，包括提交和获取内容。由于安全原因，跨域访问是被各大浏览器所默认禁止的。协议、ip（域名）、端口号 三者之中只要有一个不一样就是跨域比如在http://www.xxx.com:80中调用下面三个都是跨域http://mail.xxx.com:80 跨域（域名不同）https://www.xxx.com:80 跨域（协议不同）htt
2020-12-08 21:34:31
198
2
原创 剑指offer js编程题(更新中...)
题目二维数组中的查找替换空格从尾到头打印链表旋转数组中的最小数斐波那切数列二维数组中的查找在一个二维数组中（每个一维数组的长度相同），每一行都按照从左到右递增的顺序排序，每一列都按照从上到下递增的顺序排序。请完成一个函数，输入这样的一个二维数组和一个整数，判断数组中是否含有该整数。function Find(target, array){ for ( i=0; i<array.length; i++ ) { var b = array[i] for(j=
2020-12-02 16:21:09
134
原创 链表
目录什么是链表链表的一些操作链表与数组的区别链表转数组数组转链表什么是链表链表实际上是线性表的链式存储结构，与数组不同的是，它是用一组任意的存储单元来存储线性表中的数据，存储单元不一定是连续的，且链表的长度不是固定的，链表数据的这一特点使其可以非常的方便地实现节点的插入和删除操作链表是一组节点组成的集合，每个节点都使用一个对象的引用来指向它的后一个节点。指向另一节点的引用讲做链。链表的一些操作向链表中插入一个节点的效率很高，需要修改它前面的节点(前驱)，使其指向新加入的节点，而将新节点指向原来前
2020-12-02 16:13:38
209
原创 Vue组件不更新解决方法
目录vue组件不更新组件不更新的状况原因解决方法增加不同:key值vue组件不更新组件不更新的状况<style> .router-link-active{ color:red } </style> <div id="app"> <router-link to="/login/?id=10">登录</router-link> <rout
2020-11-13 12:15:10
2060
原创 localStorage和sessionStoreage和cookie 之间的区别
vue组件保存数据方法简介localStoragesessionStoreagecookie区别简介在vue组件学习中，我们学习了利用this.$emit来实现组件之间的数据传递，接下来我们将学习利用浏览器本地存储来传递数据localStoragelocalStorage的生命周期是永久，也就是说除非用户在浏览器提供的UI上清除localStorage数据，否则这些信息将永久保存。localStorage 有存储大小的限制但可以达到5M或更大。<div id="app">
2020-11-10 22:29:52
886
原创 Vue组件
vue组件简介定义方法全局组件私有组件组件切换组件间的数据传递父子组件简介组件（Component）是 Vue.js 最强大的功能之一。它可以扩展 HTML 元素，封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：定义方法在定义了组件后，需要将它在Vue范围内调用才能生效全局组件全局组件顾名思义可以在所有的vue范围内使用Vue.component(tagName, options)tagName:自定义组件名称op
2020-11-10 12:40:07
189
1
原创 vue的生命周期
生命周期什么是生命周期生命周期分类创建时期的生命周期事件运行期间的生命周期事件销毁期间的生命周期事件什么是生命周期从vue实例创建、运行、到销毁整个过程，总是伴随着各种各样的事件，这些事件统称为生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。每一个组件或者实例都会经历一个完整的生命周期，总共分为三个阶段：初始化、运行中、销毁。1.实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate钩子函数，这个时候，数据还没有挂载呢，只是一个空壳
2020-11-05 21:10:12
726
1
原创 vue双向绑定及过滤器
vuev-model双向绑定v-model作用v-model小案例vue为元素增添样式:class='':style=''v-for遍历遍历数组遍历对象遍历数字v-show/if二级目录二级目录二级目录二级目录v-model双向绑定v-model作用我们知道Vue的核心特性之一是双向绑定，vue的响应式原理是从数据到视图，比如我们之前学的v-text,v-html都是从数据层到视图层。接下来我们要学习从视图到数据的原理。v-model是一个指令，只能在input、select、textarea、co
2020-11-04 20:26:13
720
原创 nodejs创建图书管理系统
图书管理系统实现增删改查在json文件中实现创建主入口文件index.js路由分配层业务逻辑层相关文件连接数据库实现修改业务逻辑层在json文件中实现(1) 使用json使用三层架构 去写第一层: index.js第二层: router.js 路由封装第三层: service.js 业务逻辑创建主入口文件index.js//引入相应模块const express = require('express');const bodyParser = require('body-par
2020-10-30 21:42:11
2858
2
原创 git操作
git操作步骤git的作用创建一个目录初始化一个本地仓库设置签名二级目录二级目录二级目录二级目录git的作用git是一种版本控制工具在工作中,项目通常是以团队协作来完成的,git也是提供团队协作开发的一款工具git也提供了的本地的仓库 用来存储(托管代码)数据创建一个目录目录中放想要保存到仓库的文件初始化一个本地仓库在安装好git后,在你创建的目录下通过shift加右键打开powershall窗口,在窗口中输入git init.这里创建了一个空的仓库在当前文件夹下,返回目录可以看到多
2020-10-29 20:19:50
149
1
原创 vue构造及基本语法
vue是一套构建用户界面的框架,只关注视图层,容易上手,还便于与第三方库或既有的项目整合.vuevue的简介及使用vue的构造器vue的模板语法引用文本绑定属性v-bind:stylev-bind:class绑定事件vue的简介及使用vue是一套构建用户界面的框架,只关注视图层,容易上手,还便于与第三方库或既有的项目整合.它的使用方法与jQuery类似，只需要script标签将其引入html文件即可<script src="https://cdnjs.cloudflare.com/ajax/
2020-10-27 20:58:59
389
原创 nodejs实现登陆验证
登陆验证需要提交数据，一种使用form表单提交数据，另一种使用原生js提交数据目录form表单提交原生js提交form表单提交搭建后台服务器const express = require('express')const app = express()const bodyparser = require('body-parser')//挂载参数处理的中间件//extended:false 表示使用系统模块querystring来处理 将字符串转化为对象app.use(bodyparser.u
2020-10-22 21:37:55
2893
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人