- 博客(117)
- 收藏
- 关注
RSS订阅
原创 http学习随笔
文章目录1、http的状态码2、http缓存3、get和post的区别4、cooki、session1、http的状态码HTTP状态码表示客户端HTTP请求的返回结果、标记服务器端的处理是否正常或者是出现的错误，能够根据返回的状态码判断请求是否得到正确的处理很重要。状态码由3位数字和原因短语组成，例如下图所示：数字中的第一位指定了响应类别，后两位无分类，响应类别有一下5种：各类别常见状态码：2xx （3种）200 OK：表示从客户端发送给服务器的请求被正常处理并返回；204 No C
2020-09-11 20:33:42
186
原创 前端知识点总结2
文章目录28、如何实现深浅拷贝28、如何实现深浅拷贝数据分为基本数据类型(String, Number, Boolean, Null, Undefined，Symbol(new in ES 6)和 引用数据类型（统称为 Object 类型，细分的话有：Object 、Array 、Date 、RegExp、Function… ）。基本数据类型的特点：直接存储在栈(stack)中的数据引用数据类型的特点：存储的是该对象在栈中引用，真实的数据存放在堆内存里引用数据类型在栈中存储了指针，该指针指向堆
2020-09-10 08:07:22
164
1
原创 前端知识点总结1
文章目录HTML1、如何让一个元素在窗口消失（5种）2、讲出flex常用场景，以及flex 1 做了什么flex ：1===flex：1 1 autoHTML1、如何让一个元素在窗口消失（5种）1、最常用之——display: none;给元素设置display: none;后，元素会从页面中彻底消失，它原本占据的空间会被其他元素占有，会造成浏览器的回流与重绘。2、最常用之——visibility: hidden;给元素设置visibility: hidden;后，元素会从页面中消失，它原本占据
2020-09-08 07:42:01
1368
原创 VUE学习随笔
文章目录1、基础和语法2、vue函数结构3、组件Vue组件封装过程组件创建的三种方法注册组件的两种方法组件通信插槽默认使用方法具名插槽插槽的默认内容作用域插槽webpack核心功能，为什么用他?安装文件目录打包指令Vue CLI安装目录结构详解vue-router路由发展URL的hashHTML5的history模式：pushStatevue-router使用vue-router的步骤:创建router实例挂载到Vue实例中步骤一：创建路由组件步骤二：配置组件和路径的映射关系步骤三：使用路由.路由的默认路径
2020-09-07 10:12:54
1186
原创 redux简单用法
§ Store首先要区分 store 和 statestate 是应用的状态，一般本质上是一个普通对象例如，我们有一个 Web APP，包含 计数器 和 待办事项 两大功能那么我们可以为该应用设计出对应的存储数据结构（应用初始状态）：/** 应用初始 state，本代码块记为 code-1 **/{ counter: 0, todos: []}store 是应用状态 state 的管理者，包含下列四个函数：getState() # 获取整个 statedispatch(act
2022-01-06 15:52:08
381
1
原创 小菜鸟第6步 node中的events模块
文章目录事件驱动那么问题是什么是事件驱动呢？Events类用法主要的几个核心API实现最近在看vue-cli源码时发现好多class了events类，最近在工作中也经常遇到，发现只是知道他是一个类似于观察者的一个东西，但是还没有系统看过这个内置模块。所以今天搞一下。事件驱动Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O的模型，使其轻量又高效。Allows you to build scalable netw
2021-09-28 16:21:43
432
原创 菜鸟成长第5步 child_process模块
文章目录1、出现的原因2、Node.js 流的概念流的优势pipe()流驱动的 Node.js APIchild_process用法因为我的第三个项目是做一个自动化部署的网站，那么操作shell脚本肯定是必不可少的，所以学习一下 child_process模块的用法。1、出现的原因node是单进程的，必然存在一个问题，就是无法充分利用cpu等资源。node提供了child_process模块来实现子进程，从而实现一个广义上的多进程的模式。通过child_process模块，可以实现1个主进程，多个子进
2021-09-27 17:57:15
1714
1
原创 菜鸟成长第四步 async||await原理
文章目录1、async||await为什么会出现2、async||await用法3、原理1、async||await为什么会出现promise虽然解决了回调的那种头疼写法，但是代码还是需要不停的then，不够优雅简洁2、async||await用法用async修饰函数用await修饰函数中的异步任务并且这个函数的返回值是一个promiseasync function a() { await setTimeout(_ => { console.log(111); /
2021-09-27 17:35:21
542
原创 菜鸟成长第三步 promise原理
文章目录promise 为什么会出现为什么js是单线程单线程的问题宏任务和微任务执行顺序promise 怎么用 ？promise原理then实现静态方法resovle和reject实现all、race方法实现了解async||await的原理之前需要先理解promise原理。项目地址promise 为什么会出现为什么js是单线程这主要和js的用途有关，js是作为浏览器的脚本语言，主要是实现用户与浏览器的交互，以及操作dom；这决定了它只能是单线程，否则会带来很复杂的同步问题。举个例子：如果js被
2021-09-27 16:14:09
317
原创 菜鸟第二步 浏览器运行机制
文章目录1、浏览器是多进程的Browser进程：第三方插件进程：GPU进程：怎么查看浏览器进程情况多线程优缺点重点是浏览器内核（渲染进程）该进程有多个线程完成GUI渲染线程JS引擎线程事件触发线程定时触发器线程异步http请求线程进程间的通信过程渲染进程（浏览器内核）线程的关系GUI渲染线程与JS引擎线程互斥JS阻塞页面加载WebWorker，JS的多线程浏览器渲染流程拿到内容解析内容建立Rendering Tree， 解析HTMl构建dom解析CSS产生CSS规则树，css是由单独的下载线程异步下载的,本
2021-09-27 10:35:40
811
原创 菜鸟第一步 koa原理
文章目录学习体会1、koa为什么会出来2、koa原理1、ctx的实现学习体会要想看源码首先需要明白几点1、为什么这个东西要出来、有什么作用和好处2、这个东西怎么用3、接下来才到他的原理解读真希望在重复这个过程的时候会得到启发，从而做出真正属于自己的东西。1、koa为什么会出来一、如果直接使用node来进行服务端处理会显得非常麻烦、所以才有了express和koa等框架。所谓的框架无非就是对原有的api进行了进一步的封装，使得功能更加好用和完善。其次，在设计的时候还需要保证框架可以很好的扩展生
2021-09-23 11:31:51
609
原创 菜鸟计划-目标
引言:最近敲代码有很多地方知道大概的用法，但是用起来就是用不好，归根结底就是用的少，原理都知道但是从来没有自己手敲过，所以今天开始，准备做一个对自己来说比较大型的项目。项目结构项目主要是进行源码解读和手写，并且全部整合到三个项目中。项目一利用koa+vue+react+qiankun+webpack做一个个人博客网站项目二项目创建完成之后肯定需要部署到服务器，鉴于我们公司的自动化部署平台，利用docker+nginx+koa+vue搭建一个自动化部署平台。项目三做这些项目的时候肯定需要看
2021-09-22 19:32:09
147
原创 docker-compose 配置参数
serviceservices:#服务名称，不可重复 web:#服务的镜像名称或镜像 ID，如果镜像在本地不存在，Compose 将会尝试拉取这个镜像 image: dockercloud/hello-world#基于一份 Dockerfile构建镜像，指定 Dockerfile 所在文件夹的路径 #如果你同时指定了 image 和 build 两个标签，那么 Compose 会构建镜像并且把镜像命名为 image 后面的那个名字 #build: /path/to/build/
2021-09-06 21:29:25
1605
原创 nginx配置文件
#运行用户#user somebody;#启动进程,通常设置成和cpu的数量相等worker_processes 1;#全局错误日志error_log D:/Tools/nginx-1.10.1/logs/error.log;error_log D:/Tools/nginx-1.10.1/logs/notice.log notice;error_log D:/Tools/nginx-1.10.1/logs/info.log info;#PID文件，记录当前启动的nginx.
2021-09-06 21:25:25
152
原创 webpack 使用总结
webpack 使用总结1、意义2、webpack术语Bundlemodulechunk3、config 配置概念1、Entry2、Output3、Loader3.1常用loader3.1.1 css类loader3.1.21、意义主要功能：现在前端有很多各种各样的工具和框架，直接给浏览器他不认识、需要转化为浏览器认识的版本和语言。其他功能：引入其他插件或实现额外功能。2、webpack术语Bundle最后的生产脚本。也就是最终浏览器可以直接运行的代码。module一个文件chunkwe
2021-09-05 20:02:05
737
原创 Vue-Router 原理实现
文章目录一、Vue-Router 需要实现的功能如下1、vue插件：2、实例对象router和route3、两个组件 router-view和router-link4、动态路由5、路由传参6、嵌套路由7、编程式导航二、Hash 模式 和 History 模式1、Hash 模式 和 History 模式 的区别：表现形式的区别：原理的区别：2、History 模式三、模拟实现 Vue Router1、Vue 前置知识：2、Vue Router 实现原理Hash 模式：History 模式：3、Vue Rout
2021-08-20 10:28:10
832
原创 发布订阅模式
文章目录思路：工作中的应用node中的api=>events实现一个EventEmitter先来个最简单的例子：let corp = {}; // 自定义一个公司对象// 这里放一个列表用来缓存回调函数corp.list = [];// 去订阅事件corp.on = function (fn) { // 二话不说，直接把fn先存到列表中 this.list.push(fn);};// 发布事件corp.emit = function () { // 当发布的时
2021-07-27 16:39:16
223
原创 快应用中心运营平台项目心得
经验方面的：1、在拿到项目时不要上去就直接写,只是粗糙的读了一遍文档就直接上这个了（效率是真的低，也佩服自己的勇气），要先搞明白项目中所用到的技术栈，要是遇到没见过的要先看一下，至少知道这个技术是干什么的，怎么用。否则可能会导致搞不清项目的结构和整体框架的思路。写代码之前的框架思路才是第一位的，否则可能很长时间做的都是无用功。2、遇到bug不要慌，先找到报错点然后捋清这块儿的思路，业务逻辑和数据流是怎样的，要是逻辑上没有错误看一下技术栈中是否有方法用错了。（这个项目大概就这三种错误）3、代码风格逻辑：
2021-07-19 21:25:04
240
原创 eslint笔记
文章目录1、初始化设置 --fix 参数env、parserOptions、pluginsextendsrules可能存在的疑问忽略文件1、初始化安装npm i eslint -geslint init 设置 --fix 参数打开 package.json 文件，修改 script 属性如下："scripts": { "test": "react-scripts test --env=jsdom", "lint": "eslint src --fix", "lint:
2021-06-10 16:12:53
446
原创 linux_ubuntu 学习笔记
文章目录1、目录2、linux基本命令3、文件和文件夹的操作4、压缩与解压tar 压缩或解压zip格式总结5、数据处理管道: |常和管道协作的命令 - sort常和管道协作的命令 - uniq重定向1、目录boot 存放启动文件dev 存放设备文件etc 存放配置文件home 普通用户家目录，以/home/$username的方式存放media 移动存储自动挂载目录,以 /media/$device_name的方式来存放mnt 手动挂载目录opt
2021-06-09 19:00:21
600
4
原创 网络学习笔记
文章目录1、网络介绍网络分类按照网络拓扑分类按地域分类：参照物不同，类型不同网络设备2、OSI七层模型OSI七层模型介绍OSI七层特点3、 TCP/IP四层模型TCP/IP协议簇4、传输层协议tcp三次握手TCP四次断开TCP包头UDP协议TCP与UDP区别：1、网络介绍计算机网络是由通信介质将地理位置不同的且相互独立的计算机连接起来，实现数据通信与资源共享网络分类按照网络拓扑分类总线型：一般传输介质为同轴电缆，需要T型头和信号终结器环形：需要申请令牌才可以通信。星型：中央节点压力大，单点
2021-06-09 16:11:50
635
转载 Node.js基础
文章目录一、Node.js是什么特性二、Node 相关工具1、NVM: Node Version Manager2、NPM: Node Package Managernpm 脚本一、什么是 npm 脚本？执行顺序变量npm 安装 git 上发布的包cross-env 使用出现原因3、NRM: npm registry manager查看当前源切换源4、NPX: npm package extention避免全局安装模块三、模块/包 与 CommonJS1、模块/包分类1.1 内置的模块1.2 第三方的Nod
2021-04-17 19:20:02
1265
原创 EGG框架学习
文章目录介绍特性环境搭建、创建、运行目录结构主要内容什么是MVC控制器(controller)服务(service)路由器(routes)项目实战演示使用egg-mongoose链接数据库配置介绍Eggjs是一个基于Koajs的框架，所以它应当属于框架之上的框架，它继承了Koa的高性能优点，同时又加入了一些约束与开发规范，来规避Koajs框架本身的开发自由度太高的问题。Koajs是一个nodejs中比较基层的框架，它本身没有太多约束与规范，自由度非常高，每一个开发者实现自己的服务的时候，都有自己的“骚
2021-01-09 13:09:57
930
1
转载 Mysql数据库设计
文章目录设计的步骤需求分析1、数据是什么、有什么属性、特点（时效性？核心数据？增长情况？）、哪些属性或属性组合可以唯一标识一个实体2、实体与实体之间的关系（1对1？1对多？多对多？）概念结构设计局部E-R图设计合并成总体E-R图逻辑结构设计逻辑设计的一些条件函数依赖范式物理结构设计命名字段类型反范式化补充数据库维护和优化索引设计的步骤② 概念结构设计：E-R图③ 逻辑结构设计：将E-R图转换为某一种数据模型，并优化。④ 物理结构设计：选哪种数据库⑤ 数据库实施⑥ 数据库维护和优化：建表、索引优化
2021-01-09 10:39:57
369
原创 iconfont 使用记录
文章目录unicode使用步骤第一步：拷贝项目下面生成的font-face第二步：定义使用iconfont的样式第三步：挑选相应图标并获取字体编码，应用于页面font-class引用使用步骤如下：第一步：拷贝项目下面生成的fontclass代码：第二步：挑选相应图标并获取类名，应用于页面：symbol引用使用步骤如下：第一步：拷贝项目下面生成的symbol代码：第二步：加入通用css代码（引入一次就行）：第三步：挑选相应图标并获取类名，应用于页面：引入的三种方式Unicode，Font class，Sym
2020-12-03 19:51:49
517
原创 vue中的代理proxy
文章目录问题跨域的解决方案原理核心配置扩展几个常用的devServer配置问题我们本地调试一般都是 npm run serve，然后打开 本机ip:8080（localhost:8080）对吧，这时候我们要调接口调试，后端的接口的地址可能在测试环境，也可能是自己电脑的 ip，总之不是你的 lcoalhost:8080，那么你调接口就会产生跨域，那么怎么办呢？就需要proxy出场了跨域的解决方案jsonpcorsNode中间件代理(两次跨域)nginx反向代理CORS支持所有类型的HTTP
2020-12-02 20:08:54
2447
原创 VUE面试题整理
文章目录1、v-show 与 v-if 区别2、绑定 class 的数组用法3、计算属性和 watch 的区别computed 是一个对象时，它有哪些选项？computed 和 methods 有什么区别？computed 是否能依赖其它组件的数据？watch 是一个对象时，它有哪些选项？4、vue组件的scoped属性的作用5、vue常用修饰符①一般修饰符：② 事件修饰符③按键修饰符④系统修饰键 （可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。）6、v-on可以监听多个方法吗？（可
2020-11-30 16:19:55
434
原创 diff算法
文章目录什么是Diff算法？传统DiffReact Diff算法优化策略图React中Diff算法的实现对于以上三个策略，react分别对tree diff,component diff,element diff进行算法优化。1.tree diff2.componnet diff3.element diff基于中Diff的开发建议基于tree diff基于component diff基于element diff一直都没有好好的看一下diff算法 今天搞一下什么是Diff算法？diff算法作为Virt
2020-11-23 16:04:31
1211
原创 crypro对称加密和非对称加密
文章目录一、安装npm install cryptonpm install crypto -gconst crypto = require("crypto"); //引入自己下载好的crypto模块module.exports = { //把加密的功能封装成一个对象并且输出出去(即暴露此功能模块对象) autograph:"my name is ydb", //这里可以不要,但是现在使用的是md5加密模式,不要这里的自定义字符串,别人拿到你的加密密码,还是可以通过md5解密器进行暴力破
2020-11-14 21:00:21
835
转载 响应式布局
文章目录一、什么是响应式布局二、如何实现响应式布局三、实例一、什么是响应式布局所谓响应式布局，就是指同一个网页，在不同的终端上的显示效果不同，但是访问的确实是同一个页面，只是因为浏览器会根据终端的不同（例如屏幕宽度、横竖屏、移动端还是pc端等）选择的渲染方式也不同。二、如何实现响应式布局既然响应式布局如此重要，那么如何实现响应式布局呢？根据我的经验，简单来说就是：先做好PC端的样式，然后使用css中的@media媒媒体查询来适配不同的终端。这里有一个比较好的习惯是将页面栅格化，栅格化的意思就是将页面
2020-11-03 16:07:04
340
原创 vue中mavonEditor的使用
文章目录最近搭博客需要使用文本编辑器，索性使用记录一下。官网安装npm install mavon-editor --save引入 // 全局注册 // import with ES6 import Vue from 'vue' import mavonEditor from 'mavon-editor' import 'mavon-editor/dist/css/index.css' // use Vue.use(mavonEditor)
2020-11-02 18:58:03
2081
1
原创 Sequelize
文章目录一、安装二、建立mysql连接三、编写表的model文件四、生成mysql中的表五、增删改查插入查找更新删除六、事务一、安装通过npm安装sequelize和mysqlnpm install --save sequelizenpm install --save mysql2二、建立mysql连接接下来我们会用Sequelize的构造方法来创建一个mysql的连接实例。先来看看sequelize官方文档中构造方法的定义public constructor(database: stri
2020-10-31 22:35:00
920
原创 Vue思想和组件化
文章目录1、理解vueVue的设计思想2、Vue组件化组件通信props自定义事件事件总线vuex`$parent/$root`$children`$attrs/$listeners`refsprovide/inject作用域插槽输入组件小例子弹框组件小例子1、理解vueVue的设计思想1、数据驱动应用2、MVVM模式的践行者MVVM框架的三要素：响应式、模板引擎及其渲染响应式：vue如何监听数据变化？模版：vue的模版如何编写和解析？渲染：vue如何将模板转换为html？2、Vue组件
2020-10-28 10:03:50
321
原创 js中实例方法、静态方法
静态方法Person.say=function(){ console.log('I am a Person,I can say.')};Person.say(); //正常运行var carl=new Person;carl.say(); //报错我们给Person这个类添加了一个say方法，它在类上面的，所以，它实际上是一个静态方法.静态方法：不能在类的实例上调用静态方法，而应该通过类本身调用。类（class）通过 static 关键字定义静态方法。以上对Person.say
2020-10-21 21:52:02
446
原创 css优先级扫盲
今天被快手问到了。。。突然又发现知识盲区了。开搞文章目录优先级是如何计算的？!important 例外规则优先级是如何计算的？优先级就是分配给指定的 CSS 声明的一个权重，它由 匹配的选择器中的 每一种选择器类型的 数值 决定。而当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候，CSS 中最后的那个声明将会被应用到元素上。当同一个元素有多个声明的时候，优先级才会有意义。因为每一个直接作用于元素的 CSS 规则总是会接管/覆盖（take over）该元素从祖先元素继承而来的规则。这
2020-10-20 15:58:03
223
原创 面试题整理--先手敲，不会的查漏补缺
文章目录（1）html，http，web基础篇html篇1、h5新特性2、http和https的区别3、http1.0、1.1、2.0、的特性，尤其是keep-alive和2.0的长连接4、http状态码，尤其是301和302,3045、http请求几种方法及区别，尤其get/post的幂等性6、cookie,session,localStorage区别，cookie的长度限制7、前段优化方法8、浏览器输入url后发生了什么9、websocket10、强缓存，协商缓存11、常见的块元素，行内元素12，懒加载
2020-10-18 17:50:18
1586
3
原创 前端性能优化方法
1. 减少http请求数常用的减少http请求数有以下几种：1）合并图片。当图片较多时，可以合并为一张大图，从而减少http请求数。经常变化的图片可能不太合适，变化相对稳定的就可以考虑。合并大图除了能减少http 请求数外，还可以充分利用缓存来提升性能。2）合并压缩css样式表和js脚本，他们的共同目的都是为了减少http连接数。3）去掉不必要的请求。开发写代码或者系统升级之后残留的无效请求连接。4）充分利用缓存。这里说的缓存是客户端侧缓存或者说浏览器缓存。Expires头信息是客户端侧缓存的重要
2020-10-17 20:01:24
250
原创 JS中的设计模式
文章目录设计原则单一职责原则（SRP）最少知识原则（LKP）开放-封闭原则（OCP）什么是设计模式一、工厂模式设计原则单一职责原则（SRP）一个对象或方法只做一件事情。如果一个方法承担了过多的职责，那么在需求的变迁过程中，需要改写这个方法的可能性就越大。应该把对象或方法划分成较小的粒度最少知识原则（LKP）一个软件实体应当 尽可能少地与其他实体发生相互作用应当尽量减少对象之间的交互。如果两个对象之间不必彼此直接通信，那么这两个对象就不要发生直接的 相互联系，可以转交给第三方进行处理开放-封闭
2020-10-17 16:51:21
162
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人