codeAX-CSDN博客

原创通过js实现一个异步并发调度器

笔者字节一面的时候遇到了下面这个面试题：//支持并发的调度器，最多允许2两任务进行处理const scheduler = new Scheduler(2)scheduler.addTask(1, '1’); // 1s后输出’1'scheduler.addTask(2, '2’); // 2s后输出’2'scheduler.addTask(1, '3’); // 2s后输出’3'scheduler.addTask(1, '4’); // 3s后输出’4'scheduler.star

2021-01-03 19:26:03 1256

原创【普及向】给学妹讲讲什么是web安全

一、从“Web安全”关键词讲起web安全，从语法上判断，这是一个合成词。web——万维网，是一个透过互联网访问的，由许多互相链接的超文本组成的系统，也是互联网的基石。安全——可以控制特定已被识别的危害，使风险在一定可接受的水准以下，因此也可以减少一些造成健康或经济损失的可能性。二、聊聊浏览器及其安全攻防策略2.1 同源协议同源策略是由Netspace提出来的一种安全策略。URL格式：同源的源由一个URL的协议(protocol)、主机(host)、端口(port)定义，如果这三者一致，那么

2020-12-06 22:20:48 1429

原创【练习小demo】使用React+TS实现一个拖动换位置效果（同时应用节流）

本练习demo旨在练习ts的使用，同时熟悉drag相关的事件1.思路分析drag拖拽事件，通常有三个非常重要的过程:onMouseDown(鼠标按下) onMouseMove（鼠标拖动） onMouseUp（鼠标松开），通常我们在使用drag这一事件的过程中，大概就是在这三个事件中进行相应的处理我们最终要实现的demo效果，就是在鼠标按下后能够带动方块随鼠标位置移动，松开后固定在最后的位置。如图：移动后:而这，只需要控制相关的定位:left和top就能实现这个功能（注意，left和top使用

2020-11-15 11:20:47 1125 1

原创【js手写】防抖和节流函数

防抖和节流1.防抖1.1 防抖的概念防抖：当某个事件触发的频率过高时，为了避免不必要的性能开销，我们规定这个事件触发后，需要等待一段时间再执行其绑定的逻辑代码，如果在这一段时间内，该事件没有再次触发，就执行这个事件对应的逻辑，否则就重新进行计时等待，确保该事件不被过于频繁的触发。比如我们为鼠标的移动绑定一个事件，显然这个事件会被过于频繁的触发，势必会带来很大的开销，甚至影响到UI的渲染，导致页面卡顿。1.2 实现思路构建一个debouce函数，这个函数中保存一个timeout变量用于记录设置的

2020-11-14 10:27:05 1315

原创【重学js】有关于this指针的四种指向和三种改变方法

this的四种指向和三种改变方法一、this指针：下面是MDN上关于this指针的表述:当前执行上下文（global、function 或 eval）的一个属性，在非严格模式下，总是指向一个对象，在严格模式下可以是任意值。—MDN从字面上的意思，this也就是当前对象主体的一个代指。二、this指针在JavaScript中的四种指向：直接调用的情况下this指向window，即直接调用一个可以直接调用的函数，this指向window通过new运算符，new这个函数，则this指向当前ne

2020-10-04 19:47:33 619

原创 [Vue3学习笔记] (二) setup ref reactive与生命周期

[Vue3学习笔记] (二) setup ref reactive与生命周期一、template不再需要根元素显然在vue3中template不再一定需要一个父元素才能编译通过了。二、setup函数初识2.1、关于setup setup函数其实是一个生命周期钩子，它对应的其实就是Vue2中的beforeCreate和create在vue3中我们通过这个函数来定义vue2中的data,methods,watch,computed属性（数据定义与处理相关）2.2、setup使用 set

2020-10-01 12:06:50 5640

原创【Vue3学习笔记】(一) 创建Vue项目

【Vue3学习笔记】(一) 创建Vue项目一、Vue3官网地址：https://v3.vuejs.org二、起步2.1 使用vue3通过CDN形式使用Vue3<script src="https://unpk.com/vue@next"></script>通过@vue/cli使用vue项目@vue/cli已经支持在创建项目的时候使用vue3了在创建面板选择即可# 全局安装@vue/cli,如果出错建议试试cnpmnpm install -g @vue/cli

2020-10-01 12:06:17 212

原创 electron-vue项目启动&&解决 process is not defined以及带来的Cannot find module ‘axios‘等问题

electron-vue项目启动通过vue-cli构建指令：vue init simulatedgreg/electron-vue my-project创建后进行包安装yarn或者npm installElectron-vue ReferenceError: process is not defined修改你项目文件下.electron-vue里面的webpack.renderer.config.js和webpack.web.config.js./.electron-vue

2020-09-29 20:00:45 871

原创【踩坑】云服务器通过tinyProxy自建代理

爬虫ip代理的时候，有些小伙伴可能会想要使用自己的服务器作为代理地址本文通过tinyProxy来搭建一个Linux/Centos代理服务器首先通过yum下载安装tinyProxyyum install -y tinyproxy安装后，tinyproxy默认安装在/etc目录下，打开/etc/tinyproxy/ 目录找到tinyproxy.conf文件进行编辑vi /etc/tinyproxy/tinyproxy初始化情况下，我们只需要对下面三项进行自定义即可修改默认端口Port 8

2020-08-25 14:39:01 1642

原创【转存】使用tsc -w监视编译和使用ts-node直接在node下运行typescript

一、使用tsc -w进行随时热更新watch通过tsc -w 命令，使得tsc监视文件变化从而实现实时编译如图但是要记得写tsconfig.jsontsconfig:{ "compilerOptions": { "incremental": true, "tsBuildInfoFile": "build/buildFile", "target": "ES2020", "outDir": "dist", "

2020-08-21 23:03:05 3185

原创【备查】tsconfig.json compilerOptions的配置项及其意义

tsconfig.json 配置文件会有如下结构：{ "compilerOptions": { }, "files": [ "app.ts", "foo.ts", ]}compilerOptions用来配置编译选项，files是数组，用来指定待编译文件。编译选项配置compilerOptions:配置编译选项"incremental": true, // TS编译器在第一次编译之后会生成一个存储编译信息的文件，第二次编译会在第一次的基础上进行增量编译，可以

2020-08-21 16:46:19 20168 2

原创 Koa2基础入门教程

一、koa安装与hello world示例：koa需要node v7.6.0以上（因为需要ES6）npm install koa --save习惯性加上save,不加也可以。koa的hello world示例const Koa = require('koa');const app = new Koa();app.use(async(ctx)=>{ ctx.body = 'hello koa!';})app.listen(3000);这个示例很简单，从node_module

2020-08-09 21:05:42 882

原创【文件上传】Flask与axios结合,通过ajax上传文件

文件上传flask按照后端官网示例：# 导入flask基本内容from flask import Flask, request, jsonifyimport flask_cors# 用于设置文件安全名from werkzeug.utils import secure_filenameapp = Flask(__name__)# 允许跨域flask_cors.CORS(app)@app.route("/uploadfile", methods=['post'])def upload_fil

2020-08-06 11:38:05 845

原创【备忘】展示图片等文件，window.URL.createObjectURL方法使用

我们需要实现一个图片上传后预览的效果：html部分：这部分很简单，不多赘述<input type="file" multiple="multiple" accept="image/jpg,image/jpeg,image/png" /> <div> <img src="" alt=""> </div>js部分：我们通过onchange触发文件选择后的方法，然后通过浏览器提供给我们的window.URL.create

2020-08-06 11:37:27 1412

原创【备忘】原生js进行简单的ajax手动封装

function Ajax(payload) { /** * payload:{ * url:'/url', * method:'get', * async: true * } * */ // 创建xhr对象 let xhr = new XMLHttpRequest();

2020-08-06 11:37:02 109

原创【计算机网络学习笔记】第三章数据链路层

数据链路层数据链路层研究的是在同一个局域网中，分组怎样从一个主机传送到另一个主机（不经过路由器）数据链路不等于链路：链路是指从一个结点到相邻结点的一段物理线路（有线或无线），而中间没有任何其他的交换结点。而数据链路则是链路加上必要的通信协议。1. 点对点信道和广播信道点对点信道这种信道采用一对一的点对点通信方式帧数据链路层的协议数据单元数据链路层将网络层下发的数据构成帧发送到链路上，以及把接收到的帧中的数据取出来上交给网络层。通信时的主要步骤：结点A的数据链路层将网络层下发

2020-08-06 11:36:21 511

原创【计算机网络学习笔记】第二章物理层

1. 物理层的基本概念1.1 【重点】物理层主要任务物理层的主要任务为：确定与传输媒体的接口有关的机械、电气、功能、过程特性。（1）机械特性指明接口所用的接线器的形状和尺寸、引线数目和排列、固定和锁定装置等等。（2）电气特性指明在接口电缆的各条线上出现的电压的范围。（3）功能特性指明某条线上出现的某一电平的电压表示何意。（4）规程特性指明对于不同功能的各种可能事件的出现顺序。由于数据在计算机中一般为并行传输方式（即使用多位(bit)表述一个数据，比如8位(bit)表述一个

2020-07-28 23:58:53 321

原创【计算机网络学习笔记】第一章概述

1. 计算机网络在信息时代的作用：传统意义上的“网络”指的是“三网”：电信网络，有线电视网络，计算机网络其中发展最快且起到核心作用的是计算机网络但是随着技术的发展，电信网络和有线电视网络逐渐融入了现代计算机网络,这一趋势叫做"网络融合"计算机网络向用户提供的最重要的功能有两个：连通性连通性指的是通过计算机网络可以使得上网用户可以进行信息的交换，就仿佛这些用户的计算机互相连通一样。共享共享指的是资源共享，由于网络的存在，计算机彼此的资源仿佛就在用户身边。计算机网络定义

2020-07-27 23:23:03 220

原创【React】基于react-transition-group实现转场切换路由跳转动画

一、效果演示react-transition-group转场动画：（如果无法播放可点击另存为下载查看）二、安装这个演示界面是通过路由实现的，谈到这个我们就不得不提到成熟的react动画库：react-transition-group首先我们通过npm进行安装（这里假定你已经学会了使用react-router-dom,react-router,react-router-config)如果你还没有学习，那我建议你稍微进行学习后再来了解路由动画。安装命令:npm install react-tra

2020-07-26 19:46:57 1741

原创 PyMQL简单使用【入门CRUD】

PyMQL简单使用【入门CRUD】pymysql是python3中的mysqldb(python2)在使用这个库之前，首先你得确保自己会使用基本的SQL语句，对MySQL数据库具有一定的了解（基本即可）。一、安装通过pip进行安装：pip install pymysql二、通过数据库可视化程序/终端建数据库和表 pymysql在使用之前，需要通过数据库可视化程序/终端建立数据库三、使用pymysql操作数据库连接数据库：我们通过一下必填参数连接数据库：# 连接Mysqlcon

2020-07-25 21:04:54 802

原创【React整理系列】事件处理

一、React事件命名不同于Vue，React的事件处理机制更加接近于原生事件的写法、对于事件类型的指定，基本上是采用原生的写法(但是具体事件回调函数的指定有所不同)：<button onClick={activateLasers}> Activate Lasers</button>即使用on+大写事件类型的形式二、React事件参数：event对象React中会默认传入event对象，这个event对象遵循W3C规范（也就是原生类似）三、React阻止html元

2020-07-02 22:43:15 164

原创【React整理系列】Props和State

【React整理系列】Props和Stateprops作为对象，将 JSX 所接收的属性（attributes）以及子组件（children）转换为单个对象传递给组件。组件无论是使用函数声明还是通过 class 声明，都决不能修改自身的 props。文档声明：React 非常灵活，但它也有一个严格的规则：所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。如果需要改变的变量，则使用state: state 是私有的，并且完全受控于当前组

2020-07-02 16:20:19 173

原创【避坑】PowerShell：因为在此系统上禁止运行脚本附原因和解决办法

现象：用powershell作为命令行工具，尝试使用thinkjs，安装完think-cli后检测运行版本(thinkjs -V)时，遇到了以后问题：快速解决：通过管理员模式打开powershell,然后输入：set-executionpolicy RemoteSigned然后输入A全是，等待运行即可。（不需要深入了解到此为止，不用看下文）原因：当前powershell执行策略无法运行脚本powershell有四种执行策略：Restricted 禁止运行任何脚本和配置文件（默认

2020-07-01 17:23:16 6443

原创【React整理系列】JSX语法学习

【React整理系列】JSX语法学习这是对官方文档的所涉及概念的补充，更多具体概念描述还请移步官方文档-JSX简介JSX语法学习：const element = <h1>Hello, world!</h1>;JSX:既不是字符串也不是 HTML,是一个 JavaScript 的语法扩展。具有 JavaScript 的全部功能。这里需要注意的是：JSX自身也是一个表达式！！！a. 在JSX中中使用变量：如果需要在JSX中使用变量，则需要使用{}单个大括号对其表达式进行相

2020-07-01 09:54:13 271

原创（自学/初学者普及）浅谈前后端与前后端分离（别再说你不懂什么是前后端分离）

程序员都在说前后端分离，开发岗位也被很明确的分成了前后端工程师，很多大学的刚进入计算机专业的小伙伴和打算进入计算机行业的朋友，通常会有这些问题：究竟什么是前后端呢？前后端分离又是什么呢？为什么会有所谓的前后端分离这一概念呢？如何实现前后端分离呢？前后端各自该做些什么？1.1 前端的基本概念：要理解什么是前后端，首先让我们从最简单的字面意思来理解，前端指的...

2020-04-04 01:12:43 3029 2

原创快速排序算法详解

快速排序算法1.1 算法分析快速排序是一种不稳定的，时间复杂度为O(nlogn)的排序算法.基本思想：1.选定基准值key。2.通过双指针不断地移动，将比key大的值移动到key的右边，比key小的值移动到key的左边，直到双指针相遇（即代表该过程已完成）3.上述过程完成后，对于以原key区分形成的两个子数组，分别重复1和2操作。4.直到所有的子过程完成后，我们就得到了最后的有序数组...

2020-03-18 21:26:47 1283

原创 vue-router的使用方式

vue-router的使用过程：一.创建vue-router组件一般使用vue-router的组件都是视图级别的，也就是由多个组件组成，为了区分router组件与常规的小组件components，我们创建与components同等级的新文件夹：views，用于存放相关的router组件。二.配置vue-router相关路由信息 1.创建与views，main.j...

2020-03-11 23:06:11 156

原创关于前后端路由与渲染的那些事

路由：这是一个网络工程术语，指分组从源到目的地时，决定端到端路径的网络范围的进程。通俗地将，就是数据从服务器分发到客户端（可反向）的过程，也可粗暴的理解为url的不同后端路由：根据url（统一资源调配符）的不同，后端（如jsp Java server page）通过对url的解析，从数据库读取数据然后动态地生成html界面，并返回该界面给前端展示的过程。由于界面是后端生成的，所以叫做后端路由。...

2020-03-11 23:05:23 286

原创轻松手上ES6中的箭头函数！（告别复杂的讲解，快速掌握ES6最核心的部分！）

ES6中的箭头函数（之前确实是通过阮一峰老师的书籍学过，但是学的很模糊哦，呜呜呜）基本语法：(参数)=>{函数内容}注意:箭头必须和参数在同一行（显然这也是必要的）如果只有一个参数，则括号()可以省略，如果函数只有一个语句，则{}可以省略，另外后者的写法将会默认return其属性但不需要手写return（但是这个写法，在返回对象为{}对象字面量（注意此处对象的含义，咳咳）时必须加上re...

2020-03-11 23:04:46 259

原创一招教你部署自己的静态h5页面到WordPress服务器（阿里云WordPress应用镜像）（纯新手向）

许多刚开始学习前端的小伙伴，在开通了阿里云的WordPress之后，还想放置一些自己的界面，并通过子目录的方式访问,比如网站页面为abc.com，子页面在abc.com/children 具体该怎么操作呢？许多文章说只需要将静态资源放到对应的位置就可以，但是笔者没有看到有文章具体指出其对应位置，在这里针对WordPress指出相关的路径与操作首先，下载xhell以及xftp等软件（学生版免费...

2020-02-20 22:58:03 2186 3

原创（3k字）入门Vue,看这一篇！

还在死看官方文档学Vue？看这一篇就完事了基本内容：{{ 属性变量名 }}花括号大胡子写法var app = new Vue({ el: '#app',//选择器 data: { message: 'Hello Vue!' }})常用指令：1. v-bindv-bind:属性名称=“data数据” 因为相当常用，所以可以省略v-bind:属性名称=...

2020-02-20 22:30:19 167

原创 JavaScript念念碎（一）整体概述以及数据类型

JavaScript念念碎（一）整体概述以及数据类型总体概述：JavaScript由三部分构成，分别为ECMAScript,DOM,BOM。其中ECMAScript是指JavaScript的语法内容，也就是一门语言的核心语言功能，ECMA是European Computer Manufactuters Association的缩写。个人理解为语言本身，也就是语言的骨架。DOM，官方说...

2020-01-19 22:09:21 168

原创 CSS3特性

CSS3特性transform示例：div{transform:rotate(30deg);}用于元素的偏转（不再是一个简单的块状）deg：角度顺时针旋转## border-image,border-radius,box-shadowborder-image利用border-image可以自定义边框：border-image用法：div{border-ima...

2020-01-19 12:42:05 265

原创 w3c搬运CSS念念碎

w3c搬运CSS念念碎基本使用当使用 RGB 百分比时，即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说，当尺寸为 0 像素时，0 之后不需要使用 px 单位，因为 0 就是 0，无论单位是什么。如果值为若干单词，则要给值加引号p { font-family: "sans serif";}是否包含空格不会影响 CSS 在浏览器的工作效果,不...

2020-01-13 21:43:36 239 2

原创 Mysql数据库单表操作常用方法（数据库基础使用）

MySql数据库基础篇你不能因为失败就忘记了过往所有说过的坚强。基础篇仅涉及单表操作，是高级篇的基础。一.数据库操作本篇博客只涉及到单表操作，较为简单。数据库的创建：常用格式：create database 数据库名称;create database 数据库名称 character set 字符集;create database 数据库名称 character set 字符集 c...

2019-12-16 00:44:51 556

原创个人网页中利用表单实现跳转B站和QQ音乐搜索（仿百度搜索）

HTML利用标签接入B站搜索功能最近在制作个人网页的时候，想在网站中插入两个搜索接口，一个用来对接B站**搜索视频，另一个用来对接QQ音乐，搜索音乐。搜索了一下后发现有使用百度进行搜索的例子：利用HTML中的form标签进行验证，很是惭愧，HTML5并没有认真仔细的学习完，也没有上手做个不错的项目，于是重新学习了一下这个标签的用法，实现了一个大概这样的效果：首先对于bilibili，...

2019-11-24 12:19:14 864

原创原生JS实现照片墙

原生Javascript实现照片墙最近跟着网易云课堂的JS学习视频的案例篇实现了一个类似这样的界面：具体页面（GitHub Page）实现思路很简单，大致如下：1.首先布局html:<ul id="ps"></ul>仅一个ul标签，其余元素之后再通过JS添加2.通过js循环添加图片与元素： var ul=document.getElementByI...

2019-11-03 10:35:33 1275 1

qq_44831027的博客