- 博客(39)
- 收藏
- 关注
RSS订阅原创 关于vue router4.0 的页面缓存keep-alive
本着好记性不如烂笔头的原则，本章接着记录一下最近使用vue的一些干货技巧~需求背景：列表页跳转到详情页再返回，要记录之前的状态~因为项目中使用的最新的vue router4.0，所以在搜索无果后自己去官网查看以及尝试，亲测有效~直接上代码：//核心代码//App.js<router-view v-slot="{ Component }"> <keep-alive> <component v-if="$route.meta.kee
2022-01-11 14:33:25
1541
原创 关于postcss-px-to-viewport的使用经验
最近在工作项目使用中新接触到postcss-px-to-viewport，在使用上遇到一个坑，也有段时间没更新啦，记录分享一下~希望对你有所帮助！直接上重点，节省在网站苦苦寻找有效答案的你 >>>我所遇到的坑：由于项目需要，需要适配不同分辨率的终端设备，比如我接到的项目需求是1920*1080以及1200*1920；如果使用过postcss-px-to-viewport的话，我们知道适配一种尺寸在配置时设置viewportWidth就可以，那如果适配两种呢？一开始我想到的是
2021-12-31 17:24:05
6093
3
原创 PostgreSQL
PostgreSQL - 开源对象关系数据库系统PostgreSQL: AboutPostgRESTGitHub - PostgREST/postgrest: REST API for any Postgres database知乎对比：PostgreSQL 与 MySQL 相比，优势何在？ - 知乎
2021-12-08 14:04:15
362
原创 LF文件格式转换
方案一1.项目文件夹根目录创建这个文件.editorconfig，内容如下：# http://editorconfig.orgroot = true[*]indent_style = spaceindent_size = 2charset = utf-8trim_trailing_whitespace = trueinsert_final_newline = trueend_of_line = lf[*.md]trim_trailing_whites.
2021-09-27 10:28:35
767
原创 微信小程序下载pdf到本地的坑
背景：需要做一个在小程序里能够浏览pdf的功能，并且还可以下载pdf文件，使用户在手机里找到并脱离微信，直接查看。。首先，先解决了pdf浏览的功能，如果遇到类似需求的都知道在小程序里是没有直接浏览pdf文件的功能，要实现这个功能大致有两种方式：第一种先用wx.downloadFile下载文件（注意这里下载的只是本地临时文件），然后拿到文件路径使用wx.openDocument打开即可，这里文件是有大小限制的，不能超过50M；第二种使用webview打开pdf页面，这里需要注意的是需要配置
2020-09-11 10:43:33
7039
1
原创 抖音小程序填坑指南
最近抖音小程序比较火，公司部门也想尝试获取一些流量，于是开始吭哧吭哧不断徘徊于踩坑与填坑之间，下面记录一些最近小程序开发中碰到的各种问题～1.https://microapp.bytedance.com/首先是小程序开发平台；这里提一句抖音小程序实际就是字节跳动小程序，开发一个小程序可以在它旗下的今日头条和抖音共同使用；编辑器的话可以在这个开发平台下载字节跳动开发者工具，也可以使用vscode或者webstorm等其他编辑器，可以安装一些编辑器插件，这样开发起来更舒适；如果不想直接原生开发也可以去找一.
2020-06-24 16:49:13
3056
2
原创 开源自己的react组件到npm
背景：公司让做一些开源的事情，至于目的大家都能猜到，这里就不多说了，无非就是增加团队影响力（个人觉得没有什么用，哦哈~）。对于个人来说，如果能有机会参与到开源项目还是非常不错的一个经历，毕竟做自己喜欢的事情是每个人所期待的。好了，闲话不多说了，先附上本次开源组件的链接，有兴趣的朋友可以直接在npm下载~npm：https://www.npmjs.com/package/react-colour-block源码地址：https://github.com/kafeihaoka/react-colour
2020-05-18 15:08:38
458
原创 Promise.race的用法
最近做项目让增加一个功能，当接口请求超过5分钟后，做个处理页面增加错误提示，于是想到了Promise.race的方法，下面来记录一下~let P1 = new Promise( resolve => { setTimeout(()=> { resolve('p1访问！') },4000)});let P2 = n...
2020-03-31 14:31:35
1671
原创 前端项目单独部署nginx服务器
最近公司有新项目计划做前后端分离部署，让前端单独部署在一台AWS的ec2服务器，记录一下部署的过程，免得下次又得查阅资料~AWSec2服务器搭建nginx前端服务器nginx前端项目默认存放目录：/usr/share/nginx/html,不想放这里就在自定义的conf文件修改项目路径nginx.conf默认存放目录：/etc/nginx命令：1.编辑nginx.conf文件...
2020-03-20 11:17:44
1288
原创 解决antd中RangePicker浮层位置问题
问题描述：最近开发中遇到antd中日期选择器浮层位置问题，之前我的项目中全局模块已经用到了RangePicker，并且自定义了样式，现在需要在项目的新页签里使用RangePicker选择器，然而浮层样式又需要重新定位。解决问题：1.定义className；2.添加API参数 getCalendarContainer={trigger => trigger.parentNode}，...
2019-12-04 13:37:15
2828
1
原创 mac上git以及nvm安装使用
在公司用的window本，申请的mac本终于下来了，于是重新搭一下环境。因为基本环境搭建一次就不用去管了，所以步骤也忘得差不多了，这里再记录一下～# git1.首先查看电脑是否安装Git，终端输入：git2.如果没有安装过去官网下载：https://git-scm.com/downloads3.创建ssh key 配置git--- 设置username和emailgit ...
2019-11-28 18:22:37
707
原创 js复杂数据结构对比问题
react项目，今天碰到一个头疼的问题，props改变了但componentWillReceiveProps未触发，一开始直接用浏览器调试没有找到原因，之后输出console才发现原来并不是componentWillReceiveProps没有触发，而是我在函数里做的当前数据与将要获取的数据对比时出了问题。问题并不复杂，但这个问题定位，额，让人头大，浪费了不少时间~一开始我是用toString...
2019-09-10 18:08:49
460
原创 记录常用的chrome插件
谷歌网上应用商店：https://chrome.google.com/webstore/search/fireshotChrono下载管理器:做Chrome浏览器中最好的下载管理器Convertio:在线将文件从一种格式转换为另一种格式. 支持超过 2500 种不同的转换。Proxy SwitchyOmega:轻松快捷地管理和切换多个代理设置。React Developer Too...
2019-09-10 13:48:31
267
原创 优化长列表
最近做的项目有一个列表模块数据量巨大，后端限制完数据后还有大概10000条数据，直接渲染的话会有明细的卡顿情况，于是撸起袖子开始重构。这里只回顾一下实现原理以便以后忘了能立马捡起来：1.保存原始列表数组数据；2.只渲染可视区域大小的元素；3.当滚轮滚动时，动态的计算当前的scrollTop的值，然后根据列表每条数据的高度动态的去获取可视区域应该展现的列表数组元素；4.做内外两次...
2019-04-23 16:13:44
504
原创 js对象引用问题
let arrtest = [1,2,3]; let arrcopy = arrtest; arrcopy[2] = 1; console.log(arrtest) // [1,2,1] console.log(arrcopy) // [1,2,1]js引用对象或者数组，直接引用当引用的值改变后，同样也会改变原始数组。问题解决起来很简单，但工作中一不注意常常就会犯这种错误。/...
2019-03-12 12:33:40
999
原创 开发记录
fusion design使用记录：初尝fusion design，使用起来感觉还不错。本人前端（本次选择react框架使用iceworks创建项目），暂时还未和UI配合使用过，但已经觉得fusion design使用开发起来简便了很多。下载iceworks后，使用它无障碍创建项目架构，不用再自己安装各种乱七八糟的依赖，不用再为选择版本号而发愁，而且一键添加依赖，还可以配置编辑器和git。物料...
2019-02-13 17:58:15
184
原创 js2D物理引擎插件
matter.js：http://brm.io/matter-js/ //轻量级、社区活跃、最新box2D：http://box2d.org/ //功能全p2.js：都推崇p2比box2D性能好点，但社区不太活跃，文档较少推荐简单的物理引擎可选择matter.js...
2019-01-07 13:12:01
1002
原创 webpack项目体积优化之旅
需求背景：在测试服务器上，需求觉得登录时间过长问题原因：于是看了一下项目包的体积，在4M左右，网速正常的情况下无关紧要，但还是有必要优化的~解决问题：也是重新查阅了大量的优化体积方案，项目基于react、webpack编译打包的。1.首先安装webpack的插件webpack-bundle-analyzer，对项目包体积进行可视化分析const BundleAnalyzerPlu...
2018-12-12 13:07:31
319
原创 webpack配置字体编译问题
1.问题描述：在做公司的项目开发的时候遇到一个问题，字体加载失败报错404，如下：2.问题原因：起初没怎么在意，感觉应该是项目中引用了bootstrap的cdn字体或者是font-awesome的字体，之后找了好久发现并不是引用网络字体造成的，于是看到请求路径是项目的根目录，才灵光一现觉察到这是一个路径问题，因为没有找到这个路径下的字体文件它才会报错404，项目整体架构用的是super...
2018-12-06 15:42:48
1110
原创 开发记录
开发背景：superset、Flask-AppBuilder、react需求：网站添加favicon.ico图标(注：主要针对不能设置icon图标的页面。例：直接打开的PDF文件页面；一般的页面可以link的方式添加图标)原理：Flask是一个基于Python可扩展的微型Web框架。网站需要设置独立的favicon.ico作为图形标志，对于Flask这样动态的Web应用来说，fav...
2018-11-29 14:54:31
233
转载 解决git文件名大小写无法修改的问题
一、问题背景：在当前项目中，早先创建并已经push到远程的文件及文件夹，将名称大小写更改后，git无法检测出更改。二、原因：git默认配置为忽略大小写，因此无法正确检测大小写的更改三、解决方法：方案一：配置git运行git config core.ignorecase false，关闭git忽略大小写配置，即可检测到大小写名称更改方案二：手动修改1.git rm xx ...
2018-11-06 11:03:26
8837
1
原创 Babel 7 发布
Babel 7在九月初左右的时候发布了，删除（并停止发布）任何年度 preset（preset-es2015 等）。@babel/preset-env取代了对这些内容的需求，因为它包含了所有年度所添加内容以及针对特定浏览器集兼容的能力。同时删除 "Stage" 等 presets (@babel/preset-stage-0等)转而选择使用单独的提案插件。同样，默认情况下从@babel/poly...
2018-09-30 15:21:48
553
转载 js实现数组排序
js对数组进行排序的方法还是很多的，最近刚好又有一个实现表格排序功能的需求，本来是让后台做的，但由于各种因素推到了前端。嗯，正好回顾一下数组排序的多种实现方式~1. JavaScript的sort()方法sort()方法按照升序排列数组项，会调用每个数组项的toString()转型方法，然后比较得到的字符串。compare()函数方法是一个比较函数，作为sort()方法的参数。fu...
2018-09-30 10:40:09
411
原创 svg实现文本的垂直居中对齐样式
项目中用到表格内画折线趋势图，本人使用的svg绘制简单折线；没有数据的单元格显示文字，为了不影响表格的宽度自适应，就想到在svg上写文字。于是就有了在svg上对文字样式进行垂直居中的需求，上代码：<svg version="1.1" className={Style.svgLine}> <text x='50%' y='50%' className={Style.s...
2018-09-13 15:55:04
8078
1
原创 antd Table使用记录
1.antd table如何关闭hover效果？需求原因：对于普通表格来说，antd表格的hover完全是可以的，但是在单元格进行了合并的复杂表格中，就会显得很怪；解决方法：样式覆盖---------------------.ant-table-tbody > tr:hover > td{ background:transparent ! important;...
2018-09-12 14:59:38
3906
1
原创 react的渲染机制
在做react的项目开发中，由于项目需要，自己封装了一个通过下拉框筛选得到不同数据的图表，echart没有合适的图表，就手绘了一个。图表是一个横向的柱状图，当react渲染的时候会有一个加载动画，遇到的问题是加载动画只在第一次加载~然后让我们先回顾一下react的渲染机制，我们都知道react有一个虚拟dom的概念，当渲染的时候react会比较两个虚拟dom的节点；1.节点相同，属性不同---...
2018-08-30 10:41:40
696
原创 react开发中setState失效的问题
在react项目的开发中碰到一个奇怪的问题，setState失效。我这里提到的失效不是说的setState由于异步而造成的数据延迟问题，如果有这个问题的话，你可以通过this.forceUpdate()的方式去强制更新；言归正传，我碰到的问题是由于我的子组件使用了componentWillReceiveProps而产生的setState失效假象。查资料并实验一番，发现当调用setState时，co...
2018-08-24 15:38:09
5247
转载 react生命周期
最近又回到react的开发中，开发中遇到了父组件传递props给子组件设置成state数据的问题，于是又仔细回顾了一下react组件的生命周期，使用componentWillReceiveProps完美解决了这个问题；嗯，看了别人总结的，感觉挺好，也来记录一下知识点~getDefaultProps()执行过一次后，被创建的类会有缓存，映射的值会存在this.props,前提是这个prop不...
2018-08-03 16:18:24
157
原创 小程序开发记录
今天遇到一个很弱智的问题，我的微信小程序页面个人中心首页可以拖动，而其他的页面固定不能拖动，样式什么的都设置的是差不多的，最后给首页最外层view设置{width:100%;overflow: hidden}解决了。...
2018-07-26 16:13:08
158
原创 小程序开发记录
最近由于项目需要，也参与了小程序项目的开发，前段时间一直忙于开发，现在正好抽出空闲来记录一下最近开发中遇到的问题。感觉小程序的开发相对来说还是比较简单的，也可能是还没到优化那一步，哈哈~1.在跳转页面传参的时候要注意，如果你要传的参数是用data-i这种形式绑定的参数，要注意一下你获取点击的标签所用的方法。 如果你用的是e.target.dataset获取的i，当页面操作过快时，你所传...
2018-07-19 16:03:07
192
原创 发布自己的模块到npm
由于工作中项目需要，需要把第三方的插件修改并上传到npm继续当做依赖模块使用，以下为本次经验总结。1.首先，在自己的项目目录下新建项目------npm init（一路回车，此步骤为创建配置文件package.json） 2.创建npm用户------第一种：https://www.npmjs.com/ 注册地址 第二种：npm adduser 依次填写name、passwor...
2018-05-15 14:39:02
396
原创 开发记录
记录一些平时可能用到的网站：http://element-cn.eleme.io 饿了么团队vue开源组件 https://github.com/ElemeFE 项目地址http://momentjs.cn/ momentjs中文网https://docs.google.com 谷歌文档https://developers.weixin.qq.com/miniprogram/dev/co...
2018-05-11 16:28:23
208
原创 git的使用
以前公司都用svn，git用的比较少，也就自己的github个人站上传代码会用到一些命令，现在公司是用的gitlab管理项目，git用起来也越来越顺手了，就记录一下平时常用和遇到问题不知道怎么办时使用的命令。阮一峰的关于git常用命令清单的日志：http://www.ruanyifeng.com/blog/2015/12/git-cheat-sheet.html（很全面）基本操作：git stat...
2018-04-25 17:51:22
201
原创 网站增加代码监测
公司的react项目要使用ga（Google Analytics）做网站的代码监测，由于以前做过埋点类似的功能，本以为能很快结束，不过还是绕了一些弯路，废话不多说了，记录一下使用流程。官方文档：https://developers.google.com/analytics/devguides/collection/analyticsjs/events使用流程：首先，需要在你的入口文件（一般都是ma...
2018-04-19 14:47:06
1331
原创 react开发记录
做公司项目时，寻找表格插件发现一个挺好的react插件库，虽然暂时用不上，但还是记录一下。-------RSUITE | 一套 React 的 UI 组件库-----网址：https://rsuitejs.com/rsuite-table/...
2018-04-12 13:55:52
332
原创 使用微信jssdk实现公众号网页上传图片
在开发中，项目从App迁移到了微信公众号，app使用cordova插件实现吊起手机相册以及拍摄功能实现上传图片；迁移到微信公众号后当然就不能再使用了，于是就打算用微信jssdk来实现此功能。还是和做公众号分享的时候一样，按照微信开发文档的说明一步步来，先引入微信jssdk，不过这里得注意一下，官方默认给的是jweixin-1.0.0.js版本的，这里我们需要用jweixin-1.2.0.js，
2018-01-11 14:29:55
1973
原创 微信公众号网页开发工作中遇到的问题
最近在做微信公众号网页开发的时候，发现公司测试服务器网页在授权登录的时候跳转到了正式，搞得也是有点懵，之后看了代码才知道授权回调调的还是正式的，后台也没给测试的回调地址。当想去微信公众平台添加授权回调地址的时候发现只能设置一个，在网上找了找还好有解决方案。大致的做法就是在授权回调地址的服务器根目录下添加一个中转的html，当调用授权的时候跳转到这个地址链接并带上微信授权的那些参数，这样就可以实现配
2017-12-29 11:58:49
540
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人