MonsterQy-CSDN博客

原创 flex三列布局

flex布局实现三列响应式的核心点其实就在于对想要具有响应式特性的div设置flex-grow；

2022-07-25 12:16:07 3226

在完成表单验证时，某些需要远程搜索的来自于后端返回的数据属性名，与最后提交表单验证时，要求的属性名不一致，Eg:后端返回的产品有关信息为producet_name,product_id，但是最后需要的却是一个product对象，里面含有id和name两个属性。在正式介绍解决方法之前，笔者在此先更加详细的介绍一下，项目的背景，以便更好的理解解决方法。项目使用了element-plus，这种情况出现在，利用el-select组件，链接远程搜素，直接获取数据库的某些数据，这些数据是对象的格式，这个时候参考ele

2022-07-04 17:46:34 2008

原创表单校验问题——el-select（初始化页面自动触发校验解决办法）

情景：为表单添加校验功能：填好信息后，点击提交按钮，触发校验。bug：当触发过校验函数后，再次进入表单页面，会自动触发添加了multiple属性的el-select组件的表单校验。el-select绑定的数据为null，就会触发change事件，从而开启了表单校验将v-model的初始值修改为空数组即可。...

2022-06-28 14:36:43 6923

原创 Mac前端开发配置

mac与windows系列电脑最大的一个区别之一就是mac利用shell的频率是十分高的，并且其功能十分强大。说到这，有些小伙伴可能不太理解什么是shell，在此介绍一下 :shell的本质上是命令解释器。是人与电脑之间交互的接口，通过shell可以指示计算机完成一些操作。shell的指令集同linux。在mac中经常使用iTerm2作为terminal的替代，官网如下：itrem2官网node官网Mac系统安装node.js时的默认安装路径是 /usr/local/bin/node, 安装nod

2022-06-08 20:06:36 3607 1

原创 Attempted import error: ‘get‘ is not exported from ‘../../api/musicGet‘.

今天在导入一个函数的时候，出现了以下错误：检查了几遍路径，都是正确的，最后发现是因为自己在导出时时exportdefault，而在导入时却用了{{}}，才导致此错误的产生：export 导出内容时必须注意当前模块文件中可以有多个 export 并且export 可以一次导出多个，export class top extends Component{ render() { return ( <div > </div&g

2022-04-21 14:09:08 1207

原创 webpack运行项目时端口占用解决方法

问题：今天在运行项目时控制台报了如下错误：可以看出webpack无法正常打包运行的原因是因为8080端口被占用。解决方法：1）找到占用该端口的进程以及PIDWIN+R打开任务管理器->cmd打开控制台->netstat -ano 查看所有正在运行的进程这里可以看到占用了我电脑的8080端口的进程PID为87962）CTRL+AIT+.进入任务管理器->点击详细信息即可查看到进程及其对应的PID，杀死占用端口的进程即可。...

2022-01-14 10:01:57 1386 1

原创 VScode安装ts环境并自动编译

官方文档提示，ts文件无法直接运行，需要编译成js文件。（VScode）快速运行ts文件。①首先要全局下载ts运行插件：npm install -g typescript （-g就是全局下载的意思）②安装ts编译器：ts-node并不等于ts的Node.js,仅仅封装了ts编译的过程，提供直接运行ts代码的能力npm install ts-node -g③运行：终端中输入ts-node xxx.ts即可编译ts文件成为js文件①在项目文件根目录中运行 tsc --init此步骤会自动

2021-12-31 11:00:48 3294

原创 el-pagination的使用及修改默认样式

前言最近在项目中要用到分页组件，由于项目是使用element-plus搭建的，所以直接引用了组件库中的el-pagination，在此记录用法以及默认样式更改。一、使用方法1）来到Element-plus官网，复制代码到项目中 <el-pagination class="white-list-tool" background :hide-on-single-page :page-s

2021-10-11 11:44:01 11990 7

原创剑指offer——斐波那契数列

前言题目就没有什么好介绍的了，主要记录做法一、普通递归这个方式很简单，时间复杂度也很爆炸，直接使用递归处理：var fib = function(n) {if(n==1||n==2)return 1return (fib(n-1)+fib(n-2)) % 1000000007;};二、辅助优化思路为引入一个辅助table，避免重复计算。function Fibonacci(n){ if(n<1)return 0 let arr = new Array(n+1).f

2021-07-18 15:36:51 141

原创 vue电商平台项目

系列文章目录对于开发一个vue项目来说通常要经过以下几个步骤：一、前端项目初始化安装Vue脚手架：要在全局环境中安装Vue这个脚手架，安装步骤如下：1.首先：从nodejs.org中下载nodejs->然后全局安装vue。npm install vue-cli -g2.利用vue-cli初始化项目：在cmd中输入vue init初始化创建一个基于vue的项目。`vue init webpack xxx3.安装依赖的资源将文件拖入vscode，npm install 下载所依

2021-07-14 16:02:35 4193 1

原创 vue的多页面配置

文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结工程化应用——vue的多页面前言本文介绍对于一个vue多页面项目应该如何配置一、pandas是什么？在利用vue-cli进行vue项目开发的过程中，我们往往需要通过vue.config.js文件进行一些相关的配置，因为vue项目的运行是需要进行二、使用步骤1.引入库代码如下（示例）：import numpy as npimport pandas as pdimport matplotlib.pyplot as

2021-07-13 08:34:23 915

原创 TS自学记录

系列文章目录本文记录ts的自学。文章目录系列文章目录前言一、初始化ts二、ts中的原始数据类型1、Boolean2、Number3、String3、空值4、Null 和 Undefined三、ts中的其他数据类型1、任意值2、联合类型四、ts中的对象数据类型1、接口2.可选属性3.任意属性4.只读属性五、数组类型1.数组中元素类型一样2.数组泛型3.接口六、函数类型1.函数声明2.函数表达式前言TypeScript 是 JavaScript 的一个超集，主要提供了类型系统和对 ES6 的支持，它

2021-07-12 13:53:24 2362

原创 Vue-cli配置

在利用vue-cli进行项目配置时，可以利用vue.config.js进行一系列的相关配置，其中对于webpack的一系列配置也可以在此文件中进行。这个文件初始是并不存在于目录当中，需要我们自己进行手动的生成。根目录下的文件生成目录如下：在vue.config.js可以进行的配置内容如下：module.exports = { publicPath: "./", // 公共路径默认为"/"，建议使用"./"相对路径 devServer: { // 本地服务器配置(npm run s

2021-06-28 14:48:25 1294

原创 node.js报错解决方法

npm install 报错解决最近在npm install时总是失败，提示：Error: Cannot find module ‘are-we-there-yet’上网搜索了好久也没有找到问题解决方法，但知道了大概原因是因为npm文件损坏，但是反复卸载重新安装都没有用。后来发现只要进入AppData中的Roaming文件中npm 有关文件夹都删除，然后再重新安装即可。...

2021-06-24 09:54:13 1076

原创 VUE自学记录

文章目录前言一、VUE是什么？二、使用步骤1.引入vue2.读入数据总结前言此文章主要用来记录VUE学习路线以及学习过程中的思考。以便回顾复习。一、VUE是什么？示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。二、使用步骤1.引入vue类似于Jquery，直接利用，将其引入html文档中，将某个标签作为vue标签使用时，则可以new一个新的vue对象，利用el指明id名，利用data表明想让此标签显示什么内容：2.读入数据代码如下（示例）：da.

2021-06-21 15:52:18 593

原创看代码说输出

var a=10function b(){ a=100}b()console.log(a)//100因为b中的a没有var 所以改变的是全局中的avar a=10function b(){ a=100 return function a(){}}b()console.log(a) //10因为function使a变量提升，所以b中改变的a的值其实为内部的a所以不影响全局的a，仍输出10var a=10if(true){ var a

2021-05-25 19:53:28 202

原创 clickOnce

指定dom对象给这个dom对象绑定一个click事件无论点击多少次只有第一次触发事件回调callback方法一、function clickOnce(element,callback){let click=falseelement.addEventListener('click',()=>{ if(!click) { click=true callback() }else{ return }})}方法

2021-05-25 19:40:33 279

原创 React

React一、基础知识：语言为JSX=JS+HTML jsx满足js语法for=htmlForclass=classNamestyle用{{}}包裹一个{}只能执行一句js语句二、组件模型：（只写了类方式一种）class App extends Component {constructor(props) //构造器内设置初始状态{ super(props) this.state={ themeColor:color }}handleClick(color) //操

2021-05-22 15:34:11 132

原创 JS中交换两个变量的多种方法

方法一、临时变量法var a=3,b=5var temp=b b=a a=tempconsole.log(a,b)方法二、加减辅助法var a=3,b=5a=a+bb=a-ba=a-bconsole.log(a,b)方法三、按位异或法var a=3,b=5a=a^bb=a^ba=a^bconsole.log(a,b)方法四、借用数组法var a=3,b=5a=[a,b]b=a[0]a=a[1]console.log(a,b)方法四、借用对象

2021-05-21 10:20:32 357

原创 JS中的数据类型，以及判断方式

系列文章目录文章目录系列文章目录一、JS中的数据类型有哪些？二、两种类型区别1.存储方式2.拷贝方式3.能否增添属性和方法？4.比较方式三、判断方式1.typeof2.instanceof3.constructor4.Object.prototype.toString.call（）一、JS中的数据类型有哪些？JS中的数据类型可以分为基本数据类型和引用数据类型。基本数据类型：undefinednullnumberbooleanstringSymbol（ES6）bigInt（ES10）

2021-05-20 09:49:43 287

原创 JSDay2- 长度最小的子数组

文章目录一、题目二、示例一、题目给定一个含有 n 个正整数的数组和一个正整数 target 。找出该数组中满足其和 ≥ target 的长度最小的连续子数组 [numsl, numsl+1, …, numsr-1, numsr] ，并返回其长度。如果不存在符合条件的子数组，返回 0二、示例示例 1：输入：target = 7, nums = [2,3,1,2,4,3]输出：2解释：子数组 [4,3] 是该条件下的长度最小的子数组。示例 2：输入：target = 4, nums =

2021-05-17 10:42:43 374

原创 JSDay2-多个数组的交集

文章目录一、题目二、示例三、参数为多个数组的解法方法:四、参数为一个二维数组一、题目给定多个/二维数组，编写一个函数来计算它们的交集。二、示例示例 1：输入：nums1 = [1,2,2,1], nums2 = [2,2]，nums3=[2]输出：[2]示例 2：输入：nums1 = [4,9,5], nums2 = [9,4,9,8,4]，nums3=[9,4]输出：[9,4]三、参数为多个数组的解法方法:遍历这个参数数组，将参数数组第一项去重后暂存结果数组中，然后根据剩余数组

2021-05-15 10:25:12 987

原创 JSDay2-两个数组的交集

文章目录一、题目二、示例三、解法方法一：set时间复杂度+空间复杂度方法二：正向双指针+额外空间时间复杂度+空间复杂度一、题目给定两个数组，编写一个函数来计算它们的交集。二、示例示例 1：输入：nums1 = [1,2,2,1], nums2 = [2,2]输出：[2]示例 2：输入：nums1 = [4,9,5], nums2 = [9,4,9,8,4]输出：[9,4]三、解法方法一：set分别对两个数组进行去重（用set），然后判断集合大小，在size更小些的集合中查找siz

2021-05-14 09:55:57 674

原创 JSDay1-两数之和

文章目录一、题目二、示例三、解法方法一：两层for循环时间复杂度+空间复杂度方法二：快慢指针时间复杂度+空间复杂度方法三：哈希表时间复杂度+空间复杂度一、题目给定一个整数数组 nums 和一个整数目标值 target，请你在该数组中找出和为目标值的那两个整数，并返回它们的数组下标。你可以假设每种输入只会对应一个答案。但是，数组中同一个元素在答案里不能重复出现。你可以按任意顺序返回答案。来源：力扣（LeetCode）链接：https://leetcode-cn.com/problems

2021-05-13 09:43:03 567

原创 JSDay1-合并两个有序数组

文章目录一、题目二、示例三、解法方法一：先合并两个数组在排序：时间复杂度+空间复杂度方法二：正向双指针+额外空间时间复杂度+空间复杂度方法三：逆向双指针时间复杂度+空间复杂度一、题目给你两个有序整数数组 nums1 和 nums2，请你将 nums2 合并到 nums1 中，使 nums1 成为一个有序数组。初始化 nums1 和 nums2 的元素数量分别为 m 和 n 。你可以假设 nums1 的空间大小等于 m + n，这样它就有足够的空间保存来自 nums2 的元素。二、示例示例 1：

2021-05-13 09:11:40 607

原创深拷贝与浅拷贝

文章目录应用场景一、浅拷贝二、深拷贝应用场景我们知道对于拷贝来说，若为引用类型，则拷贝过程为引用拷贝，所以就不可以简单的赋值。所以浅拷贝和深拷贝一般都是针对引用类型作用更大。一、浅拷贝浅拷贝不考虑待拷贝对象的属性和方法是否为引用类型。var Clone=function(orign){ var target= Array.isArray(orign)?[]:{} for(var key in orign) { if(orign.hasOwnProperty(

2021-05-12 11:32:55 226

原创 JS中数组扁平化的几种方法

文章目录前言数组扁平化是什么？一、递归二、reduce+递归方法三、toString()三、join()四、flat()前言数组扁平化是什么？数组扁平化无疑是一个老生常谈的问题，它其实就是一个将多维数组转变为一维数组的过程。接下来我将介绍几种常见的扁平化方法。一、递归基本思想：遍历数组，不断去判断当前元素类型为数组还是数字，数字就连接，数组就递归调用此方法。代码如下var arr1=[[1,2],[3,4],[[5,6],[7,8]],9]var flatten=function(arr

2021-05-10 08:56:29 508

原创 JS中的预编译（AO、GO详解）

系列文章目录文章目录系列文章目录前言一、由实例引发的思考二、函数上下文+全局上下文2.全局上下文GO：2.函数上下文AO：3.全局上下文GO+函数上下文AO：总结前言执行js文件的流程：①通篇检查语法错误②预编译③解释一行执行一行一、由实例引发的思考首先我们来看两个例子： test() function test() { console.log(1) //1 }可以看到先执行函数，后声明函数是可以的。

2021-05-02 17:32:54 1612

原创 webPack

系列文章目录提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加例如：第一章 Python 机器学习入门之pandas的使用提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录系列文章目录前言一、模块化1.什么是模块化2.模块化实现方式二、Webpack1.什么是Webpack2.Webpack特点：3.Webpack使用：前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本

2021-05-01 10:34:18 157 1

原创详解JS中for...of、in关键字

系列文章目录提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加例如：第一章 Python 机器学习入门之pandas的使用提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录系列文章目录前言一、in关键字1.数组中的in2.对象中的in二、for...of1.数组中的for...of2.对象中的for...of1.引入库2.读入数据总结前言在总结到数组方法includes的时候突然产生了一个疑问，in是不是也可以用来判断数组中是否有某元素呢？于是尝试了一下

2021-04-29 14:26:06 4923 3

原创 js中数组常用简单方法

学了这么久js觉得有必要好好总结一下常用的一些数组方法。提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加例如：第一章 Python 机器学习入门之pandas的使用提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录一、Array.isArray()二、Array.of()三、pop()四、shift()五、push()六、unshift()七、reverse()八、sort()九、splice()十、slice()二、使用步骤1.引入库2.读入数据总结

2021-04-29 09:09:43 1317 2

原创数组需要函数型参数的常用方法——详解及应用

文章目录前言一、filter() 方法1.1定义和用法1.2实现原理：1.3语法：1.4应用实例：二、reduce()方法1.1定义和用法1.2实现原理：1.3语法：1.4应用实例：三、map() 方法1.1定义和用法1.2语法：1.3应用实例：四、flat()方法1.1定义和用法：1.2语法：1.3应用实例：五、forEach() 方法1.1定义和用法1.2语法：1.4应用实例：六、some() 方法1.1定义和用法1.2语法：1.3应用实例：七、every() 方法1.1定义和用法1.2语法：1.3应用

2021-04-28 21:16:47 1150

原创从0到精通redux——原理及源码实现

系列文章目录提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加例如：第一章 Python 机器学习入门之pandas的使用提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录系列文章目录前言一、redux产生原因二、redux定义三、redux实现1.初步2.脱离setState、状态改变后不局限于render3.初步生成createStore方法4.终级实现5.总结原理及实现四、react-redux前言提示：这里可以添加本文要记录的大概内容：例如：随

2021-04-28 16:16:12 1166 5

原创 React全栈项目——京东商城

经过一段时间的学习终于算是对React有了一定的了解，今天试着写了下一个项目，不得不感慨一句，学习的最好方式还得是实践。废话不多说，开始实现项目。类似于之前实现的博客项目，我们依然采用mongodb存储相关数据，根据react组件式开发，将我们的项目分为以下几个组件：1.navTop ：顶部导航栏，可进行历史记录的跳转，并根据页面不同，所展示的文字也不同。# 系列文章目录提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加例如：第一章 Python 机器学习入门之pandas的使用提

2021-04-27 11:06:33 1273 2

原创记录人生第一次面试——腾讯前端实习生面试

当收到面试通知时候的心情即开心又紧张，第一次面试就是大厂，自己也还没有准备什么…当接通电话的时候又好像没那么紧张了，也算是认识到自己的基础还有很多没有掌握好，不能小看css和html、js 要记得这些基础才是最重要的面试官很友好，说明情况后问的问题都比较基础，但还是自己有些菜…我觉得八成是凉了，但其实和高级工程师有过对话，感觉还不错`~要学的还有很多！1.css样式如何引入：①行间样式：直接在标签内部运用style=‘’②内部样式：在head标签中写入③外部样式：1、链接式 link2、imp

2021-04-21 21:43:29 354

原创学习笔记——react报错

今天在用react写项目的时候遇到了如下问题：Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.这个问题是在为button按钮挂上点击事件后发

2021-04-14 19:40:57 322

空空如也

空空如也