- 博客(24)
- 收藏
- 关注
RSS订阅原创 监听浏览器路由URL变化，并刷新页面
点击列表某一项使用window.open()方法打开新窗口（或者其他应用场景），如果新打开的窗口不关闭，点击列表项其他的数据，路由还是相同的，只有#号后面改变，此时页面不会刷新。那么可以使用监听页面路由变化的方法。//window.addEventListener('hashchange') 为监听页面哈希值改变，即可监听url变化window.addEventListener('hashchange', function (event) { window.location.reload();
2022-01-18 14:41:09
4119
原创 判断两个数组内有无相同的值，如果有则改变状态
判断两个数组内相同的值，如果有相同的值则改变对应的值状态举个实际场景的例子，一个下拉菜单，里面有四个人，可以选中人员，如果人员已经选中，那么就将它的状态变为不可选。这样就涉及到了两个数组，一个是弹窗内供选择人员的数组，一个是已经选择了的人员数组，如果弹窗内的人员已经被选择过了，那么即不可再选择，此时就涉及到了将已经选择的人员与所有供选择的人员进行对比。const ryList = [ { key: '1', disabled: false, name: 'zhangsan', sex: '男
2022-01-05 15:06:53
1127
原创 react项目内既调用.net的接口，又调用java的接口处理
在一个项目中，初期的一部分接口是由.net开发的，后期的一部分接口是由java语言开发的，造成了一个项目内两中不同的语言开发的接口，这种情况下，不同的语言接口所在的服务器以及接口域名肯定是不同的，怎么解决系统内去请求不同域名的接口。拿目前的项目举例，有一个文件是专门放接口名字的（url.js），一个封装axios拦截器等相关配置的文件（request.js），我们要解决在本地以及测试生产上都可以顺利的请求不同的接口一、首先.net的接口和java接口名字如下代码：//url.jslet server
2021-12-28 16:29:32
594
原创 分享并记录保存一组常用的数据处理小方法
1、有一个固定长度的数组，但是已知内容的长度未确定，例如规定数组最长可以是10，如果目前有两条数据是已知内容的，那么还要拼接八条空数据的数组。let data1 = [{name:'测试1'},{name:'测试2'}]let data2 = data1.concat(new Array(20 - data1.length).fill(0))//如果固定数组长度为20，已经有内容的数组为data1，长度为2，new Array创建一个减去一直数组长度的数组，//然后再拼接到一块2、获取一个对象数
2021-11-16 16:53:05
113
原创 IE浏览器报错Unhandled promise rejection Error: 拒绝访问。文件流下载
项目内有很多导出文件，下载文件功能，前端采用的是文件流下载方式，请求后端接口，返回文件流。最开始不清楚普通的动态创建a标签方法并不兼容IE，后来在IE上面测试出现了bug “Unhandled promise rejection Error: 拒绝访问。”，看到这个问题直接复制百度了，然后结果都是promise方法可能不对，改了所有的promise方法还是报错，后来想到是不是创建a标签的方式不兼容IE，又百度了文件流下载兼容IE的方法，果然有收获，于是有了下面的解决方法，记录一下。看了这位作者的文章借鉴
2021-10-28 10:40:48
3101
1
原创 React+antd 限制antd的TreeSelect选择个数
项目中提到的一个需求，限制TreeSelect的选择个数，例如选择国家，最多只能选择三个。想到的办法有好几个，例如在选择的时候判断已选择的个数，如果有三个了就将TreeSelect的disabled设为true，但是这个方法会导致不能修改，例如想换一个国家，控制起来反反复复比较麻烦。后来找到一个其他方法，在一个文章里看到的，作者忘记了（抱歉）；先把最优解决办法放上来吧。Form表单有一个validator方法，此方法可以获取到TreeSelect已经选择的值以及长度<Col {...ColL
2021-10-25 11:00:38
1368
转载 react使用jsbarcode生成条形码
一、安装插件npm install jsbarcode --save二、封装为一个单独的js文件，也可以不封装直接使用。转自：https://blog.csdn.net/Aym_zzz/article/details/106691253
2021-10-19 11:07:17
1793
原创 Antd Datepicker设置默认值不生效
react+antd的项目。没有使用Form表单，只是单独使用了DatePicker组件，前期想的是，根据接口返回的日期数据，如果有值就将DatePicker的defaultValue的值设置为接口的数据，否则的话展示当前日期，我在DatePicker标签内使用了三元判断：const [Info,setInfo] = useState({}); <DatePicker defaultValue={Info.time === null ? moment() : Info.time } forma
2021-09-07 17:27:45
5103
原创 react + antd实现表头居中对齐表体右对齐
项目中的一个需求，让表格内的金额数据靠右展示，其余都居中显示，那么表头肯定不能一块居右，因为其他表头都是居中的，偶尔一个居右影响美观。刚开始设想的很好，所有表头统一设置的居中显示，那么表体单独设置居右就可以了const columns = [ { className: "columnHead", //columnHead里面设置了居中的样式 title: "预计费用", dataIndex: "yjfy", width: Tab
2021-08-30 09:57:43
4386
原创 React+antd动态增加Table可编辑行
根据antd官网的可编辑表格例子来实现，新增的可编辑的单元格为一个子组件，由Table引入。对于原理理解有限，欢迎探讨。以项目中的活动日程组件的新增日程信息为例实现过程先定义变量const EditableContext = React.createContext();Table部分的代码<EditableContext.Provider value={form}> <Table components={components} size="small"
2021-08-26 15:27:59
10241
15
原创 React+echarts+antd实现折线图
使用echarts实现折线图功能，并加入antd的Tabs切换，先贴个图如上图，我分出了三个Tabs预想的是将echarts折线图封装为一个子组件，然后三个Tabs都引入该子组件，实现切换的时候都是同一个组件，只不过渲染不同的数据源。然而，现实与预想并不相同，我在三个Tabs的TabPane标签下都引入了，相当于创建了三个echarts，而此子组件里面的echarts使用的ID元素是同一个，一个页面中相同ID名字的元素只能有一个，可能是这个原因导致了我切换Tab的时候，折线图的数据并不会随着更新，这种
2021-08-26 14:53:23
1542
原创 antd的Upload组件常用的mime类型
//xls.xls application/vnd.ms-excel.xltx application/vnd.openxmlformats-officedocument.spreadsheetml.template.xlsx application/vnd.openxmlformats-officedocument.spreadsheetml.sheet.doc application/msword.docx application/vnd.openxmlformats-officedocume
2021-07-08 17:20:31
150
原创 react项目与后端进行AES加解密交互
react项目后端数据加密，前端解密在做react项目的时候涉及到了加解密，因为在安全检测的时候检测出一个接口返回的数据暴漏了IP，容易被攻击，所以后端要将返回的数据加密，前端再进行解密。首选了RSA，前后端没有解通，换了只有AES的加解密，然而也是坎坎坷坷。首先众所周知，前后端加解密交互要保证前后端的密钥key相同，如果是CBC模式，必须要有iv(偏移量)，补位方式也要相同(padding:Pkcs7或Pkcs5等)。前端代码在react项目中使用AES安装crypto-jsnpm insta
2021-07-08 10:54:50
1964
原创 文件流下载文件后提示不支持打开该类型文件或文件已损坏
在react项目中用到下载，请求后端接口返回文件流，前端来处理文件流生成文件后下载。要设置responseType！！采用的方法就是百度上随便一搜就可以搜到的Blob方法，最开始要下载的文件格式为.pdf，但是下载完的文件用office和WPS都打不开，先说怎么解决的这个问题，之前在百度的时候也看到有人说设置responseType就可以了，但是不信邪，就不设置，结果还真的是因为responseType，设置之后下载完的文件就都可以打开啦！解决思路：1、先让后端把文件流传的文件变成一个空白文档，首先
2021-06-22 18:04:04
14145
原创 React+antd开发PC端项目日常小问题集合
1、antd的Modal使用 confirm() 快捷地弹出确认框，提示的content信息写入react标签，可换行等confirm({ content: (<p><span>{msg}</span><br /><span>{msg2}</span></p>), onOk() {}, onCancel() { },});2、...
2021-02-08 11:02:14
563
2
原创 面试部分内容总结
微信小程序微信小程序的授权流程1、需要openID的：wx.login登录，获取code，传给后台，返回openID（不会弹起授权弹窗，静默式授权）2、只需要昵称，头像等信息进行页面展示的：open-data带不同的type属性比如userNickName,userAvatarUrl等3、会弹起授权弹窗的，使用button标签，带不同的open-type,比如getUserInfo,从bindgetUserInfo回调中获取到用户信息完成授权。4、检测登录状态，我们需要先检测登录状态 wx.ch
2020-12-14 09:29:14
201
1
原创 react项目中，给元素写多个类名
做react项目的时候，有一个需求需要操作dom我所做的项目是采用了css modules的方式设置样式，我需要在一个标签上同时设置两个类名，一个是在css module下的，一个是不在的。采用设置格式如下className={`${'listcheck2'} ${appStyle['listcheck']}`}className={appstyle.lisrcheck + " listcheck2"}第二个类名双引号里面名字前面要加一个空格className={[appstyle.listc
2020-12-14 09:26:58
2067
原创 iOS从微信浏览器选择Safari浏览器打开时不是当前页面
关于iOS手机在微信浏览器中选择Safari浏览器打开时页面不是当前页面前段时间正在做的一个react的项目，其中有一个功能是一个页面点击按钮的时候跳转到一个下载页。微信浏览器里面是不可以下载的，要引导用户在浏览器中打开。安卓手机引导在浏览器打开之后，是当前的下载页面，但是iOS手机在浏览器打开的时候并不是下载页，而是跳转下载页之前的那个页面。由于是react的项目，所以在做路由跳转的时候我用的方法是：this.props.history.push('要跳转的路由')用这个方法，在微信浏览
2020-12-14 09:25:39
1226
原创 react项目中点击按钮使用window.open方法打开新页面，再次点击数据不更新问题
问题描述在使用react做后台管理项目时，有一个需求是，一个可根据条件查询的列表，里面有一个打印功能，打印的是当前查询条件的数据，点击打印按钮的时候，使用window.open()方法打开新的页面，并设置了打开窗口的位置，要打印的数据在新窗口里面展示，真正的打印功能也在新窗口实现。此时有一个问题，要打印的数据我是存在localstorage里面的，当第一次点击打印按钮打开新窗口之后，要打印的数据是正确的，但如果我没有关闭新打开的这个窗口，从上一个页面换了查询条件，再次点击打印的时候，打开的还是上一次没
2020-12-14 09:21:13
2740
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人