- 博客(19)
- 收藏
- 关注
RSS订阅原创 前端跨域并用nginx代理跨域
为什么会产生跨域(同源策略)：虑到浏览器的安全问题，没有同源策略容易受到网络攻击。同源策略限制的内容:本地存储，dom节点，ajax的请求；跨域产生条件：协议、域名、端口任意一个不同则会产生跨域。跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了；表单不存在跨域问题，因为提交的form表单数据不需要返回。nginx访问前端静态资源第一种：在本地有文件的，比如dist文件server { listen 
2022-05-31 10:00:00
349
原创 关于promise
promise原理：利用观察者模式，只需要通过特定书写方式注册对应状态的事件处理函数，然后更新状态，调用注册过的处理函数即可promise有三种状态：pending（初始状态）、fulfilled、rejected(未决定，履行，拒绝)同一时间只能存在一种状态,且状态一旦改变就不能再变。pending可以转化为fulfilled或rejected并且只能转化一次。fulfilled和rejected状态只能由pending转化而来，两者之间不能互相转换。（如图）基本用法con
2022-05-31 09:45:00
183
原创 关于安装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
396
原创 项目常用的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
137
原创 浅显易懂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
104
原创 Web Worker使用教程
Web Worker的作用首先，我们都知道JS采用的是单线程模型，所有任务只能在一个线程上完成。那Web Worker就是为JS创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。Worker 线程一旦新建成功，就会始终运行，不会被主线程上的活动（比如用户点击按钮、提交表单）打断。这样有利于随时响应主线程的通信。Web Worker的注意点同源限
2022-05-30 09:15:00
1928
原创 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
162
原创 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
604
原创 在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
1224
原创 react数据集中式管理第四篇--@rematch/core
今天，我们来介绍@rematch/core其他几篇：react数据集中式管理第一篇–Redux初认识react数据集中式管理第二篇–@reduxjs/toolkitreact数据集中式管理第三篇–redux-saga@rematch/core的使用教程Rematch是在redux的基础上再次封装，使用rematch，我们就不需要再声明action类型、action创建函数、thunks配置；如果你之前学过vuex，那你对这个不会陌生，因为模式基本上一样。引入依赖： yarn add 
2022-05-26 10:00:00
1334
原创 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
728
原创 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
1340
原创 react数据集中式管理第一篇--Redux初认识
本文章主要是对redux做一些简单的介绍，包括概念、原则、使用等。其他的几篇：react数据集中式管理第二篇–@reduxjs/toolkitreact数据集中式管理第三篇–redux-sagareact数据集中式管理第四篇–@rematch/core什么是RedexRedux 是一个使用叫做“action”的事件来管理和更新应用状态的模式和工具库 它以集中式Store（centralized store）的方式对整个应用中使用的状态进行集中管理，其规则确保状态只能以可预测的方式更新。
2022-05-26 09:15:00
239
原创 富文本编辑器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
176
原创 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
655
原创 项目中保存自动格式化代码
安装依赖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
214
原创 react-router-dom路由
react-router-dom路由使用；Switch，Link，Redirect，Route，BrowserRouter的使用；路由的传值；Prompt路由的拦截；
2022-04-19 09:49:34
452
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
241
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人