前端相关
文章平均质量分 75
No8g攻城狮
熟了再告诉你
展开
-
【前端】yarn install
如果 yarn.lock 不存在,或者不足以满足 package.json 中列出的所有依赖(例如,如果你手动添加对 package.json 的依赖),Yarn 会查找满足 package.json 中的约束的最新可用版本。如果 yarn.lock 存在并且足以满足 package.json 中列出的所有依赖,则安装 yarn.lock 中记录的确切版本,并且 yarn.lock 将保持不变。当你刚刚签出项目的代码时,或者当项目中的其他开发者添加了你需要选择的新依赖时,最常使用此方法。原创 2023-11-20 18:38:30 · 820 阅读 · 10 评论 -
【前端】yarn介绍和使用
yarn是快速、可靠、安全的依赖管理。yarn官网:https://yarn.nodejs.cn/Yarn 是代码的包管理器。它允许你与世界各地的其他开发者使用和共享(例如 JavaScript)代码。Yarn 可以快速、安全、可靠地完成此操作,因此你无需担心。Yarn 允许你使用其他开发者针对不同问题的解决方案,使你更轻松地开发软件。如果你遇到问题,你可以报告问题或回馈,当问题解决后,你可以使用 Yarn 使其保持最新状态。代码通过称为 包(有时称为 模块)的方式共享。原创 2023-11-20 18:34:08 · 807 阅读 · 12 评论 -
【前端异常】JavaScript错误处理:分析 Uncaught(in promise) error
Uncaught(in promise) error 表示一个Promise被rejected且未处理。});在上面示例中,创建了一个Promise并使用reject方法将其状态设置为rejected。但是,没有在后续代码中处理这个错误,此时就会导致 Uncaught(in promise) error。原创 2023-11-13 18:14:20 · 28656 阅读 · 64 评论 -
【基础】字母,数字,下划线或者数字等的常用正则表达式
正则表达式(Regular Expression)是一种文本模式,包括普通字符(例如,a 到 z 之间的字母)和特殊字符(称为"元字符"),可以用来描述和匹配字符串的特定模式。正则表达式是一种用于模式匹配和搜索文本的工具。正则表达式提供了一种灵活且强大的方式来查找、替换、验证和提取文本数据。正则表达式可以应用于各种编程语言和文本处理工具中,如 JavaScript、Python、Java、Perl 等。原创 2023-10-25 23:45:00 · 2263 阅读 · 6 评论 -
【前端】Vue项目中 JSON 编辑器的使用
现有一个vue项目,需要一个json编辑器,能够格式化json数据,同时也支持编辑功能。以下是列举了几种,可以根据风格或者喜好随意选择其中的一种即可。如果有兴趣的话,每一种都可以试着写下哦。2.2 示例代码2.3 效果图以下是vue2版本的依赖,如果需要vue3请自行查询对应的版本然后安装对应的依赖3.2 示例代码3.3 效果图官网:https://wangbin3162.gitee.io/bin-code-editor/#/jsonEditor4.2 示例代码4.3 效果图5.2原创 2023-06-01 22:00:00 · 3280 阅读 · 8 评论 -
【前端相关】elementui使用el-upload组件实现自定义上传
官方的描述是说 覆盖默认的上传行为,可以自定义上传的实现,类型是 function,可选值与默认值都省略。经过我的探索,我发现它可以接收一个参数,这个参数保存了你文件上传的对象。elmentui 中的upload默认的提交行为是通过 action 属性中输入的 url 链接,提交到指定的服务器上。先定义了一个 el-upload标签,在里面先把自动上传文件关闭,由于action是必填项,所以就塞了个#进去,在。在这个函数里面,我实现了自定义文件上传的请求。上传文件之前的钩子,参数为上传的文件,若返回。原创 2023-05-24 20:15:00 · 23214 阅读 · 18 评论 -
【前端】elementUI表格根据状态显示不同的字体颜色
el-table标签中增加一个方法回调,:cell-style=“cellStyle”。elementUI表格根据状态显示不同的字体颜色。原创 2023-05-16 20:45:00 · 964 阅读 · 20 评论 -
【异常解决】浏览器无法访问此网站ERR_UNSAFE_PORT/网页可能无法连接,或者它已永久性地移动到了新网址问题解决方案
经过抓取报文分析,并没有抓到访问服务器的报文,所以定位发现是浏览器拦截了请求,和服务器没关系。为什么会拦截这个请求?主要原因是浏览器有自身的保护机制即浏览器会禁用一些网络浏览以外的端口----非安全端口。因为chorme浏览器有自己的默认非安全端口,若访问这些端口就会出现这个错误,并且所有采用chrome内核的浏览器都会这样。以下列出Chrome浏览器默认非安全端口,避免以后再踩坑。原创 2023-05-10 20:15:00 · 17460 阅读 · 20 评论 -
【Vue】vue如何将秒数转成“时分秒”格式
今天给大家分享一下vue如何将秒数转成“时分秒”格式的相关知识点,可能还有一部分人都还不太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获。原创 2023-04-27 18:25:43 · 2911 阅读 · 8 评论 -
【Node】node.js安装与配置(详细步骤)
说明:由于npm的服务器在海外,所以访问速度比较慢,访问不稳定 ,cnpm的服务器是由淘宝团队提供,服务器在国内,cnpm是npm镜像,一般会同步更新,相差在10分钟,所以cnpm在安装一些软件时候会比较有优势。我安装的是16.18.1版本的Node.js,这是最新的版本,最新版的会自动添加环境变量,目前不需要添加环境变量,如果安装旧版本需要手动配置一下环境变量,这里就省略了,不会的请自行百度。经过上面的步骤,nodejs下载的模块就会自动下载到我们自定义的目录,接下来我们测试一下是否更改成功。原创 2023-01-03 16:20:11 · 1761 阅读 · 24 评论 -
【VBScript】vbs 错误未结束的错误字符串常量
本文目录一、问题描述二、问题原因三、解决方案一、问题描述今天在看《计算机是怎么跑起来的》第十章(试着加密数据吧)的时候,在Window10电脑上使用VBScript脚本编写一个弹出窗口时,明明是按照书籍上的示例程序抄写的,编辑工具是Notepad++,抄写完之后保存为.vbs的后缀即可。但是运行的时候却报“未结束的字符串常量”的错误。二、问题原因使用Notepad++ 默认的字符编码是 UTF-8,对照着示例程序检查了好几遍都没有问题,结果网上一查原因竟然是字符编码有问题..原创 2022-02-04 20:58:40 · 4113 阅读 · 6 评论 -
【前端异常】Module build failed: Error: ENOENT: no such file or directory, scandir ‘G:\OPWeb\public\node_m
本文目录一、背景描述二、问题原因三、解决方案一、背景描述Module build failed: Error: ENOENT: no such file or directory, scandir 'G:\web_project\OPWeb(运营平台web端)\dev_OPWeb-V1.01.001\OPWeb\public\node_modules\node-sass\vendor'具体报错信息如下图所示:这种情况遇到过很多次,每次都是没有头绪。今天在前端大佬的帮助下,终于原创 2021-02-23 09:32:19 · 20659 阅读 · 28 评论 -
【前端异常】Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.
本文目录一、背景描述二、报错原因三、解决方案一、背景描述在做公司网站的时候,上午页面还好好的,然后中午我在Chrome浏览器安装了一个 CSDN开发助手 的插件,然后同一个页面,没有修改过,下午从Chrome浏览器刷新页面发现报错,报错信息如下:Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.可以看下报错的截图信息:二、报错原因原因是我在Ch原创 2021-02-04 16:32:56 · 25133 阅读 · 20 评论 -
【前端】微信H5,js判断是否在微信浏览器中打开
微信H5,Js判断是否在微信浏览器中打开<script type="text/javascript"> window.onload = function() { var weChart = false var ios1 = document.getElementById('ios') var android1 = document.getElementById('android') var iosHref = ios.原创 2020-12-07 19:35:33 · 1053 阅读 · 7 评论 -
【JS用法】js判断字符串是否包含某个字符串
js判断字符串是否包含某个字符串方法一:includes方法//str.includes("")返回一个布尔值,值为true时表示包含var str = "hello world";if(str.includes("world")){ alert("Hi,world");}方法二:indexOf方法var str = "123456";if(str.indexOf("5") != -1) { console.log("字符串123456里包含了5");原创 2020-11-13 16:14:21 · 1395 阅读 · 4 评论 -
【CSS用法】css限制一行文字数量,超出部分用省略号显示
为了保证页面的整洁美观,在很多的时候,我们常需要隐藏超出长度的文字。这在列表条目,题目,名称等地方常用到。CSS代码:text-overflow:ellipsis; // 用省略号overflow:hidden; // 超出部分隐藏white-space:nowrap; // 文本不换行,这样超出一行的部分被截取,显示...说明:text-overflow: 用来设置是否使用一个省略标记(···)标示对象内文本的溢出。white-space:now...原创 2020-11-13 15:34:22 · 3378 阅读 · 4 评论 -
【前端用法】HTML5 Video标签如何屏蔽右键视频另存为的js代码以及如何禁用浏览器控件,Video 禁止鼠标右键下载
本文目录一、背景二、解决方案一、背景最近公司发现有竞争对手下载我司网站上的视频,并据为已用,严重损害我司利益,所以让我在网站上添加禁止鼠标右键下载视频的功能。二、解决方案步骤一,先屏蔽视频播放器右下角三个点的下载按钮(chrome会显示三个点)在Video标签内添加 controlslist="nodownload" 属性<div class="section-content"> <video autoplay="" id="video01" lo原创 2020-10-21 20:20:06 · 6778 阅读 · 12 评论 -
【element-ui用法】el-radio-group默认选择和数据回显问题的解决方案
错误的代码如下:<el-form-item label="是否内置:" prop="builtIn"> <el-radio-group v-model="updateForm.builtIn"> <el-radio :label="0">是</el-radio> <el-radio :label="1">否</el-radio> </el-radio-group>&.原创 2020-09-11 18:34:10 · 7041 阅读 · 9 评论 -
【前端】Object.keys()的使用方法及数组遍历,Object.keys(object).forEach(e => {您的代码})
Object.keys()的使用方法及数组遍历Object.keys()用于获得由对象属性名组成的数组,可与数组遍历相结合使用,非常好用。和for...in方法功能类似,但有使用区别!数组遍历可以用for()或forEach()来实现,forEach()方法是ECMAScript5定义的遍历数组的一个新方法,按照索引的顺序挨个传递给定义的函数;接下来就Object.keys()分别结合for()和forEach()使用进行运用,用console.info()输出到控制台,代码如下:方法一:f原创 2020-08-19 17:48:29 · 14149 阅读 · 3 评论 -
【Vue异常】Vue报错“Trailing spaces not allowed”
本文目录一、错误信息二、报错原因三、解决方案一、错误信息最近在使用vue开发前端工程,但是在VSCode中开发Vue中 报错:“Trailing spaces not allowed”,详情报错信息如下:二、报错原因是因为多出了一个(或者多个)空格,把多余的空格删除就可以了三、解决方案把自己修改的文件,仔细找一下,将多余的空格删除就可以即可解决这个问题完结!...原创 2020-07-07 12:54:19 · 1611 阅读 · 2 评论 -
【前端异常】vscode:无法将“cnpm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称,Cannot find module ”webpack“
一、项目背景编译器:VScode + Vue项目。VSCode 打开前端vue项目时竟然报错。二、出错信息如下内容所示为VScode项目控制台显示的错误信息:PS D:\work-span\project> cnpm install webpack-dev-server -gcnpm : 无法将“cnpm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一次。所在位置 行: 字符:+ cnpm insta原创 2020-06-25 10:50:39 · 19961 阅读 · 15 评论 -
【前端用法】JavaScript图片懒加载原理及实现(JavaScript实现图片懒加载的方法分析)
本文目录一、懒加载原理1.1 原理1.2 目的二、代码实现2.1 实现步骤2.2 JS代码一、懒加载原理1.1 原理先将img标签的src链接设为同一张图片,然后给img标签设置自定义属性(比如 data-original),然后将真正的图片地址存储在data-src中,当JS监听到该图片元素进入可视窗口时,将自定义属性中的地址存储到src属性中,达到懒加载的效果。1.2 目的这样做能够避免页面一次性向服务器发送大量请求,导致服务器响应变慢,最终导致页面卡顿、崩溃原创 2020-05-19 21:10:46 · 1088 阅读 · 1 评论 -
【前端用法】css3样式之----object-fit属性与使用方法
本文目录一、object-fit介绍二、object-fit语法2.1 语法2.2 取值2.3 正式语法三、object-fit示例四、object-fit浏览器兼容性做项目经常会遇到图片列表展示,图片一般是用户从后台上传的,当然也有静态资源图片的,上传的图片尺寸千差万别。如果前端不控制图片大小,整个排版就会很乱,如果给定长宽,图片又会变形,用背景图片来处理又特别麻烦。这个问题一直苦恼了我好久,最近在前端工程师的帮助下,终于找到解决办法了。一、object-fit介绍原创 2020-05-14 10:38:09 · 1062 阅读 · 1 评论 -
【前端用法】$.ajax()方法详解,以及$.ajax()标准写法
$.ajax({ url:"http://www.microsoft.com", //请求的url地址 dataType:"json", //返回格式为json async:true,//请求是否异步,默认为异步,这也是ajax重要特性 data:{"id":"value"}, //参数值 type:"POST", //请求方式 beforeSend:function(){ //请求前的处理 }, s...原创 2020-05-12 21:05:26 · 1230 阅读 · 1 评论 -
【前端用法】jquery获取当前页面的URL信息
目录1、Location的概念2、Location的属性3、Location的举例说明4、Location的方法5、Location的总结作为一个后端的开发大神,最近在做公司的一个网站,前端有很多页面,而我对于前端来说确是菜鸟,今天就被问了一个问题,如何获取当前页面的url以及如何分析它的每一部分,下面记录一下我的心得。1、Location的概念Location接...原创 2020-03-25 12:54:11 · 480 阅读 · 0 评论 -
【Java用法】代码参数里的 payload 是什么意思?
首先解释一下什么是 payload?payload 英语单词意思是“(导弹、火箭等的)有效载荷,有效负荷;收费载重,酬载;(工厂、企业等)工资负担”。对于程序员来说,有效载重究竟是个什么,又是一个新的问题!要解释什么是有效载重,拿货运运输行业比喻一下:例如有一位客户需要支付一笔费用委托货车司机运送一车钢板,钢板本身的重量、车子的重量、司机的重量等等,这些都属于载重(load)。...原创 2020-03-23 17:05:42 · 5596 阅读 · 0 评论 -
【前端用法】如何让html引用公共的头部和尾部(多个html文件公用一个header.html和footer.html)
目录1、问题描述2、解决方案3、示例代码1、问题描述目前在做公司的一个网站,静态页面有很多,顶部导航和底部导航都是相同的,在每个页面中写头部和底部是可以的,但是修改起来特别费时费力,后期很难维护。那么如何实现多个.html静态页,引用同一个header.html和footer.html文件呢?前端静态html页面,封装公共的头文件(header:顶部页眉,顶部导航栏等部...原创 2020-03-18 12:48:55 · 14124 阅读 · 19 评论 -
【前端异常】解决前端引入Bootstrap的dropdowns 菜单时报错,Uncaught TypeError: Bootstrap‘s dropdowns require Popper.js
目录1、问题描述2、示例代码3、解决方案方案1:直接引用popper.js方案2:npm安装1、问题描述在做网站时,引用了Bootstrap的下拉菜单,测试代码的时候遇到了下拉菜单无法显示的问题,我使用bootstrap的dropdown部件,打开网页后点击dropdown,报了如下错误:Uncaught TypeError:Bootstrap dropdown r...原创 2020-03-18 11:02:04 · 3892 阅读 · 5 评论 -
【前端用法】html5实现地理位置定位(JS获取当前地理位置的方法)
目前在做公司的一个网站,有个需求是:当别人进入网站时自动定位他的地理位置,包括市区,方便给他推荐当前城市的特色信息。其实,这也是一个非常实用的功能,在网上搜到很多,有的不能用,现将我整理的两个能用的记录一下,以便后续再使用。方案1:<!DOCTYPE html><html lang="en"><head> <meta http-e......原创 2020-03-03 13:16:26 · 25021 阅读 · 6 评论 -
【前端用法】jQuery在线引用地址(全)
BootCDN1、稳定、快速、免费的前端开源项目 CDN 加速服务,共收录了3450个前端开源项目:https://www.bootcdn.cn/all/2、jQuery通过CDN在线引用地址:https://www.bootcdn.cn/jquery/...原创 2020-03-03 09:16:03 · 14709 阅读 · 2 评论 -
【前端用法】form表单重置、清空方法记录
首先:contact-form 是form的id属性值方法一:调用reset()方法document.getElementById("contact-form")[0].reset();注意:网上说用document.getElementById("myform").reset();可以重置的,实际上并不能清空表单内容,因为用document.getElementById()或者do...原创 2020-01-19 14:52:53 · 8031 阅读 · 4 评论 -
window location assign的使用
目录Locationassign()方法1、定义2、语法3、浏览器支持4、实例Locationassign()方法1、定义assign()方法用于加载一个新的文档(页面或者网页)。2、语法location.assign(URL)3、浏览器支持所有主要浏览器都支持 assign() 方法(IE,FireFox,Google,Opera,safa...原创 2020-01-18 17:13:44 · 3209 阅读 · 0 评论 -
display属性常用的四个值:block、inline、inline-block、none
目录1、block 块级元素1.1、块级元素特点1.2、常用的块状元素有2、inline 内联(行级)元素2.1、块级元素特点2.2、常用的内联元素有3、display:none4、总结1、block 块级元素1.1、块级元素特点a. block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父级宽度。b. ...原创 2020-01-07 16:16:05 · 2740 阅读 · 2 评论 -
js打开新窗口与跳转页面的方法
1、超链接<a href="http://www.baidu.net" title="脚本之家">Welcome</a>等效于js代码window.location.href="https://www.baidu.com"; //在同当前窗口中打开窗口2、超链接<a href="http://www.baidu.net" title="脚本之...原创 2019-12-11 16:50:55 · 443 阅读 · 0 评论 -
前端好的博客收藏
HTML CSS整理笔记动画:Flex布局 | 别再用传统方式进行网页布局了(上)Flex 布局教程:语法篇(阮一峰)Flex 布局教程:实例篇(阮一峰)原创 2019-12-03 15:47:41 · 552 阅读 · 0 评论 -
同样的JS效果,有部分页面生效,有部分页面无效的原因(怪异模式)
目前在做的一个项目中,发现了一个奇怪的现象,同样的引入的JS效果,有部分页面生效,有部分页面无效,很无语。目录一、项目背景:二、现象描述:三、解决方案:四、原因:一、项目背景:header.html和footer.html是两个公共的代码片段,在其他页面中引入进来,包含在自己的页面中,header.html和footer.html里的内容都显示了出来。二、现象描述:...原创 2019-11-29 14:47:53 · 1015 阅读 · 1 评论 -
如何将网页的title前面的图标替换成自己公司的图标
首先要准备自己的图标(logo),图标是什么格式无所谓,但是要显示在页面title前面的图标必须是.ico格式的图片,这就需要将自己的图标或者Logo转换成为.ico格式的图片,网上有很多在线工具可以将自己的图片转换成ico格式的图片,这里列两个制作网站:在线ico转换工具:生成的图标是可以选尺寸的,原图片的大小不限制http://www.bitbug.net/ 生成的图标背景是图...原创 2019-11-13 19:17:51 · 967 阅读 · 0 评论 -
JavaScript(JS)的BOM对象(JS的Browser对象)----什么是BOM对象?
1. 概念:Browser Object Model 浏览器对象模型:将浏览器的各个组成部分封装成对象。感觉不懂的可以看下图所示:2. 组成: * Window:窗口对象 * Navigator:浏览器对象(不常用) * Screen:显示器屏幕对象(不常用) * History:历史记录对象 * Location:地址栏对象3. Win...原创 2019-04-02 12:35:59 · 1464 阅读 · 0 评论 -
JavaScript(JS)的基本对象(function, Array, Boolean, Date, Math, Number, String, RegExp, Global)
JavaScript(JS)的基本对象参考文档w3school在线教程Function Array Boolean Date Math Number String RegExp Global一、Function:函数(方法)对象 1. 创建的方式: 1. var fun = new Function(形式参数列表,方法...原创 2019-03-17 23:58:26 · 2121 阅读 · 0 评论 -
【JavaScript用法】JavaScript(JS)的基本语法(JS数据类型,JS变量,JS运算符,JS流程控制语句)
JavaScript(JS)的基本语法目录JavaScript(JS)的基本语法一. 与html结合方式二. 注释三. 数据类型:四. 变量五. 运算符(和Java有点类似)六. 流程控制语句(和JAVA类似):七. JS特殊语法:一. 与html结合方式 1. 内部JS:定义<script>,标签体内容就是js代码(...原创 2019-03-17 16:59:15 · 4625 阅读 · 2 评论