- 博客(39)
- 收藏
- 关注
RSS订阅原创 高维向量相似搜索插件 pgvector
同时pase有对外公开发表的论文, 基于这个论文, 国外的开源爱好者开发了一个名为pgvector的插件, 支持ivfflat索引算法。embedding接口会返回一组vector，相对于其他数据的向量搜索，它生成的向量精确度更高，起初用的是supebase云数据库，后来替换成了postgres（支持私有化部署。正在用openai开放的接口做调试，用embedding接口来实现内容相似度检索，并用chatGPT生成答案，从目前来看实现的效果还不错。）
2023-04-04 14:02:38
2390
1
原创 在html中实现word中打批注的功能
随着企业数字化的发展，各行各业都需要不断积攒行业数据，数据的来源有很多，但是一般这些数据都需要通过人机耦合的方式进行数据准确性的确认。为了实现模型跑出来的结果可以准确的显示在页面中，正确的结果又可以反哺给模型，所以在前端做了很多尝试。我们实现的有3种:1是把内容转成图片，利用ocr识别，前端svg绘制坐标。2通过把图片/文本加上编号，缺陷是结构要足够简单，复杂排版不满足。3是把文档解析成html，对html进行打标签。这里只讲第三种，也的最近刚写的demo，有兴趣的可以拷贝到自己的项目中试试运行环境：no
2022-08-15 19:56:20
2230
2
原创 eventsource长链接nginx配置
如果你是本地和ip可以访问，通过域名就链接失败。那就赶紧检查下上层是否还存在nginx代理，正常都是有一个域名的nginx代理到真实的服务地址，如果找到了跳转的nginx，请把各个nginx配置中增加上述配置，一般都是再location/{}下。问题本地和ip直接访问都是可以的，通过域名访问就不行了。2、因为生产环境增加了域名nginx，导致多次踩坑。加上这几条，域名可以了。eventsource|eventsource|eventsource...
2022-07-20 17:34:06
2351
原创 升级和锁定package.json里的版本号
今天同事在升级view-design的时候，drone流程报错了。错误信息如下：npm ERR! code EINTEGRITYnpm ERR! Verification failed while extracting view-design@4.4.0:npm ERR! Verification failed while extracting view-design@4.4.0:npm ERR! sha1-bwgcZzt3QgObs4o6UZOO+rtg0KI= integrity checksum
2022-06-16 15:06:38
3649
原创 自定义指令实现vue项目中的按钮级权限
vue项目中通过自定义指令实现按钮的显示/隐藏，按钮角色是保存在vuex中的（正常是通过登陆接口返回塞进去的）。import Vue from 'vue'import store from './store'import route from './router'const customDirective = () => { // 注册一个全局自定义指令 `v-focus`，默认focus Vue.directive('focus', { inserted: function
2022-01-21 00:00:00
412
原创 前端微应用qiankun框架集成参考
接触qiankun框架也有一段时间了，一直没什么产出，这篇文章来源于组内同学的分享ppt，对于新人来说可能觉得没头没尾，希望大家见谅。虽然以下内容已在多个项目中得以验证，但是缺少部分小细节，大体思路如此，仅供参考思路非常重要的3个钩子：getQianKunConfig().then((result) => { (window as any).qiankun.registerMicroApps(result.subApps, { // beforeLoad: app => {
2022-01-18 11:00:22
1436
原创 vue-property-decorator之@Inject可选参
相信大家的项目都已经接入了typescript，如果还没有接入的希望大家尽早接入。如果是用vuejs2.x的小伙伴，一定对vue-property-decorator 模块不陌生，我们经常在项目里这么用：import { Vue, Component, Prop, Provide, Inject } from 'vue-property-decorator';我们知道在vuejs原生语法里，provide、inject是配对使用的，在装饰器语法里@Provide，@Inject装饰器也需要配对使用，存
2022-01-17 22:15:00
1162
1
原创 删除对象属性节点引发的血案之深拷贝解析
今天遇到一个很有意思的事，见下图，之前可能遇到过，但是忘记了，今天记录下来，加深下印象。起初以为是使用JSON.parse(JSON.stringify(obj))进行深拷贝，把导致特殊的节点被过滤掉了（这个项目里，前面的代码正好遇到过）。后来查了深拷贝的文档后，排除了这个问题。在控制台调试后发现，原来是因为在console.log之后删除了当前节点，居然闹了个大笑话。不过，这个场景还是得记录下，在删除一个属性之前打印该对象，默认是显示当前属性的，但是点开箭头之后，当前对象又是不包含此属性的。以后再
2022-01-13 20:40:17
232
1
原创 基于wavesurfer，regions 封装的可视化音标标注控件
基于wavesurfer，regions 封装的可视化音标标注控件/*! * wavesurfer.js regions plugin 5.1.0 (2021-08-05) * https://wavesurfer-js.org * @license BSD-3-Clause * @author huinian */import WaveSurfer from '@/assets/js/wavesurfer';import Regions from '@/assets/js/wavesur
2022-01-04 11:39:43
1483
原创 ES6 Class 中this指向问题
类的方法内部如果含有this，它默认指向类的实例。但是，必须非常小心，一旦单独使用该方法，很可能报错。今天就遇到这种情况（伪代码）：/** * 添加 mousemove事件 */ addMouseMove () { document.getElementById('xxx').addEventListener('mousemove', this.regionBarMouseMove); } /** * 移除 mousemove事件 */ removeMou
2022-01-04 11:29:45
1038
原创 vue组件封装技巧，如何对vue模块进行功能封装
如何对vue模块进行功能封装，vue组件封装技巧当业务不断累加，导致原本干净整洁的代码越来越冗余，各种变量和注释已经让他人望而却步，往往又苦于重构带来的成本，导致诞生很多巨石应用。与其让自己或他人面临这种问题，不如我们一起来学习下，如何将代码更优雅的组织起来，前人栽树，后人乘凉。我经常和别人强调，一定要做好设计，设计的目标是什么？个人理解是，增加代码的可塑空间，降低维护成本。文档设计是必要的吗？答案是肯定的，在做业务之前一定要做好设计，但究竟哪些是需要我们设计的呢？做好以下几点，轻松搞定前端文档设计
2021-09-28 10:40:59
4006
1
原创 实现div的高度由0到auto的过渡变化
如果你想要实现height：0 到 height：auto的过渡效果，直接用height+tansition，你会发现没有过渡效果，下面的方法会让你快速实现过渡效果，原理是获取子元素的真实高度，赋值给父元素的max-height。css 部分（menu-item-active是激活状态，默认高度是0，激活状态下是auto）：.menu-item { max-height: 0; transition: max-height 0.15s ease-out; overflow: hidden;
2021-09-06 13:45:15
1732
原创 多层drawer 导致的层级覆盖问题
iviewUI中的Drawer组件大家都经常用，如果你的项目足够复杂，会有多层Drawer嵌套使用的场景。今天发现在多层嵌套时会导致层级覆盖的问题。Drawer组件官方支持transfer是否将抽屉放置于 body 内 默认值是 true这个属性会使得页面中的由Drawer组件生成的node节点，全部放在body中同级存在。为了保证Drawer的效能，node节点并不会在关闭时销毁，所以Drawer的加载顺序会决定Drawer的层级。当我们在嵌套使用时，经常会误以为组件没有更新，但其实不然。网上有问
2021-08-26 17:16:27
2847
转载 git常用命令，git仓库迁移整体分支方法
下面这些命令是我们常用的git操作，发布出来供大家参考，还有很多命令因为不太常用，这里就没列举了。首次拉取远程仓库代码git clone 仓库地址查看本地分支git branch切换本地分支git checkout 分支名添加修改文件到项目git add 文件路径提交被添加文件到本地仓库git commit -m “功能描述”查看所有分支git branch -a拉取远程分支到本地git checkout -b 本地分支名 origin/远程分支名创建本地分支git bran
2021-05-24 18:39:20
313
原创 nginx报错unknown directive “gzip_static”，使用webpack的gzip优化
前几天对项目进行了webpack打包优化，开启了webpack的gzip功能，打包出来的.gz需要nginx开启gzip功能才能使用，要不然加载资源会报404；新增nginx配置如下：#开启和关闭gzip模式gzip on;#gizp压缩起点，文件大于1k才进行压缩gzip_min_length 1024k;#gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间gzip_comp_level 4;#进行压缩的文件类型。gzip_types text/plain appli
2021-05-20 17:37:32
7193
13
原创 webpack打包优化插件Dllplugin的使用
什么是DLL文件？DLL(Dynamic Link Library)文件为动态链接库文件,在Windows中，许多应用程序并不是一个完整的可执行文件，它们被分割成一些相对独立的动态链接库，即DLL文件，放置于系统中。当我们执行某一个程序时，相应的DLL文件就会被调用。为什么要在项目中使用Dll？通常来说，我们的代码都可以至少简单区分成业务代码和第三方库。如果不做处理，每次构建时都需要把所有的代码重新构建一次，耗费大量的时间。然后大部分情况下，很多第三方库的代码并不会发生变更（除非是版本升级），这时就可
2021-05-19 14:26:42
1587
3
原创 团队文档在线管理，非常实用的vuepress
在做前端团队建设过程中，相关文档越来越多，所以迫切需要有一个地方来存储这些文档。在对比了几个框架之后，最终选择了使用vuepress构建静态资源网站。优点：1、vue系，大家比较熟悉2、界面优美，直接使用vue官网一样的风格。3、文档基于markDown，可移植。准备：1、请基于vuepress中文文档，完成项目安装和构建，地址：https://vuepress.vuejs.org/zh/guide/getting-started.html2、本篇文章只会把自己认为的几个核心模块拿出来和大家分
2021-05-13 19:50:48
568
原创 判断一个点是否在多边形内，判断一个多边形是否在另一个多边形内
因为我们的业务是和图像识别相关的，所以我们集成了图像自动识别引擎。引擎可以把图片上的内容，识别出来并用一个多边形包裹起来。如下图：但是有一种场景，只需要引擎识别出某一块区域即可，比如只识别标题部分。这就需要我们先限制识别区域，再告诉引擎识别哪一部分，但是最后我们没有使用这一方案，而是采用的第二种方案：引擎识别所有结果后，由前端完成对结果筛选。所以我们有了“判断一个点是否在多边形内，判断一个多边形是否在另一个多边形内”这个需求。核心代码就两块// 计算一个点是否在多边形之内let isInPolyg
2021-05-10 10:24:32
690
4
转载 Kraken初探，用Vue开发Kraken应用
早听闻阿里系在开发轮子，准备对Flutter进行集成，以此来降低Flutter的使用门槛。现在Kraken（北海）已正式发布，官方说已经在多个项目中上线使用，但是github上依然存在很多坑，如果大家对Flutter有向往，但是一直因各种原因还没有入门的，不妨来动起手来，早点学习。可惜的是目前只支持macOs用户体验；官网：https://openkraken.comGithub：https://github.com/openkraken/krakenKraken 是什么Kraken 是一款基于 W
2021-04-22 10:32:08
1903
转载 websocket学习这篇文章就就够了
websocket有什么特点？在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。WebSocket 协议本质上是一个基于 TCP 的协议。为了建立一个 WebSocket 连接，客户端浏览器首先要向服务器发起一个 HTTP 请求，这个请求和通常的 HTTP 请求不同，包含了一些附加头信息，其中附加头信息"Upgrade: WebSocket"表明这是一个申请协议升级的 HTTP 请求，服务器端解析这些附加的头信息然后产生应答信
2021-04-09 15:05:55
139
原创 vue路由的钩子函数执行顺序和3种传参方式
vue router路由的生命周期钩子函数执行顺序导航被触发。在失活的组件里调用 beforeRouteLeave 守卫。调用全局的 beforeEach 守卫。在重用的组件里调用beforeRouteUpdate 守卫 (2.2+)。在路由配置里调用 beforeEnter。解析异步路由组件。在被激活的组件里调用 beforeRouteEnter。调用全局的 beforeResolve 守卫 (2.5+)。导航被确认。调用全局的 afterEach 钩子。触发 DOM 更新。调用
2021-04-08 11:40:10
688
原创 vue-cli3项目配置自动eslint代码格式化校验
vue-cli3项目配置自动eslint代码格式化校验为了使得代码更加规范以及更易读，需要规范前端团队成员的eslint和vscode setting，现在记录下我们需要做的具体方法。安装依赖在cmd中打上把相应的依赖加到devDependencies下，再npm install对应依赖。在package.json文件加上相应依赖："eslint-plugin-html": "^6.0.3","@vue/cli-plugin-eslint": "^3.3.0","@vue/eslint-con
2021-02-25 11:20:31
2464
1
原创 Vuejs-Sentry的接入和使用
阅读本文之前，希望你已经对Vuejs项目非常熟悉，并且已经部署好了Sentry系统。如何部署Sentry系统我就不过多阐述了，请自行查阅相关文档，本文只记录前端接入方法：首先，我们先安装两个依赖（这里只介绍npm安装方法）npm install @sentry/browsernpm install @sentry/integrations接下来配置sentry，在项目的main.ts加入以下代码：import * as Sentry from "@sentry/browser";import
2021-02-19 17:56:33
1320
1
原创 TraceKit-跨浏览器堆栈跟踪日志标准化
在进行前端错误日志上报时，使用了sentry，他使用TraceKit来实现错误信息标准化。为什么需要格式化？因为并非所有浏览器都支持对错误对象的堆栈跟踪，一般我们在浏览器端获取程序错误信息有如下4种：1、onerror可以捕获到宏任务抛出的错误，微任务比如：Promise，和async函数抛出的错误是捕获不到的。window.onerror = (msg) => { console.log('捕获到错误', msg)}// 可以捕获到错误throw new Error()// 可以捕获
2021-02-19 16:30:06
1053
1
转载 VUE项目中的commit提交规范插件
一个基于commitizen的git commit提交规范插件，直接接入Vue项目，当commit提交更规范标准。Git commit 规范结合 commitizen commitlint conventional-changelog-cli husky，进行封装，一键安装，开箱即用的 git commit 规范。功能自动检测 commit 是否规范，不规范不允许提交自动提示 commit 填写格式。不怕忘记规范怎么写集成 git add . && git commit 不需要
2021-02-04 10:57:46
2441
1
原创 我对2021年前端团队的规划
每年的这个时间段，不论是对个人还是对团队，或者说对家庭，我都会去总结过去，展望未来。有些在夜深人静的时候，一个人很快就思考总结完了，有些却需要正式的文字记录，仔细的去思考总结，今年也不例外。下面是我对2021年前端团队的规划，如果你也是和我类似的岗位，不妨看看。分两部分，一部分是对团队的目标和职责定位，另一部分是团队建设。最终如何去做，取决于业务和团队，下面只是适合我们这个团队的一些规划。我的目标是2021年做到80%一、目标和职责目标：对项目结果负责，项目的成败决定个人和团队价值 注重
2021-01-21 11:32:17
5143
2
原创 了解以下4点，轻松掌握常见按位运算
vue3发布以后，经常听到按位运算，到底什么是按位运算，了解以下4点，轻松掌握常见按位运算。为什么大佬们要搞这些骚操作呢，很重要的一个原因就是快。位运算是在二进制层面上进行的运算，更贴近底层，比高级编程语言少了编译的过程。一、按位非运算符是~,作用是将每位二进制取反十进制2的二进制表示为:0000,0010 -> 1111,1101(每位都取反) 这是内存中的保存形式。记忆方法是~(A) = -(A+1)二、按位与&是二元运算符，它以特定的方式的方式组合操作数中对应的位，如
2021-01-19 19:46:31
1034
原创 linux服务器文件打包上传下载解压命令
今天在进行linux服务器之间文件转移时，用到了打包，下载，上传命令，相关命令需要对应的服务支持。我是在容器环境下使用的，仅供大家参考。切换目录cd 命令cd … 返回上一层cd /xxx 切换到xxx根目录cd xxx/ 切换到当前目录下的xxx目录ls 列出所有文件和文件夹打包：cd进入到目标文件夹，在打包当前文件夹内所有文件并生成xxx.tar.gz 压缩包。tar -zcvf xxx.tar.gz *下载输入 sz xxx.tar.gz 回车，会让你选择本地路径存储要下
2021-01-13 14:48:24
1535
1
原创 前端架构设计应该包含哪些东西？
前端架构设计后台架构设计概念适用于前端，前端没有数据库设计，所以可以不考虑并发。vuejs的优点，一样适用于前端项目。高内聚，低耦合，可复用，单元测试。从项目的生命周期，开发、上线、维护三个阶段考虑高内聚低耦合，划分清晰的模块职责范围，确定模块依赖和交互关系。打包优化，自动化部署。高性能、安全可靠、监控，局部更新。可扩展易维护，以数据来驱动视图，合理的模块拆分，层次清晰。统一的编码风格、文档留存，单元测试。从实际项目来说，我们一般需要这么做：每个vue插件一个模块全局通用的工具类
2021-01-10 13:01:48
1644
原创 1分钟彻底搞懂关于nginx的proxy_pass
今天在整理相关文档时，看到一篇文章，对于经常使用nginx却一直对proxy_pass云里雾里的同学很有帮助。（下面这段不重要，知道就好）Nginx的官网将proxy_pass分为两种类型：一种是只包含IP和端口号的（连端口之后的/也没有，这里要特别注意），比如proxy_pass http://localhost:8080，这种方式称为不带URI方式；另一种是在端口号之后有其他路径的，包含了只有单个/的如proxy_pass http://localhost:8080/，以及其他路径，比如proxy_
2020-12-28 18:42:12
5203
2
原创 彻底搞懂js和nodejs的事件循环eventloop
event loop 是一个执行模型，咱们这里可以简单的理解为就是js代码的执行模型。浏览器和NodeJS都实现了自己的event loop。浏览器的event loop 是在html5规范中明确定义的。NodeJS的是基于libuv实现的，可以参考libuv的文档或者nodejs的文档。 libuv已经对eventloop做出了实现，而在html5规范中，只是定义了浏览器的event loop模型，具体实现交给了浏览器厂商。**浏览器的eventloop执行模型：**宏任务队列和微任务队列以
2020-12-24 16:09:00
853
2
原创 WEB前端技能大全，前端知识体系
有部分公司上了规模以后，都会考虑到员工的个人职业成长，这是一件双利的事。对于技能从业者来说，清晰的职业规划和明确的技术方向非常重要，这会使得你比他人花更短的时间，成长到更高的高度。这是2年前整理的一张WEB前端技能大全，前端知识体系，需要的自行保存。存在部分过时的技术和一些没覆盖到的技术，大家见谅，仅供参考。...
2020-12-17 23:21:08
242
转载 Nodejs最佳实践，空闲的时候翻翻
今天看到一篇很不错的文章，虽然很长，但对于Nodejs开发人员来说很有必要收藏。1. 项目结构实践✔ 1.1 组件式构建你的解决方案TL;DR: 大型项目的最坏的隐患就是维护一个庞大的，含有几百个依赖的代码库 - 当开发人员准备整合新的需求的时候，这样一个庞然大物势必减缓了开发效率。反之，把您的代码拆分成组件，每一个组件有它自己的文件夹和代码库，并且确保每一个组件小而简单。查看正确的项目结构的例子请访问下面的 ‘更多’ 链接。否则: 当编写新需求的开发人员逐步意识到他所做改变的影响，并担心会破坏
2020-12-17 23:07:07
548
1
原创 原生JS 插件该如何封装？
篇首语： 如何才能在工作中进步？1、不断的学习和钻研，是保持个人竞争力的最佳方式。2、利用好现有平台，把最优的实现运用到项目中。插件自身的基本要求1、作用域相互独立，私有变量不能影响使用者的环境变量；2、需具备默认设置参数；3、需提供部分API，可以通过该API修改插件；4、支持链式调用；5、需提供监听入口，针对指定元素进行监听，使得该插件可以正常运行。正常的函数声明注：全局查找变量性能较低自执行函数前的符号说明：https://blog.csdn.net/u0126154.
2020-12-17 21:19:14
514
转载 常用Jest断言，test-utils+jest常用断言字典
Jest测试生成器已经是相当成熟了，Mocha相比各有优势，对于初学者来说，建议选用Jest，在项目中引用Jest，配置相当简单。但是Jest官方文档里的断言类型实在太多了，罗列出来常用的几种断言类型，供大家参考，如果想要看全集，请移步到Jest官网。常用not: 类似于 ! 取反expect(2).not.toBe(1)toBe：类似 ===expect(1).toBe(1)toEqual：基本用来，匹配对象是否相等expect({ one: 1 }).toEqual({ one:
2020-12-17 20:35:53
1241
原创 test-utils单元测试使用 nextTick的正确方式
当你在测试代码中使用 nextTick 时，请注意任何在其内部被抛出的错误可能都不会被测试运行器捕获，因为其内部使用了 Promise。关于这个问题有两个建议：要么你可以在测试的一开始将 Vue 的全局错误处理器设置为 done 回调，要么你可以在调用 nextTick 时不带参数让其作为一个 Promise 返回：很好的例子：// 错误不会被捕获it('will time out', done => { Vue.nextTick(() => { expect(true).t
2020-12-16 21:33:04
922
原创 git常用命令-适合初学者收藏
首次拉取远程仓库代码git clone 仓库地址查看本地分支git branch切换本地分支git checkout 分支名添加修改文件到项目git add 文件路径提交被添加文件到本地仓库git commit -m “功能描述”查看所有分支git branch -a拉取远程分支到本地git checkout -b 本地分支名 origin/远程分支名创建本地分支git branch 名称本地分支覆盖远程分支git push origin 本地分支名:远程分支名推送tag
2020-12-16 11:43:13
121
原创 Vuejs异步挂载组件传值引发的内存泄漏
今天解决了两个页面卡顿的问题，前端使用的是vuejs+axios，多入口打包，再动态挂载；架构大概如下图，图有点丑见谅。多入口打包过程我就不多说了，网上都有教程；这种架构的好处是，每次更新，只需要更新工具模块js，不影响已上线的任何功能，只需要后台添加个产品，上传个js就可以了。当用户工具中操作久了之后，越来越卡，观察chrome性能分析工具，内存占用持续上涨，经过排查之后确认是前端的问题。下图是第一次加载完成的chrome性能分析工具memory占用；这是一顿操作之后的性能报告，Shallow
2020-12-15 21:15:31
895
2
原创 centos7 nginx安装和常用命令
centos7 nginx安装/启动/进程状态/杀掉进程1、安装下载RPM：wget http://nginx.org/packages/centos/7/x86_64/RPMS/nginx-1.10.0-1.el7.ngx.x86_64.rpm安装： rpm -ivh nginx-1.10.0-1.el7.ngx.x86_64.rpm如果找不wget请安装，命令：yum -y insta...
2019-12-20 15:22:14
184
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人