barnett_y-CSDN博客

转载速通关koa2全栈核心内容

随着Node.js的横空处世，本来目的是解决部分后端的问题，谁知道却无意间给前端开发带来了一场颠覆性的革命，从此前端拉开了现代化开发的序幕。如今，作为前端开发，无论是想进阶或是拓宽个人知识边界，node.js早已是前端必须掌握的了。拿下node.js，你还在犹豫什么？Koa.js是基于node.js的一个开发框架，小巧灵活，对于一些中小型项目开发还是比较友好的。Koa上手简单，因此成为了不少小伙伴上手node开发的选择之一。本文主要从以下几个方面讲解koa后端开发最核心的部分内容，让人人都是全栈小能手：

2022-04-02 11:44:23 500

转载 50 多个提高前端人效率的工具、网站和书籍整理

本文包含了在线编译，在线编辑、实用工具、可视化工具、各种前端电子书等50多个网站，快放到你的收藏夹吃灰吧如果你看到最后了，记得给我一个免费的赞哦在线编译（编辑）、playgroundJS 代码混淆www.jsfuck.com/嗯，优点是你可以用来给你的前端工程师好友搞恶作剧，缺点是只能用一次SCSS 转 CSS 在线编译www.sassmeister.com/有时候写一些比较复杂的 SCSS 逻辑时，遇到不生效的问题，可能需要看一下编译出来的 CSS 代码是什么样的，

2022-04-02 10:42:12 434 1

转载必须推荐的Curl工具使用指南

curl是一个命令行工具，用于发送客户端请求。发送客户端请求大家常用的可能是类似postman等工具，但是为什么要使用curl呢？curl等最大优势在于随时随手可以发送，非常方便。比如很多场景下我们只是想快速验证一个请求或接口：# 直接在命令行发送一个GET请求curl https://xxx.com/api/v1/xxx# 发送POST请求curl -X POST -d "k1=123&k2=456" https://xxx.com/api/v1/xxx复制代码curl安装

2022-04-02 10:36:11 2346

转载 Javascript常用API合集

常用API合集一、节点1.1 节点属性Node.nodeName //返回节点名称，只读Node.nodeType //返回节点类型的常数值，只读Node.nodeValue //返回Text或Comment节点的文本值，只读Node.textContent //返回当前节点和它的所有后代节点的文本内容，可读写Node.baseURI //返回当前网页的绝对路径Node.ownerDocument //返回当前节点所在的顶层文档对象，即documentNode

2022-04-01 20:32:42 4689

转载前端常用60余种工具方法

1.邮箱export const isEmail = (s) => { return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)}2.手机号码export const isMobile = (s) => { return /^1[0-9]{10}$/.test(s)}3.电话号码export const isPhone = (s) => {

2022-04-01 20:27:29 317

原创 React.memo第二个参数作用

使用 React.memoReact.memo 是 React 16.6 新的一个 API，用来缓存组件的渲染，避免不必要的更新，其实也是一个高阶组件，与 PureComponent 十分类似，但不同的是， React.memo 只能用于函数组件。基本用法import { memo } from 'react';function Button(props) { // Component code}export default memo(Button);高级用法默认情...

2022-03-30 15:16:31 2022

原创使用React Hooks模拟生命周期

前言在 React 16.8 之前，函数组件只能是无状态组件，也不能访问 react 生命周期。hook 做为 react 新增特性，可以让我们在不编写 class 的情况下使用 state 以及其他的 react 特性，例如生命周期。接下来我们便举例说明如何使用 hooks 来模拟比较常见的 class 组件生命周期。constructorclass 组件class Example extends Component { constructor() { sup

2022-03-30 09:33:54 6503

原创 axios如何取消接口请求

vue项目，如何在axios中取消已经发送的请求呢？原生js的abort()这个方法<div class="page" id="app"> <button class="getData">获取数据</button> <button class="cancel">取消获取</button> </div><script> var currentAjax = null $('..

2022-03-27 09:38:10 2355

原创 error： Property ‘setState‘ does not exist on type ‘Home‘

问题描述：我在react中用typescript时，定义一个Home组件，然后在组件里用setState时会有这样一个报错：（如图）Property 'setState' does not exist on type 'Home'分析解决：　　报错说我的Home组件上不存在setState属性，但是我把文件的后缀名从‘.tsx’改成‘.jsx’就不报这个错了，推断是typescript的类型检查报的这个错，识别不了react组件就不认为这个class函数上有setState属性。安装一下re

2022-03-26 18:31:18 932

原创 worker和sharedworker

1、介绍h5的新功能，主要作用，开辟新线程，充分利用计算机算力，防止“假死”（单线程，js引擎和UI线程互斥）worker：专属线程，只针对当前运行环境sharedWorker：共享线程，同源策略下，多个运行环境共用同一个线程，包括数据。2、worker使用1、查看文档阮一峰worker网络日子2、线程js文件self.addEventListener('message', function (event) { setTimeout(() =&.

2022-03-24 08:58:52 1308

原创实现多个标签页之间通信的sharedworker

SharedWorker SharedWorker接口代表一种特定类型的 worker，可以从几个浏览上下文中访问，例如几个窗口、iframe 或其他 worker。它们实现一个不同于普通worker 的接口，具有不同的全局作用域, 首先在服务器上要有一个js，处理需要通信的数据。比如一个worker.jslet data = ''onconnect = function (e) { let port = e.ports[0] port.onmessage = fu...

2022-03-24 08:51:40 431

原创多个tab页如何共享websocket

假设你正在做一个在线的IM系统，如何在多个tab页之间，共享一个websocket实例呢？当时遇到这个问题，第一感觉是懵逼。我的知识储备告诉我，多个tab页面之间，是不能共享websocket实例的。挠破头皮想到了两个方案在用户打开多个tab页面时，新的页面中，不建立websocket连接。然后多tab页之间进行消息通讯。这个方案会带来这么几个问题多tab之间如何通讯怎么判断打开的是不是第一个需要建立连接的页面如果关闭了第一个页面，那么之后的消息怎么处理在两个页.

2022-03-24 08:47:00 5894

原创 react 判断是否登录，路由进行重定向

判断用户是否登录，从而进行路由的重定向。创建文件 “./component/AuthRoute/index.js” 导入import React, {useContext, createContext, useState} from "react";import { BrowserRouter as Router, Switch, Route, Link, //Redirect重定向组件 Redirect, useHistory,

2022-03-20 12:19:08 2052

原创 React进入项目，判断是否登录

1、封装一个AuthRouterimport React from 'react';import { Route, Redirect } from 'react-router-dom'; const DATA = { user: Storage.getStore('user') } const AuthRouter = (props) => { const { component: Component, needLogin } = props; if

2022-03-20 11:39:21 767

原创 js 树查找

const cityData = [ { id: 'axzx', name: '广东省', children: [ { id: 'sdsd', name: '深圳市', children: [ { id: '45dss', name: '南山区' }, { id: 'sdsd11',.

2022-03-17 15:28:39 685

原创 Mac for nvm安装及使用教程

nvm 是Node.js 的版本管理工具，可以在同一台电脑上安装多个Node.js版本灵活切换。安装#sudo curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash其中0.39.0可以替换为当前最新的版本号。配置环境变量# cd ~ touch .bash_profile 使用vim 或者记事本打开.bash_profile文件然后添加如下代码..

2022-03-10 10:03:25 1216 1

原创 iTerm2配色教程

先展示iterm2改装后对效果图（几百种方案可选）：网上虽然教程很多，但是很多还是不够详细，本文总结一篇比较容易安装的图文教程，帮助大家配置个人对iterm+oh-my-zsh 效果图，很帅气有木有一、首先安装iTem2安装好后的截图如下：可以直接去官网下载：www.iterm2.com/安装完成后，在/bin目录下会多出一个zsh的文件。Mac系统默认使用dash作为终端，可以使用命令修改默认使用zsh：chsh -s /bin/zsh复制代码如果想

2022-03-10 09:46:05 6573

原创使用cross-env添加环境变量

什么是process.env.NODE_ENVprocess.env.NODE_ENV应该是我们最熟悉的环境变量了，它经常出现在使用框架或者类库的时候，被用来区分不同的环境（开发，测试，生产等），以便我们进行相对应的项目配置，比如是否开启sourceMap，api地址切换等。那为什么process.env.NODE_ENV能用来区分环境呢？它是如何来的？先来看一下process和process.env的官方解释：processprocess 对象是一个 global （全局变量），提供有关信息

2022-03-06 09:13:15 7619

转载前端低代码调研与总结

近些年来，低代码的概念逐渐流行了起来，而低代码产品也越来越多的出现在我们的身边。低代码可以叫做可视化搭建，或者叫效能工具等等。像国外的Mendix，国内的宜搭、苍穹、简道云、amis等等。基于这种新型的开发方式，图形化的拖拉拽配置界面，并兼容了自定义的组件、代码扩展，确实在B端后台管理类网站建设中很大程度上的提升了效率。低代码平台能够高效且便捷，成本又低。就应用领域来讲已经很广泛了，例如营销领域，各种页面生产工具，非冰，乐高，宜搭，鲁班。还有电商类的公司都会给商家提供一个类似店铺装修的工具，小程序生产工

2022-03-03 10:02:45 5419 1

转载 react缓存页面

一一切根源都从产品小姐姐无厘头需求开始最近在开发业务项目的时候，产品小姐姐突然来到我身边，然后就对着电脑一顿操作，具体场景大致是这样的。场景一：如上图所示，当在数万级别的数据中，选择一条，点击查看，跳转到当前数据的详情页，当点击按钮返回返回来，或者是浏览器前进后退等其他操作，返回到列表页的时候。要记录当前列表的位置。也就是要还原点击查看查看前的页面。但是当点击tab菜单按钮的时候，要清除页面信息。场景二：如上图所示，当我们编辑内容的时候，一些数据可能从其他页面获得，所以要求，无

2022-03-01 17:28:47 7432 3

原创 React 好用的工具库

俗话说的好工欲善其事，必先利其器。笔者在开发 React 项目的时候，总结出一些很不错的 React 库，可以提高开发效率，满足业务需求，接下来将一一介绍它们。UI组件库 Ant Design要说 React 最受欢迎的 UI 组件库，那么我第一个想到的就是 Ant Design，Ant Design 提供了数十种常用的组件，比如 Button，Menu ，Table 等。Ant Design不仅功能强大，还配置灵活，深受广大 React 开发者的喜爱。而且在 github 上已经取得 74.

2022-03-01 16:59:24 1682

原创如何删除项目中没有使用到的 package

可以采用depcheck(opens new window)来完成这件事$ npm install depcheck -g$ depcheckUnused dependencies* underscoreUnused devDependencies* jasmineMissing dependencies* lodash

2022-02-26 09:22:08 944

转载前端文件上传，这8种场景

在日常工作中，文件上传是一个很常见的功能。在项目开发过程中，我们通常都会使用一些成熟的上传组件来实现对应的功能。一般来说，成熟的上传组件不仅会提供漂亮 UI 或好的交互体验，而且还会提供多种不同的上传方式，以满足不同的场景需求。一般在我们工作中，主要会涉及到 8 种文件上传的场景，每一种场景背后都使用不同的技术，其中也有很多细节需要我们额外注意。今天阿宝哥就来带大家总结一下这 8 种场景，让大家能更好地理解成熟上传组件所提供的功能。阅读本文后，你将会了解以下的内容：单文件上传：利用 inpu

2022-02-25 17:54:42 11346

原创 React路由跳入新页面滚动条不在初始位置

如果旧路由页面有滚动条了，跳到新页面，其实是相当于把 div#root 里的内容替换了而且协议页面中，数据是写死的，也就是说滚动条一直存在如果协议数据是后端获取的，那跳转到协议页的时候，页面为空，滚动条消失，然后接口返回数据，渲染出来，滚动条就在初始位置// 解决在新的协议页面加入componentDidMount() { window.scrollTo(0,0);}...

2022-02-25 15:11:09 1342

原创前端浏览器缓存验证

Web缓存是什么动机当浏览器加载一个页面时html引用的外部资源也会加载。但这些外部资源比如图片、css、js都不经常变化。如果每次都加在这些资源势必会带来资源的浪费。而且加载时间过长也会影响用户体验。HTTP缓存技术就是为了解决这个问题出现的。简单的讲HTTP缓存就是将静态资源存储在浏览器内部，下次请求相同资源时可以直接使用。当然何时使用何时不使用要有一些系列的策略保证如果资源一旦更新，缓存也要随之而更新。作用提高首屏加载速度 -> 优化用户体验介绍流量消耗减轻服务器

2022-02-25 14:53:14 1513

原创 React redux-persist持久化数据存储

在React项目中，我们经常会通过redux以及react-redux来存储和管理全局数据。但是通过redux存储全局数据时，会有这么一个问题，如果用户刷新了网页，那么我们通过redux存储的全局数据就会被全部清空，比如登录信息等。这个时候，我们就会有全局数据持久化存储的需求。首先我们想到的就是localStorage，localStorage是没有时间限制的数据存储，我们可以通过它来实现数据的持久化存储。但是在我们已经使用redux来管理和存储全局数据的基础上，再去使用localStorage来读

2022-02-24 16:07:18 1196 1

空空如也

空空如也