- 博客(115)
- 收藏
- 关注
RSS订阅
原创 Vue读书笔记
Vue 读书笔记简介1、MVVM模式：Vue的数据驱动是通过MVVM模式，Model数据部分负责业务数据，View视图部分，DOM元素，负责视图处理。ViewModel是连接视图与数据的数据模型，负责监听Model和View的修改。Model和View不能直接通信，Model变化，ViewModel监听后通知View。或者View变后，ViewModel监听后通知Model，实现视图和模型相互解耦。2、优势：轻量级，数据双向绑定，指令（内置指令和自定义指令），插件好用（vue-router、Vuex）
2021-08-30 21:52:03
231
原创 图解HTTP读书笔记
笔记今天要挑战一天读完图解HTTP。第一章1.1 web1、web浏览器根据指定的url从web服务器端获取文件资源等信息，显示出界面2、通过发送请求获取服务器资源的web浏览器都叫客户端，提供响应的一端叫服务器3、web使用http，超文本传输协议，通信1.2 HTTP分层与传输1、HTTP是TCP/IP的一个子集，TCP/IP是与互联网相关联的一个协议总称2、TCP/IP分层：应用层，传输层，网络层，数据链路层3、应用层：用户提供应用服务时候的通信活动，包括FTP文件传输协议，DNS
2021-08-25 21:32:33
984
原创 2021-9-14 子组件消失+watch异步侦听问题
最近遇到一个问题，效果是想做成watch是异步侦听的，导致我赋值的数据在刷新之后才可能赋值成功（4），但刷新的过程导致了子组件的消失，（除了第一个，id相同子组件没消失），状态转成了另一个值（2），就造成了这个值（4）不存在过。如果我把这条指令异步处理，5秒后，刷新成功了，再emit就没有问题。然后呢，我的mentor觉得这个事情还是看刷新返回的是不是最新的已删除后的列表。所以他觉得后端删完后emit给我一个消息我再刷新比较好 ，所以呢，目前的做法是后端删完后通过websocket，emit一...
2021-10-08 12:24:52
160
原创 MJ系列之css汇总
权重选择器盒模型W3C 标准盒模型：属性width,height只包含内容content，不包含border和padding。IE 盒模型：属性width,height包含border和padding，指的是content+padding+border。在当前W3C标准中盒模型是可以通过box-sizing自由的进行切换的。content-box（标准盒模型）width = 内容的宽度height = 内容的高度border-box（IE盒模型）width = border +
2021-09-28 20:35:36
145
原创 MJ系列之浏览器汇总
性能优化1、缓存（缓解服务器压力，提升性能本地更快，）缓存流程缓存1、浏览器会根据 http response header 中的 Expires 和cahe-control 字段判断是否命中强缓存，如若命中，则直接从缓存中取资源，不会再去向服务器请求了。2、否则，浏览器会发出一个条件请求，浏览器会在请求头中包含 If-Modified-Since 或 If-None-Match 字段，If-Modified-Since 即浏览器当初得到的 Last-Modified；If-None-Matc
2021-09-28 20:34:58
552
原创 MJ系列之端汇总
大前端大前端就是所有前端的统称，比如Android、iOS、web、Watch等。大前端最大的特点在于一次开发，同时适用于所有平台，开发者不用为一个APP需要做Android和iOS两种模式而担心。其实大前端的主要核心就是跨平台技术，有了跨平台技术，各个平台的差异性就抹平了，开发者只需要一套技术栈就可以开发出适用于多个平台的客户端。全栈的性能全栈工程师主要负责应用开发，对前端后端技术都能熟练使用，更关注应用开发本身，以做新功能为主。但在大型应用中，除了功能，性能也变得重要，这时候就需要构架师了。
2021-09-28 20:33:40
2323
原创 MJ系列之Vue汇总
虚拟dom优点：提高开发效率、提升性能、跨平台、浏览器兼容Diff调用名为patch的函数，比较新旧Virtual DOM Tree找出差异并更新，对比出是哪个虚拟节点更改了，找出这个虚拟节点，并只更新这个虚拟节点所对应的真实节点打补丁。深度优先算法，只在同层级进行。流程当数据改变时，会触发setter，并且通过Dep.notify去通知所有订阅者Watcher，订阅者们就会调用patch方法，给真实DOM打补丁，更新相应的视图。patch：对比当前同层的虚拟节点是否为同一种类型的标签，
2021-09-28 20:33:08
218
原创 MJ系列之手写代码汇总
Promiseclass Promise{ constructor(executor) { this.state = 'pending'; this.value = undefined; this.reason = undefined; let resolve = value => { if (this.state === 'pending') { this.state = 'fulfilled'; this.value
2021-09-28 20:32:11
215
原创 MJ系列之算法汇总
快排冒泡const array = [1, 3, 2, 6, 4, 5, 9, 8, 7];const sort = (arr) => { let result = [...arr]; let temp; for(let i = 0; i < result.length - 1; i++){ for(let j = 0; j < result.length - 1 -i; j++){ if(result[j] > result[j + 1]){
2021-09-28 20:31:32
336
原创 MJ系列之前后端汇总
前后端通信方式长轮询、轮询、长连接有图Websocketwebsocket基于TCP的全双工通信协议，通过一次http请求建立连接。心跳前端定时发送心跳消息ping，后端收到ping类型的消息，立马返回pong消息，告知前端连接正常。如果一定时间没收到pong消息，就说明连接不正常，前端便会执行重连。let interval;/** * WebSocket 连接方式封装 * @returns {void} */function connectSocket() { let
2021-09-21 17:50:27
708
原创 MJ系列之JS汇总
JS汇总数据类型基本数据类型：字符串、数字、布尔、null、undefined、Symbol、bigInt引用数据类型：ObjectSymbol这种类型的对象永不相等，即便创建的时候传入相同的值也不相等。BigInt数据类型的目的是比Number数据类型支持的范围更大的整数值。引用数据类型存储在堆内存中，引用数据类型占据空间大、大小不固定基本数据类型变量保存在栈内存中，因为基本数据类型占用空间小、大小固定，通过值来访问类型转换类型转换隐式转换：if括号里变量会转换成布尔遇到宽松相等开启
2021-09-20 21:17:07
504
原创 MJ系列之ES6汇总
ES6 ECMA为JavaScript制定的第6个标准版本var、const、let区别let、const是es6，const用于声明常量，不能改变let相比var不会存在声明提前，不会有变量覆盖，有块级作用域…扩展运算符，深拷贝一个数组，数组拼接模板字符串反引号(``)标识，用${}界定表达式嵌入字符串中进行拼接对象和数组解构允许按照一定模式，从数组和对象中提取值，对变量进行赋值const { name, age, sex } = student;let color = ['red'
2021-09-15 17:40:30
122
原创 MJ系列之HTTP汇总
HTTP汇总get和post的区别传送：get把参数放入url里，post把参数放在body里，参数保留在浏览器历史大小：url长度有限制（浏览器和服务端自己限制的）缓存：get能，post不能，除非手动设置，get能被收藏为书签编码：get只支持url编码，post支持多种编码数据类型：get只支持ASCII，post不限制转发 和 重定向的区别转发是服务器行为，重定向是客户端行为。转发：客户浏览器发送HTTP请求，服务器接收，将转发跳转到的那个网页资源返回给客户，但是浏览器地址不变。在
2021-09-10 16:04:36
209
原创 MJ系列之Git汇总
Gitgit checkout 切换分支git checkout -b 切换并创建分支git push git pullgit push --set-upstream origin 和远方的仓库关联git fetch 是将远程主机的最新内容拉到本地，用户在检查了以后决定是否合并到工作本机分支中git add. 将变化添加到暂存区git status 查看本地分支状态git branch 查看所有分支git commit 操作的是本地库，git push操作的是远程库。是将本地修改过的文件提
2021-09-10 16:00:08
109
原创 2021-7-14 动画结束
77结束动画难倒我了，写了个监听空白处this.graph.on('blank:click', () => { if (this.visible) { this.visible = false } if (this.edittingnode) { this.edittingnode.unhighlight() this.edittingnode = null }
2021-08-29 20:57:41
75
原创 2021-8-18 重写的组件
99直接用name筛。<template> <div> <a-table class="ant-table-striped" :expandIcon="expandIcon" :columns="columns" :data-source="list" rowKey="id" v-custom-loading="LoadingData" :pagination="false
2021-08-28 20:56:38
114
原创 2021-08-17 小bug
97思路上的bug，一个是组件关闭时刷新，这个思路要常有，还有一个转换状态，父就筛的话，有的可以的子就选不了，所以用了禁用。getCheckboxProps: record => ({ props: { disabled: record.last_transform_status !== 0 } })...
2021-08-24 11:56:26
64
原创 2021-8-13 重写勾选
97因为之前的勾选分页了之后只能拿到最近页的选项，所以加了selectobj存选过的对象，然后方法返回就返回这个。<template> <div> <a-table class="ant-table-striped" :rowClassName=" (record, index) => record.isChild ? 'table-striped' : 'table-notstriped'
2021-08-20 19:31:17
74
原创 2021-8-12 添加的视频预览
96本来只是想解析一下上传的视频时长，然后发现这个也可以预览getVideoDuration (file) { const binaryData = [] let duration = null binaryData.push(file.getNative()) this.videoSrc = window.URL.createObjectURL( new Blob(binaryData, { type: 'video/mp4' })
2021-08-20 19:27:15
1555
原创 2021-8-10 上传组件
94之前没写过这个上传组件，具体逻辑还是之前说的。<template lang="html"> <div style="max-width: 500px;"> <div v-if="currentStatus === 'before upload'"> <a-button @click="doUpload" :disabled="disabled">{{btnText}}</a-button> <
2021-08-20 19:11:03
95
原创 2021-8-9 吐槽
好无聊，没得可写了，没事闲的。本来这一周也是各种删删改改，测试联调，追剧看布局。顺便，有的人真是事不到自己身上都无所谓，到自己身上就各种叽叽歪歪。不好实现尼玛。都是普通人，不想说啥了。...
2021-08-12 20:23:12
61
原创 2021-8-6 重写上传视频
93<template> <div> <a-modal v-model:visible="modalVisible" title="上传Graph测试视频" :destroyOnClose="true"> <div class="graph-modal-form-item"> <div class="graph-modal-form-item-label">待测Graph：</div>
2021-08-12 17:18:34
73
原创 2021-8-6 字符串解析
93遇到一个解析字符串的问题，就总结一下字符串解析的方法们吧。substring(start从0数, end不包括不必须),遇到负数直接转成0,以两个参数中较小一个作为起始位置，较大的参数作为结束位置substr(start从0数，length包括不必须)slice(start从0数，end不包括不必须),负数就是负数最后一个就是-1三者区别还有一些方法indexOf(), lastIndexOf(), charAt()返回指定位置的字符join(), concat()数组.相
2021-08-12 17:13:33
62
原创 2021-8-4 重写勾选非替换
91记录一下，之前是选过的就替换之前的，就会遇到分页后第二页选过的就没法选进去的问题。所以就换成，不删除，在选的过程中记录删除过的某几项，点添加的时候对照之前的表，有相同项就删除。<template> <div style="max-height:600px;overflow-y:auto"> <a-table class="ant-table-striped" :rowClassName=" (record, in
2021-08-09 17:26:10
56
原创 2021-8-2 视频播放
89<template> <a-modal v-model:visible="modalVisible" title="查看测试结果"> <div class="graph-modal-form-item"> <div class="graph-modal-form-item-label">Graph名称：</div> {{ record.name }} </div> <d
2021-08-05 11:04:44
650
原创 2021-7-30 重写上传
88记录一下重新写的上传视频和config.json<template> <div> <a-modal v-model:visible="modalVisible" title="上传Graph测试数据" :footer="null"> <div class="graph-modal-form-item"> <div class="graph-modal-form-item-label">待测Gra
2021-08-05 10:47:55
60
原创 2021-7-28 上传
86突然想到上传的逻辑<template> <a-upload class="graph-modal-form-item-uploader" :before-upload="() => (false)" @change="fileAdded" :showUploadList="false" :accept="accept"> <slot> <div class="upload-trigger"> <Upl
2021-08-01 22:17:06
85
原创 2021-7-27 接口逻辑
85老实讲，那个勾选的逻辑真的是写了很久，虽然看上去好像只有两天就把表格写完了，但是我好像研究这个表格研究了一个星期…一会儿这个出问题，一会儿那个出问题，再加上联调接口，和写按钮的逻辑，我真的是有点疯了。而且又写了一个上传视频的组件，但是比较简单就不写了。既然没得写就写一下mentor出差前说的联调接口的逻辑吧。一个是创建的第一步，暴露方法给第二步，一个是第二步上传模型文件，先把上传的模型文件获取一个签名，然后发第二次上传请求。上传节点文件完了，就去第二步发送save请求，后端创建或者保存versi
2021-08-01 22:14:01
93
原创 2021-7-26 表格勾选
84先贴个全的<template> <div style="max-height:600px;overflow-y:auto"> <a-table class="ant-table-striped" :rowClassName=" (record, index) => (record.isChild ? 'table-striped' : null) " :columns="columns"
2021-08-01 19:07:47
77
原创 2021-7-23 转战表格逻辑
83其实忘了是什么时候，但是确实是有一段时间在看antv的表格，今天就只写细节逻辑，换一天写勾选的逻辑。<template> <div style="max-height:600px;overflow-y:auto"> <a-table class="ant-table-striped" :rowClassName=" (record, index) => (record.isChild ? 'table-strip
2021-08-01 18:40:14
56
原创 2021-7-22 抽屉
82看到一个强行用远程仓库覆盖本地仓库的方法$ git fetch --all$ git reset --hard origin/master $ git pull然后写一下看到的antv的抽屉，记录一下单击节点编辑的功能<div class="title"> <a-drawer title="节点设置" placement="right" :closable="false" :v
2021-08-01 17:26:26
72
原创 2021-7-21 重新布局
81 重新布局写一下新的布局，还有让滚动条在左边显示，文字靠左不冲突（最下面那个）。<template> <div class="content"> <div class="button-group"> <a-button type="primary">修改计算节点</a-button> <a-button type="primary" @click="redraw" style="margin-lef
2021-07-26 00:27:42
94
原创 2021-7-20 连接桩+历史记录
80写一下连接桩的显示和消失，跟官网的不一样（因为当时没看见嘻嘻）ports: { groups: { group1: { position: 'bottom' } }, items: [ { group: 'group1', attrs: { circle:
2021-07-26 00:25:36
112
原创 2021-7-19 节点大小自适应
79上周只上了三天班，哎，为了逃团建。写一下节点大小自适应，编辑后就根据文字长度高度改变节点大小，还有连接桩位置，太难了这个。createDiv ({ cell }) { cell.attr('body', 'none') const background = cell.attrs.rect.fill const stretchedCells = document.getElementsByClassName('x6-cell x6-node') con
2021-07-26 00:18:31
278
原创 2021-7-15 自定义节点边
78写一下自定义节点和自定义边const { Rect, Edge } = Shape...Edge.config({ attrs: { line: { stroke: '#7c68fc' // 指定 path 元素的填充色 } } })Graph.registerNode('flow-chart-image-rect1', { inherit: 'image-embedded',
2021-07-26 00:01:57
87
原创 2021-7-13 动画开始
76有一种水博客的感觉。。。就记录一下写的动画吧，用环路检测，安装了antv的算法包import { detectDirectedCycle } from '@antv/algorithm'// import { detectDirectedCycle, detectAllCycles } from '@antv/algorithm'vertifyCircle () { const circle = detectDirectedCycle(this.model) cons
2021-07-25 23:54:35
83
原创 2021-7-9 chrome和vscode设置
75写一下vscode插件安装还有chrome的设置，直接在设置里找语言，搜索中文，重新设置就行。
2021-07-25 23:31:43
90
原创 2021-7-8 新装电脑教程
74因为电脑换新硬盘了，就写一下装的东西1、QQ，微信2、Mockoon，Postman3、视频播放器PotPlayer4、SourceTree、Git、VSCode、Node.js5、Office6、解压工具7-zip7、百度网盘8、搜狗拼音输入法下次决定把所有软件放在一个叫软件的D盘文件夹里，安装包全安装在D盘一个叫SetUp的文件夹里。node的安装教程就是装到D盘，然后最最重要的是把C:\Users\hp\.npmrc删掉，要不。。。需要管理员权限才能用npm install的
2021-07-25 23:27:58
76
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人