鸭绒-CSDN博客

原创 React/Vue中的key有什么作用？为什么遍历列表时，key最好不要用index?

前端开发中，只要涉及到列表渲染，那么无论是Angular、React还是Vue框架，都会提示或要求每个列表项使用唯一的key，那很多开发者就会直接使用一个唯一的id或数组的index作为key的值，而并不知道使用key的原理。那么这篇博客就会讲解key的作用以及为什么最好不要使用index作为key的属性值。文章目录1.key的作用1.1举例说明2.key最好不要使用数组的index2.1 举例说明1.key的作用key之所以那么重要，是因为React/Vue框架使用了虚拟DOM和Diff算法高效.

2021-01-18 23:33:56 1584

原创【JS public、private、protected 不知道怎么区分？】

这意味着不能在类的实例化对象中直接访问该属性或方法，也不能通过类的实例化对象的引用访问。这意味着可以在类的实例化对象中直接访问该属性或方法，也可以通过子类的实例化对象的引用访问。受保护的属性和方法通常用于定义类的内部状态，只允许类的子类访问。在前端开发中，public、private和protected是一些关键字，用于定义类中的属性和方法的访问权限。这意味着可以在类的实例化对象中直接访问该属性或方法，也可以通过类的实例化对象的引用访问。public：public是默认的访问修饰符，表示属性或方法可以在。

2024-04-18 12:01:49 197

转载 Nginx 正反代理、负载均衡及负载均衡导致session不共享的解决方案

虽然正向代理服务器和反向代理服务器所处的位置都是客户端和真实服务器之间，所做的事情也都是把客户端的请求转发给服务器，再把服务器的响应转发给客户端，但是二者之间还是有一定的差异的。提高访问速度：通常代理服务器都设置一个较大的硬盘缓冲区，会将部分请求的响应保存到缓冲区中，当其他用户再访问相同的信息时，则直接由缓冲区中取出信息，传给用户，以提高访问速度。而在反向代理中，客户端不知道真正的服务器是谁，以为自己访问的就是真实的服务器。这种代理其实在生活中是比较常见的，比如访问外国网站技术，其用到的就是代理技术。

2023-03-30 12:00:43 868 1

原创【antd 的Upload组件onChange方法只执行一次file.status===‘uploading‘，走不到‘done‘的原因和解决方法】

111

2022-09-23 12:02:27 2418

转载微前端总结

微前端架构具备以下几个核心价值：技术栈无关。主框架不限制接入应用的技术栈，微应用具备完全自主权独立开发、独立部署。微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新增量升级。在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略独立运行时。每个微应用之间状态隔离，运行时状态不共享中心化路由。主应用统一注册子应用，统一管理各个子应用的路由一致的开发体验。开发者在微前端下开发子应用，和平时开发其它 Web 应用没有太大区

2022-06-20 09:25:15 923

原创 django配置可跨域

第一步：安装 django-cors-headers pip install django-cors-headers 第二步：在seetings.py添加配置INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages',

2022-04-11 22:52:48 790

原创 django连接数据库，数据表某字段定义错误，需修改重新创建表如何操作？

项目结构，创建了app项目：把app项目中的migrations目录下的除了__init__.py文件其它都删掉。原有数据表：把带有app前缀的表格都删掉，注意：如果你的应用名是xxx，那么前缀则为xxx然后执行下面命令：app是自己的项目名称，注意要替换python manage.py makemigrationspython manage.py migrate --fake app zeropython manage.py migrate app然后刷新数据库表，则重新创建成

2022-04-11 19:14:10 1181

原创 Vue中使用ElementUI的Form组件时使用 v-if 切换时导致表单自动校验问题

说明：利用ElementUI的Form表单组件实现登录、注册功能，当chooseItem == 0时是登录模块，否则是注册模块，同时也给表单项添加了校验规则。示例代码：<template><el-form v-if="chooseItem == 0" :model="loginForm" :rules="loginRules" ref="loginForm" siz

2022-04-10 17:48:17 3014

转载 React路由（V6版本）

文章目录1. 路由介绍2. 路由的使用3. 路由的执行过程4. 编程式导航React路由学习目标：能够说出react路由的作用能够掌握react-router-dom的使用能够使用编程式导航跳转路由能够知道react路由的匹配模式1. 路由介绍现代的前端应用大多数是SPA（单页面应用），也就是只有一个HTML页面的应用程序。因为它的用户体验更好、对服务器的压力更小，所以更受欢迎。为了有效的使用单个页面来管理原来多页面的功能，前端路由应运而生。前端路由功能：让用户从一个视图(页面)导航到

2022-03-29 15:37:53 936

原创 React初级知识点

1. setState()的说明setState()是异步更新数据的class App extends React.Component { state = { count:1 } handleClick = ()=>{ this.setState({ count:this.state.count + 1 }) console.log(this.state.count) // 1 } render(){ return ( <span>

2022-03-28 16:05:21 123

转载 websocket的使用

一、为什么需要 WebSocket？初次接触 WebSocket 的人，都会问同样的问题：我们已经有了 HTTP 协议，为什么还需要另一个协议？它能带来什么好处？答案很简单，因为 HTTP 协议有一个缺陷：通信只能由客户端发起。举例来说，我们想了解今天的天气，只能是客户端向服务器发出请求，服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。我们只能使用"轮询"：每隔一段时候，就发出一个询问，了解服务器有没

2022-03-17 19:11:08 9358

原创 Vue中如何自定义(v-throttle)节流指令

背景：在开发中，我们经常会在搜索框中使用防抖或节流进行优化，因此为了方便，今天我们自定义一个(v-throttle)指令。自定义指令语法：可参考官方文档1.在项目的utils目录下定义util.js模块(通常该模块放一些通用的工具方法)：export const throttle = (callback, delay) => { let timer = null return (e) => { if (!timer) { timer = setTimeout.

2021-08-13 14:35:25 1701 1

原创 Vue使用ElementUI的Table组件表头与内容不对齐问题

问题描述：用ElementUI开发后台，使用Table组件时，表头与内容不对齐解决方法：在App.vue组件中添加如下代码：<style>.el-table th.gutter { display: table-cell !important;}</style>示例：

2021-07-29 17:06:32 1457

原创 Element-ui中的table组件设置列为type=“expand“时，在Vue中发起异步请求数据时表格无法正常显示

问题描述：借助官网的示例，但展开项中是一个表格，当点击展开项时会发起一个网络请求去获取表格数据，表格的数据应该是一个数组类型：<template> <el-table :data="tableData" element-loading-text="Loading" style="width:90%;min-height:600px" border fit :st

2021-06-24 21:44:02 2326 5

原创响应式布局：rem + 媒体查询

1.rem单位rem与em的区别：rem是一个相对单位，相对于html的字体大小em是一个相对单位，相对于当前元素或父元素的字体大小rem相对于em的优势：rem的参考系是唯一的html标签，如果整个页面很多地方使用rem进行布局，只需要在不同屏幕下修改html的字体大小，那么整个页面都会同步变化。而em的参考系过多，不好统一处理。2. 媒体查询上面我们知道在不同屏幕大小情况下，可以通过控制html的字体大小来控制页面样式，那么我们如何根据不同屏幕的大小来控制html字体的大小呢？媒体查

2021-06-10 23:32:32 3053 1

原创渲染流程：HTML、CSS和JavaScript，是如何变成页面的？

文章目录1.构建 DOM 树2. 样式计算（Recalculate Style）3. 布局阶段3.1 创建布局树3.2 布局计算4.分层5.图层绘制6. 栅格化（raster）操作7. 合成和显示8.渲染流水线大总结9.相关概念9.1更新了元素的几何属性（重排）9.2 更新元素的绘制属性（重绘）9.3 直接合成阶段在上一篇文章中介绍了【从输入URL到页面展示，这中间发生了什么？】的流程，那导航被提交后又会怎么样呢？就进入了渲染阶段。通常，我们编写好 HTML、CSS、JavaScript 等文件，经过浏

2021-05-23 14:01:42 442

原创从输入URL到页面展示，这中间发生了什么？

文章目录1. 开篇小结2. 从输入URL到页面展示2.1 用户输入1. 开篇小结“在浏览器里，从输入 URL 到页面展示，这中间发生了什么？ ”这是一道经典的面试题，其中涉及到了网络、操作系统、Web 等一系列的知识。今天我们就一起来探索下这个流程，下图是我梳理出的“从输入 URL 到页面展示完整流程示意图”：从图中可以看出，整个过程需要各个进程之间的配合，所以在开始正式流程之前，我们还是先来快速回顾下浏览器进程、渲染进程和网络进程的主要职责。浏览器进程主要负责用户交互、子进程管理和文件储存等

2021-05-22 11:44:46 373

转载 JavaScript、TypeScript中的Class的本质与特性

文章目录1. 类2. 类的相关概念3. ES6中类的用法3.1属性和方法1. 类传统方法中，JavaScript 通过构造函数实现类的概念，通过原型链实现继承。而在 ES6 中，我们终于迎来了 class。其中class的本质：构造函数 + 原型链。2. 类的相关概念虽然 JavaScript 中有类的概念，但是可能大多数 JavaScript 程序员并不是非常熟悉类，这里对类相关的概念做一个简单的介绍。类（Class）：定义了一件事物的抽象特点，包含它的属性和方法对象（Object）：类的实

2021-05-19 18:25:03 634

原创 Vue中使用路由和权限校验映射

思考：你现在参与的项目中是如何处理路由和权限映射的？什么时候用到权限校验呢？比如一个网站有多个页面，但页面的展示与功能是有角色区分的，有些功能仅展示给管理员使用，有些是供用户使用，这就需要使用路由和权限映射实现。路由处理逻辑如下：路由场景分析中后台路由常见的常见如下：已获取 Token：访问 /login：重定向到 /访问 /login?redirect=/xxx：重定向到 /xxx访问 /login 以外的路由：直接访问 /xxx 未获取 Token：访.

2021-04-28 10:35:45 1315 2

原创 Vue2.x、Vue3.x的数据响应式核心原理

文章目录1.概念2.Vue2.x数据响应式核心原理3. Vue 3.x数据响应式原理4. 发布/订阅模式4.1 发布/订阅模式在Vue中的应用场景4.2 封装一个简易版的发布/订阅类5.观察者模式5.1 观察者模式在Vue中应用场景5.2 封装一个简易版的观察者类1.概念在学习核心原理前，我们先了解两个概念：数据响应式：数据模型仅仅是普通的JS对象，而我们修改数据时，视图会进行更新，避免了繁琐的DOM操作，提高开发效率。(内部操作DOM，我们只是修改数据)双向数据绑定：数据改变，视图也改变；视图改

2021-04-28 10:27:57 628

原创 Vue-Router路由模式的选择和底层原理

1.路由类型Hash模式：丑，无法使用锚点定位。History模式：需要后端配合，IE9不兼容(可使用强制刷新处理IE9不兼容)即可以根据两种模式的特点来进行路由选择。比如：当你的页面需要很多锚点进行定位时< a href="#new_paper" />，点击改链接跳转到页面的新闻部分，那么Hash模式是无法实现的，因为它自身带了#。2.底层原理如果我们去看Vue-Router的底层代码可能会优点晦涩难懂，下面总结以下底层原理，有哪些方式可以触发路由的更新呢？下面这张图一目了然：

2021-04-17 16:24:48 1137

原创数组的去重和扁平化

数组的去重和扁平化的方法有很多，但实现相同的功能，某些方法有人实现的就很复杂，下面我们来说几个简单的方法。1.数组去重1.1 ES5语法 function unique(arr){ var res = arr.filter((item,index,array)=>{ return array.indexOf(item) === index }) return res } console.log(un.

2021-04-15 00:01:57 274

原创 Vuex通过什么方式提供响应式数据以及$Store是如何挂载到实例this上?

文章目录1.前言2.Vuex通过什么方式提供响应式数据？1.前言使用过Vue框架的小伙伴们都应该接触过Vuex，Vuex是一个专门为Vue.js应用程序开发的状态管理模式。本篇博客我们主要是通过学习Vuex源码，弄清楚以下两个问题：Vuex通过什么方式提供响应式数据？$Store是如何挂载到实例this中？2.Vuex通过什么方式提供响应式数据？Vuex的两大核心State和Getters都是响应式的，即当state或getter的某一个状态改变时，它是能驱动视图发生相应的改变。下面我们阅

2021-04-05 23:25:32 1865

原创 CSS修改滚动条的默认样式

滚动条的默认样式可能不能让人满意，下面修改滚动默认样式：效果图：修改滚动条样式涉及三个伪类：::-webkit-scrollbar（设置整个滚动条的大小）::-webkit-scrollbar-thumb (设置滚动条滑块样式)::-webkit-scrollbar-track（设置滚动轨道的样式）示例：::-webkit-scrollbar { width: 5px;//这是竖向滚动条的宽度。如果是横向滚动条则设置height}::-webkit-scrollbar-thumb

2021-03-22 19:10:59 698

转载前端安全系列：XSS CSRF

XSS：XSS详解CSRF：CSRF详解

2021-03-08 20:44:01 104

原创 React中对antd-UI组件库的按需引入+自定义主题的配置

1.安装依赖yarn add react-app-rewired customize-cra babel-plugin-import less less-loader2.修改package.json .... "scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test",

2021-02-08 11:25:16 250

原创 JS模块化CommonJS、ES6模块化、AMD、CMD知识总结

1. 什么是模块化？将一个复杂的程序依据一定的规则封装成几个块(文件)，并最终组合在一起。块(文件)的内部数据/实现是私有的，只是向外部暴露一些接口(方法)与外部其他模块通信。2.模块的进化史1.最早的代码风格，全局被污染，容易造成命名冲突。function foo(){ //...}function bar(){ //...}2.简单封装：namespace模式。虽然减少了全局变量的数目，但本质是对象，不安全。var myApp={ foo:function(

2021-02-06 14:21:39 142

原创 React、Vue在webpack中如何配置代理实现跨域？

解决前后端跨域的方法很多，本篇博客就学习通过在Vue、React中通过配置代理实现跨域。1.ReactReact有两种方式实现代理：1.1 在package.json中配置“proxy”选项{ "proxy":"http://localhost:3000"}假设前端项目运行在8080端口，即http://localhost:8080，而服务器开在了本地的3000端口，即http://localhost:3000,注意：后面别再接具体路径，否则就只能代理该路径了。注意：修改了配置文

2021-02-05 20:23:47 1296

原创 React兄弟组件通信：消息订阅-发布机制

在React中，父子组件通信使用props即可实现，而且这是相对方便的。兄弟组件通信虽然也可以使用props通信，但是就麻烦一点，需要多次传递，因此我们学习消息订阅与发布机制来实现兄弟组件的通信。所谓消息订阅-发布机制可以使用生活中的例子来理解：比如：小时候我们经常可以看到有邮递员开着小摩托送报纸，那为什么邮递员会给你送报纸呢？这就需要你先去订阅报纸，比如说你要订阅“南方日报”，这就相当于消息订阅，那么每天当有新的“南方日报”的报纸，那么邮递员就会送达你的住处，而邮递员给你送报纸就相当于发布。下面

2021-02-05 11:01:34 783

原创 Vue中使用axios进行前后端交互，请求头默认不携带cookie

使用Vue高仿网易云音乐项目，有些交互是需要登录后才能操作。因为服务端需要验证cookie的合法性，比如：用户想“评论”某一首歌，那么用户就必须先登录个人账号，登录成功后，服务端会返回一个cookie，我们需要保存下来，然后在评论歌曲发起请求时，需要在请求头携带cookie用于验证用户。一开始认为cookie只要保存下来就会在下次发起请求时，请求头就会自动携带。事实上，我们还需简单配置一下axios： withCredentials: true示例： const instance = new .

2021-01-26 16:14:45 1907 2

转载 Vue为v-html中标签添加CSS样式

在最近的vue项目中遇到的问题：v-html渲染的富文本，无法在样式表中修改样式；<template> <div class="msgHtmlBox" v-html='msgHtml'></div></template> <script>export default{ data(){ return { msgHtml: "<p>https://www.cnblogs.co

2021-01-25 09:52:28 1533

原创前端如何根据后端返回的文本数据进行换行显示？

假设后端传回一个文本数据：文本内容就是上面圈着的一部分，内容中包含换行符（↵）.对于这类型的数据，在前端页面是需要进行稍微处理才能正常显示。如果没有经过处理，那么内容是不会在有换行符的位置进行换行显示的：而正常的显示应该是：下面两种方法可以实现这种效果：方法一：(下面是在Vue中实现的，但所有框架思想一样)//部分代码：//<div class="commendContent" v-html="commendContent"></div&gt

2021-01-24 15:34:30 21054 6

原创 Vue中使用textarea标签统计并展示用户还可输入文字长度的错误做法以及解决方法

最近在做一个项目，在做“用户评论”时有个评论长度限制，假设可输入最长文本为140，需要在页面展示用户可输入长度，这是一个很简单的需求，但我在用常规的方法却产生了bug，下面看看这个bug吧。下面展示的是评论界面：下面是一个动图展示bug：从动图可清晰展示：当输入一次文字后，再按键盘继续输入文字时，前面已输入的文本会自动清空。下面是我产生这个bug的代码：<template> <div> <textarea :value="conte.

2021-01-07 21:15:57 1434

原创力扣题库JS版：最小路径和

题目：给定一个包含非负整数的 m x n 网格 grid ，请找出一条从左上角到右下角的路径，使得路径上的数字总和为最小。说明：每次只能向下或者向右移动一步。示例 1：输入：grid = [[1,3,1],[1,5,1],[4,2,1]]输出：7解释：因为路径 1→3→1→1→1 的总和最小。示例 2：输入：grid = [[1,2,3],[4,5,6]]输出：12解题思想：辅组数组dpt需从下往上初始化，下面的代码实现就是从上面方程式转化而来，但需要加入一些特殊判断，因为

2020-12-27 11:38:20 536

原创 JavaScript 疑难、易错笔试选择题+分析

1.以下代码执行时不会在控制台输出错误信息的是：BA. let a = decodeURIComponent('%');B. var a; a(); function a() { console.log(a);C. Promise.reject(123).finally(a => { console.log(a); }); }D. var a = 1; let a = 2; console.log(a);分析B：js有变量提升和函数

2020-12-24 20:19:13 12767 1

原创力扣题库JS版：Z 字形变换

题目描述：将一个给定字符串根据给定的行数，以从上往下、从左到右进行 Z 字形排列。比如输入字符串为 “LEETCODEISHIRING” 行数为 3 时，排列如下：L C I RE T O E S I I GE D H N之后，你的输出需要从左往右逐行读取，产生出一个新的字符串，比如：“LCIRETOESIIGEDHN”。请你实现这个将字符串进行指定行数变换的函数：string convert(string s, int numRows);示例 1:输入: s

2020-12-21 11:36:00 683

原创 React核心功能：Redux状态管理

文章目录1. Redux介绍2.重要概念2.1 Store2.2 State2.3 Action2.4 store.dispatch()2.5 Reducer2.6 store.subscribe()3. 工作流程4.实例：计数器1. Redux介绍React只是一个DOM的抽象层，对于大型项目将会遇到组件之间的通信和代码结构等问题。而Redux将能解决状态管理问题，它用于中大型，数据比较庞大，组件之间数据交互多的情况下使用。但注意Redux的使用，Redux的创造者说过：“如果你不知道是否需要 R

2020-12-20 21:09:07 267

计算机网络实验三.docx

空空如也