- 博客(42)
- 收藏
- 关注
RSS订阅原创 对青蛙跳台阶算法题延伸的思考（斐波那契数列）
我们同样可推断(4) = f(3) + f(2) + f(1) + 1, 而此处的f(3), f(2), f(1) 是继承与m = 3 时推断出的已知数，所以我们可以知道如果要算青蛙可以跳1到 m步，需要先得到已知数列[f(m),f(m-1),f(m-2), …时，代表同样有m个值相加，但是是从f(n - m)位开始的，即 f(n) = f(n - 1) + f(n - 2) + f(n -3) + …,且 f(1) = 1, f(2) = 2，我们在后续的编码中需要记录到f(3)-f(m)所有的值。
2024-03-25 18:44:59
1022
原创 Koa数据验证和JWT实现
的中间件去对数据进行格式验证处理，在koa 中我们可以使用。，其实这个无关框架，在express 中也是可以用的。尝试使用他来写一个 注册数据验证的中间件。在express 中可以使用。在登陆时创建token。
2024-03-25 15:25:14
293
原创 如何实现一个自己的脚手架工具
在项目文件夹中创建一个bin文件夹，再去npm init初始化项目，生成的package.json 里面就有一个bin的选项参数指定了命令和执行文件路径"bin": {"mycli";},执行npm link挂载到了全局命令中bin/cli.js在文件首行加上这句，意思让这个环境变量下的node去执行相关代码。
2024-03-25 15:18:47
200
原创 express使用总结，中间件示例
/ 获得数据的content-type， content-length res . setHeader('content-type' , response . headers [ 'content-type' ]);} }
2023-03-03 11:04:59
446
原创 JWT -- 在express 项目中的处理
cotroller/userController.js 在登陆接口控制器中生成token 并返回给客户端。可以使用UUID Generator vscode 插件 为其生成加入一段不规则随机字符串。router/user.js 在接口路由中以中间件的形式去使用验证token。使用 jsonwebtoken JWT 插件。
2023-03-03 10:48:52
122
原创 MongoDB 使用
MongoDB 的文档不需要设置相同的字段，并且相同的字段不需要相同的数据类型，这与关系型数据库有很大的区别，也是 MongoDB 非常突出的特点。集合存在于数据库中，集合没有固定的结构，这意味着你在对集合可以插入不同格式和类型的数据，但通常情况下我们插入集合的数据都会有一定的关联性。MongoDB的单个实例可以容纳多个独立的数据库，每一个都有自己的集合和权限，不同的数据库也放置在不同的文件中。MongoDB 是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。
2023-03-02 16:25:26
92
原创 如何实现一个自己的脚手架工具
在项目文件夹中创建一个bin文件夹，再去npm init 初始化项目，生成的package.json 里面就有一个bin的选项参数指定了命令和执行文件路径"bin" : {"mycli";执行npm link挂载到了全局命令中bin/cli.js在文件首行加上这句，意思让这个环境变量下的node去执行相关代码。
2023-03-01 18:43:52
53
原创 el-tree 半选处理
有参考过其他人的方案：elementui tree设置节点半选解决方案是使用的组件内置方法实现的，可能我是使用的element-plus 的缘故 使用其方案并未其效果，就从数据上入手了：tree组件在获取完数据进行页面回显时，因为获取的数据中包含父节点的关系，把不该选中的子节点也全部勾上了 const getList = () => { getRoleDetail({ id: route.query.id || '' }).then(async (res) => {
2021-07-15 09:53:34
1536
原创 el-select 可过滤状态点击最右arrow icon可收起
el-select 可过滤状态点击最右arrow icon可收起公司测试又在折磨人，el-select组件在设置了filterable 属性的情况下点击右边的icon位置，下拉是收不回来的，只能点击可输入框和组件外其他区域才可以，bug就来了单纯只是filterable 很好解决，直接css：/*** 下拉框图标点击可收起*/.el-select{ .el-input__inner{ position: relative; z-index: 10; backgroun
2021-07-14 18:01:33
882
原创 列表页缓存解决方案（keep-alive）Vue3.x
列表页缓存解决方案（keep-alive）Vue3.x列表页切换详情，切回后要保持列表页切换前的状态是十分常见的需求，以下是我在项目中使用的处理方案，代码贴上，路过大佬望指教：常规操作，router-view 上配置 keep-alive:我将需要缓存的放到了vuex中 <router-view v-slot="{ Component }" :key="key"> <transition name="move" mode="out-in"> <
2021-07-14 17:29:12
979
原创 webpack 小记（4.x）
load 和plugin区别：loader： 一种作用于webpack不同的打包方案(文件预处理器)plugin： 可以在webpack运行到某一时刻的时候帮你做一些事十分常用的配置项：url-loader 和 file-loader 的区别打包静态文件的时候会用到这俩loader（图片，xls等），file-loader只是单纯将文件拿到打包后路径，url-loader还可以配置是否转为base64内联到页面中，以及其他配置，url-loader 功能更强大postcss-loader：自动
2021-06-11 16:03:39
136
1
原创 react原理解析
这里写目录标题函数式编程vdom 和diffjsx本质合成事件为什么要合成事件机制setState batchUpdate多次的修改state的时候,有时合并(对象形式),有时不合并(函数形式)在setState的时候,改变state有时异步(普通使用),有时同步(setTimeout,DOM事件)setState 主流程batchUpdate机制transation (事务)机制组件渲染过程jsx如何渲染为页面setState之后如何更新页面fiber如何进行优化性能函数式编程一种编程范式,概念比较
2021-02-28 20:36:11
2070
原创 vue2.x的data响应式原理
proxy 兼容性不好，且无法polyfill ，vue2.x还会存在一段时间vue2.x data响应式原理监听对象，监听数组，复杂对象，深度监听基础API object.definePropertydefineProperty的几个缺点vue怎么监听数组监听对象，监听数组，复杂对象，深度监听基础API object.definePropertyfunction defineReactive(target,key,value){ //深度监听 observer(value) //核.
2021-01-10 22:38:21
195
原创 react hooks （含router+store 全家桶！）
HOOK函数式组件的性能会更好，函数式组件没有this指向的问题，react在16.8以后推出了hook，解决了函数式组件无state和生命周期，ref的问题render使用高阶函数会使得组件有很多层的多余嵌套，HOOK中的render可以解决这个问题：App.js<Wrap render={()=>{ return ( <mark>test</mark> )}}>Wrap组件render(){ return th
2020-11-16 16:56:19
1075
原创 react-router基本使用笔记
是第三方开发的路由react-router官方文档react-router react-router-dom 这个会依赖上面的包，所以直接安装这个就好了router 三种渲染方式BrowserRouter是路由的根组件，只能接收一个子元素，定义了路由作用的范围import {BrowserRouter/*history模式*/,Route/*一个路由的配置项*/} from ' react-router-dom'···<BrowserRouter> /*Browser
2020-11-16 16:50:06
105
原创 vue2.x使用总结（扩展部分）
文章目录创建组件的方式动态组件组件分类组件对外API组件通信mixinsprovide / injectextend构造器$mount手动挂载递归组件render函数jsxfunctional rendererrorCaptured 异常捕获创建组件的方式//1.全局组件Vue.component('组件名', { name components directives filters mixins template props data computed wa
2020-11-16 16:44:43
124
原创 vue2.x vnode编译过程
vnode是vue中的虚拟dom节点对象什么是虚拟dom节点：不是真实的dom节点，是js对象。template：<div id="app"> <p>{{message}}</p> <button @click="btnAction">按钮</button></div>1.第一渲染，需要根据template中的模版，渲染出来初始的dom结构<div id="app"> <p>hello
2020-11-16 16:39:26
141
原创 vue-router使用总结
路由 router基础写法路由嵌套路由正向传参编程式导航命名路由路由别名，重定向命名视图路由守卫基础写法将router的配置分离出去router.js定义路由表const routes = [ // 一个对象，就是一个路由表配置项 // 必须配置的是path，component { // 当地址栏地址变化为/home时，就加载Home组件，放置在router-view中 path: '/home', //按需加载 component: ()=>im
2020-11-16 16:32:08
65
原创 移动web开发基础知识（rem布局）
文章目录分辨率 移动端使用的效果图分辨率1334*750物理像素(physical pixel)/设备像素(dp:device pixel)css像素/逻辑像素设备像素比(dpr)：物理像素/css像素 越大越精细标清屏dpr:1和高清屏dpr>=2 retina缩放：缩放改变的是css像素的大小ppi/dpi：每英寸的物理像素点 (pixels per inch/dots per inch)视口viewportjs获得屏幕宽移动端单位window.devicePixelRatio分
2020-11-16 16:21:55
99
原创 浅谈webpack的使用
文章目录webpack模式(mode)入口(entry)输出(output)管理输出开发环境source map使用 watch mode(观察模式)使用 webpack-dev-server使用 webpack-dev-middleware热更新插件loader加载 CSS加载 images 图像加载 fonts 字体加载数据插件(plugin)浏览器兼容性(browser compatibility)webpack本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。
2020-11-16 16:09:29
100
原创 react入门
react组件组件的两种实现模式：1.函数式组件（相比较函数式性能会更好）import React from 'react'export default ()=>{ return ( <div id="app"> <h1>hello world</h1> </div> )}2.class组件// react组件（class组件）import React, {Component} from 'reac
2020-11-16 15:19:31
149
原创 自定义v-model 2.x vs 3.0
关于v-model指令的一个小记，由于新出的vue3 对它做了一个很好的改进，所以值得记录一下先看下v-model实现方式当在原生组件中使用： <input v-model="val" /> //相当于做了以下 <input :value="val" @input="val=$event.target.value">当在自定义组件上使用时： <my-component v-model="val"></my-component>
2020-11-15 23:55:04
104
原创 使用vue3 hook 完成一个点击元素外区域元素隐藏功能附加vue2自定义指令实现方式
一般这样的功能在一个项目中很多地方需要用到vue3可以将功能代码单独提出来import { ref, onMounted, onUnmounted, Ref } from 'vue'const useClickOutside = (elementRef: Ref<null | HTMLElement>) => { const isClickOutside = ref(false) const handler = (e: MouseEvent) => { if
2020-11-13 18:30:31
1381
4
原创 vue3.0使用笔记（基础）
vue3.0基本使用ref语法Reactive 函数生命周期侦测变化 - watchdefineComponent 包裹组件Teleport 瞬间移动spense - 异步请求好帮手第二部分ref语法<template> <h1>{{count}}</h1> <h1>{{double}}</h1> <button @click="increase">+1</button></template>
2020-11-13 15:22:18
368
原创 TS泛型使用笔记Generics
泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。
2020-11-12 11:14:40
792
原创 vue2.x使用总结（可复用性篇）
使用发布订阅模式自己写发布订阅模式代码使用发布订阅模式来处理非父子组件之间的通信vue中的发布订阅main.jsVue.prototype.$center = new Vue();one.vuemethods: { addAction(){ // 派发事件 // Bus.$emit('send', this.value); this.$center.$emit('send', this.value); this.value = '';
2020-11-12 11:06:25
232
2
原创 vue2.x使用总结（组件篇）
template 标签开发时需要有个大标签包裹，但是又不希望存在dom中，这时候可以使用template标签，只识别指令，不作用在dom中。可以跟v-if, v-for使用，但是不能和v-show使用，无效的按键修饰符<input type="text" @keyup.ctrl.c="handleAction"/>组合键的使用.c ,.enter,.tab...系统修饰符…组件先声明组件参数1:组件的名字参数2:组件的配置项，必须写template，定义组件的dom
2020-11-12 10:49:24
275
原创 Fetch的使用以及在项目中对其进行二次封装成Class
Fetch 是前端提供的别一种请求方式，和ajax是两回事window.fetch polyfillwhatwg-fetch //做fetch的兼容，如果浏览器兼容fetch这个插件就不作用，如果不兼容就会调用这个方法fetch是浏览器本身有的不需要去安装引入import 'whatwg-fetch'fetch();Fetch 的使用get请求/ get请求window.fe...
2020-02-21 11:21:23
273
原创 混合开发webviewjavascriptbridge插件实现web与原生的交互
使用插件实现web，ios，android 进行交互插件 webviewjavascriptbridge 此插件分为两种 一个是ios 一个是android原生向bridge注册事件，web这边去调用，复制插件的一段代码放在index.html中function setupWebViewJavascriptBridge(callback) { if (window.WebViewJavas...
2020-02-21 11:09:14
336
原创 react-router缓存路由（源代码修改）
一般情况下，进入项目之后，根页面都需要进行缓存处理我们需要修改react-router源代码来实现这个功能在github该路劲下找到其源代码在项目中自定义文件cacheRenderRoutes.js修改源码至：import React from "react";import {CacheRoute, CacheSwitch} from 'react-router-cache-rou...
2020-02-21 10:58:40
763
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人