![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
项目积累
文章平均质量分 65
仿生人会梦到敲代码么
A Photographer, A Programmer!
展开
-
vue3 + element 从0到1搭建前端基础框架
往往从0到1开发项目时发觉无从下手,或者很可能一步一个坑,因为大多基础框架公司已经搭建完毕的,新加入的成员也都是在此基础上进行功能模块的拓展。网上也鲜有详尽的全流程参考,多是某个局部功能的搭建,因此整理了一份包含以下方面的前端基础框架全流程搭建要义。原创 2022-12-04 23:27:14 · 2612 阅读 · 0 评论 -
可视化散点图适配长宽比
可视化散点图默认会将散点自动填充至整个画布区域,这样就会导致散点图形变。这种形变是两方面带来的,一方面是自动选取最大和最小的xy轴坐标作为范围,可以想象成将一个长方形的图片塞入一个正方形的容器中,并且还需要全部显示出来,那么图片的长度就会被压缩;另一方面是画布区域的长宽比不固定而导致的形变,画布区域的长宽会根据显示器来自适应。原创 2022-09-28 13:23:39 · 385 阅读 · 0 评论 -
详解 B2B 用户、组织、员工、角色
整理了一下 toB 多组织系统中常见的实体关系,往往在实际项目中这些基础模块是公司老前辈已经开发完成的,因此新人在此基础上开发一些相关的业务模块很容易被这些模糊不清的关系搞晕。原创 2022-09-26 15:59:54 · 1092 阅读 · 0 评论 -
h5ad文件前后端可视化探索
首先是读取h5ad文件使用的包,分别尝试了h5py、scanpy、anndata三个较为常用的包,scanpy和anndata读取一个3G左右大小的h5ad文件需要大概30s,h5py则1s不到的时间即可完成读取,主要的差异在于h5py没有构造稀疏矩阵(用来展示热力图),如果自行使用csc_matrix()方法进行处理的话,所需要的时间则和另外两个包几乎没有区别,因此推测主要的瓶颈在于对稀疏矩阵的处理上。...........................原创 2022-08-30 13:52:12 · 1731 阅读 · 0 评论 -
Echarts 散点图开启大数据量优化后获取框选数据
一、BugEcharts 官方提供的数据框选功能中,针对散点图可以添加 brushselected 事件来获取被框选的点的索引值,但是当使用 large 参数来开启大数据量优化后,再进行框选时存储选中点索引集合的字段 dataIndex 返回的是空数组。截止 5.3 版本该 bug 仍未解决,因此需要自行对散点图框选进行处理。二、处理逻辑所使用到的框选分为两种,矩形框选和不规则框选。矩形框选较好实现,只需要获取框选的四个顶点的坐标然后找出在此范围内的点即可。不规则框选则需要使用引射线法来对每个点原创 2022-05-31 11:08:13 · 2133 阅读 · 1 评论 -
Echart 实现多图表点击切替
一、功能需求散点图数目不固定单个散点图中有多组数据全部散点图同时展示在界面中,两种显示模式,主次视图和平铺视图主次视图时次要散点图会与主要散点图数据可进行点击互换主次视图点击右侧小散点图时会和大散点图交换,主要通过数据切换实现。数据结构[ // 1号散点图,两组散点 [{ 'X_tsne': [[111.111, 222.222],...], 'X_umap': [[111.111, 222.222],...], }], // 2号散点图,一组散点 [{ 'X_t原创 2022-05-24 10:48:01 · 1490 阅读 · 0 评论 -
理解 Angular/Vue 依赖注入
最近面试问到了 Vue 组件间传值的问题,关于这个问题基本的那些 api 就不用多说了,但是夜深人静时突然思考什么时候需要组件间传值?解决了什么问题?有什么复杂的业务场景?不由得又想到了 Angular 的依赖注入,感觉如果我自己是面试官一定会问一下 Angular 和 Vue 有什么区别,如果回答一个重一个轻就属实有点过于拉垮了。总的来说,这些问题的本质在于对于目前模块化的前端开发来说,数据交互方面的最佳实践是什么,基于这个前提再去理解依赖注入就好很多了。一、依赖注入的目的解耦!不使用依赖注入时,原创 2022-04-28 02:56:55 · 360 阅读 · 0 评论 -
Vue 新状态管理工具 Pinia 初探
Pinia 是什么?由 Vue 团队核心成员开发的下一代 Vue 状态管理工具,也获得了尤雨溪的认可,只不过目前还和 Vuex 是不同的仓库。而在用法上最大的变化则是抛弃了 Mutation,以往在使用 Vuex 时始终觉得通过 Actions 来通知 Mutation 改变 State 的操作如果能简化成一部就会方便很多,新版本果然没有让人失望!Pinia 使用不照搬照抄官网的示例,决定首先在自己的博客中使用 Pinia 状态管理改造一下文章列表的获取。安装npm i piniamain.原创 2022-04-25 05:13:38 · 146 阅读 · 0 评论 -
博客搭建二三事
点此先来看一眼一、为什么自己搭建1、我想在自己的网站中去做一些有意思的事情,包括但不限于目前的博客和摄影。2、大型博客网站不够简洁,之前也有使用过简书、CSDN等一些博客网站,但简书的审核标准太奇怪,而且会锁掉已经审核过好几个月的文章,CSDN则是在提交文章时要选一堆内容(然鹅还是会来CSDN备份一份副本),我想要一个简简单单的个人网站作为积累,因此产生了动手自己做一个的想法。3、为什么不使用 Wordpress 这类成熟的博客模板?之前有使用过,感觉定制化的程度不太够,无法拓展一些自己的内容..原创 2022-04-22 05:05:17 · 1394 阅读 · 0 评论 -
SPA中的hash和history
一、hash 和 historySPA 即单页面应用,路由改变时不需要重新刷新整个浏览器标签页,为了满足这一需求就需要使用 hash 或 history 模式,目前 Vue、React、Angular 都支持这两种模式。hashurl 中会带有 # 号,# 号后的路由改变不会重新加载页面,但会记录在 window.hisotry 中,因此可以使用 history.back() 等方法,监听则通过 window.onhashchange() 方法。historyhisroty:利用 history.原创 2022-04-22 03:29:47 · 320 阅读 · 0 评论 -
RESTful API
RESTful API 是一种接口设计规范,使用了 RESTful API 规范后即便不看接口描述也能大概了解该接口的主要功能,比以往除了 GET 就是 POST 的接口设计清晰易读很多。遵循的规范GET:读取POST:新建PUT:更新PATCH:部分更新DELETE:删除1、接口由名词组成2、避免多级 url,应使用 query 参数来查询3、服务器应返回 json4、返回正确的状态码5、提供链接提供链接指的需要根据接口设计使得每个接口在请求的过程中提供出下一步操作需要的接口。原创 2022-04-22 03:01:49 · 52 阅读 · 0 评论 -
状态管理业务场景
原本对状态管理的理解更多的是用于存储一些通用的比如用户信息、权限信息等来满足一些一对多或多对多的场景。后来着手一个对日项目后对状态管理有了更深的了解,不仅仅是普通的用户、角色、权限这些的状态,普通的增删改查也可以使用状态管理进行维护。业务场景是一个票据相关的后台管理系统,由于票据内容在随着使用时长的增加后会逐渐积累得越来越多,这也要求尽量减少后台接口的请求次数来优化使用体验。在以往的开发中,一个带有翻页的列表检索,有以下几种操作:条件过滤新增更新删除而在保证每页条目数不变的前提下(比如常原创 2022-04-22 03:00:59 · 76 阅读 · 0 评论 -
Vue 角色权限管理设计与实现
目前项目中使用到的角色权限管理共分为三级,分别是页面级、行为级(控件级)、接口级,这里记录一下三级权限在 Vue 中的实现。一、接口设计用户登录后该用户的角色与权限信息会一同返回给前端,前端将这些信息存储到状态管理里备用即可。权限信息为树形结构数据,包括:该用户可访问的页面数据该用户可执行的行为数据该用户可访问的接口数据三者的关系为页面数据为父级,页面数据内包含行为数据和接口数据,而行为数据和接口数据为兄弟级别。原本的设计将行为数据和接口数据设计为父子级的关系,后来发现这样做在实际业务中原创 2022-04-15 05:34:06 · 3412 阅读 · 1 评论 -
Vue + Refresh Token
一、关于 Refresh Token之前公司项目中使用了 Refresh Token ,作为前端理解 Refresh Token 花了一些功夫。为什么在已有 Access Token 的基础上还要再加一层 Refresh Token ?因为 Access Token 本身有过期时间,很多网站长时间不登录都会提示 Access Token 过期重新登录,然后某些记性不好的小伙伴就开始了忘记密码找回的流程,用户体验不是很好,而如果设置过长的 Access Token 过期时间那么安全性又会降低,Refres原创 2022-04-15 04:18:38 · 1605 阅读 · 0 评论 -
B2B 管理员创建新用户流程
实体包含组织 Tenant、用户 User、员工 Employee,当存在多个组织时,用户在不同组织下可以有不同的员工身份,为一对多的关系。管理员隶属于用户实体,拥有不同的用户 type。原创 2022-04-15 03:13:32 · 176 阅读 · 0 评论 -
Node + imagemin 图片压缩
“imagemin”: “^7.0.1”,“imagemin-mozjpeg”: “^8.0.0”,“imagemin-pngquant”: “^9.0.2”,images 插件在只能将 png 格式压缩为 jpg 格式,而 TinyJPG 插件有免费额度限制,并且最主要的是需要将图片上传至 TinyJPG 服务器进行压缩,因此最终选择了使用 imagemin 插件进行压缩。如果对压缩质量要求较高建议使用TinyJPG,imagemin实测压缩后色彩上有些许失真。安装这三组插件时需要指定版本,.原创 2022-04-15 01:34:34 · 1592 阅读 · 5 评论