前端
关注
分享
扫一扫
文章平均质量分 67
Luminous★
成功很难！但坚持一定很酷！
展开
-
webpack搭建的React脚手架项目与vite进行兼容化开发
react脚手架兼容vite开发原创 2023-01-21 12:17:32 · 2092 阅读 · 1 评论 -
Vue3已成为默认版本，与Vue3的这些交集都在这了
目录Vue3的相关常用知识点一. 与Composition组合式API的邂逅1.1 与setup的初次交集1.2 ref函数1.3 reactive函数1.4 setup的注意点1.5 计算属性1.6 watch监视1.7 watchEffect函数1.8 Vue3的生命周期函数1.9 自定义hooks函数，体会组合式API的优势1.10 toRef与toRefs的使用二、其他不常用CompositionAPI2.1 shallowReactive 与 shallowRef2.2 readonly与shal原创 2022-02-06 21:04:00 · 1419 阅读 · 1 评论 -
JavaScript实现链式调用
JavaScript链式调用最近一直在学习JavaScript链式调用这块的东西，所谓的链式调用，简单粗暴的讲，就是在一个实例对象调用完一个方法后，在后边可以一直去调用其他方法，例如，Promise.then()的方法就是一个很好的例子，他可以在后边一直的.then下去。以下是个人的一些浅理解！！！不是很透彻！！！那么，链式调用究竟是如何实现的，个人理解：对于同步的链式调用，主要是与对应方法的返回值有关。接下来我们直接上代码/* 简单的链式调用 */class Person { constr原创 2021-10-28 18:42:36 · 4882 阅读 · 5 评论 -
一篇文章，彻底搞懂JavaScript浏览器的事件循环机制
关于浏览器的事件循环机制，在之前的话总是感觉模模糊糊，今天特意回顾了一下，彻底搞懂它！卷！浏览器的事件循环机制(JavaScript Event Loop)首先，JavaScript是一门单线程的语言，异步和多线程的实现需要借助JavaScript Event Loop事件循环机制来实现的，大体包括（调用栈、任务队列，任务队列又分为宏任务和微任务）JavaScript的代码在执行过程中，除了依靠函数调用栈来搞定函数的执行顺序外话需要靠任务队列来搞定另外一些代码的执行。整个执行过程，我们称为事件循环的过原创 2021-10-11 19:22:03 · 550 阅读 · 0 评论 -
深度学习React相关技术栈
React全家桶一、初识React首先需要引入React库，react.development.js需要在react-dom.development.js之前引入，因为react.development.js是核心库。二、jsx的语法编写规则定义虚拟DOM时，不要写引号标签中混入JS表达式要用{}包起来标签内样式的类名指定不能使用class，得用className在标签内写内联样式，要用style={{color:'red',fontSize:'12px'}}形式去写虚拟DOM只有一个根原创 2021-10-08 14:42:35 · 1954 阅读 · 0 评论 -
2021前端常见面试题及答案-HTML、CSS、JavaScript汇总，基础很重要！
2021前端面试题汇总，巩固基础目录2021前端面试题汇总，巩固基础HTML相关面试题1.网络中使用最多的图片格式有哪些2. 音、视频标签的使用3. HTML5新增的内容4.HTML5新增语义化标签有哪些，以及语义化标签的优点5.行内元素和块元素6.iframe是什么？有什么缺点？7.Doctype作用？严格模式和混杂模式如何区分，有何意义？CSS相关面试题1. CSS3新增的特性**边框：****背景：****渐变****文本效果****转换****过渡****动画**2.简述一下盒子模型3.清除浮动的原创 2021-08-30 14:05:39 · 2294 阅读 · 4 评论 -
node+express设置cookie后，服务端和客户端都获取不到
node与express搭建的服务，设置cookie后，服务端和客户端都无法获取翻车现场最近在做一个node+react的全栈项目，中途需要设置cookie来保存用户的id，但是在后台设置之后，发现路由总是跳不过去，将cookie打印后，无论前端还是后端，竟然都是undefined情况分析：在后台设置了cookie,但是在浏览器的cookie栏里并没有任何的cookie，前后台获取cookie都是undefined。一、与浏览器设置有关如果是谷歌浏览器：在地址栏输入：chrome://fla原创 2021-06-24 14:52:24 · 1106 阅读 · 0 评论 -
nodejs设置session属性时报错Cannot set property ‘xxx‘ of undefined
nodejs设置session属性时报错Cannot set property ‘xxx’ of undefined这几天在学习node的过程中，想设置session和cookie，从而保存用户的登录状态，但是中途发现老报错。翻车现场原因：session写的位置不对TypeError: Cannot set property 'age' of undefined at D:\fore-end\node\10-project\routes\index.js:8:22 at Layer原创 2021-06-02 13:17:12 · 931 阅读 · 0 评论 -
nodejs连接mysql报错：throw err； // Rethrow non-MySQL errors
Nodejs连接mysql报错：throw err; // Rethrow non-MySQL errors报错环境：mysql8.0以上，windows10，64位翻车现场D:\fore-end\node\08-使用mysql获取数据\node_modules\mysql\lib\protocol\Parser.js:437 throw err; // Rethrow non-MySQL errors ^TypeError: Cannot read property '原创 2021-05-31 17:14:08 · 11020 阅读 · 5 评论 -
关于Vue的一次自我面试
关于Vue的一次自我面试关于Vue的一次自我面试一、介绍一下Vue的响应式系统二、computed与watch的区别三、介绍一下Vue的生命周期函数四、为什么组建的data必须是一个函数五、组件之间是如何通信的六、Vue事件绑定的原理七、slot是什么？有什么作用？原理是什么？八、Vue模板渲染的原理是什么？九、template预编译是什么？十、template与jsx有什么区别？十一、说一下什么是Virtual DOM？十二、介绍一下Vue中的Diff算法十三、key属性的作用是什么？十四、Vue2.0与原创 2021-05-22 18:01:51 · 275 阅读 · 0 评论 -
vue v-for循环遍历列表，点击每一项，根据服务器返回的id值，将不同的数据分别渲染在同一个页面
vue v-for循环列表，点击每一项，根据服务器传的id值，在同一页面渲染不同的数据问题起源：这几天在练习vue项目，其中vue-router的作用，在整个项目中起着至关重要的作用，其中包括一级路由的跳转、二级路由的跳转，这几天我遇到的这个问题是根据遍历服务器所给的数据，从而给这些数据都添加一个点击事件，点击不同的数据列表，让其渲染不同的内容，但是渲染的这些内容都是在这同一个页面组件中。这就用到了路由的动态匹配，但是由于是自己第一次练习，所以有些细节的东西没有掌握好，因此花费了一些时间去理解，所以今天原创 2021-04-26 09:02:14 · 2263 阅读 · 0 评论 -
Vue使用mockjs来生成模拟数据
Mockjs生成模拟数据在前端进行开发的时候，我们需要拿到后端的接口，然后调用进而拿到后端所提供的数据；但在实际情况当中，有可能后端的接口还没有设计好，但是你想要拿到数据进行测试，这个时候该怎么办呢？这个时候，就该体现mockjs的作用了，它可以为我们提供模拟的数据，让我们在开发中便于测试，当后端接口设计好后，我们只需要将对应的接口请求函数的路径换掉，其他的地方不变，这样就大大提高了我们的开发效率。最近我也在写项目，然后遇到类似的问题，所以今天就特意总结了一下mockjs的基本使用！一、首先，需要安装原创 2021-04-24 14:44:34 · 1878 阅读 · 0 评论 -
Vue+vant使用uploader上传图片
Vue使用vant上传图片给后台服务器这几天在写项目时，遇到了基本的业务需求，上传图片给后台，我是使用vant来开发的，由于是第一次亲身体验这种情况，所以当时我也是一头雾水，不知道该如何去下手，所以就从网上找到了相关的资源，然后发现，上传图片需要用到FromData对象。而且也需要设置相应的响应头。具体代码如下：这是vant所提供上传图片的组件<van-uploader v-model="fileList" multiple :max-count="1" :after-read=原创 2021-04-21 16:57:33 · 10094 阅读 · 2 评论 -
Vue使用localStorage保存登录状态
前端Vue项目使用localStorage来保存用户登陆状态在使用Vue写app项目时，最基本的功能那肯定就是登陆注册非它莫属了，但是最近我在写项目的时候遇到了一个问题，那就是在调用后端接口的同时，却无法进行正常的调用，原因其实很简单，那就是用户登录的状态无法保持！！！于是我在网上疯狂的查找其中相关的方法，但是看着各个博主的各种方式都可以实现，自己却怎么也搞不出来。所以今天特意总结了一下我的项目是用到vant来开发的，所以会有对应的组件首先应该在登录的过程中，调用后端所提供的接口，然后拿到后端传给的原创 2021-04-20 14:16:57 · 4426 阅读 · 1 评论 -
2021前端JavaScript面试题及答案
准备面试的你，必看这8道JavaScript面试题，摸透JavaScript的基础一、执行以下代码，测试浏览器会输出什么<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d原创 2021-03-22 17:06:13 · 5875 阅读 · 2 评论 -
JS中数组的常用方法
JavaScript中数组的常用方法方法目录JavaScript中数组的常用方法1.`push()` 数组末尾添加元素2.`unshit()` 数组开始位置添加元素3.`shift()` 删除数组中的第一项4.`pop()` 删除数组中的最后一项5.`splice()` 数组的增删改6.`slice()` 查找两个索引中间的内容返回到新数组7.`concat()` 数组拼接8.`toString()` 数组转换为字符串9.`join()` 数组转换为字符串10.`indexOf()/lastindexOf原创 2021-02-18 17:27:33 · 712 阅读 · 0 评论 -
JavaScript字符串中常用方法
之前练习算法的时候，算法题都是用Java写的，但是我是一位前端人，应该用JS来写算法，但是对于JS的一些库和常用方法我好像都是在云里雾里，所以今天特意将JS字符串常用的方法总结如下：JavaScript字符串常用方法1.charAt（index）返回指定位置的字符index为参数，类型为Number，从0开始；如果使用该方法不带参数或者参数为NaN均返回字符串的第一个字符2.charCodeAt（index）返回在指定位置字符的Unicode编码index为参数，类型为Number3.c原创 2021-02-17 21:09:52 · 361 阅读 · 1 评论 -
‘无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称‘ 或 ‘vue不是内部或外部命令‘
‘无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称’ 或 ‘vue不是内部或外部命令’ 解决方案如下：在用vue脚手架搭建项目时，报错该错误：‘无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称’ 或 ‘vue不是内部或外部命令’。报错原因：系统没有找到 vue.cmd 的地址，需要将地址加入到环境变量。解决方案：如果没有修改npm的全局模块的存放路径以及cache的路径及增加环境变量，那么就去c盘用户的AppData\Roaming\npm下找到vue原创 2021-02-05 09:45:55 · 5445 阅读 · 1 评论 -
npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。
npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。解决方案如下：问题原因：npm环境变量配置问题在cmd窗口输出node，回车后弹出信息node不是内部或外部命令，也不是可运行的程序，这时候就是环境变量配置的问题！步骤如下：1.打开此电脑==> 右键属性 ==>高级系统设置 ==>环境变量在用户变量新建，具体操作如下：2.npm的全局模块的存放路径以及cache的路径及增加环境原创 2021-02-05 09:45:31 · 5581 阅读 · 0 评论 -
vue : 无法加载文件 F:\nodejs\node_global\vue.ps1，因为在此系统上禁止运行脚本”
vue : 无法加载文件 F:\nodejs\node_global\vue.ps1，因为在此系统上禁止运行脚本” 解决方案如下：在使用VSCode终端使用PowerShell，用脚手架创建vue项目时，出现了一下报错信息：vue : 无法加载文件 F:\nodejs\node_global\vue.ps1原因分析：PowerShell执行时阻止了该操作，在终端输入Get-ExecutionPolicy指令后回车，发现返回Restricted，为受限制状态。解决办法：在终端输入Set-Execut原创 2021-02-04 21:29:24 · 1712 阅读 · 2 评论 -
深入理解Vue生命周期函数
对Vue生命周期函数的个人理解对于Vue已经学习了有一段时间了，但是有些东西还是似懂非懂，尤其是对于Vue生命周期函数，仅仅是有一些印象，但是在实际的运用过程中还是不会，有些东西实在是理解不了，所以今天就找了些资料，顺便自己也总结了一下。Vue生命周期函数图解将Vue生命周期函数抽成了下面几个周期9.1 组件创建期间9.1.1 beforeCreatebeforeCreate这个函数会在组件实例刚被创建，组件属性计算之前（如data属性），进行调用; el和data并未初始化9.1.2原创 2021-02-02 20:17:44 · 282 阅读 · 3 评论 -
Webpack基本配置--打包资源
webpack打包资源笔记一、Webpack简介1.1webpack是什么Webpack是一种前端资源构建工具，一个静态资源打包器，在Webpack看来，所有的资源文件都会作为模块处理，根据模块的依赖M关系进行静态分析，打包生成对应的静态资源（bundle）。1.2webpack的五个核心概念Entry入口(Entry)指示webpack以哪个文件为入口起点开始打包，分析构建内部依赖图。Output输出(Output)指示webpack打包后的资源bundles输出到哪里去，以及如何原创 2020-12-27 13:41:24 · 297 阅读 · 0 评论 -
Web前端Vue基础
Vue笔记目录Vue 笔记一、Vue的基本模板语法1.1插值操作1.2插值操作中有关其他指令的使用1.3动态绑定的指令1.4计算属性1.5事件监听1.6条件判断1.7循环遍历1.8表单绑定v-model（双向绑定）二、组件化开发2.1注册组件的基本步骤2.2组件模板的分离写法2.3组件数据的保存2.4父子组件的通信2.5父子组件的访问方式3.6插槽slotVue 笔记一、Vue的基本模板语法1.1插值操作<script src="https://cdn.jsdelivr.net/npm/vue原创 2020-12-24 13:14:21 · 394 阅读 · 1 评论 -
webpack打包报错：Invalid configuration object. Webpack has been initialized using a configuration object
翻车现场，惨不忍睹这块的modules写错了，应该是module！！！原创 2020-12-22 10:56:13 · 12354 阅读 · 2 评论 -
Module build failed (from ../../node_modules/babel-loader/lib/index.js): Error: Cannot find module ‘
webpack 命令 Module build failed (from ./node_modules/babel-loader/lib/index.js) 错误问题解决方案解决方案控制台输入 npm install @babel/core @babel/preset-env 命令成功解决原创 2020-12-21 21:45:39 · 1479 阅读 · 0 评论 -
webpack报错： if (!scriptUrl) throw new Error(“Automatic publicPath is not supported in this
报错 /******/ if (!scriptUrl) throw new Error(“Automatic publicPath is not supported in this browser”);Error: Automatic publicPath is not supported in this browserindex.html:95D:/fore-end/webpack/04-打包图片资源/src/index.html:95:33index.html:98D:/fore-e原创 2020-12-20 14:34:35 · 534 阅读 · 0 评论 -
webpack报错：ERROR in TypeError: The ‘compilation‘ argument must be an instance of Compilation
一、Webpack5报错：JavascriptModulesPlugin.js:119 getCompilationHooks[fore-end]/[webpack]/lib/javascript/JavascriptModulesPlugin.js:119:10CommonJsChunkFormatPlugin.js:30[fore-end]/[webpack]/lib/javascript/CommonJsChunkFormatPlugin.js:30:19Hook.js:14 Hook原创 2020-12-19 18:36:34 · 3297 阅读 · 2 评论 -
ES6详细知识点汇总
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar原创 2020-11-27 16:39:13 · 535 阅读 · 0 评论 -
querySelector和getElementById方法的区别
querySelector、querySelectorAll和getElementById、getElementsByTagName()等的区别在做开发时，getElementById() 返回带有指定 ID 的元素。getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。这三类我们都熟知是获取元素的基本方式，但是在学习的过程中，也发现了querySel原创 2020-10-31 11:26:09 · 6812 阅读 · 0 评论 -
bootstrap响应开发原理与栅格系统
Bootstrap相关知识1.响应式开发的原理前端的响应式开发原理利用到了媒体查询，通常情况下，大多数开发适用于以下四个适配：超小屏幕 小于768px 布局容器宽度为100%@media screen and （max-width:767px）{ .container{ width:100%; }}小屏幕 大于768px 布局宽度为750px@media screen and (min-width:768px){ .container{ width:750px; }原创 2020-10-31 10:56:26 · 374 阅读 · 0 评论 -
CSS3常用基本知识总结
CSS3核心知识总结一、渐变1.1线性渐变渐变是基于background-image来完成的，线性渐变需要设置一个起始点和方向（指定为一个角度），换需要定义终止色。1.linear-gradient() 默认从上到下发生渐变2.linear-gradient() 改变渐变的方向...原创 2020-10-26 14:47:16 · 644 阅读 · 1 评论 -
HTML5核心知识总结
HTML5核心常用知识总结一、canvas（画布）绘制详细说明1.1canvas的基本用法1.什么是canvas？canvas是HTML5新增的元素，可通过JavaScript中的脚本来绘制图形，创建动画。使用canvas标签时，要成对出现；canvas元素默认具有高和宽，width：300px，height：150px。2.替换内容canvas在ie9之前的ie浏览器中不支持，要在该浏览器上给用户展示替代内容，我们只需要在canvas标签中提供替换内容就可以了。支持canvas的浏览器会忽略在原创 2020-10-07 18:56:38 · 659 阅读 · 0 评论 -
jQuery相关的基础知识
jQuery相关的知识总结一、关于jQuery1.jQuey是什么？jQuery是一个js的函数库，写得少，功能实现的多。2.jQuery的优点选择器强大：方便快捷查找到DOM元素。隐式遍历：一次可以操作多个元素。读写合一：读写数据用的是一个函数。链式调用：可以通过 “.” 不断地去调用jQuery对象的方法。二、jQuery核心函数jQuery向外暴露的就是jQuery函数，可以直接使用。当成一般函数：$()，括号里可传参数：1.可以是function，相当于window.onloa原创 2020-10-05 19:07:08 · 225 阅读 · 0 评论 -
AJAX的知识点详细总结
AJAX相关知识要点一、原生AJAX1.1 AJAX简介AJAX全称为Asynchronous JavaScript And XML，就是异步的JS 和 XML。通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。1.2 XML简介XML可扩展标记语言，XML被设计用来传输和存储数据。XML和HTML类似，不同的HTML中都是预定义标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据。例如：比如说有一个学生数据name="张三";age="14";sex=原创 2020-09-22 20:33:30 · 1187 阅读 · 0 评论 -
JavaScript高级知识汇总（高级篇）
JavaScript知识总结（高级篇）1.深入基础1.1数据类型1.分类：-基本类型-String:任意字符串-Number:任意的数字-boolean: true/false-undefined:未定义-null:空-引用（对象）类型-Object:任意对象-Function：一种特别的对象（可以执行）-Array：一种特别的对象（数值下标，内部数据是有序的）2.判断：-typeof：可以判断：undefined、数值、字符串、布尔值不能判断: null与object原创 2020-09-10 12:43:29 · 16011 阅读 · 3 评论 -
Web前端HTML+CSS零基础入门知识总结
HTML页面标签框架<html></html>原创 2020-07-25 14:13:20 · 1075 阅读 · 0 评论 -
HTML、CSS小练习-小米官网首屏静态页面
web前端练习，小米官网静态页面在练习过程中没有找到相应的图片文字，所以有些图片文字都是重复使用的！效果图：html代码块<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2020-07-29 12:31:43 · 2662 阅读 · 1 评论 -
JavaScript基础知识总结（基础篇）
三条输出语句： // 在浏览器中弹出警告框 alert("你能行么？"); // 在浏览器页面中输出一个内容 document.write("我在浏览器页面中显示"); // 向控制台输出一个内容 console.log("我在控制台显示");...原创 2020-08-20 17:40:50 · 1297 阅读 · 0 评论