- 博客(45)
- 资源 (7)
- 收藏
- 关注
RSS订阅
原创 react-router-dom v6.5.0实现路由守卫RouterBeforeEach及缓存
最近留意下react-router-dom有更新到6.6.1的版本，在这个版本增加了不少的功能。研究了下，可以利用其提供的API实现一个类似Vue的路由守卫，从而简便达到路由鉴权的业务场景。这里我是使用npm的包，是react-router-dom v6.5.0，但是基本新增的功能都有。官方提供的路由跳转是使用useNavigate hook的，这里我们要实现路由守卫，那么我需要在路由跳转前做逻辑的判断，所以我自定义了一个useUtilsNavigate hook用于跳转前的判断。
2022-12-26 16:00:45
3000
原创 react-router-dom v6.0新特性及路由守卫结合react-activation实现路由缓存
react-router-dom v6.0新特性及路由守卫,路由拦截，重定向，传参
2021-12-31 11:31:49
20550
15
原创 基于React封装Handsontable并兼容antd
其实Handsontable官方也提供了React的版本，但是官方的版本再编辑和渲染的时候并不能够很好的嵌入第三方的组件库。这就导致了，使用了Handsontable就没有办和普通的react项目一样轻松引用其他第三方组件。因此对其react的版本进行了二次的封装，使其可以轻松的兼容第三方组件库。
2024-04-12 14:01:46
381
原创 sass内置函数汇总
给字符串添加引号。实例: quote(runoob) 结果: "runoob"返回 substring 子字符串第一次在 string 中出现的位置。如果没有匹配到子字符串，则返回 null。实例:str-index(abcd, a) => 1str-index(abcd, ab) => 1str-index(abcd, X) => nullstr-index(abcd, c) => 3 str-insert(string, ins
2022-06-30 11:12:51
536
原创 Flutter实战项目-第十二篇 多线程isolate
dart语言默认是单线程的，这就导致了如果在处理一个耗时比较长事务的话，很有可能会造成UI渲染的阻塞。举例子：我在页面创建一个动画，然后执行一个计算的函数，而这个计算的函数耗时比较长，这个时候你就可以看到，动画在UI上会被卡住，直到计算函数执行完毕动画恢复正常。二、isolate在dart 2.15以前，isolate是一个独立的包，在pub可以下载。在dart2.15后它已经集成在了sdk里面，不需要在单独下载包了。它是dart官方针对多线程给出的解决方案。它可以不占用主线程的情况下，另开线程去
2022-06-22 17:05:03
845
原创 基于qiankun.js微前端Vue项目源码
结合小编多年搬砖的经验，企业级的大规模集成平台普遍存在巨石项目难以维护的痛点。载最近的招聘面试中也会有面试官提及微前端的应用场景。小编拙见认为未来微前端将会成为一种趋势。目前为止，对于这种普遍的平台集成，第一种是打击熟悉的iframe，但是用过的人都知道，iframe的缺点，谁用谁知道哈。第二种的话就是基于阿里孵化的项目qiankun.js。这也是小编强力推荐的微前端解决方案。优缺点我就不再这里说了，各位可以移步qiankun.js的官网了解。小编基于Vue3+typescript+vite搭建了一个主应用
2022-06-19 12:27:53
938
原创 Flutter实战项目-第十一篇 自定义Controller
概要实现类似TextEditingController的控制器实现原理：通过TextEditingController源码可以看到，其实现是通过ChangeNotifier这个类进行事件广播，在目标组件进行监听。一、自定义Controller 创建一个控制器类，继承ChangeNotifierimport 'package:flutter/material.dart';class SearchInputMemoryController extends ChangeNot....
2022-05-18 09:12:55
1508
原创 Flutter实战项目-第八篇 监听键盘弹起
概要监听应用软键盘收齐弹出一、WidgetsBindingObserverWidgetsBindingObserver类可以使用于监听页面的生命周期，根据用户时间需求响应响应时间。didChangeMetrics在页面高度发生变化的时候会触发该回调。class Chat extends StatefulWidget { const Chat({ Key? key }) : super(key: key); static const routeName = '/c......
2022-05-08 13:30:58
3284
1
原创 Flutter实战项目-第六篇 自定义dropdown，toast
概要自定义下拉dropdown 适用于tips、dropdown一、实现思路 获取父元素的大小及位置，借助Stack定位，实现自定义浮层。为了方便获取大小及编程方便，我们创建一个Dropdown组件，用于处理获取父节点信息逻辑。import 'package:flutter/material.dart';import 'show.dropdrown.dart';class Dropdown extends StatefulWidget { final Widg......
2022-05-08 13:30:22
1521
原创 Flutter实战项目-第四篇 页面路由、provider状态管理
概要页面路由配置 provider 一、路由配置创建router.dart用于管理所有的路由，然后再main.dart MaterialApp中注册路由。router.dart中第一个routes即是默认打开的页面import './view/login/login.dart';class JDRouter { static final routes = { Login.routeName: (context) => const Login() };..
2022-05-08 13:29:52
734
原创 Flutter实战项目-第三篇 数据本存储、网络请求Dio、基础类转换
一、概要数据本地化存储 shared_preferences 网络请求dio一、包相关shared_preferences是官方推荐的包，目前主流。可以根据官网的教程直接使用，但是最好还是在本地做下单例，可根据自己需要添加相应的方法。import 'package:shared_preferences/shared_preferences.dart';class LocalStore{ static SharedPreferences? _prefs; ......
2022-05-08 13:29:16
867
原创 基于Vue封装hansontable及自定义编辑器
基于vue封装hansontable，自定义编辑器，嵌入element-ui组件。表格封装渲染
2021-12-21 15:44:48
1906
3
原创 npm Nexus私服推包及拉包
一、Nexus Token获取1.在Nexus服务器生成获取Token，其生成规则是账号+密码的base64。参考文献：https://blog.sonatype.com/using-nexus-3-as-your-repository-part-2-npm-packages二、推包1.在需要推送的包下，创建.npmrc文件，用于指定源地址registry="http://test"_auth=7888-5555-455552.使用命令推包npm publish三、
2021-03-15 16:50:04
1975
原创 从零开始构建webpack4.+项目
一、安装webpack环境npm webpack webpack-cli -D二、初始化项目npm init三、添加webpack配置文件webpack.config.js、postcss.config.js1.webpack.config.jsconst {resolve}=require("path");const HTMLWebpackPlugin=require("html-webpack-plugin");const MiniCssExtractPlugin=r
2020-11-17 00:10:24
107
原创 MAC命令行操作
一、node卸载sudo npm uninstall npm -gsudo rm -rf /usr/local/lib/node /usr/local/lib/node_modules /var/db/receipts/org.nodejs.*sudo rm -rf /usr/local/include/node /Users/$USER/.npmsudo rm /usr/local/bin/nodesudo rm /usr/local/share/man/man1/node.1sudo rm
2020-09-26 08:03:05
427
原创 iframe内容在IOS webview内无法滚动
在iframe外层div添加样式属性-webkit-overflow-scrolling:touch; overflow:auto;
2020-07-01 22:55:49
657
原创 Node.jsv12.0 https请求报错
1.错误信息write EPROTO 140737037194176:error:1425F102:SSL routines:ssl_choose_client_version:unsupported protocol:2.问题解析node.js https模块在v12+中默认使用的TLS1.3,而服务器的TLS不是，如图是TLS1.0。导致报TLS错误JavonHuang:~ JavonHuang$ curl -iv https://****/mock/52/login* Try
2020-05-16 13:48:46
2449
原创 axios获取二进制图片并显示在img标签
一、获取文件流/** * 获取二进制文件流 * @param {string} url 系统API * @param {object} param 参数 * @param {boolean} showcode msg提示 * @param {boolean} layout 加载层 */const buffer=(url, param, showcode = false, lay...
2020-04-28 10:31:21
2011
原创 vw适配中使用伪类选择器及IOS图片加载不出来
使用postcss-viewport-units做vw单位转换时遇到以下两个问题：1、伪类选择器被转换，导致icon的加载不出来解决办法：设置转换规则module.exports = { "plugins": { "postcss-import": {}, "postcss-url": {}, "postcss-aspect-ratio-mini"...
2020-04-27 09:29:58
368
原创 js数据类型存储、作用域、变量提升
一、数据类型1.js中一共有六种数据类型String：字符串类型Number：数字类型Boolean：布尔值Null：空值Undefined：未定义Object：对象其中前5个是基本数据类型，Object属于引用数据类型。二、强制类型装换1.转换String类型方式一：调用被转换数据类型的toString()方法。该方法不会影响到原变量，他会将转换的...
2020-04-26 01:12:49
238
1
原创 Vue自定义组件库开发并发布NPM教程
一、检查vue/cli的版本JavonHuang:/ JavonHuang$ cd JavonHuangJavonHuang:JavonHuang JavonHuang$ vue -V@vue/cli 4.2.2JavonHuang:JavonHuang JavonHuang$ 二、创建vue工程1.选择上手动Manually select featuresJav...
2020-04-12 21:07:22
1125
原创 JS常用经验总结
数组操作:1.删除数组值等于id的元素:that._data.iframeid.splice($.inArray(id, that._data.iframeid), 1)
2020-04-09 09:36:06
154
原创 Power BI D3 Tree开发自定义可视化对象
开发环境：Power BI Desktop 2017API版本v1.9.0由于官方的1.9.0版本的API使用的脚手架没有带Echart，而且好像脚手架也不兼容最新的D3。所以使用了JS动态在线导入的办法。在初始化视图对象的时候导入在线echart.js.（3.0以上的是可以安装D3的，详细的可以参考微软官方demo介绍：https://docs.microsoft.com/zh-cn...
2020-04-01 16:48:56
937
原创 Power BI Echart Tree开发自定义可视化对象
开发环境：Power BI Desktop 2017API版本v1.9.0由于官方的1.9.0版本的API使用的脚手架没有带Echart，而且好像脚手架也不兼容最新的echart。所以使用了JS动态在线导入的办法。在初始化视图对象的时候导入在线echart.js.1.在构造函数内引入JS constructor(options: VisualConstructorO...
2020-03-30 10:24:33
21409
2
原创 Vue 实战项目:koa+typescript+MySQL+Vue+socket.io 搭建即时通讯 IM 服务器及 UI
一、搭建项目1.执行npm init命令初始化项目。{ "name": "imserver", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1"...
2020-03-30 00:07:30
2676
原创 H5 IOS底部工具条被遮住
问题点：1、采用了高度布局方式为height：calc(100% -94px)。共具体条posation:fixd;导致树渲染时没有加载剩余的94px，导致工具栏被遮住。解决办法：1、采用了高度布局方式为height：100%；padding-bottom:94px。...
2020-02-21 10:38:43
1628
原创 Vue i18n多语言设置(可在js内引用)
1.安装依赖包npminstalli18n--save2.创建一个单独i18n.js,用于创建一个i18n对象，后续整个项目统一使用该对象。import Vue from 'vue'import VueI18n from 'vue-i18n'Vue.use(VueI18n) let lang = localStorage.lang?localStorage.lang:'zh...
2019-12-30 15:50:35
4232
原创 node.js mysql事务处理及封装
1、封装底层单例数据连接公用库const mysql = require('mysql')const dbconnection = require('../config/config')/** *创建数据连接池 */const pool = mysql.createPool({ host: dbconnection.config.database.HOST, user: d...
2019-07-16 17:32:49
2687
10
原创 Linq多集合连接
1.数据源处理数据源集合数据结构：使用Linq将数据根据Location和PN做Group by ,Sum(PN)。 var list = from it in UIOrderDate.OrderItemList group it by new { it.Location, it.PN } into g ...
2019-07-16 09:18:33
273
原创 微信xiao、网页、SDK总结
1.小程序官方提供的接口仅支持单文件上传，对多文件上传实现需要自行处理异步。 var result=[]; //多张图片上传 uploadimg(data){ let that=this, i=data.i?data.i:0,//当前上传的哪张图片 success=data.success?data.success:0,//上传成功的个数 fail...
2019-07-16 00:38:38
231
原创 Cordova+Vue+Mint-UI+Android构建Andriod app 移动自适应rem布局(四)
1.安装lib-flexible.js-适用于Vue-clinpm install lib-flexible --save2.在main.js中全局引用import 'lib-flexible'3.安装px2rem-loader-webpack 的插件自动将px转换为rem npm install px2rem-loader --save-dev4.配置px2rem-loa...
2018-12-11 01:39:27
588
原创 Cordova+Vue+Mint-UI+Android构建Andriod app Cordova插件-极光推送(三)
步骤一：极光推送账号注册及应用创建应用名与之对应步骤二、推送设置-设置包名(必须一致) 步骤三、安装cordova极光插件： cordova plugin add jpush-phonegap-plugin --variable APP_KEY=**********步骤四、在main.js初始化极光推送 document.addEventListen...
2018-12-05 17:12:36
822
20191002225132chromecj.com_aEQzP2.crx
2019-10-29
Cordova+Vue+Mint-UI+Android构建Andriod app Cordova插件
2018-12-10
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人