- 博客(59)
- 收藏
- 关注
RSS订阅原创 还不会搭建 Node 服务？一文带你了解如何用 express + ts 搞定后端
哈喽，小伙伴你好，我是DBcoding前端开发全栈化趋势卷的前端小伙伴们日益焦虑，不会搭建后端服务怎么办；不了解node应用怎么办；不会组织业务接口怎么办；不用怕！今天我们一起来梳理下nodejs框架 -express搭建后端的全流程，一次性整明白这玩意儿。了解express后端工程搭建全流程。了解express如何集成typescript，并运行项目。了解注解式接口开发，集成和typeorm。了解typeorm如何应用mysql服务。了解express。
2024-12-01 23:02:37
811
原创 【图解】正向代理&反向代理
反向代理（reverse proxy）：是指以代理服务器来接受internet上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回给internet上请求连接的客户端，此时代理服务器对外就表现为一个反向代理服务器。而对于房东来说，他可能根本不知道真正要租他的房子的人是谁，他只知道是中介在联系他。虽然正向代理服务器和反向代理服务器所处的位置都是客户端和真实服务器之间，所做的事情也都是把客户端的请求转发给服务器，再把服务器的响应转发给客户端，但是二者之间还是有一定的差异的。
2024-11-22 16:15:08
1010
原创 什么是graphQL
变量定义看上去像是上述查询中的。其工作方式跟类型语言中函数的参数定义一样。它以列出所有变量，变量前缀必须为，后跟其类型，本例中为Episode。所有声明的变量都必须是标量、枚举型或者输入对象类型。所以如果想要传递一个复杂对象到一个字段上，你必须知道服务器上其匹配的类型。可以从Schema页面了解更多关于输入对象类型的信息。变量定义可以是可选的或者必要的。上例中，Episode后并没有!，因此其是可选的。但是如果你传递变量的字段要求非空参数，那变量一定是必要的。
2024-04-25 17:47:13
2013
2
原创 JavaScript两个实用的图片懒加载优化方法
文章目录一、方法一二、方法二 InterSectionObserver一、方法一重点：1.getBoundingClientRect().top > window.innerHeight 图片未出现2.getBoundingClientRect().top < window.innerHeight 图片出现了HTML：<ul> ...... <li>2222222222</li> <li>2222222222
2022-03-25 22:51:59
5378
8
原创 【总结】：CSS常用的两栏布局方法（最全面）
文章目录一、CSS两栏布局（左列定宽，右列自适应宽）方法一：浮动+margin方法二：定位+margin方法三：浮动+BFC方法四：flex布局方法五：able布局二、CSS两栏布局（左列不定宽，右列自适应宽）一、CSS两栏布局（左列定宽，右列自适应宽）最终效果：方法一：浮动+marginHTML：<div class="container"> <div class="left">定宽</div> <div class="right">自适应
2022-03-23 15:58:08
5028
原创 ES6：Generator生成器的介绍及场景应用
文章目录一、Generator生成器函数二、使用步骤1.引入库2.读入数据总结一、Generator生成器函数在JavaScript中，一旦一个函数开始执行，就会一次执行到最后或者遇到return时结束，在函数运行期间没有任何代码可以让它在执行过程中暂停。而Generator生成器函数的出现，使得这样一个不可能成为可能。Generator函数是ES6提供的一种异步编程解决方案，其形式上与普通函数稍微有些差别：function关键字后跟一个星号(*)yield语句可以暂停函数functio
2022-03-14 22:02:39
1697
原创 【总结】：大厂面试常考手撕代码 —— JavaScript实现效果
文章目录一、Js实现拖动元素二、Js实现once效果三、Js实现深/浅拷贝1.通用方法2. 对象、数组3. 数组四、实现fetch（Promise封装Ajax）一、Js实现拖动元素const div = document.getElementsByTagName('div')[0]//是否按下let isDown = false//鼠标至边框let numX = 0let numY = 0//鼠标点下div.onmousedown = (e) => { //计算鼠标至边
2022-03-13 21:57:00
1415
原创 JavaScript实现Sleep效果
文章目录一、Sleep？二、为什么使用sleep？三、实现方法1. 基于while + Date实现2. 基于Promise + setTimeout实现一、Sleep？console.log(1);sleep(1000) //暂停1秒console.log(2);在多线程语言中，sleep() 方法是让调用线程进入睡眠状态，让出执行机会给其他线程，等到休眠时间结束后，线程进入就绪状态和其他线程一起竞争cpu的执行时间。而在JavaScript这样一个单线程语言里，js的设计者并没有设置s.
2022-03-06 20:04:12
9042
原创 【总结】：JavaScript优化 —— 防抖节流 - 应用场景
文章目录一、防抖代码实现二、节流代码实现三、总结区别一、防抖触发高频事件后n秒内只执行一次，如果n秒内再次触发就会重新计算时间。防抖的设计思路：触发事件清除定时设置定时如果在规定时间内仍然有请求/事件的操作，会清除定时，重设置定时如果在规定时间内没有请求/事件，就可以执行提交或者下面的操作了代码实现let btn = document.querySelector('button')function payMoney() { console.log('已剁');}f
2022-03-06 19:50:02
616
原创 JavaScript事件流详解
文章目录DOM事件流事件冒泡事件捕获情景一：直接在HTML中绑定事件情景二：[domNode].onclick()方式 —— DOM0级情景三：[domNode].addEventListener()方式 —— DOM2级DOM事件流要明白事件流，首先我们要明白三点：元素不是独立的，是串联在一起的单个元素触发事件以后还会影响其他元素事件流的方式：事件捕获(网景提出)、事件冒泡(IE提出)我们就以上图为例，假设你给div绑定了点击事件，当你点击了div后，其他元素也会受之牵连，会引起牵一发
2022-03-06 19:31:21
1561
1
原创 前端面试必考题：JavaScript事件循环(Event loop)、宏任务微任务
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录一、事件循环二、宏任务/微任务无渲染有渲染一、事件循环我们都知道，Js引擎是单线程的，也就是说每次执行一堆程序，必须是一个执行完再去执行另一个。那可能有人要问了：平时我们开启setTimeout定时器，也没见影响到后面程序的运行啊！是因为javascript从诞生之日起就是一门单线程的非阻塞的脚本语言。而它的非阻塞性是通过异步任务来实现的，可见setTimeout就是一个异步任务。那么从上图我们就可以得知：实现异步任务，就
2022-03-05 19:18:05
1830
1
原创 前端面试：被问到BFC，要这样答才能满分
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录一、BFC1. 理解2. 作用3.示例二、使用步骤1.引入库2.读入数据总结一、BFC1. 理解官方解释：BFC(Block formatting context)直译为"块级格式化上下文"，这是一个独自的渲染区域，规定了内部如何布局并且这个区域的子元素不会影响到外面的元素。说白了：BFC就像一个安全区，这个区域里的所有元素的布局方式（包括浮动、定位等）都不会影响到外面的其他元素的布局。2. 作用清除浮动处理外边距
2022-03-04 14:41:20
2025
原创 总结：CSS 垂直居中几个实用方法
文章目录方法一. line-height (只适用于文字类)方法二: flex布局方法三: 定位 + transform方法三: table-cell方法一. line-height (只适用于文字类)css:<style> div { width: 300px; height: 300px; border: 1px solid black; } span {
2022-03-03 19:53:56
586
2
原创 【总结】：Node.js操作MongoDB数据库 —— 增删改查
文章目录一、mongoose包二、初始化步骤三、CRUD操作增删改查一、mongoose包要用Node.js操作MongoDB数据库，我们可以引用第三方包 —— mongoose中文文档：http://www.mongoosejs.net/安装方法：npm i mongoose二、初始化步骤var mongoose = require('mongoose')var Schema = mongoose.Schema//1.链接数据库mongoose.connect('mongodb:
2022-03-01 17:57:24
600
1
原创 看完这篇文章，前端面试不许你再说不懂【Promise】
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录一、回调地狱？二、Promise1.引入库2.读入数据总结一、回调地狱？要想明白Promise，我就要先了解一下什么是回调地狱？(若了解，请调到下一节)异步函数无法保证执行循序const fs = require('fs')fs.readFile('./data/a.txt', 'utf-8', (err, data) => { if (err) { console.log('读取失败')
2022-03-01 17:20:38
857
原创 JavaScript封装异步函数 —— 【异步编程】 —— 如何获取一个函数中异步操作的结果？
我们在写项目的时候有没有遇到这样的一个情况：一个函数里，嵌套着另一个异步函数，那如何在外面获取这个异步函数的结果呢?（return值） 就比如这样一个例子：function fn() { setTimeout(function(){ let data = 222 },2000)}我们如何获取定时器中data的值呢？方法一
2022-02-25 12:39:23
1062
原创 【总结】：大厂面试常考手撕代码 —— JavaScript排序算法（冒泡排序、选择排序、插入排序、快速排序）
文章目录1. 冒泡排序2. 选择排序3. 插入排序4. 快速排序1. 冒泡排序 //冒泡排序 let arr = [2, 4, 1, 6, 3] function bubbled(arr) { for (let i = 0; i < arr.length - 1; i++) { //【！！注意】这里不是j=i，因为回回都必须重头遍历，才能不漏一个嘛~ for (let j = 0; j < arr.leng.
2022-02-23 00:06:14
6307
13
原创 密钥协商算法的演变 —— RSA算法 - DH算法 - DHE算法 - ECDHE算法
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录1. RSA算法RSA握手过程RSA秘钥协商算法最大的缺陷2. DH算法3. DHE算法4. ECDHE算法ECDHE秘钥协商算法的TSL握手：1. RSA算法传统的 TLS 握⼿基本都是使⽤ RSA 算法来实现密钥交换的。在 RSA 密钥协商算法中，客户端会⽣成随机密钥，并使⽤服务端的公钥加密后再传给服务端。根据⾮对称加密算法，公钥加密的消息仅能通过私钥解密，这样服务端解密后，双⽅就得到了相同的密钥，再⽤它加密应⽤消息。R
2022-02-21 21:47:33
8201
原创 【图解】HTTP/1.1到HTTP/2.0的演变
文章目录HTTP/1.1HTTP/1.1 相⽐ HTTP/1.0 性能上的改进：HTTP2HTTP/1.1性能问题HTTP2.0的优化：1. 头部压缩2. 二进制帧3. 并发传输(多路复用)4. 服务器主动推送资源HTTP/1.1HTTP/1.1 相⽐ HTTP/1.0 性能上的改进：使⽤ TCP ⻓连接的⽅式改善了 HTTP/1.0 短连接造成的性能开销。⽀持管道（pipeline）⽹络传输，只要第⼀个请求发出去了，不必等其回来，就可以发第⼆个请求出去，可以减少整体的响应时间。HT
2022-02-21 21:29:09
1077
原创 用白话讲解：如何实现a==1 && a==2 && a==3 为true
前两天遇到了这个有意思的面试题，真的是想破脑袋也没有想明白“a怎么可能同时等于三个数呢”？ 最后看了答案才恍然大悟。虽然那个答案讲的比较抽象，但是今天我就用自己的话来简单给大家讲解一下这道题的一个解法：在讲解这道题之前，我们首先得了解一下JS的语法规(天)范(坑)，那就是：如果两个值类型相同，则直接比较(双等号比较)如果两个值不是同
2022-02-20 23:21:36
1462
原创 【Git】简单拉代码，只需两步~~ —— 附【Git下载及必要配置教程】
文章目录一、软件下载启动Git二、Git配置设置用户名与邮箱（用户标识，必要）二、Git实际操作情景1.拉取公司代码演示：情景2.修改本地仓库代码，更新远程仓库：解惑一、软件下载打开 [git官网] https://git-scm.com/，下载git对应操作系统的版本。所有东西下载慢的话就可以去找镜像！官网下载太慢，我们可以使用淘宝镜像下载：http://npm.taobao.org/mirrors/git-for-windows/下载对应的版本即可安装！安装：无脑下一步即可！安装完毕就可
2022-02-19 22:47:04
22846
原创 用白话讲：HTTP/1.1 如何优化？【图解】
文章目录一、如何避免发送HTTP请求？二、如何减少HTTP请求次数1. 减少重定向请求次数2. 合并请求延迟发送请求三、如何减少 HTTP 响应的数据大小？无损压缩有损压缩四、总结问你⼀句：「你知道 HTTP/1.1 该如何优化吗？」我想你第⼀时间想到的是，使⽤ KeepAlive 将 HTTP/1.1 从短连接改成⻓链接。这个确实是⼀个优化的⼿段，它是从底层的传输层这⼀⽅向⼊⼿的，通过减少 TCP 连接建⽴和断开的次数，来减少了⽹络传输的延迟，从⽽提⾼ HTTP/1.1 协议的传输效率。但其实还
2022-02-17 15:35:56
1412
原创 总结：【前端】常问的五大类HTTP面试题 -—— 【图解】
文章目录一、HTTP基本概念二、GET与POST三、HTTP特征四、HTTP与HTTPS五、HTTP/1.1、HTTP/2、HTTP/3 演变在⾯试过程中，HTTP 被提问的概率还是⽐较⾼的。我搜集了 5 ⼤类 HTTP ⾯试常问的题⽬，同时这 5 ⼤类题跟 HTTP 的发展和演变关联性是⽐较⼤的，通过问答 + 图解的形式由浅⼊深的⽅式帮助⼤家进⼀步的学习和理解 HTTP 。HTTP 基本概念Get 与 PostHTTP 特性HTTPS 与 HTTPHTTP/1.1、HTTP/2、HTTP
2022-02-17 14:43:20
2357
原创 【图解】TCP/IP网络模型
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录TCP/IP ⽹络模型1 应用层2 传输层3 网络层4 数据链路层5 物理层TCP/IP ⽹络模型对于同⼀台设备上的进程间通信，有很多种⽅式，⽐如有管道、消息队列、共享内存、信号等⽅式，⽽对于不同设备上的进程间通信，就需要⽹络通信，⽽设备是多样性的，所以要兼容多种多样的设备，就协商出了⼀套通⽤的⽹络协议。这个⽹络协议是分层的，每⼀层都有各⾃的作⽤和职责，接下来就分别对每⼀层进⾏介绍。1 应用层 &n
2022-02-15 23:26:04
1851
原创 【图解】计算机网络
你是一台电脑，你的名字叫 A很久很久之前，你不与任何其他电脑相连接，孤苦伶仃。直到有一天，你希望与另一台电脑 B 建立通信，于是你们各开了一个网口，用一根网线连接了起来。用一根网线连接起来怎么就能"通信"了呢？我可以给你讲 IO、讲中断、讲缓冲区，但这不是研究网络时该关心的问题。如果你纠结，要么去研究一下操作系统是如何处理网络 IO 的，要么去研究一下包是如何被网卡转换成电信号发送出去的，要么就仅仅把它当做电脑里有个小人在开枪吧~反正，你们就是连起来了，并且可以通信。第一层有一天，
2022-02-12 18:07:15
255
原创 【ES6】Iterator遍历器对象
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录一、Iterator(遍历器)的概念二、默认Iterator接口三、调用 Iterator 接口的场合结构赋值扩展运算符其他场合四、字符串的 Iterator 接口一、Iterator(遍历器)的概念 JavaScript 原有的表示 “集 ”的数据结构主要是数组(Array)和对象(Object)，ES6又添加了 Map和Set。这
2022-02-09 13:32:36
912
1
原创 【ES6】Map数据结构
文章目录一、Map的含义和基本用法二、实例的属性和操作方法三、遍历方法一、Map的含义和基本用法 JavaScript 的对象（ Object ）本质上是键值对的集合（ Hash 结构），但是只能用字符串作为键。这给它的使用带来了很大的限制。为了解决这个问题，提供了Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。 .
2022-02-09 11:30:58
2792
原创 【ES6】Set数据结构
文章目录一、Set理解二、Set实例的属性和方法1.下面先介绍4个操作方法:2.遍历操作一、Set理解ES6 提供了新的数据结构 —— Set。它类似于数组，但是成员的值都是唯一的，没有重复。Set 本身是一个构造函数，用来生成Set 数据结构。const s = new Set()[2,3,4,2,2].forEach(item => s.add(item))for(let i if s) { console.log(i) //2 3 4}上面的代码通过 add 方法向 Set
2022-02-08 22:12:46
1164
1
原创 【ES6】数据类型Symbol
文章目录一、Symbol的由来？二、写法三、作为属性名的Symbol四、属性名的遍历五、Symbol其他创建方法Symbol.for( )一、Symbol的由来？ES5 的对象属性名都是字符串，这容易造成属性名的冲突。比如，我们使用了他人提供的对象，但又想为这个对象添加新的方法，新方法名字就有可能与现有方法产生冲突 。如果有种机制，能够保证每个属性的名字都是独一无二的就好了，这样就能从根本上防止属性名冲突。这就是 S6引入类型 Symbol 原因。ES6 引入了种新的原始数据类型 Symbol .
2022-02-05 17:46:29
717
原创 【5分钟理解】什么是时间复杂度
文章目录时间复杂度1.案例示例1示例22. T(n)如何转换为时间复杂度2.1 情景一2.2 情景二2.3 情景三3.总结4.归纳几个常见函数的时间复杂度4.14.24.34.4时间复杂度先抛出结论：时间复杂度是什么？时间复杂度是用来衡量代码的执行速度的。时间复杂度 = 时间的增长趋势注意：时间复杂度只是表示一个趋势，并不是精确值我们通过接下来的几个示例，就能更深刻理解上面的结论1.案例示例1function fn() { console.log('我被打印了一次') //执行一次
2022-01-30 14:06:24
1116
1
原创 【webpack5】(一) 基本使用及安装教学
文章目录一、webpack是什么？二、安装步骤三、webpack五个核心1.Entry2.Output3.Loader4.Plugins5.Mode四、基本演示结果一、webpack是什么？webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。 在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。 它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)二、安装步骤输入指令：.
2022-01-28 17:32:56
580
原创 【JavaScript】执行上下文与作用域的区别
如果不太了解什么是执行上下文，可以点击查看我的这篇博客什么是执行上下文1. 区别1全局作用域之外，每个函数都会创建自己的作用域，作用域在函数定义时就已经确定了。而不是在函数调用时全局执行上下文环境是在全局作用域确定之后，js代码马上执行之前创建的函数执行上下文是在调用函数时，执行函数体代码之前创建2. 区别2作用域是静态的。只要函数定义好了就一直存在，且不会再变化执行上下文环境是动态的，调用函数时创建，函数调用结束时上下文环境就会被释放3. 联系执行上下文环境
2022-01-24 16:49:31
1277
原创 【JavaScript】变量提升 - 函数提升 - 执行上下文 - 执行上下文栈
文章目录一、变量提升、函数提升1. 变量(声明)提升2. 函数(声明)提升二、执行上下文1. 全局执行上下文2. 函数执行上下文三、执行上下文栈四、经典面试题面试题1面试题2面试题3一、变量提升、函数提升1. 变量(声明)提升通过var定义(声明)的变量，在定义语句之前就可以访问到不过值为:undefined来看一个经典面试题var a = 3function fn() { console.log(a) //undefined var a = 4}fn()通过打印结果我们能
2022-01-24 15:48:00
765
原创 JavaScript深拷贝与浅拷贝
文章目录一、理解二、浅拷贝1.用Js实现浅拷贝2. 浅拷贝语法糖2.1 写法2.3 应用三、深拷贝用Js实现深拷贝一、理解浅拷贝：只是拷贝一层，更深层次对象级别的只拷贝了地址深拷贝：层层拷贝，每一级别的数据都会拷贝二、浅拷贝1.用Js实现浅拷贝var obj = { id:1, name:'Andy', msg: { age:18 }}var newObj = {}for(var key in obj) { //key是当前属性名， obj[k]是当前属性值 ne
2022-01-23 16:48:57
3592
1
原创 通俗理解JavaScript闭包
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、闭包是什么？因此得出结论：能够读取其他函数内部变量的函数，就是闭包二、满足闭包的两个个特征三、经典案例四、经典面试题总结闭包的好吃与坏处前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考一、闭包是什么？闭包是js的一个难点也是它的一个特色，是我们必须掌
2022-01-22 16:37:37
296
原创 JavaScript中改变this指向的方法【总结】- 【各自主要应用场景】
文章目录一、pandas是什么？总结一、pandas是什么？总结提示：这里对文章进行总结：例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。...
2022-01-20 14:52:46
985
原创 JavaScript中基本数据类型和引用数据类型的区别
文章目录1、基本数据类型和引用数据类型2、常见的基本数据类型：3、引用类型数据：4、总结区别1、基本数据类型和引用数据类型ECMAScript包括两个不同类型的值：基本数据类型和引用数据类型。基本数据类型指的是简单的数据段，引用数据类型指的是有多个值构成的对象。当我们把变量赋值给一个变量时，解析器首先要确认的就是这个值是基本类型值还是引用类型值。2、常见的基本数据类型：Number、String 、Boolean、Null和Undefined。基本数据类型是按值访问的，因为可以直接操作保存在
2022-01-20 11:33:41
136
原创 【ES5】 新增方法概述 —— forEach() - filter() - some() - map() - trim() - Object.defineProperty()
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、数组方法1.forEach1.1 写法1.2 特点1.3 案例2. filter2.1 写法2.2 特点2.3 案例3. some3.1 写法3.2 特点3.3 案例3.4 filter与some的区别4. map4.1 写法4.2 特点4.3 案例二、字符串方法1. trim1.1 写法1.2 特点1.3 案例三、对象方法Object.defineProperty()写法案例1案例2总结前言ES5中给我们新增了一些方
2022-01-19 23:06:24
768
原创 React（9）—— Hooks - LazyLoad - Context - 组件优化 - 错误边界 - 组件通信方式总结
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言二、路由懒加载 ------ LazyLoad三、Hooks1. React Hooks是什么?2. 三个常用的Hook3. State Hook4. Effect Hook5. Ref Hook四、Fragment1. 使用五、Context1. 理解2. 使用3. 注意六、组件优化1. Component的问题2. 效率高的做法3. 原因4. 解决4.1 办法一：重写shouldComponentUpdate()方法4.2
2022-01-19 15:22:07
789
原创 React（8）—— Redux - 三大核心概念 - store - reducer - actionn - Redux调试工具 - React-redux - 纯函数 - 高阶函数
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录一、Redux的理解1. 相关文档2. Redux是什么?3. 什么情况下需要使用Redux?4. Redux的工作流程二、Redux的三大核心概念1. store2. reducer3. action三、API1. createStore（）2. store对象3. applyMiddleware（）4. combineReducer（）四、使用redux编写应用1. 效果2. 实现redux/store.jsredux/cou
2022-01-06 16:08:18
202
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人