- 博客(55)
- 收藏
- 关注
RSS订阅原创 debug持续记录
组件内不执行 useContext 吐出的方法。怀疑是执行了初始方法，打印下来确实是。怀疑传参不成功，由此检查层级结构，发现 Context.Provider 根本没包裹目标组件。
2024-02-18 17:43:01
363
原创 vscode 格式化代码后反而出现红色波浪线格式报错
就我自己的情况而言：格式化代码时 vscode 调用的是 prettier 插件配置的规则；而校验代码格式报错红色波浪线 vscode 调用的是 eslint 插件的校验规则。一般认为 eslint 除了代码美化功能之外，还有一些校验功能，所以优先考虑使用 eslint 而干掉 prettier。两者规则不一致，导致 prettier 格式化代码后，eslint 反而认为是不合法的，标注红色波浪线；vscode 代码校验和代码格式化的插件如果一致，那么就不存在规则冲突的问题了。
2024-01-04 20:38:45
788
原创 如何在 Chrome 上调试文件打断点
2. Ctrl+P 输入文件名称。4. 重新触发代码运行，触发断点。1. 控制台进入 Source。3. 在需要的位置手动打断点。
2023-12-04 20:40:37
198
原创 使用 js 原生 API IntersectionObserver实现内容触底加载
使用IntersectionObserver，在react hook 框架下实现下拉列表的无限滚动加载。
2022-09-21 12:27:25
554
原创 如何将有序列表的排序数字改成左对齐 css
有序列表头部数字标默认是右对齐的。实际需求中，可能会要求我们左对齐。虽然可以通过直接改用然后通过css来模拟ol的效果，但也可以简单地通过css配置解决右对齐的问题
2022-08-01 20:14:30
749
原创 VSCode 格式化 VUE 代码并自定义 Prettier 规则
本文除了说明步骤，也会带上原理和方法，从而更好理解这些工具的机制和相互关系步骤一：在 vscode 上下载安装 Vetur 插件Vetur 是目前 vue 开发几乎必备的 IDE 插件。从官方文档可知，它的常用功能包括了 vue 语法高亮、错误提示、格式化等。基本的开发需求差不多都可以一个插件搞定。下载安装 Vetur 之前，.vue 类型的文件原来会被 vscode 识别为 plainText，下载后，.vue 文件的语法解析挂靠了 Vetur 插件，可以呈现语...
2021-10-10 19:48:54
1763
原创 空格导致的复制命令在终端报 command not found
情况描述：打算在mac终端执行一段命令，之前这个命令都可以顺利执行，这次从自己的飞书笔记上复制下来后再执行，结果报错 command not found（ps：命令的含义是禁止Chrome浏览器左滑回到上次页面，不过这不重要）命令执行失败了，报错 command not found看起来一模一样的命令，之前却成功执行了：那肯定是肉眼不好区分的地方产生了差异。所以将两段看起来一模一样的命令放到纯文本文档中，使用od命令查看文件内容的ASCII 码，看看有什...
2021-09-20 21:47:40
578
原创 如何用js触发jenkins远程任务构建
第一步 配置 jenkins 用户 token1. 在jenkins右上角，点击自己的名字，进入个人页面2. 在个人页面的左侧，点击 “设置”，进入个人设置页面3. 在个人设置页面，找到 API Token模块，新建一个token。这里我已经新建了 123456 的 token，再新建一个 2222 来做例子3. 如上图，先点击 “添加新Token”，会弹出新的空白输入框。输入Token名称，点击生成，就会出现下图的情况。复制该字符串，作为 token。第二步 .
2021-07-07 20:34:45
855
2
原创 antd 表单一个label下多个内容
1. 如何实现一个 label 旁并排多项内容比如这样，在 other 的 label 下，既有输入文本域，又有 toggle 开关。同时两者有序地并排在右侧，同一行。方法是再用一层Form.Item分别包裹右侧内容，并且设置noStyle属性示例代码： <Form.Item label="Date of Birth:"> <Form.Item name="birthDate" noStyle>
2021-05-06 16:02:00
1159
原创 csv-parse 解析csv文件报错 Invalid Record Length: expect 4, got 7 on line 8
在找虫的过程中发现如果把有问题的文件重新保存一次，报错消失。并且对比前后两次的文件大小，有1字节的差异。这1字节应该就是关键。要看下两个文件这1字节差在哪里，需要查看文件的字节码在终端输入vi -b 文件名，使用二进制模式进入后输入:%!xxd文件的字节码（对应ASCII码表）就展开了。窗口的右边的字符是一一对应的左边的文件是有问题的，右边的可以成功解析。差别就在于右边文件，所有的换行符都是 0d 0a ，对应 ASCII 码表是“回车”+“换行”。...
2021-03-09 18:14:27
706
原创 怎么避免 Promise.all 其中一个 reject 让所有都取不到值
大家都知道 Promise.all 传入的 promise array 里面，只要有其中一个 promise reject 了，即使它前面的 promise 正常 fulfilled，整个 promise.all 也会直接走到 catch，并且只会 catch 第一个 reject 的返回值。那如何让一串promise 用 Promise.all 实现并行不阻塞地调用，同时每个的reject 和 fulfilled 状态不互相影响呢？答案是将这串 promise，每个都用一个新 pro...
2021-02-04 12:08:52
1845
原创 iview 如何跨组件控制和同步 Modal 的显示隐藏
开发中经常遇到的情况，假如页面需要弹出一个模态框，这个框里的内容也比较多，那么很自然地会考虑把模态框及其中的内容抽成单个组件，再由页面去引用并控制它的显示隐藏。那么，在中间多出一层封装的情况下，如何同步控制模态框的显示隐藏状态呢？外层页面组件<PriceInfodModal v-model="modalShow" />data(){ return { modalShow: false // 控制且同步模态框显示隐藏的变量 }}..
2021-01-11 00:20:16
1073
1
原创 umi 的项目中如何修改 favicon
浏览器在解析html文件时会将类型为icon的link标签引用的图片作为网页的favicon，也就是网站标签左上角的小图标。有两种方法加入link标签：1. 在document.ejs中使用link标签<head> <link rel="icon" type="image/x-icon" href="favicon.ico" /></head>umi 约定如果存在src/document.ejs 文件，则将其作为html模板。2. 在umi配.
2020-07-08 17:07:09
7282
2
原创 umi项目 (或vuecli项目) 自定义环境变量配置
1. config.js 配置文件里的 console 是打印到项目控制台内的，说明这里还是服务器侧在跑的代码2. 项目内import了ct里暴露的变量，执行process.env.REGION，打印在浏览器端，说明这是浏览器跑的代码，所以取不到process.env。3. 后台使用的东西前端用不到，不应该放在ct里呀大哥4. vue取到环境变量是在配置文件里（服务端侧）取到process.env.REGION，然后需要传到浏览器端代码里(utils.js)。vue为了干净，有个限制，vue c
2020-05-25 18:35:48
3115
原创 移动端h5调试方法总结
方法一：使用 Chrome inspect 调试手机页面1. 用USB线连接手机和PC2. 手机调到开发者模式（不同机型不同，可自行搜索）3. PC上打开Chrome浏览器。进入chrome://inspect/#devices。正常情况下会看到对应的手机和页面信息。附：Chrome 官方指导文档https://developers.google.com/web/tools/chrome-devtools/remote-debugging?utm_campaign=2016q3&u.
2020-05-21 18:18:15
3455
原创 react函数组件如何实现ref
// 父组件const PComp = props => { const myRef = useRef() // 初始化一个ref实例 const getChildVal = myRef.current.foo // 获取ref暴露的值 return ( <ChildComp ref={myRef} /> ) // 引用子组件}// 子组件import { useImperativeHand.
2020-05-14 20:34:33
1122
原创 在 Vue + Typescript 项目中使用 eslint 和 Prettier 的配置
先扔出基本配置，能跑通：.eslintrc.jsmodule.exports = { parser: 'vue-eslint-parser', /* 非必须，但只能是该值，详见下文。*/ extends: [ 'plugin:vue/recommended', /* 基本配置，必须 */ 'plugin:prettier/rec...
2020-04-09 16:31:28
5817
原创 iview 分页防止两次触发
问题描述：若当前页码不在第1页，进行切换 page-size 操作，会同时触发on-page-size-change 和on-change 事件。（因为 pageSize 的切换会引发页码跳回第一页。而事件触发顺序是 onSizeChange ->onChange ）正常情况下，改变页码 和 切换pageSize 都需要重新请求数据。因此在上述情况下，会触发两次请求，这是不合理的...
2020-04-03 19:16:53
542
原创 打造 NestJS 日志系统
Nest系统日志打印配置入口，这里传入一个自定义日志类。但实际上实现了LoggerService接口的类都可以。 其中BasicLogger 是自定义封装命名的类。 const app = await NestFactory.create<NestExpressApplication>(ApplicationModule, { logger: new NestL...
2020-03-11 18:12:26
6096
原创 nestjs typeorm 条件筛选、排序、分页 常见查询功能的实现
1. 准备工作：注入Repository，创建queryBuilder@Injectable()export class TicketDao { constructor( @InjectRepository(TicketEntity) private readonly ticketRepo: Repository<TicketEntity> ...
2020-03-08 13:13:35
18264
1
原创 Linux 上安装 nvm node npm pm2 全家桶
背景：nodejs中台服务需要迁移到新的服务器上，为此需要搭建一套用pm2管理node服务的环境。统一用户名为kredit。安装node/npm方法一：下载安装包，可用wget下载。但是安装目录什么的比较麻烦，所以考虑用自动化安装工具。方法二：自动化安装工具apt-getapt-get 下载安装：sudo apt-get install nodejs但是下载的nod...
2020-01-20 16:44:57
1161
原创 理解 v-model、v-bind、$attrs、 $listener 和 .sync 及其在跨组件数据双向绑定上的应用
目标和内容： 在完全理解 v-model，$attrs, $listener 的基础上，实现父(A)、子(B)、后代(C)的三层组件结构中，A组件和C组件跨越B组件之间的数据双向绑定。一、v-model 的本质<MyList v-model="lovingVue"></MyList><!-- 其实是以下的语法糖 --><MyList ...
2020-01-14 21:39:46
6151
原创 开发环境 vue 项目如何关闭 eslint 规则校验
背景（可略）：更新代码后，eslint 的空格、缩进等报错会直接导致页面热加载 error。以前不会。非常烦人原因未知，可能是哪里可以配置。回头再研究，当务之急先把eslint 关掉继续开发。项目使用的是 vue-cli-service，这玩意儿把 webpack 等配置包起来了。以前那些诸如配置文件 webpack.base.conf.js 都没有了，一律在 vue.config...
2019-12-26 11:09:43
437
原创 不想在iview表单校验回调函数里写逻辑？试试Promisify吧
const valid = await promisify(myForm.validate, myForm)()if (!valid) { this.$Message.warning('Please Complete the Form!') return}/** * 方法回调promise化 */export const promisify = (f...
2019-10-12 15:18:55
223
原创 打造自己的 grpc 公用服务接口
创建一个 grpc client 实例 // 加载proto文件，生成一个Definition const PROTO_PATH = path.join(__dirname, '../protos/rpc.proto') const packageDefinition = protoLoader.loadSync(PROTO_PATH, { defaults...
2019-10-10 15:41:51
609
原创 爬坑echarts单轴散点图
vue项目，echarts的/lib/component和/lib/chart按需引入。已经引入了散点图的部分import'echarts/lib/chart/scatter'。单轴散点图直接使用例子的option居然会报错。然后找原因。尝试引入4.0.3的min.js的CDN，可以。所以猜测是版本问题，把本地npm包升级到4.0.3，不行。接着尝试import'ech...
2019-09-20 18:55:41
2250
原创 Elasticsearch快速入门 - 增删改查
前言：elasticsearch貌似版本迭代超快，现在网上大多的例子都是老版本的。最新elasticsearch 7.x的版本里type的概念被废弃（https://www.elastic.co/guide/en/elasticsearch/reference/master/removal-of-types.html）。跑在新版elasticsearch下会警告或报错。以下命令符合7.x规范，...
2019-09-03 20:46:27
98
原创 vue打包后报错export not defined
（有可能是包更新了。首先检查队友有否更新npm包，有先npm i一下）修改打包设置（我的是tsconfig.json）"module": "commonJS" 改成 "module": "esnext"或其他...
2019-09-02 14:59:42
1029
原创 iview表单验证 Select错误信息不消失
1. 表单验证的默认规则是字符串数据类型。所以当select的value是数字时，表单验证不通过。解决办法：在规则定义对象中加入属性type:'number'2. 规则定义对象中，如果对Select的校验选择了trigger:'blur'，那么假如一开始select为空验证不通过，到后来选择了值理应通过验证，但错误信息是不会消失的。因为blur无法触发select的规则校验。解决...
2019-08-29 18:12:37
4271
原创 iview切换页码触发两次事件
handleChangePageSize(size: number) { this.pageSize = size if (this.curPage === 1) { this.getTreeList() } }handleChangePage() { this.getTreeList() }
2019-08-27 11:48:35
643
原创 vue自定义组件实现sync
// template<Modal :value="modalVisible" title="Common Modal dialog box title" @on-visible-change="handleVisibleChange"> <p>Content of dialog</p> ...
2019-08-22 19:06:02
653
原创 Google 登录流程梳理 [前端与http层]
前台存放项目的client_id和client_secret（从Google官方申请下来的）同时项目引入gapi包，在全局种下gapi变量调用全局gapi.auth2.init方法，传入client_id，获取auth2对象。对auth2对象调用grantOfflineAccess()方法，页面弹出Google登录框。用户在页面上输入登录账号密码回车，触发grantOffli...
2019-08-16 16:55:37
1325
原创 彻底搞懂JS中的的隐式类型转换
看到一篇好文（https://juejin.im/post/5d43bcb36fb9a06b2f5f920f），评论区还有高手打架，旁观者收益不少，因此总结一发。如果== 两侧是不同类型的值，则会引发隐式类型转换。那么转换的规则是什么？什么时候是true或false呢？记住下面几条转换规则，妈妈再也不担心我懵逼规则一：若字符串和数字进行比较，那么字符串转数字。'0'...
2019-08-02 21:47:43
144
原创 原生js实现点击位置出现弹出框
文章重点在于位置获取获取事件点击位置相对client的偏移：event.clientX / event.clientY父元素相对client的位置：parentDom.getClientRects()[0].left / parentDom.getClientRects()[0].top相减得到点击位置相对父元素的偏移，设置为弹出框位置popupDom.s...
2019-07-22 14:10:38
4068
原创 iview结合loading属性手动控制显示隐藏
<Modal v-model="modalVisible" :loading="modalLoading" @on-ok="onModalOk" @on-cancel="modalVisible = false" ></Modal> onModalOk() { if (this.modalType ...
2019-07-16 20:17:56
2378
原创 mac下MySQL修改密码
cd /usr/local/mysql/binmysql -u root -puse mysql网上其他修改密码的sql语句大多是用PASSWORD('xxx')来生成密码，但是我跑下来语法报错。直到使用：ALTER user 'root'@'localhost' IDENTIFIED BY '123456';效果如下：重启数据库后新密码生效...
2019-07-11 12:10:03
155
1
原创 fetch请求到底返回了啥
话不多说，上手代码源自MDN的示例，一跑即知https://developer.mozilla.org/zh-CN/docs/Web/API/Body/json首先新建一个request请求var myRequest = new Request('http://admin.dev.lenteradana.co.id/node/config/get'); request...
2019-07-04 17:33:59
6326
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人