H_carrot的博客

原创 react中使用innerHTML改如何使用

接收到一个字符串，希望在字符串中有链接的时候可以实现点击跳转的功能。，需要处理成浏览器可以识别的超链接，就需要用。1、首先识别到字符串中的链接转换成a标签。2、这时返回的文本依然是一个字符串。

原创 CSS选择除前两个和最后两个之外的所有子元素

【代码】CSS选择除前两个和最后两个之外的所有子元素。

原创 配置package.json 文件里的 resolutions 按需下载依赖包版本

配置package.json 文件里的 resolutions 按需下载依赖包版本

原创 react报错：Type ‘{}‘ is not assignable to type ‘ReactNode‘

react报错：Type '{}' is not assignable to type 'ReactNode'

原创 react 发送网络请求

react 发送网络请求：类组件 使用声明周期钩子函数 componentDidMount。函数组件使用hooks中useEffect

原创 css 遇到的问题

css 隐藏滚动条

原创 常用的正则

正则表达式

原创 数组方法 reduce from

1、将一个大数组分成多个两个元素的小数组：Array.from()实现：Array.from({ length: Math.floor(uniqueArr.length / 2) }, (_, i) => [ uniqueArr[i * 2], uniqueArr[i * 2 + 1], ]);Array.slice()实现：const sliceArray=[] for(let i=0; i<uniqueArr.length;

原创 npm i 报错“could not resolve dependency ..”

npm i 下载依赖包式报错问题是node 版本和 npm 版本不匹配可以通过以下链接查询，发现 node 的最新稳定版对应的 npm 版本并不是我最新升级的以往的版本 | Node.js下面补充两个命令：1、安装最新版npm$ npm i -g npm2、安装指定版本的 npm$ npm i -g [email protected]...

原创 js转换时分秒 不使用padStart把字符串前面补零

export const FormatDuration = (duration: number) => { const h = Math.floor(duration / 3600); const m = Math.floor((duration - 3600 * h) / 60); const s = Math.floor(duration % 60); let hStr = h.toString() let mStr = m.toString() ...

原创 git常用命令

1、拉取远程分支git checkout -b dev(本地分支名称) origin/develop(远程分支名称)git pull origin develop(远程分支名称)2、查看远程分支git branch -a3、删除远程分支git push origin --delete <branchName>4、删除本地分支git branch -d localBranchName5、创建分支git checkout -b feat-xx.

原创 Vuex持久化 插件 vuex-persistedstate

手动实现：1、调用接口获取token2、一式两份 vuex + localStorage3、vuex初始化的时候 优先从本地取 取不到才初始化为空 ( state:{ token:getToken() || ' ' })为什么采取这个方案？vuex ：基于内存的方案 存取速度特别快 基于vuex模式使用方便，缺点：刷新丢失ls: 基于磁盘的方案 存取速度慢 没有vuex方便， 优势：刷新不丢失场景：token 想要vuex存取速度快和vue配合灵活 还想要刷新不丢失 +ls.

原创 axios的使用

1、 axios基本使用axios基于原生ajax+Promise技术封装通用于前后端的请求库官网：[axios文档]http://www.axios-js.com安装：npm install axios引入axios：import axios from 'axios'axios({ method: '请求方式', url: '请求地址', data: { // 拼接到请求体的参数, post请求的参数 }, params: { // 拼接到请求行的参数,

原创 自定义Vue指令 创建全局自定义指令

原创 平铺的数组转成树状数据

filter 方法<script> const data = [ {id:"01", name: "张大大", pid:"", job: "项目经理"}, {id:"02", name: "小亮", pid:"01", job: "产品leader"}, {id:"07", name: "小丽", pid:"02", job: "产品经理"}, {id:"08", name: "大光", pid:"02", job: "产品经理"}, {id:

原创 跨域总结-整理

1、什么是跨域端口、域名、协议有一个不一样就是跨域前端项目地址和接口地址2、什么是同源策略端口、域名、协议都一样，就是同源3、跨域产生的原因浏览器的同源策略+AJAX请求4、跨域的解决方案JSONPCORS代理转发5、代理转发原理服务器与服务器之间不存在跨域在前端项目和目标服务器架设一个中间服务器前端项目需要和中间服务器同源6、proxy配置方案在vue.config.js配置文件中，有一项是devServer// vu.

原创 vue生命周期 钩子函数

vue实例的生命周期：从创建到销毁的整个过程1、钩子函数vue框架内置函数，随着组件的生命周期阶段，自动执行使用钩子函数 可以知道vue生命周期到达了什么阶段作用：在特定的时间点执行特定的操作分类：4大阶段8个方法（面试题）2、初始化阶段1、new Vue()-vue实例化(组件也是一个小vue实例)2、Init Events &Lifecycle-初始化事件和生命周期函数3、beforeCreate(初始化data/methods之前)-生命周期钩子函数执行

原创 vue-点击高亮

做法：用一个动态类名，定义一个变量保存当前应该高亮的标记（下标，字母，数字都可），点击那个就把那个的标记（值）传给变量，变量与标记相等就是true 此时这个动态类名就可用了

原创 搜索输入框防抖 、关键字高亮、去重

1、输入框防抖节流 data () { return { kw: '', // 搜索关键字 timer: null, // 定时器 suggesList: [], // 联想菜单 history: JSON.parse(localStorage.getItem('history')) || [] // 历史记录 } },inputFn () { clearTimeout(this.timer) // 防抖节流 清除之

原创 自定义 vue 指令：搜索框自动聚焦

全局注册指令方法： 文件路径：./utils/directivevue.directive(‘自定义名’,{inserted(el){ // el是原生的div标签el.querySelector('input').focus//标签选择器// 往里获取到input// JS触发标签事件, 直接.事件名() el.querySelector('input').focus()}})在mian.js 中引入，全局使用import diretvieObj from...

原创 vue组件 与 vuex 5个配置项的关系

配置项 含义 注意 state 单一状态树 类似data mutations 数据管家(同步) 唯一修改state地方 actions 异步请求 要改state需要提交给mutations getters vuex计算属性 类似computed modules 模块拆分 ...

原创 this 指向

构造函数里面的this指向当前实例对象方法里面的this指向调用者函数中this,指向调用者，谁调用指向谁普通函数中，this指向window,相当window调用的这个函数一、普通函数普通函数的this指向window方法里面的this指向调用者构造函数的this指向当前实例对象事件处理函数内的this指向事件源定时器内的函数指向调用者 window匿名自执行函数的this 指向调用者一般函数中的this指向调用者二、箭头函数箭头函数里面的this是上级

原创 Vue 常用指令

目录1、Vue指令-v-bind动态属性2、Vue指令-v-on事件绑定3、Vue指令-v-on事件对象4、Vue指令-v-on修饰符5、Vue指令-v-on按键修饰符6、Vue指令-v-model双向绑定17、Vue指令-v-model双向绑定28、Vue指令-v-model修饰符9、Vue指令-v-html10、Vue指令-v-show和v-if11、Vue指令-v-for1、Vue指令-v-bind动态属性 语法：v-bind:属性名="vue变量

原创 Node.js中 express第三方模块 的 中间件特性

对于node.js来说，Express 是一个第三方模块，有丰富的 API 支持，强大而灵活的**中间件**特性

原创 Nodejs 利用 express 第三方模块 获取接口参数

Express 是一个基于 Node.js 平台，快速、开放、极简的 web 开发框架Expresss 是一个第三方模块（在npm上可以下载），在使用它之前要先去下载它，在下载包之前要先创建项目，并通过npm init 创建package.json文件。一、get接口参数 req.query属性express框架会自动收集get方式从url地址中传递的查询字符串参数，并自动保存在req对象的query属性中。我们直接来获取即可。const express = require('expre.

原创 数组常用方法整理

1、arr.push ()往数组最后的位置追加元素，并返回新数组的长度2、arr.unshift()数组最前面追加，返回新数组的长度3、arr.pop( )删除数组中最后一个元素，并返回该元素的值4、arr.shift( )删除数组中第一个元素，并返回该元素的值5、arr.splice(起始位置，删除的个数)如果省略删除个数默认从指定的起始位置删除直到最后6、concat()连接多个数组成为新数组7、reverse()反转数组顺序返

原创 nodejs写一个GET类型的接口

要求： http://你的ip地址:8089/someword 返回值： 50%的可能成功返回‘请求成功’ 50%的可能成功返回‘系统故障’ 如果url地址和请求方式正确，就读取数据我们可以定义一个随机数，因为随机数的取值范围是0-1，所以50%可能大于0.5，50%可能小于0.5，当大于0.5时，请求成功获取data数据，否则返回系统故障。//写一个get类型的接口//50%的可能成功返回‘请求成功’//50%的可能成功返回‘系统故障’//1、加载模块

原创 服务器统一处理静态资源

//统一处理静态资源//1、加载模块const http = require('http')const fs = require('fs')const path=require('path')//策略模式const obj = { '.html': 'text/html;charset=utf8', '.jpg': 'image/jpg', ".png":"image/png", '.css': 'text/css;charset=utf8', '..

原创 包的分类与安装

nodejs中需要先下载，后使用的第三方模块，都叫做包包分为全局包和项目包一、全局包下载全局包命令：npm install 包名 -g 或 npm install -g 包名全局包安装位置：npm root -g一般安装在系统盘的node_modules（名字固定）中二、项目包项目包分为：开发依赖包、生产依赖包1、下载开发依赖包 :npm install 包名 --save-dev 或npm install -D 包名。2、下载生产依赖包：npm install 包名...

原创 nodemon 自动检测到代码的修改并自动重新运行

我们每次修改了代码，要想代码生效都需要运行。这有点麻烦哈。有没有一个工具会自动检测到我们的修改并自动重新运行我们的代码呢？有，它叫nodemon。地址安装在任意位置 打开一个小黑窗，输入如下命令npm install -g nodemon此操作需要联网，根据网络速度所耗时间不同。如果这个命令执行完成并没有报错，就是说明安装成功了。对上面的命令说明如下： npm是一个工具，用来管理node代码中要使用的第三方模块。它是随着node的安装而自动安装的：如果你安装node

原创 i5ting_toc 将MD转换为HTML简单使用

MD只要标题层级正确，转成 PDF 时，就会自动生成目录，方便我们阅读。全局安装npm install -g i5ting_toc使用方法切换到你想要转换的md文件根目录下，使用以下命令， -f 参数后面跟着文件名，如果没有填写，默认使用README.mdi5ting_toc -f sample.md -o //(o==open -o可不写)常见的命令参数如下：-h, –help output usage information-V, –version output .

原创 nodejs中fs模块练习

练习：整理数据，将a.txt的内容，转成b.json的内容a.txt内容小王,19小李,20小陈,21b.json内容{ "list":[ {"name":"小王","age":19}, {"name":"小李","age":20}, {"name":"小陈","age":21} ], "average":20, "total":3}js 整理数据// 整理数据，将a.txt的内容，转成b.json...

原创 常用终端命令、电脑快捷键、vscode快捷键、字符串操作的API

一、常用终端命令1、清屏：cls2、进入根目录：cd\3、进入上一级目录：cd..4、进入指定目录：cd目录名9、5、调用node程序:node js文件名6、停止node程序：ctrl+c7、自动补全路径/文件名：tab8、调出历史命令：↑↓按钮9、查看ip地址：ipconfig10、删除文件：del文件名二、常用快捷键1、ctrl+shift +n 快速创建文件夹2、WIN+D显示桌面3、WIN+M最小化所有窗口4、Alt+F4关闭当前窗口或退