自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

静水流深

一个小白的学习记录

原创 Vue项目中使用过滤器

为什么要使用过滤器? ​ 能够对数据进行各种过滤处理,返回需要的结果,非常的方便和快捷。 怎么使用过滤器? ​ 首先过滤器分为两类: >- 全局过滤器 >- 局部过滤器 例如: Vue.filter('filterDome', function(val) { ...

2020-03-10 17:45:32 147 0

原创 Vue项目中使用iconfont

首先创建自己的iconfont项目 设置步骤如下: 其中Font Family的值默认就可以,之后添加一些图标到自己的项目中。 下载iconfont到本地 下载到本地之后解压选中下面几个文件 在项目中建立引用 现在项目中建立一个iconfont的文件,把上面几个文件复制到这个文件中: 之后...

2020-03-09 16:14:07 49 0

原创 模拟window系统的ip输入框(支持粘贴复制)

需求: 支持点、回车、长度三位之后自动跳转到下个输入框 支持删除自动回退到前一个 支持任意位置粘贴ip 效果: 进行vue代码的封装: /** * IP输入组件 */ <template> <ul class="ipAdress" ...

2020-03-02 18:33:11 100 0

原创 vue项目代码注释规范

文件注释规范 ​ 单个文件注释规范,每个独立的VUE文件开头都要进行注释,表明该文件的描述信息、作者、创建时间等。 <!-- * @FileDescription: 该文件的描述信息 * @Author: 作者信息 * @Date: 文件创建时间 * @LastEditors: 最后...

2020-02-20 11:48:16 1768 0

原创 CSS常用技巧

技巧一:渐变色问题 <html> <head> <style> .gradient-text { background-image: linear-gradient(90deg, red, blue); ...

2020-02-18 17:08:49 68 0

原创 CSS模拟电池充电效果的实现

模拟简单的电池充电效果 先画出电池的轮廓 <html> <head> <style> html,body { width: 100%; height: 100%; d...

2019-12-24 11:45:55 587 1

原创 基于DOM元素的自定义窗格思路以及实现

效果如下: 实现的思路 怎么实现款选时选中的白线的效果,怎么实现模拟对下面小的框格的选中效果。 怎样进行合并之后窗格的布局显示,以及合并之后的再合并操作 怎样进行还原操作,以及怎样判断框选主的是矩形(只允许框选矩形进行合并) … 实现的步骤: 构造需要操作的div并设...

2019-10-07 11:30:26 56 0

原创 Vue实现类似于word插入表格时选中行列的效果

首先看一下效果: 实现的思路: 先设置一个容器的,容器中放上10×10的小格子,同时监听容器的进入和离开方法。 每个小格子上设置鼠标进入的方法,同时传入当前的序号,计算出当前的行和列,改变背景颜色。 监听容器的是从那个位置进入,只有从左边和上边进入有效。 相关的核心代码: 判断鼠标移入元素...

2019-09-28 18:42:21 275 3

原创 详解HTTP摘要认证

典型的认证过程 客户端请求一个需要认证的页面,但是不提供[用户名]和[密码]。通常这是由于用户简单的输入了一个地址或者在页面中点击了某个[超链接]。 服务器返回[401] “Unauthorized” 响应代码,并提供认证域(realm),以及一个随机生成的、只使用一次的数值,称为[密码随...

2019-08-31 17:28:53 190 0

原创 vue项目开发规范总结

强制执行的: 文件名要为多个单词,且语义明确,同时要为大写驼峰 组件名应该始终是多个单词的,根组件 App 以及 、 之类的 Vue 内置组件除外。 反例: Vue.component('todo', { // ... }) 好例: export default { ...

2019-08-28 16:48:32 97 0

原创 Vue学习笔记(三)------配置项

包管理工具和配置项 npm和package.json npm 是 Node Package Manager 的简称,顾名思义,它是 node 的包管理工具,也是目前世界上最大的开源库生态系统。 使用 vue-cli 来构建自己的项目,并生成了相应的目录结构,而在最外层目录中,我们可以看到有 p...

2019-07-20 17:33:15 220 0

原创 OpenLayers实现小车的轨迹查询的功能

支持实现的功能 限制3天的时间跨度 小车在运动中改变速度 小车重新运动 小车运动的点位支持打开详情信息 这是自己当时刚从后端切到前端时,实现的第一个功能,当时都没有接触过前后端分离的开发模式,更不知道react,抱着现学现做的态度做的…,可能有需要的同学,做个参考吧。 import React...

2019-06-04 19:57:43 732 2

原创 Vue学习笔记(二)------axios学习

axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。 axios的功能和特征: 从浏览器中创建XMLHttpRequests 从node.js中创建http请求 支持PromiseAPI 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转化JS...

2019-04-20 17:34:53 116 0

原创 vue学习笔记(一)------脚手架vue cli

脚手架vue-cli(3.x) vue-cli是一个基于vue.js进行快速开发的完整系统,提供下面几个功能: 通过 @vue/cli 搭建交互式的项目脚手架。 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。 一个运行时依赖 (@vue/cl...

2019-04-17 16:46:35 332 0

转载 图解原型和原型链

原型和原型链是 JS 中不可避免需要碰到的知识点

2019-04-03 17:12:47 92 0

原创 React中使用地图时一些常用方法总结

WGS84转换为火星 /** * 从84转火星 * @param {Number} wgsLng 经度 * @param {Number} wgsLat 纬度 * @return {[Number,Number]} point */ g...

2019-03-26 19:30:40 197 0

原创 在React中实现一个简单的SVG背景图

在React中实现简单的Svg背景框 首先我们需要定义一个SVG.jsx组件,这个组件用于绘制svg背景: import React from 'react' import { Component } from 'react' ...

2019-03-26 19:15:07 953 0

原创 Flex布局讲解

Flex弹性盒布局 Flex是Flexible Box的缩写,意为’弹性布局’。 任意一个容器都可以指定为Flex布局: .box{ display: flex; } 注意一点:设置flex布局之后,子元素的float、clear和vertical-align属性将失效。 基本概念 ​...

2019-03-26 16:45:24 103 0

原创 Spring MVC +Spring Boot + Mybatis项目整合

开发环境使用IDEA 通过IDEA新建项目 点击下一步: 填写完成项目名之后点击下一步: 点击下一步: 点击完成之后便开始创建项目了,项目的目录结构如下: 删掉一些不需要的文件夹,并在pom文件中添加我们需要的依赖: 添加mysql和mybatis的依赖: 删除掉reource...

2019-03-20 16:10:35 337 0

原创 理解并使用Redux

1.为什么要使用redux ​ 像父子组件之间相互传值相互调用的情况,并且值的适用范围仅限于父子组件之间,这时不需要使用Redux. 当某个子组件去更新某种状态时,比如更新组织机构数据。而其他的页面又需要依赖这些数据时,此时可以考虑使用redux,把这些状态值放入到redux中进行管理。 ...

2019-03-17 10:45:11 197 0

转载 react 函数式组件和类组件的应用场景

函数式组件 操作非常简单 能够实现的功能非常简单,只是简单的调取和返JSX而已 类组件 1.操作相对复杂一些,可以实现一些更为复杂的业务场景。 2. 能够使用生命周期函数操作操作业务 3. 函数式组件可以理解为静态组件(组件中内容调取时已经固定了,很难在修改),而类这种方式,可以根据组件...

2019-03-15 09:45:14 926 0

原创 常用HTTP响应状态码

web应用中常用的响应状态码: 状态代码有三位数字组成,第一个数字定义了响应的类别,且有五种可能取值: 1xx:指示信息–表示请求已接收,继续处理 2xx:成功–表示请求已被成功接收、理解、接受 3xx:重定向–信息不完整需要进一步补充 4xx:客户端错误–请求有语法错误或请求无法实现 5xx...

2019-03-10 11:54:47 1343 0

原创 localStorage、sessionStorage、Cookie的区别详解

localStorage、sessionStorage、Cookie共同点: 都保存在浏览器端,且是同源的(顺便解释一下同源:域名、协议、端口号相同) localStorage、sessionStorage、Cookie不共同点: 存储大小的不同: localStorage的大小一般为...

2019-03-09 18:20:56 3036 0

原创 JavaScript中闭包和display:inline-block的知识点记录

闭包 闭包是由函数以及创建的函数的词法环境组合而成,这个环境包含了闭包创建时所能访问的所有的局部变量。 实例: /** * 闭包的实例 * @param x * @returns {function(*): *} */ function ma...

2019-03-08 16:24:40 76 0

原创 JavaScript中实现深拷贝(针对于对象)

/** * 对象深拷贝(只适用于对象) * @param {*} sourceObj 源对象 * @param {*} targetObj 目标对象 */ function deepClone(sourceOb...

2019-03-07 16:57:47 71 0

原创 React项目中使用less总结

如何在react项目中安装less 安装react-app-rewired,react-app-rewire-less,babel-plugin-import插件 执行命令: npm install react-app-rewired --save-dev npm install reac...

2019-03-05 19:28:11 8551 2

原创 JavaScript中防止函数多次调用:防抖和节流

防抖 你是否在日常开发中遇到一个问题,在滚动事件中需要做个复杂计算或者实现一个按钮的防二次点击操作。 这些需求都可以通过函数防抖动来实现。尤其是第一个需求,如果在频繁的事件回调中做复杂计算,很有可能导致页面卡顿,不如将多次计算合并为一次计算,只在一个精确点做操作。 PS:防抖和节流的作用都...

2019-02-20 08:04:57 649 0

原创 前端需要掌握的Nginx知识点

什么是Nginx? Nginx是一款免费开源的高性能HTTP服务器以及反向代理服务器(Reverse Proxy),同时可以提供IMAP/POP3/SMATP代理服务等功能。能够快速的响应静态页面请求和支持第三方功能模块扩展。 Nginx的优点 高并发、高性能(官方给出的并发数据5万,实际...

2018-12-15 16:03:15 109 0

原创 React项目中请求接口的封装

封装目录中所包含的文件 Api.js ApiIp.js ApiURL.js ApiIp.js文件的作用 这个文件的作用主要是在开发环境和生产环境下调用不同的接口请求地址,生产环境下此文件的作用是动态 的获取浏览器中的地址进行拼装,便可以动态的获取地址,不需要写死 //获取当前的UR...

2018-12-10 15:18:06 5585 2

原创 React中eslint使用总结

eslint常用配置: module.exports = { // 环境定义了预定义的全局变量 "env": { "browser": true, "node":true, ...

2018-12-10 10:44:08 2680 0

原创 CSS布局解决方案

居中布局 水平居中 使用inline-block+text-align 原理:先将子框由块级元素改变为行内块元素,再通过设置行内块元素居中以达到水平居中。 用法:对子框设置display:inline-block,对父框设置text-align:center。 &a...

2018-12-10 10:30:11 79 0

原创 IE浏览器中Get请求方式有缓存的问题

在前端项目开发中,会遇到一种很奇怪的情况,就是在IE浏览器中get请求方式在初次请求之后不再进行请求了,而是会从缓存中获取数据,但是chrome浏览器会中却每次都会获取。 ​ 自然的想到一个问题,就是get存在缓存的问题! 起源: ​ 常见的是ajax请求过一次以后,以后的相同url的...

2018-12-10 10:00:07 2741 0

原创 Nginx与前端开发

Nginx与node.js “Nginx是一款轻量级的HTTP服务器,采用事件驱动的异步非阻塞处理方式框架,这让其具有极好的IO性能,时常用于服务端的反向代理和负载均衡。” ​ 作为前端开发,即使没用过Nginx,但一定听说过上面这句话。这句经典的话,基本构成了所有人对Nginx的第一印象。 ...

2018-12-10 09:54:01 688 0

原创 Animation.css学习笔记

animation.css是一款非常炫酷、有趣、跨浏览器的预设css3动画库,便于你在项目中引用。 安装 npm install animate.css --save 或者 yarn add animate.css 或者直接下载 使用 在项目中引用 &amp;amp;a...

2018-12-08 18:07:38 194 0

原创 CSS3实现侧边栏快速定位的隐藏和消失

Dome &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&am...

2018-12-03 23:13:17 1869 0

原创 常用正则表达式

1.校验数字的表达式 1 数字:^[0-9]$ 2 n位的数字:^\d{n}$ 3 至少n位的数字:^\d{n,}$ 4 m-n位的数字:^\d{m,n}$ 5 零和非零开头的数字:^(0|[1-9][0-9])$ 6 非零开头的最多带两位小数的数字:^([1-9][0-9])+(.[0-9]{...

2018-08-06 22:30:41 90 0

原创 Bootstrap学习总结

1.Bootstap的使用模板 &lt;!DOCTYPE html&gt; &lt;html lang="zh-CN"&gt; &lt;head&gt; &lt;meta charset="ut...

2018-08-05 12:02:18 1289 0

原创 Spring Boot 解决跨域问题

一、@CrossOrigin注解方式 Controller method CORS configuration 这里我们在users映射的方法getUserList上面加上@CrossOrigin @CrossOrigin @RequestMapping(value = &...

2018-08-01 21:50:54 521 0

转载 水波图实现原理

在项目中自己使用 Canvas 实现了一下水波图,在这里给大家分享一下它的实现原理。一开始看到波浪,可能不知道从何入手,我们来看看波浪的特征就会有灵感了。 没错,有人肯定会想到,就是 正余弦曲线!对于波陡很小的波动,一般选择正弦或余弦的曲线来表示波形,这是最简单而又最接近实际波形...

2018-07-22 17:04:35 2753 2

原创 web开发常见问题整理

This指向问题 1. 在方法中谁调用this就指向谁 在对象方法中调用 事件绑定 事件监听 2. 在构造函数或者构造函数原型对象中this指向构造函数的实例 在项目中this指向问题的常见示例: 上面1: 因为在setInterval中要设...

2018-07-03 08:00:52 2390 0

提示
确定要删除当前文章?
取消 删除