- 博客(117)
- 收藏
- 关注
RSS订阅原创 react实现分页列表滚动到某一位置，点击跳转到详情页返回继续保持进入的位置
原理：利用react-activation插件实现页面位置的保持，然后使用redux进行数据的更新一、安装react-activation插件怎么使用react-activation可以参考：https://github.com/CJY0208/react-activation/blob/master/README_CN.md二、列表页使用组件页面内引入 import KeepAlive, { withAliveScope } from ‘react-activation’;注意KeepAliv
2021-01-11 11:03:59
2079
原创 promise和setTimeout的执行顺序
一、前言promise为es6引进的语言标准，为异步编程的一种解决方案；阅读此文的前提是了解浏览器event loop的机制，还有promise的基本用法和特性，比如他自执行特性、状态不可逆特性等二、问题setTimeout(function(){console.log(1)},0);new Promise(function(resolve){ console.log(2) for( var i=0 ; i<10000 ; i++ ){ i==9999 &am
2020-11-03 17:18:57
1003
1
原创 前后端实现分片上传超大文件
前端原代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JS分片上传-极速上传</title></head><body> <input type="file" name="slice" id="slice" > <div id="output"><
2020-11-03 11:26:24
1070
原创 使用svg定制化绘制圆环、漏斗
成品展示图：直接上代码//svg绘制漏斗 svgRender( left, index, text, topWidth, height, bottomWidth, colorOne, colorTwo, isActive ) { return ( <div style={{ position: 'relative', width: { to
2020-10-27 13:46:16
437
原创 前端工作中非常实用的工具
一、开发工具vscode,sublime,atom,webstorm插件插件描述Beautify格式化代码,统计编码风格Bracket Pair Colorizer给括号加上不同的颜色，便于区分不同的区块Markdown Preview Enhanced实时预览markdown，markdown使用者必备open in browser在浏览器打开文件.支持自定义浏览器Path Intellisense自动提示文件路径，支持各种快速引入文件Rea
2020-10-27 13:34:28
215
2
原创 公司多人开发git管理流程
一、首先早上一进公司要做的事情就是从远程拉取最新代码并开启一个新分支执行git命令：git checkout 主分支 //切换到主分支git pull --rebase origin 主分支 //从主分支上拉取最新代码git checkout -b 开发分支 主分支 //从主分支上新建一个分支并切换过去开发代码...中间可能会多个commit git commit -m "注释"git commit -m "注释"...开发完毕,发布远程git rebase -i//将多个commi
2020-05-19 09:26:40
621
原创 原生js和jquery实现头部tab栏点击滚动居中
效果图：直接上demo<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title>
2020-05-09 10:01:26
827
2
原创 移动端调试神器：vConsole调试console
前言因为最近一直在弄移动端项目，由于在移动端无法打开控制台，所以想办法打印调试console的数据一直苦恼。之前用的是chrome的inspect调试，但是只能使用移动版的chrome查看数据，兼容不好，所以最近使用了vConsole 进行调试使用首先去下载相关的代码，由于只需要在页面引入一个js文件，直接去下载就可以，地址：js下载地址或者使用 npm 安装：npm install v...
2020-04-07 14:08:50
1147
原创 解决数据库的一段内容中有两个空格，从后台读取后显示到前端页面上只有一个的问题
因为浏览器默认只认同字符中间的一个空格，其他忽略如果用以上两个标记强制浏览器按照你的预编排的格式的话，那就严格按照你的数据格式输出把数据放到HTML代码的<pre></pre>标记或<xmp></xmp>标记里面，就解决了注意，放在标记中间的HTML标记会按照原样输出...
2020-04-01 17:31:22
2514
原创 Spring Boot 整合Redis :spring-boot-starter-data-redis
1.添加maven依赖<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-redis</artifactId></dependency><!-- redis依赖co...
2020-03-26 11:42:24
4630
1
原创 基于three.js超级炫酷的元素周期表和中国地图（html版本和vue版本）
一、元素周期表演示地址：https://demo.demohuo.top/jquery/10/1035/demo/效果图：二、中国地图效果图：如果要使用在vue项目里，并且全屏显示则需要通过iframe标签将源码引入即可<template> <div style="margin:0px;padding:0px;overflow:hidden"> &...
2020-03-24 11:01:54
1903
1
原创 vue和html两种方式实现可拖拽对话框以及最小化
html方式：<!doctype html><html><head><meta charset="utf-8"><title>弹框（拖动）</title><style type="text/css">.pannel{ width: 500px; height: 300px; b...
2020-03-12 15:41:44
2129
1
原创 Vue适配test环境变量从而判断开发，测试和生产环境
VUE中通过process.env判断开发，测试和生产环境，并分环境配置不同的URL通过process.env做判断和处理1，找到项目配置文件夹：config文件夹2，进入如下三个文件：dev.env.js 对应开发环境test.env.js 对应测试环境prod.env.js 对应生产环境找到如下代码：// 开发环境module.exports = merge(prodEnv...
2020-03-11 14:35:27
1470
原创 springboot集成websocket
WebSocket跟常规的http协议的区别和优缺点这里大概描述一下一、websocket与httphttp协议是用在应用层的协议，他是基于tcp协议的，http协议建立链接也必须要有三次握手才能发送信息。http链接分为短链接，长链接，短链接是每次请求都要三次握手才能发送自己的信息。即每一个request对应一个response。长链接是在一定的期限内保持链接。保持TCP连接不断开。客户端与...
2020-03-09 17:45:52
186
原创 html5选择多张图片在页面内预览
需求：点击选择图片(可选多张)，确定后将选择的图片显示在页面上，点击提交将图片提交给后台。效果图：源码demo：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>showImages</title><style type="text/css"...
2020-03-09 16:38:34
2655
原创 SpringBoot 中使用Redis缓存
在项目中对数据的访问往往都是直接访问数据库的方式，但如果对数据的访问量很大或者访问很频繁的话，将会对数据库来很大的压力，甚至造成数据库崩溃。为了解决这类问题redis数据库脱颖而出，redis数据库出现时是以非关系数据库的光环展示在广大程序猿的面前的，后来redis的迭代版本支持了缓存数据、登录session状态（分布式session共享）等。所以又被作为内存缓存的形式应用到大型企业级项目中。一...
2020-03-09 14:56:56
423
原创 springboot项目输入打印日志文件到本地
pom.xml中添加jar包：<dependency> <groupId>ch.qos.logback</groupId> <artifactId>logback-classic</artifactId></dependency><dependency> <groupId>...
2020-03-09 14:30:59
2207
转载 SpringBoot2.0项目集成Shiro进行授权验证
项目版本：springboot2.xshiro：1.3.2Maven配置：<dependency> <groupId>org.apache.shiro</groupId> <artifactId>shiro-spring</artifactId> <version>1.3.2</version...
2020-03-06 18:15:04
363
原创 java阿里短信接口调用
一、导入jar包 <dependency> <groupId>com.aliyun.mns</groupId> <artifactId>aliyun-sdk-mns</artifactId> <version>1.1.8</version> </...
2020-03-04 16:44:55
884
原创 SpringBoot项目部署到阿里云服务器详细步骤
SpringBoot项目部署到阿里云linux服务器全流程文章里所有需要的软件、jdk、mysql、xshell等下载地址：链接：https://pan.baidu.com/s/11PvQRdyv0zUzJCNuZ15nlA 提取码：gsj8一、申请阿里云服务器1.1 前往阿里云官网：https://www.aliyun.com/1.2 注册一个账号，登陆账号1.3 按如下步骤申...
2020-02-28 14:15:51
37811
47
原创 H5移动端点击按钮复制文本到粘贴板
前端H5移动端点击按钮文本信息使用开源项目 clipboard.js，官网：https://clipboardjs.com/可以通过script标签引入也可以通过npm安装，npm install clipboard.js --save-dev(注:这个插件复制的对象必须是input 或者 textarea 里面的值。所以说你要是想复制p标签或者其他文本 必须先设置一个input或者t...
2020-02-27 11:20:35
2891
原创 前后端分离，springboot项目后台解决前台跨域问题
前后端分离，遇到跨域问题，java中的解决方案，前端不需要做跨域问题解决，后端去解决跨域问题。只要在项目中添加一个过滤器就可以了，如下：import org.slf4j.Logger;import org.slf4j.LoggerFactory;import org.springframework.stereotype.Component;import javax.servlet.*;...
2020-02-26 14:24:23
1735
2
转载 springboot项目实现图片上传到阿里云OSS
阿里云OSS文件/图片上传流程服务端签名后直传并设置上传回调客户端向服务端发起签名请求后，直传OSS然后OSS会回调对应的服务端回调接口，OSS回调完成后，应用服务器再返回结果给客户端。特点：用户上传一个文件到OSS后，OSS会将上传结果返回给应用服务器，然后应用服务器会给OSS响应，然后OSS会将相关响应通知给客户端的用户。Java代码：导入阿里云的jar<dependenc...
2020-02-26 14:02:28
6581
原创 vue 点击图片预览大图
简单插件：1.安装vue-directive-image-previewer命令行输入npm install vue-directive-image-previewer -D2.main.js中引入import VueDirectiveImagePreviewer from 'vue-directive-image-previewer'import 'vue-directive-im...
2020-02-26 10:13:12
6484
6
原创 使用devtools工具包实现springboot热部署
springboot有3中热部署方式：一、使用springloaded配置pom.xml文件，使用mvn spring-boot:run启动二、使用springloaded本地加载启动，配置jvm参数-javaagent:<jar包地址> -noverify三、使用devtools工具包，操作简单，但是每次需要重新部署具体配置方法：1、在pom.xml中添加依赖<d...
2020-02-25 15:38:08
1770
原创 使用内网穿透进行外网访问本地服务
utools配置内网穿透utoos下载地址：链接：https://pan.baidu.com/s/1OSRqfYZEDKHd0hrHYYKzhw提取码：t7dt一、首先安装utools工具，搜索“内网穿透”：二、内网穿透配置连接方式：http服务即常规把内网IP转化为外网IP，可供外网来访问本机资源，需要本地部署web服务器，将要访问的资源放在本地服务器。本地目录即指定一个...
2020-02-24 12:11:32
1563
1
转载 springboot使用swagger2入门demo
参考地址：https://blog.csdn.net/weixin_44490222/article/details/89765929Swagger2手写接口文档手写Api文档的几个痛点：1.文档需要更新的时候，需要再次发送一份给前端，也就是文档更新交流不及时。2.接口返回结果不明确3.不能直接在线测试接口，通常需要使用工具，比如postman4.接口文档太多，不好管理swagg...
2020-02-23 20:07:51
493
原创 倒三角和对钩效果
效果图：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><style>.triangle{ display: block; width: 0px; height: 0px; borde...
2020-01-09 13:46:01
1160
原创 localStorage本地存储数组对象
存var arrLi = [{“search_content”:“火锅”},{“search_content”:“火锅1”},{“search_content”:“火锅2”}];//定义localStorage.setItem(“searchLI”,JSON.stringify(arrLi));获取var arrLi1 = JSON.parse(localStorage.getItem(“...
2020-01-07 15:56:48
1800
原创 vue 让链接转化为二维码
步骤：1、安装qrcodejs2插件，在控制台输入：npm install qrcodejs2 --save*注意：这里安装的是qrcodejs2，不是qrcode，否则会报错2、页面引入——在入口文件（默认是main.js）里引入：import QRCode from ‘qrcodejs2’3、页面展示①：在对应的Html页面中，添加html标签②：配置，在methods方法里...
2020-01-03 11:54:21
1348
原创 仿移动端淘宝网站的弹出详情框
Demo:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <meta name="apple-mobile-web-app-capable" content="yes">...
2019-12-27 18:46:25
1217
原创 Vue项目中使用RSA加密
1、安装 jsencrypt npm install jsencrypt2、在 main.js 引入 jsencrypt import JsEncrypt from 'jsencrypt' Vue.prototype.jsEncrypt = JsEncrypt3、在项目中使用var en=new JSEncrypt();en.setPublicKey(publicKey);le...
2019-12-20 18:01:42
1702
转载 手把手教你如何修改JDK的版本问题
情景引入：1：电脑一直用着JDK1.7的版本，老老实实的开发着，非常的愉快，突然一天，公司有个项目最低版本需要JDK1.8，好惨，我要抛弃自己的1.7环境到1.8了~~~2：电脑一直用着JDK1.8的版本，突然有一天，看到一个开源项目，但是比较老了，里面的很多jar包都是低版本的，不兼容着自己的版本，没办法，为了看别人项目的精髓，就需要跑起来项目，然后再一步步的深入研究，oh no，只有换版本...
2019-12-19 14:00:02
10980
4
原创 邮箱地址自动补全
效果图：演示地址：http://www.fengzhao.icu/auto_email/demo/index.html公众号：微信：
2019-12-16 09:23:09
1281
原创 北京地铁路线图绘制
效果图：网站效果：http://www.fengzhao.icu/bj_subway_map/index.html公众号：微信
2019-12-16 09:21:51
2540
原创 抖音上很火的3D立体动态相册
动态效果图源码Demo:一、新建一个index.html的文件，代码如下<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>纯CSS实现鼠标经过3D立体动态展示图片特效代码</title><link type="text/c...
2019-12-15 12:40:19
47781
259
原创 送你给你最爱的人，表白神器！！！
网站效果：http://www.fengzhao.icu/flowers/index.html效果图：源码Demo:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xml:lang="en"...
2019-12-13 18:53:52
2428
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人