鱼与前端🐟

前言mini-Vue 是精简版本的 Vue3，包含了 vue3 源码中的核心内容，附加上 demo 的具体实现。本篇是 reactive 篇，是关于 Vue3 中响应式的篇章，包含了reactive,ref,computed的实现 项目构建项目使用 webpack 构建，demo 的代码放在index.js之中，将其打包成为mini-vue.js,之后index.html引入，控制台查看 demo 输出。 reactiveVue3 中的reactive用于处理对象数据，将引用类型的数据转化为响应式。其实它是由两个部分组成的，见例子。我们知道它由 reactive 和 effect 组成 123456const observed = reactive({ count: 0,});effect(() => { console.log("observed.count is:", observed.count);}); 我们把这个 effect 叫做副作用函数，副作用函数的执行会影响其他变量或者函数的执行。这里它是作用是 ...

前言Mongoose 是 MongoDB 的一个对象模型工具，是基于 node-mongodb-native 开发的 MongoDB nodejs 驱动，可以在异步的环境下执行。同时它也是针对 MongoDB 操作的一个对象模型库，封装了MongoDB 对文档的的一些增删改查等常用方法，让 NodeJS 操作 Mongodb 数据库变得更加灵活简单。记录使用MongoDB非关系型数据库时，使用Express+Mongoose的操作。 项目依赖初始化项目之后复制如下到package.json安装即可123456"dependencies": { "body-parser": "^1.20.0", "cors": "^2.8.5", "express": "^4.18.1", "mongoose": "^6.3.4"} express模板由于只是演示操作，下列全部都写在了app.js ...

前言介绍http1.0-3.0的版本优缺点 Http1.0http1.0之前还有别的版本吗？答:http0.9 特点： 可以传输任何格式的内容 0.9只能文本 引入了POST和HEAD 0.9只有GET 每次通信都得携带头信息 0.9没有标记信息的手段 增加了响应状态码 缓存的标准是Expires和If-Modified-Since 缺点： 不支持断点续传 没有传递主机名hostname 没有解决的问题服务器发送完响应就关闭了TCP连接。 http连接是在TCP连接里面的，如果这样做，后面再次请求，就要重新建立连接，然鹅我们知道TCP三次握手的成本是比较高的 1.0缓解的方法： 1.0可以使用headers发送信息，其中Connection：keep-alive，就能告诉服务器，客户端后面可能还会请求，先不要关闭TCP连接，从而达到了类似于TCP复用的目的。 为什么说是缓解的方法呢？因为这个头部字段不是标准的，不同的实现可能导致表现得不一致，因此不能从根本上解决这个问题。 Http1.1解决了上个版本的问题： 引入长连接，默认TCP不关闭，可以被多个请求复用 支持断点续传 ...

前言本文记录node使用express-jwt校验token以及前端发送token的全过程 什么是Token?什么是JWT?Token产生原因:常规模式的session存放用户登录态导致服务器压力大,服务器多的时候,需要同步session,于是诞生了token,存到客户端,由服务端被动验证 缺点: 被动验证,导致收回权限稍微困难. 每次请求都要携带,增加性能开销 JWT: Json Web Token,一种token的验证方式,本质上是带有前面的json数据. JWT由三部分组成: Header:描述JWT的元数据,定义了生成签名的算法以及Token的类型 Payload:用于存放实际需要传递的数据 Signature:签名,服务器通过Payload、Header和一个密钥(secret)使用 Header 里面指定的签名算法（默认是 HMAC SHA256）生成。 后端职责使用md5对密码进行加盐加密放入数据库,使用jwt在合适的时机发放token以及token的校验,模块化以及代码复用. 后端项目目录vscode的project-tree插件生成 1234567891 ...

前言本篇文章讲述如何编写高效美丽的JavaScript代码，让你在开发中有更多的选择而不是停留在基础编码环节。 纯函数纯函数指的是在给定相同输入的情况下始终返回相同输出的函数。除了他提供的输入以外，他不依赖于任何外部变量，也不更改任何外部变量。拥有纯函数使得测试更加容易，因为可以随时模拟并测试输入的值,如下： 1234function plusAbc(a, b, c) {  // 这个函数的输出将变化无常，因为api返回的值一旦改变，同样输入函数的a，b,c的值，但函数返回的结果却不一定相同。  var c = fetch('../api');  return a+b+c;} 虽然上面的代码看起来很合理，但是该函数本身依赖一个外部变量，所以如果这个变量他被修改，就会有不同的输出，在我们排查错误的时候就比较不方便。如果写了纯函数，确保他没有引入和修改外部的变量，那么就能降低错误的发生。下面是经过改造后的代码 123function plusAbc(a, b, c) { // 同样输入函数的a，b,c的值，但函数返回的结果永远相同。 ...

前言在上一篇基操篇我们讲述了BST的判断合法性和增删改查，下面来学习BST的构造，读完本文你对下面的题目会有更深入的了解。 Leetcode96.不同的二叉搜索树95.不同的二叉搜索树 II 不同的二叉搜索树 这是一道穷举的题目，首先我们做个例子:比如输入n=3，那么就有以下几个情况 这个是一个正宗的穷举问题，那么有什么方法可以正确的穷举BST的数量呢？ 再看一个例子 比如给算法输入n=5也就是要求他从1,2,3,4,5里面找数字构成BST 显然会有五种情况，因为每个数字都可以作为根节点，那么我们固定3为根节点，看到底能构成多少个BST 因为BST左小右大的性质，很明显3为根节点的时候，左子树节点就是1,2右子树节点就是4,5 那么左子树的组合数和右子树的组合数的乘积就是3作为根节点的时候的BST个数 在代码方面，其实我们只需要递归就可以了123456789101112131415// 计算闭区间[1,n]组成的BST数量const numTree = n=>{ return count(1,n); const count = (start,end)=> ...

前言在前面的文章我们学习了BST二叉搜索树的性质，以及结合中序遍历的性质，可以实现树的升序和降序，以及累加树的操作。下面这篇文章深入讲解BST的性质，判断BST的合法性，增删改查，读完本文你对下面的算法题会有更深入的了解 Leetcode450.删除二叉搜索树的节点701.二叉搜索树中的插入操作700.二叉搜索树中的搜索98.验证二叉搜索树 BST简介所谓的二叉搜索树，就是左小右大的二叉树。利用他的性质，我们可以做到类似二分搜索的操作，搜索一个元素的效率很高， 对于BST相关的问题，我们经常会看到以下代码逻辑1234567891011const BST = (root,target)=>{ if(root.val===target){ //do something... } if(root.val<target){ BST(root.right,target); } if(root.val>target){ BST(root.left ...

前言如今已经是vue3+ts的时代，但对于我们的状态管理工具vuex来说，他也是存在一定的缺陷的，下文讲解pinia的由来和基础的用法，用于构建个人的轻量级项目。 Pinia大菠萝pinia是新的一门状态管理工具，他是vue官方推荐的替代vuex的产品。特点如下： 拥有完整的ts支持，这点和vuex比起来更舒适。 更小的体积(约1kb) 没有muatation，只有action store可以直接使用，不需要辅助函数 pinia为什么体积小于vuex这得从它们两者的代码分割机制来讲： 举个例子：某项目有3个store「user、job、pay」，另外有2个路由页面「首页、个人中心页」，首页用到job store，个人中心页用到了user store，分别用Pinia和Vuex对其状态管理。 先看Vuex的代码分割： 打包时，vuex会把3个store合并打包，当首页用到Vuex时，这个包会引入到首页一起打包，最后输出1个js chunk。这样的问题是，其实首页只需要其中1个store，但其他2个无关的store也被打包进来，造成资源浪费。 Pinia的代码分割： 打包时 ...

前言在前面的文章我们学习了寻找一颗二叉树的重复子树，这个问题结合了第四章节的序列化内容加第三章节的构造内容，接下来我们学习二叉搜索树的知识，读完本文你对以下的题目有更深刻的了解： Leetcode230.二叉树中的第k小元素538.把二叉搜索树转为累加树1038.把二叉搜索树转为累加树 Binary Search Tree全称二叉搜索树，简写BST，特性如下： BST的每个节点，左子树节点的值都比他小，右子树节点的值都比他大。 对于BST的每一个节点，他的左侧子树和右侧子树都是BST labuladong原话：二叉搜索树并不算复杂，但我觉得它可以算是数据结构领域的半壁江山，直接基于 BST 的数据结构有 AVL 树，红黑树等等，拥有了自平衡性质，可以提供 logN 级别的增删查改效率；还有 B+ 树，线段树等结构都是基于 BST 的思想来设计的。 从算法题的角度来讲，中序遍历一个BST，是升序的，因为他先构造了左子树再构造右子树，所以如果是以一个数组的形式显示，就是从小到大的。 寻找第 K 小的元素按照上面的思路，我们只要中序遍历这个二叉树然后找第k个就行了 12345678 ...

前言根据这五篇的二叉树学习，你将从一个只会根左右，左根右和左右根的算法小白中领略二叉树的核心算法。 传送门手把手二叉树笔记①—纲领篇手把手二叉树笔记②—思路篇手把手二叉树笔记③—构造篇手把手二叉树笔记④—序列化篇手把手二叉树笔记⑤—后序篇