- 博客(202)
- 收藏
- 关注
RSS订阅原创 electron上传图片
使用elementui组件上传图片渲染进程<template> <div class="hello"> <el-upload class="avatar-uploader upload" action="" :show-file-list="false" :before-upload="beforeAvatarUpload"> <img v-if="imageUrl" :src="imageUrl" class="avatar
2020-10-19 17:32:41
1544
原创 vue3实现虚拟列表
vue3.0发布了，刚好学习一下，仿照网上案例写了一个虚拟列表<template> <div class='virtual' @scroll="scroll" :style="{height:400+'px'}"> {{itemHeight}} <div class="list" :style="{height:dataLengh*itemHeight+'px'}"> <ul :style="{'
2020-09-29 23:58:34
3055
原创 npm安装node-sass失败
设置镜像地址即可npmconfigsetsass_binary_sitehttps://npm.taobao.org/mirrors/node-sass/
2020-08-23 00:57:48
322
原创 npm包详解
npm是node.js的包管理工具，这个包管理工具为我们提供了安装、删除命令等来管理模块npm命令有：npm init：初始化npm包，生成package.json文件npm -v：查看npm的版本号npmconfiggetregistry：查看npm源切换镜像源npmconfigset 镜像地址查看各个镜像地址可以先下载nrm模块npmi nrm然后nrmls即可查看各个镜像对应的urlnpmadduser注册npmlogin 登录npm...
2020-08-23 00:55:12
2919
原创 swagger生成api文档
//index.jsvar path=require('path')var express=require('express')var app=new express()var swaggerJsDoc=require('swagger-jsdoc')var swaggerUi=require('swagger-ui-express')var options={definition:{openapi:'3.0.0', info:{title:'项目',version:'1.
2020-08-15 22:39:51
1069
原创 docker学习笔记（2）
docker容器间互连可以使用link命令，例如下面这个例子//先启动一个tomcat容器docker run -it --name="tomcat01" tomcat /bin/bash//用第二个容器连接第一个容器docker run -it --name="tomcat02" --link tomcat01 tomcat//查看是否连接成功docker exec -it tomcat02 ping tomcat01连接成功可以看到终端打印出的信息，原理就是在tomcat02
2020-08-13 20:22:51
218
原创 docker学习笔记（1）
docker version显示版本信息docker info显示信息docker images显示所有镜像dockerps显示正在运行的容器 -a显示当前运行以及原先运行过的容器dockerpull下载镜像docker run -it镜像名 /bin/bash运行容器-i保证容器的STDIN是开启的，-t生成一个tty伪终端，--name为容器定义名字--rm容器退出后自动删除容器 -p服务器端口：容器端口设置端口转发，外网可以访问容器内端口docker st...
2020-08-07 10:21:06
211
原创 shell学习笔记（2）
定义变量,可以直接定义，使用时加上$#!/bin/bashname="xx"echo "$name"上面是局部变量全局变量$0 当前程序名称 $n 当前程序的第n个参数 $*当前程序的所有参数 $?当前程序执行后的状态，一般返回0表示成功$UID 当前用户的id $PWD当前所在目录#!/bin/bashname="xx"echo "局部变量$name"echo "全局变量$1"echo "当前程序名$0"echo "当前程序所有参数$*"echo "当前程序执行状
2020-08-05 21:43:35
230
原创 shell学习笔记（1）
shell是c语音编写的脚本语言，用户输入命令交给shell处理，shell将操作交给内核，内核把处理结果交给用户。编写第一个shell脚本在home目录下新建一个test.sh文件#!bin/bashecho "hello"保存后可以用source test.sh即可执行脚本输出hello，或者chmod +x test.sh，对文件添加执行的权限，然后./test.sh也可输出结果，或者直接使用bash解释器，bash test.sh即可输出结果...
2020-08-01 00:23:12
220
原创 jest学习笔记
jest测试异步请求function fetchData(fn){ axios.get('/data').then(data=>{fn(data)}) }test('异步请求',(done)=>{ fetchData(data=>{ expect(data).toEqual({success:'xx'}) done() }) })//如果返回是promise对象，可以用catch或者thenfunction fn(){
2020-07-14 20:33:18
351
原创 自定义electron窗口
首先要在主进程中将窗口关闭，即在BrowserWindow中设置frame为false，然后在App.vue中添加对应的窗口图标<template> <div id="app"> <div class="titleBar"> <div class="title"> <div class="logo"> <img src="@/assets/logo.png">
2020-07-13 09:25:33
2072
原创 webRTC学习笔记（3）
h5提供了录制电脑屏幕的api，navigator.mediaDevices.getDisplayMedia,可以将屏幕录制下来，数据传给MediaRecorder对象转换成二进制数据存放在blob中，最后再通过blob生成url赋给video标签的src属性即可播放录制的屏幕<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="view
2020-07-09 12:15:36
313
原创 three.js+vue小案例
首先要下载mtl-obj-loader，然后再下载一个three-controls即可<template> <div class="hello" ref="box"> </div></template><script>import * as THREE from 'three/src/Three'import {MTLLoader, OBJLoader} from 'mtl-obj-loader'import {Orb
2020-07-05 09:05:45
1468
原创 webRTC学习笔记（2）
MediaRecorder构造函数会创建一个对指定的 MediaStream进行录制的 MediaRecorder对象,接收两个参数，一个是流，一个是可选对象，对象的mineType为新构建的MediaRecorder指定录制容器的MIME类型. 在应用中通过调用MediaRecorder.isTypeSupported来检查浏览器是否支持此种mimeType.，audioBitsPerSecond: 指定音频的比特率.,videoBitsPerSecond: 指定视频的比特率.,bitsPe...
2020-07-01 00:35:57
377
原创 ts中type和interface的区别
首先，interface只能表示function，object和class类型，type除了这些类型还可以表示其他类型，例如interface A{name:string; add:()=>void;}interface B{():void}type C=()=>number;type D=string;type E={name:string,age:number}interface可以合并同名接口，type不可以interface A{nam
2020-06-29 09:50:02
19223
原创 addEventListerer的第三个参数是什么
第三个参数可以是布尔值，也可以是对象，默认是布尔值false，即事件冒泡，还可以是true，即事件捕获，对象有三个属性，一个是capture，是否使用事件冒泡，默认是false，once是是否只触发一次，默认是false，passive是决定是否调用preventDefault事件，默认是false，如果设置为true则永远不会调用，即使函数里面写了。...
2020-06-28 23:16:07
762
原创 IndexedDB的一些操作
indexedDB是一个事务型数据库系统，同时也是基于javascript的面向对象的数据库，它可以存储大量结构化数据首先是打开数据库var request=window.indexedDB.open(this.name)//打开数据库request.onsuccess=function(event){ this.db=request.result }//获取数据库实例第一次创建数据库时会触发他的upgradeneeded方法request.onupgradeneeded =
2020-06-27 14:35:47
607
原创 一个tcp可以发送几个http请求
http1.0默认只能发送一个http请求，可以添加Connection:Keep-Alive字段保持持久化链接，但必须保证实体主体有正确的Content-Length，有多部件媒体类型，或者用分块传输的方式进行了编码。http1.1支持持久化连接，一个tcp可以发送多个http请求，但是不能并发，所以也会有阻塞问题http2.0支持持久化连接，一个tcp可以并行发送多个http请求，也就是多路复用...
2020-06-24 00:17:18
1116
原创 git如何解决冲突
git上传文件到远程库有时会发生冲突，解决方式是：先将本地修改的代码缓存起来，gitstash，然后是gitpull提交，然后还原暂存的内容gitstashpop，如果还不行，git status查看哪些文件冲突了，就vim打开冲突的文件，把文件里面的冲突标识符删掉，然后再gitadd，git commit即可...
2020-06-22 20:16:57
668
原创 手写promise
//promise三种状态（运行中，执行成功，执行失败）const PENDING='pending'const RESOLVE='fulfilled'const REJECTED='rejected'function MyPromise(executor){ this.data=undefined this.Fullcallback=[]//存放成功的回调 this.Failedcallback=[]//存放失败的回调 this.status=PENDIN.
2020-06-22 19:45:04
265
原创 websocket学习笔记
websocket是h5新出的支持全双工的，持久化的协议，它也支持服务器端推送。通常在客户端是通过new创建一个websocket对象var socket=new WebSocket(url,[protocols])不是所有的浏览器都支持websocket协议，它接收两个参数，第一个是通信的url，第二个是协议数组，协议可以是注册协议（已根据RFC6455，向注册协议的正式管理实体IANA正式注册的标准协议），开放协议（广泛使用的标准化协议，如XMPP ），自定义协议。ws协议有四种状态，通
2020-06-20 17:09:53
740
原创 http和https区别
http是超文本传输协议，端口是80，是明文传输数据，不安全，有可能传输过程中数据被人截获，篡改，无法验证信息是否正确，也无法验证发送方和接收方的身份https是超文本传输安全协议，端口443，它使用了tls/ssl协议加密，保证传输安全。先说一下对称加密，客户端使用对称密钥对数据进行加密，然后把对称密钥和密文一起发送给服务器，服务器再用对称密钥对密文进行解密。非对称加密使用公钥加密，私钥解密，其中一方使用对方的公钥（公开的）进行数据加密，对方使用自己的私钥进行解密https就是两种加密手段
2020-06-19 23:50:54
321
原创 graphql查询
首先下载express，express-graphql和graphqlvar express = require('express');var graphqlHTTP = require('express-graphql');var { buildSchema } = require('graphql');var schema = buildSchema(` type Account{ name:String } type Query {
2020-06-17 23:18:01
457
原创 js的caller和callee
js的callee是arguments的一个属性，指向这个函数本身function fs(){ console.log(arguments.callee) } fs()打印值/*ƒ fs(){ console.log(arguments.callee) }*/caller是指向调用此函数的外部函数function fs(){ fn() } function fn(){
2020-06-17 13:05:39
367
原创 a===1&&a===2&&a===3什么时候为true
这里使用Object.defineProperty可以做到，每次获取值时加1var val=1;Object.defineProperty(window,'a',{get(){ return val++}})
2020-06-17 00:50:27
404
原创 寻找无重复最长子串
给定一个字符串，请你找出其中不含有重复字符的最长子串的长度。输入: "abcabcbb"输出: 3 解释: 因为无重复字符的最长子串是 "abc"，所以其长度为 3。首先遍历这个字符串，将它插入到一个数组中，当遇到相同字符时，就移除数组中的元素，最后返回数组长度的最大值即可var lengthOfLongestSubstring = function(s) { var arr=[]; var max=0; for(var i=0;i<s.length;i..
2020-06-14 10:33:47
305
原创 tcp三握四挥
第一次握手：客户端发送syn包给服务器，SYN=1，序列号seq=x，客户端进入syn-sent状态第二次握手：服务器收到syn包以后返回报文，ack=x+1，ACK=1，SYN=1，同时生成序列号seq=y，进入syn-rcvd状态第三次握手：客户端收到服务器的报文以后，返回给服务器ack=y+1，ACK=1，自己的序列号seq=x+1，进入established状态，服务器收到也进入established状态为什么要三次握手，两次不行吗？因为如果第一次握手在网络中滞留时间过长，那客户端会
2020-06-13 23:49:30
370
原创 前端性能指标
fp是指网页首次渲染，fcp是指网页首次有内容的渲染。两者可以通过window.performance.getEntriesByType("paint")获取详细信息，一般情况两者时间相等fmp页面主要内容绘制到屏幕的时间fsp页面从开始加载到首屏内容全部绘制完成的时间，用户可以看到首屏的全部内容fci页面第一次可以响应用户输入的时间fps每秒可以重新绘制的帧数tti用户第一次可以持续与页面进行交互的时间...
2020-06-13 00:22:54
893
原创 mongodb学习笔记（2）
mongodb数据类型；null：用于表示空值或不存在的字段{"x":null}Boolean：布尔值，有true和false数值：有double，int32等，整数可以通过NumberInt()和NumberLong转换，默认是double类型String:字符串类型日期：日期被存储为自新纪元以来的毫秒数，不存储时区正则表达式：查询时使用正则表达式作为限定条件，语法和js类似{"x":/foobar/i}数组{"x":["a","b"]}内嵌文档（文档可以嵌套文档）
2020-06-12 10:42:41
268
原创 vue骨架屏
vue骨架屏是为了在首屏加载时提高用户体验制作的，有很多种方法，最近学了一种通过自定义webpack插件来生成骨架屏的方法首先在项目根目录下新建一个myPlugin.jsfunction MyPlugin(options){ this.options=options;}//webpack插件都内置一个apply方法MyPlugin.prototype.apply=function(complier){ complier.plugin('compilation',(comp
2020-06-12 00:21:39
295
原创 ts学习笔记（5）
属性装饰器function decorate(param:any){ param.prototype.test='zz'}@decorateclass Test{ public name:string; constructor(name:string){ this.name=name; }}var x=new Test('zz')console.log(x.test)//打印xx还有一种是写在属性上面function decor
2020-06-11 22:27:48
283
原创 node使用formidable模块上传文件
服务端var http=require('http')var fs=require('fs')const formidable=require('formidable')http.createServer((req,res)=>{ if(req.url=='/'){ fs.readFile('./index.html',(err,data)=>{ if(err)return; res.end(data)
2020-06-09 00:18:14
296
原创 node.js的async模块
node.js中有一个异步模块async，用于流程控制，下面就来看下async.series([function(callback){console.log(1);setTimeout(()=>{ callback(null,'1')},1000)},function(callback){console.log(2);setTimeout(()=>{callback(null,'2')},1000)}],(err,result)=>{ console.log(re
2020-06-08 23:11:32
385
原创 移动端事件总结
1.触摸事件touchstart:当手指触摸屏幕时触发touchmove:当手指在屏幕上滑动触发touchend:当手指离开屏幕时触发touchcancel:当系统停止追踪触摸时触发事件触发时会传递给函数一个Event对象，事件相关信息都会存储在event，event包含的信息主要有：touches:表示当前跟踪的触摸操作touch对象的集合targetTouches:当前事件目标上touch对象的集合changeTouches：表示至上次触摸发生改变的touch对象的集合
2020-06-08 12:26:13
318
1
原创 vue使用require.context配置路由
使用require.context自动配置路由首先在components文件夹下新建一个pages文件夹，然后在pages下面新建两个vue文件mode.index.vue和mode.show.vue，在components文件夹下新建一个index.route.js文件//index.route.jsvar r=require.context('./pages',true,/.vue/)var arr=[]r.keys().forEach(element => { var k
2020-06-07 23:39:12
1040
原创 ts学习笔记（4）
类型断言interface A{ teacher():void}interface B{ study():void}function fs():A|B{ return {}as A;}var obj=fs();obj.teacher()//报错(<A>obj).teacher()//正确类型保护function isTeacher(demo:A|B):demo is A{ return (<A>demo).teacher
2020-06-07 10:33:08
359
原创 实现js小数相加
js小数直接相加会有精度丢失的问题，可以使用toFixed函数解决，它接收一个数字，默认是0，会将number四舍五入为指定小数位数的数字function sum(){ var s=0; for(var i=0;i<arguments.length;i++){ s+=parseFloat(arguments[i]) } s=s.toFixed(3)*1000/1000 return s;}...
2020-06-06 22:49:59
6647
原创 mongodb学习笔记（1）
首先是启动mongodb，先新建一个db文件夹，然后cmd开启命令行窗口mongod --dbpath=E:\db然后再打开一个cmd窗口，输入mongod就可以进行操作mongodb可以进行简单的数学运算，还可以定义js函数，执行会输出他的返回值，例如想要查看当前指向哪个数据库>db改变当前指向的数据库>use admin创建对象>obj={name:"xx",age:20}创建文档(如果文档中没有数据则无法查看)>db.user插入
2020-06-03 12:38:57
276
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人