自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(19)
  • 收藏
  • 关注

原创 前端跨域并用nginx代理跨域

为什么会产生跨域(同源策略):虑到浏览器的安全问题,没有同源策略容易受到网络攻击。同源策略限制的内容:本地存储,dom节点,ajax的请求;跨域产生条件:协议、域名、端口任意一个不同则会产生跨域。跨域并不是请求发不出去,请求能发出去,服务端能收到请求并正常返回结果,只是结果被浏览器拦截了;表单不存在跨域问题,因为提交的form表单数据不需要返回。nginx访问前端静态资源第一种:在本地有文件的,比如dist文件server {  listen&nbsp

2022-05-31 10:00:00 374

原创 关于promise

promise原理:利用观察者模式,只需要通过特定书写方式注册对应状态的事件处理函数,然后更新状态,调用注册过的处理函数即可promise有三种状态:pending(初始状态)、fulfilled、rejected(未决定,履行,拒绝)同一时间只能存在一种状态,且状态一旦改变就不能再变。pending可以转化为fulfilled或rejected并且只能转化一次。fulfilled和rejected状态只能由pending转化而来,两者之间不能互相转换。(如图)基本用法con

2022-05-31 09:45:00 205

原创 关于安装npm包时-D和-S的区别

npm i name -save-dev 简写 npm i name -D 会把模块和版本号自动添加到devdependencies (设置环境)npm i name -save 简写 npm i name -S 会把模块和版本号自动添加到dependencies(代码运行)-D,是在开发环境中要用到的,比如gulp,webpack这些打包工具,程序实际运行时并不需要,就放在devdependencies中;(相当于环境配置)-S,是在生产环境中用到;比如element ui,echarts,dayj

2022-05-31 09:15:00 415

原创 项目常用的git命令

git是一个开源的分布式版本控制系统,也是个内容管理系统(CMS),工作管理系统;Git和SVN的区别:Git是分布式的,而SVN是集中式的Git把内容按元数据方式存储,而SVN是按文件;所有的资源控制系统都是把文件的元信息隐藏在一个类似 .svn、.cvs 等的文件夹里Git和SVN的分支不同,SVN的分支也就是版本库中的一个文件Git没有一个全局的版本号,而SVN有Git的中央服务器就是方便交流修改,而SVN是真的一个中央服务器Git的内容完整性要优于SVNgit提交记录等显示的名

2022-05-30 10:00:00 146

原创 浅显易懂call,apply,bind的区别

call,apply,bind都是可以改变this的指向,那么它们三者之间的区别是什么,我们今天来看看。先看这段代码:const adventurer = { name: 'Alice', cat: { name: 'Dinah' }, getName: function(a, b) { console.log(this.name, a+b) }};adventurer.getName(1, 2) // "Alice" 3const user = {

2022-05-30 09:45:00 117

原创 Web Worker使用教程

Web Worker的作用首先,我们都知道JS采用的是单线程模型,所有任务只能在一个线程上完成。那Web Worker就是为JS创造多线程环境,允许主线程创建 Worker 线程,将一些任务分配给后者运行。在主线程运行的同时,Worker 线程在后台运行,两者互不干扰。等到 Worker 线程完成计算任务,再把结果返回给主线程。Worker 线程一旦新建成功,就会始终运行,不会被主线程上的活动(比如用户点击按钮、提交表单)打断。这样有利于随时响应主线程的通信。Web Worker的注意点同源限

2022-05-30 09:15:00 1956

原创 memo,useMemo和useCallback的使用

关于react项目的优化,react提供了memo,useMemo和useCallback下面来看看具体怎么使用吧。React.memo父元素触发更新后,其子元素也会跟着更新;但是有时候子元素确实没必要重新渲染,故使用 React.memo 可减少重新渲染次数。使用格式:// 使用格式const MyComponent = (props) => { /* 使用 props 渲染 */}function areEqual(prevProps, nextProps) { /*

2022-05-27 10:00:00 175

原创 http-proxy-middleware 跨域

http-proxy-middleware解决跨域问题,只在开发环境有效。// 安装 http-proxy-middlewareyarn add http-proxy-middleware//创建 src/setupProxy.js 文件####// 在setupProxy.js文件写入以下代码// target为目标地址const { createProxyMiddleware } = require('http-proxy-middlew

2022-05-27 09:30:00 624

原创 在react中使用swiper/react

参考链接:https://swiper6.vercel.app/react#usage其实swiper中文文档很多api都是直接阔以用的,只是形式不一样中文文档:https://www.swiper.com.cn/api/安装:yarn add swiper@6import { Swiper, SwiperSlide } from 'swiper/react'import { sliderList } from './source'import SwiperCore, { Pagination,

2022-05-27 09:15:00 1266

原创 react数据集中式管理第四篇--@rematch/core

今天,我们来介绍@rematch/core其他几篇:react数据集中式管理第一篇–Redux初认识react数据集中式管理第二篇–@reduxjs/toolkitreact数据集中式管理第三篇–redux-saga@rematch/core的使用教程Rematch是在redux的基础上再次封装,使用rematch,我们就不需要再声明action类型、action创建函数、thunks配置;如果你之前学过vuex,那你对这个不会陌生,因为模式基本上一样。引入依赖: yarn add&nbsp

2022-05-26 10:00:00 1370

原创 react数据集中式管理第三篇--redux-saga

之前两篇已经介绍了redux知识点和redux的工具包@reduxjs/toolkit;现在我们来一起学习redux-saga。其他几篇:react数据集中式管理第一篇–Redux初认识react数据集中式管理第二篇–@reduxjs/toolkitreact数据集中式管理第四篇–@rematch/core什么是redux-sagaredux-saga是一个用于管理redux应用异步操作的中间件,redux-saga通过创建sagas将所有异步操作逻辑收集在一个地方集中处理,可以用来代替redu

2022-05-26 09:45:00 749

原创 react数据集中式管理第二篇--@reduxjs/toolkit

上一篇介绍了redux的基本知识点,今天一起来学习下@reduxjs/toolkit。其他几篇:react数据集中式管理第一篇–Redux初认识react数据集中式管理第三篇–redux-sagareact数据集中式管理第四篇–@rematch/core什么是@reduxjs/toolkit@reduxjs/toolkit 就是redux的一个工具包,它想编写Redux逻辑的标准方式,想解决配置Redux存储太复杂的问题;先放上我的项目部分目录结构:\下面一起学习@reduxjs/to

2022-05-26 09:30:00 1364

原创 react数据集中式管理第一篇--Redux初认识

本文章主要是对redux做一些简单的介绍,包括概念、原则、使用等。其他的几篇:react数据集中式管理第二篇–@reduxjs/toolkitreact数据集中式管理第三篇–redux-sagareact数据集中式管理第四篇–@rematch/core什么是RedexRedux 是一个使用叫做“action”的事件来管理和更新应用状态的模式和工具库 它以集中式Store(centralized store)的方式对整个应用中使用的状态进行集中管理,其规则确保状态只能以可预测的方式更新。

2022-05-26 09:15:00 257

原创 富文本编辑器vue-quill-editor

该富文本编辑器可用于留言板、备注、设置信息等功能;在vue项目中安装vue-quill-editornpm install vue-quill-editor --save全局引入import VueQuillEditor from ‘vue-quill-editor’;import ‘quill/dist/quill.core.css’;import ‘quill/dist/quill.snow.css’;import ‘quill/dist/quill.bubble.css’;Vue.us

2022-05-25 14:25:20 201

原创 Vite构建vue3项目的注意事项

自己在用vite构建Vue3项目时遇到的一些问题,这在里分享下:安装cross-env yarn add cross-env -D // 一定要安装在开发环境安装sass yarn add sass -D // 安装在开发环境vite读取配置文件是根据mode模式读取yarn dev:若执行的development环境,则会自动读取.env.development配置文件yarn build:若执行的production环境,则会自动读取.env.production配置文件若想读

2022-05-25 14:24:43 674

原创 项目中保存自动格式化代码

安装依赖yarn add husky@^3.1.0 -D yarn add lint-staged@^9.2.3 prettier@^1.18.2修改package.json"husky": {    "hooks": {      "pre-commit": "lint-staged"    }},"lint-stag

2022-05-25 14:23:42 230

原创 react-router-dom路由

react-router-dom路由使用;Switch,Link,Redirect,Route,BrowserRouter的使用;路由的传值;Prompt路由的拦截;

2022-04-19 09:49:34 470

原创 JS实现一键复制功能

JS实现一键复制功能,利用textarea元素

2022-04-18 21:52:42 1145 1

原创 react hooks

useState,useEffect,useRef,useSelector,useDispatch的基本使用1,关于useState的使用,使用useState()进行状态管理importReact,{useEffect,useRef,useState}from'react'functionApp(props){//setName为设置name的值的函数,useState可设置name的默认值const[name,setName]=useState...

2022-04-17 16:15:43 302

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除