- 博客(53)
- 资源 (15)
- 收藏
- 关注
RSS订阅原创 React的事件与原生事件的执行顺序？
react 的所有事件并没有绑定到具体的dom节点上而是绑定在了document 上，然后由统一的事件处理程序来处理，同时也是基于浏览器的事件机制（冒泡），所有节点的事件都会在 document 上触发。react自身实现了一套自己的事件机制，包括事件注册、事件的合成、事件冒泡、事件派发等，虽然和原生的是两码事，但也是基于浏览器的事件机制下完成的。2、阻止合成事件与最外层document 上的事件的冒泡：e.nativeEvent.stop。5、 最后执行 document上的DOM事件的监听。
2024-09-10 22:24:54
441
原创 如何实现微信小程序用户无感知刷新token
用户在使用过程中可能存在token过期的问题，这个时候需要前端在不影响用户感知的情况下去刷新token。token.js代码如下。
2023-06-16 10:28:34
885
原创 TS实现Base64的加密解密
之前写过关于js实现base64的加密解密的写法，其实写法差不多，主要的差异是语法上的细微差异，可以参考js实现Base64的加密解密_雪山上的小灰熊的博客-CSDN博客_jsbase64加密这里是一篇补充文章，希望对你们有用出。废话不多说，代码如下class Base64 { private _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="; encode(in.
2022-04-08 15:48:50
3806
1
原创 React 生成二维码
使用qrcode.react安装依赖库npm install qrcode.react//yarn add qrcode.react代码实现import React, { Component } from 'react';import { Modal} from 'antd';const QRCode = require('qrcode.react');class QRCodeModal extends Component { constructor(props
2022-01-19 10:43:44
2292
1
原创 React 如何封装消息提示组件message--Material-UI
近期项目在使用Material-UI ，Material-UI 的消息提示组件是<Alert />，<Alert />没有主动提示的能力，属于被动组件，需要在页面中嵌入，然后通过属性open的true/false进行控制，在寻常的页面开发中使用到无大碍，但是不能运用到工具类的js中，如独立封装的axios；axios的独立分装意外要脱离页面，统一封装，拦截过滤。这个时候<Alert />就显得无能为力了，只能另行封装。这里没有重新封装一个新的组件，而是使用Materi
2022-01-14 11:37:35
3192
原创 Ant Design + react-drag-listview实现Table拖拽变换列位置
Ant Design + react-drag-listview实现Table拖拽变换列位置Ant Design + react-drag-listview + react-resizable实现拖拽变换列位置，可改变列宽
2021-12-28 10:26:45
2415
3
原创 Ant Design + react-resizable实现列表页可拖拽宽度变化
Ant Design +react-resizable实现列表页可拖拽宽度变化查找了下Ant Design中的Table组件，没有发现表格header列头可以拖拽实现宽度变化的功能，领导要想要这种效果，看了下当前的WEB的 第三方UI，可能只有Material-UI支持import { DataGridPro, GridToolbar } from '@mui/x-data-grid-pro';但是Material-UI中的 DataGridPro在包'@mui/x-data-g...
2021-12-28 10:15:59
4405
原创 如何对nginx进行平滑升级
nginx平滑升级，不影响线上业务的运行这里nginx的安装目录是：nginx第一步：查看nginx版本号：[root@localhost nginx-web]# nginx -vnginx version: nginx/1.15.12这里的版本号是1.10.3，对比下官网的版本号：第二步：下载上传并解压nginx安装包我这里下载的是1.21.4的版本号 nginx-1.21.4，下载下来后上传到服务器，下载地址：http://nginx.org/en/downloa
2021-12-21 11:44:42
3787
2
原创 Nacos如何实现统一配置管理
统一配置管理先看一下我们的service与nacos 的流程图一、在nacos中增加配置Nacos配置管理Data Id ：配置文件名称，命名规则： 服务名称-运行环境环境-后缀名(.yml，yaml)Group：分组名称默认配置内容：对应的是工程中服务下的application.yml文件的内容，这里需要配置的一般是开关类型的配置，模板类型的配置，其他固定类的不建议这里配置二、在项目工程引入和使用nacos中的配置没有nacos管理配置文件的情况...
2021-12-02 14:28:18
1194
原创 Ribbon负载均衡原理，源码解读
Ribbon负责均衡原理图源码详解：@LoadBalanced标记RestTemplate发起的请求，会被loadBalanced拦截和处理 /** * 创建RestTemplate并注入Spring容器 */ @Bean @LoadBalanced public RestTemplate restTemplate() { return new RestTemplate(); }拦截的动作是由 Load.
2021-12-02 10:54:12
417
原创 const 常量
const 常量定义的基本类型不能修改function test() {const PI = 3.1415926;PI = 3.14;console.log(PI)}修改的话会报错： SyntaxError: "" is read-onlyfunction test() {const PI ;PI = 3.14;console.log(PI)}const 声明的同时必须赋值，否则报错： SyntaxError:Unexpected tokenfun
2021-11-16 17:07:59
791
原创 es6 块作用域
es6 块作用域代码是使用{}包起来的，就是一个块作用域1、i 脱离了块作用域，let声明的变量只有在块作用域重用小 所以报错2、我们没有声明i调用的时候应该报undefined错误，这里报is not defined ，这是为什么呢？是因为es6默认（强制）开启了严格模式“use strict”，如果在es5中需要开启严格模式的话，在js文件的顶部加上“use strict”严格模式：变量未声明不能引用let 不能重复声明function test(){for (let i=1
2021-11-16 17:05:47
623
原创 js实现Base64的加密解密
/1.加密解密方法使用：1.加密 var str = '124中文内容';var base = new Base64();var result = base.encode(str);2.解密 var result2 = base.decode(result);const Base64 = function() { var _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/...
2021-11-16 17:00:31
21413
2
原创 nodejs+koa2实现微信小程序签名和请求支付（二）
废话不多说直接上代码：const getTradeNo = function() { let date = new Date(); let arr = [ date.getFullYear(), ((date.getMonth() + 1)>=10?(date.getMonth() + 1):'0'+(date.getMonth() + 1)), date.getDate(), date.getHours(),
2021-11-16 16:42:59
1177
原创 nodejs+Koa2实现小程序的微信支付请求（一）
nodejs+koa2 实现微信支付请求在开发之前我们先看一下小程序向微信请求支付的业务流程第一步，小程序先发起支付请求小程序首先先向“商家系统后台”发起请求支付，也就是我们自己的后端服务，生成平台订单和签x第二步，我们的nodejs服务接收到请求之后，处理支付请求，签名后强微信请求支付let xmlData = await WXPlay.requestWXPay(wxPayInfo); ->这里是向微信支付服务器请求支付的地方router.post('/xxxxPa..
2021-11-16 16:36:11
1553
1
原创 React.js+i18next实现国际化
安装第三方依赖库npm install i18next -Dnpm install react-i18next -D编写语言文件export const cn = { lang: '简体中文', login: { code: '验证码', username: '用户名', password: '密码', oldPassword: '原密码', newPassword: '新密码', .
2021-10-25 09:24:21
525
原创 小程序路由跳转,如何直接回到首页
先看一下小程序的关于路由跳转的api//只能跳转到tabBar配置页面wx.switchTab({url: '/pages/index/index',}); //返回上一级页面（delta：返回的页面数，如果 delta 大于现有页面数，则返回到首页，默认值为1）wx.navigateBack({delta: 2 //默认值是1}) //关闭当前页面，跳转到应用内的某个页面wx.redirectTo({url: '/pages/index/index',})
2021-08-25 18:24:41
2135
原创 const使用时的注意事项
const 常量定义的基本类型不能修改function test() { const PI = 3.1415926; PI = 3.14; console.log(PI)}修改的话会报错： SyntaxError: "" is read-onlyfunction test() { const PI ; PI = 3.14; console.log(PI)}const 声明的同时必须赋值，否则报错： SyntaxErr
2021-08-16 15:09:01
163
原创 es6 块作用域
es6 块作用域代码是使用{}包起来的，就是一个块作用域详情看下面的DEMOfunction test(){ for (let i=1;i<3;i++) { console.log(i) } console.log(i)}function test(){ for (var i=1;i<3;i++) { console.log(i) } console.log(i)}1.
2021-08-16 15:04:51
70
原创 Required request part ‘file’ is not present
微信小程序遇到这种问题，1、但是微信小程序的模拟器可以正常上传2、真机上上传请求，服务器端报错，接受的消息体中没有文件的信息原因是：微信公众平台上的uploadFile 服务器配置没有配置好用来上传文件的域名找到如下图的位置，填写上相对应的文件服务器的域名即可...
2021-08-16 14:50:44
929
原创 React使用高德地图
底部先封装一个script的加载工具如下图export default function remoteLoad(url, hasCallback) { return createScript(url) function createScript(url) { let scriptElement = document.createElement('script') document.body.appendChild(scriptElement)
2021-08-13 18:21:33
529
原创 小程序上传文件 wx.uploadFile
微信小程序实现文件图片上传功能准备工作：在微信公众平台配置uploadFile域名白名单，开发管理->开发设置->服务器域名->uploadFile合法域名如下图使用 wx.chooseImage + wx.uploadFileview<viewclass="cu-form-group"><viewclass="gridcol-4grid-squareflex-sub">...
2021-08-13 18:13:32
3026
原创 前端加解密，ECB，CBC
前端数据加密解密使用crypto-js加解密代码如下 encryptECB(word, EK) { if (word === null) { return word; } let key = CryptoJS.enc.Utf8.parse(EK); let srcs = CryptoJS.enc.Utf8.parse(word); let encrypted = CryptoJS.AE
2021-07-01 09:25:45
606
1
原创 Vue 微信实现JSAPI签名认证
准备工作：1、申请微信公众号可以使用微信测试的公众号：https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index2、配置JS接口安全域名（正式账号还要设置IP访问白名单等）3、得到appID和appsecret4、关注公众号，绑定开发者步骤如下：1、获取access_token (服务端实现)2、获取api_ticket（服务端实现）3、使用url，timestamp，nonc
2021-07-01 09:25:34
2391
原创 IE中elementUI 分页控价-输入页码的input回车跳转的问题
问题描述在使用Element-UI的过程中发现其分页组件存在一个BUG，其‘前往【】页'中的input的回车时间存在失效不响应事件的问题第一次事可以的，第二次之后的操作，没有任何的反应；image.png针对在这个问题研究了下，element本身的组件在IE中的标线是正常的，在我们使用的时候却发现了问题，定位发现没有走到对应的事件中方案：结合jquery使用原生的键盘监听事件来控制，只是针对页面的跳转加一层判断；具体实施 如下：引用element代码：
2021-06-30 17:20:53
970
原创 VUE的个人小解
主要内容-渐进式框架（Progressive）-声明式渲染-VUE的渲染过程-响应式与依赖跟踪-生命周期什么是渐进式框架image.png渐进式框架的大概意思就是你可以只用我的一部分，而不是用了我这一点就必须用我的所有部分。说的通俗一点就是，你想用什么你自己就引入什么，按需引入，不需要的就可以不引入做得少的框架不一定就不如做得多的框架，这体现出一种取舍。也就是说，做得少的框架可以给你更多的灵活性，但你需要做更多的选择；做得多的框架有更强的侵入性，学习成本更高，灵活性更低。
2021-06-30 17:19:04
77
原创 地图打点，添加Marker
添加Marker的坐标处理LatLng latLng = new LatLng(mLatl, mLong);mLatl纬度（Latitude）mLong经度（Longitude）LatLng：存储经纬度坐标值的类，单位角度LatLng(double latitude, double longitude)使用传入的经纬度构造LatLng 对象，一对经纬度值代表地球上一个地点。添加单个Marker使用方法 MarkerOptionsmarkerOptions.add(new Mark
2021-06-30 17:17:56
1629
原创 高德地图API总结--Marker多点聚合
Marker多点聚合计算什么是多点聚合呢？所谓的多点聚合，就是计算地图上一定范围内的点的个数，然和讲所有的点统计的数量显示在范围内设置的marker上；我们需要解决的问题有：1、在地图上划定区域范围；2、计算范围内的点的个数；3、清楚原有的点，加上聚合后的点；4、如何刷新先说第一个问题：在地图上划定区域范围，如下代码实现：Point mPoint 定义一个点，这个点是通过地图上的marker点在屏幕上的投影的点划定区域范围image.png如上图，我们在划定区域的时候以西南角
2021-06-30 17:17:01
3719
原创 将博客搬至CSDN
将博客搬家到CSDN，继续技术交流https://blog.csdn.net/u012885136?spm=1001.2100.3001.5343
2021-06-30 17:07:34
54
转载 Android生成库文件
在AndroidStudio上使用了一段时间的NDK，感觉官方的插件com.android.tools.build.gradle-experimental还是不够稳定，存在一定问题，不过谷歌也声明了这个插件是在实验性阶段。幸好官方在Android Studio上提供了另一种方式使用NDK，我们参考这种方法来实现，非常方便开发环境基础的安卓开发环境：Android Studio、SDK、JDK下载好NDK，自己手动下载或者用SDK工具下载都可以我使用的版本：Android Studio 1.5.1
2021-06-30 17:00:01
290
原创 如何将vue工程部署到nginx下
如何将vue工程部署到nginx下下载nginx官网:http://nginx.org/en/download.html将打包编译好的前端工程放到nginx下的目录下我这里是新建了一个名为'www'的文件夹，可以自己命名image.pngimage.png修改nginx的配置文件image.png关键配置信息listen 8090; server_name localhost; location
2021-06-30 16:56:58
203
转载 IOS微信浏览器软键盘收起后弹框的焦点BUG
使用问题描述：IOS微信内置浏览器，微信弹框填写内容，如下图过程图一到图二，键盘收起时，也页面的位置显示都很正常，但是输入框点击获取不到焦点，取消和确定的按钮都点了没有反应，再弹出软键盘弹框上移的时候导致弹框整体上移，收回软键盘的时候，虽然看似页面下来了，实际这只是表象，对应的输入框和按钮的位置都在键盘弹出时候的位置，没有恢复image.png解决方案 const userAgent = window.navigator.userAgent;
2021-06-30 16:55:10
206
转载 let和const的区别
在说let和const之前先简单的说一下作用域，因为后面会有提到ES5中的作用域有全局作用域和函数作用域，到了ES6来新增了：块作用域块作用域简单的说是：代码中使用{}包起来的，就是一个块作用域let先看一个demo：function test(){ for (let i=1;i<3;i++) { console.log(i) } console.log(i)}image.png结果报错1、i 脱离了块作用域，let声明的变量只有在块作用域重
2021-06-30 16:53:14
888
原创 Reactjs使用高德地图
react使用高德地图可以使用第三方的react-amap，如果自定义功能多想要灵活，可以使用原生的高德地图1、创建一个工具类，用来引入加载高德地图2、加载高德地图页面标签<div id="container" style={{width: '100%'}}></div>componentDidMount中引入componentDidMount() { let that = this; remoteLoad(`ht...
2021-06-30 16:50:57
1752
原创 js通过代码模拟url加载资源
export default function remoteLoad(url, hasCallback) { return createScript(url) function createScript(url) { let scriptElement = document.createElement('script') document.body.appendChild(scriptElement) let promise = new P.
2021-06-30 16:49:42
1037
centOS7安装nginx安装包以及所有依赖包.zip
2019-05-10
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人