web前端
文章平均质量分 88
wantLG
我不是代码的搬运工,我只是BUG的创造者...欢迎交流;
if(true){
return "I create BUG";
}
展开
-
前端调试合集(包含移动端/内嵌h5)
chrome的控制台是前端最强大的调试工具之一,很多FE同学每天在使用功能只是其中的一小部分,很多非常强大的功能值得我们继续深挖。可出输出console对象下不同方法的语义信息,info(普通信息),log(日志),error(错误信息),warn(警告信息),可以输出代码执行时抛出的错误。移动端调试的时候,如果需要查看自己打印的日志和请求返回,在不借助电脑调试的情况下,就可以借助vconsole插件来完成。打开Mac端safari,在开发选项找到移动端需要调试的页面,即可调起浏览器的控制台进行调试啦。原创 2024-07-24 17:23:50 · 745 阅读 · 0 评论 -
事件循环,还在微任务宏任务?过时了,快看看新版浏览器事件循环event loop(message loop)
程序运⾏需要有它⾃⼰专属的内存空间,可以把这块内存空间简单的理解为进程。:有了进程,就可以执行程序代码了,一个进程至少包含一个线程,这个线程称之为主线程。如果想要多块代码同时运行,原创 2023-09-15 15:22:14 · 1283 阅读 · 1 评论 -
.sh脚本shell编写简单的git自动提交(无分支,个人项目适合)
shell基本操作命令pwd->是获取当前文件夹的绝对路径把pwd下面是获取当前shell文件所在的文件绝对路径,并赋给变量SHELL_FOLDERSHELL_FOLDER=$(cd "$(dirname "$0")";pwd)read -p "输入:" msg->read代表能输入某些东西并赋给msg变量echo ""->一行提示文本空值判断// 空值判断if [ ! $msg ]; then echo "IS NULL"else echo "NOT原创 2021-12-03 20:32:27 · 1083 阅读 · 0 评论 -
普歌-多种跨域方式以及解决跨域方案(jsonp、cros、vue中跨域proxy、nginx反向代理跨域)
普歌-跨域及解决跨域(超详细,面试官都夸赞)前言:了解如何跨域前,首先了解什么是跨域 同源策略- 浏览器的安全策略- 协议名、域名、端口号完全一致跨域违背同源策略就会产生跨域解决跨域jsonp(前端设置和后端设置) \ cors(后端设置) \服务器代理(后端设置)…当时3月底面试快手是提起这个怎么解决跨域时,说的面试都称,说的很详细,我相信你即使没实践过也能很快上手(原话)~~~~但最后挂在二面了????????????用jsonp解决跨域(前后端配合设置)jsonp原创 2021-04-22 21:06:07 · 567 阅读 · 8 评论 -
普歌-前端js/vue生成二维码的两种方式
普歌-前端js/vue生成二维码的两种方式需要生成二维码的场景比较多,支付、个人信息读取等等,今天就说说两种方式,一种单纯的生成二维码,另一种中间可以放logo1. 方式一:QRCode.jsQRCode.js是用于制作QRCode的JavaScript库。QRCode.js通过HTML5 Canvas和DOM中的表格标签支持跨浏览器。QRCode.js没有依赖关系。在npm的使用方法:https://www.npmjs.com/package/qrcodejs2我进行了总结使用方法:原创 2021-01-24 17:04:00 · 558 阅读 · 0 评论 -
非常详细,详解html中的video视频标签(自制播放、时间、进度条、速度、全屏),实现自己的播放控件
实现自定义video播放视频控件,详解video中JS的api最后的效果(还有控制音量,开关声音,因为赶时间,没做上,会在本篇文章中说,怎么控制)先上基础知识video的标签属性属性值功能描述controlscontrols是否显示播放控件autoplayautoplay设置是否打开浏览器后自动播放widthPilex(像素)设置播放器的宽度heightPilex(像素)设置播放器的高度looploop设置视频是否循环播放(即播原创 2020-12-04 13:34:45 · 8014 阅读 · 6 评论 -
解决npm error:npm : 无法加载文件 D:\DevPath\nodejs\npm.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅.......
解决这个问题:看看错误信息:npm : 无法加载文件 D:\DevPath\nodejs\npm.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。所在位置 行:1 字符: 1+ npm install mini-program-iconfont-cli --save-dev+ ~~~ + CategoryInfo原创 2020-10-15 20:41:49 · 5626 阅读 · 7 评论 -
JS/JQuery实现随机点名功能(包含点名、记录、清除记录)
普歌-码上鸿鹄:实现班级中随机点名功能前言:班里老师想要一个上课随机点名的功能,哈哈临时做了一个。本功能用了jQuery实现,用jQuery和JS没什么两样,核心代码写法几乎一模一样,就是调用方法不一样。先看看效果图:一、 功能思路实现此功能首先想要随机random,JS中能随机的就是Math.random(),所以我们就从随机数下手名字数组中能随机的就是下标,所以拿到数组下标总长度,让他自己随机最重要的是怎么实现一直随机,那就是定时器setInterval(),每个多少毫秒反复调用原创 2020-10-03 13:24:10 · 1479 阅读 · 0 评论 -
JS验证对象中的值是否为空、数组对象中的值是否为空;数据请求成功后清空所有数据
如何验证向后端传的对象(或者数组对象)当中是否有值为空前言:写后台时,我们在向后端传一些对象形式的数据时,发现表单验证只能验证一些表单数据是否有值,验证不了一些上传文件、链接等是否有值1. 判断对象中属性值是否为空(简单类型的对象)实现这个功能主要依靠for in 对象遍历以下是代码 click() { //开关类型布尔值 var flag = true; var obj = { name:'',原创 2020-09-24 19:39:54 · 651 阅读 · 0 评论 -
JS判断数据类型的常用方法
JS/JQ如何判断数据类型前言: 判断js中的数据类型有一下几种方法:typeof、instanceof、 constructor、 prototype、 $.type()/jquery.type()先举几个例子:var a = "string";var b = 13;var c= [1,2,3];var d = new Date();var e = function(){alert(111);};var f = function(){this.name="22"原创 2020-09-24 12:00:19 · 105 阅读 · 0 评论 -
vue中使用elementUI+TinyMCE富文本编辑器实现一些常用编辑器功能、自定义图片上传、视频、生成文件链接
普歌-码上鸿鹄团队:vue+elementUI+axios+TinyMCE富文本编辑器实现一些常用编辑器功能、自定义图片上传、视频、生成文件链接前言:在进行描述性项目时,项目后台是避免不了使用富文本编辑器,市面上的富文本很多,大概有这些wangEditor——基于javascript和css开发的 Web富文本编辑器, 轻量、简洁、易用、开源免费TinyMCE——TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。百度UEditor——UEditor是由百度web前端研发部开发所见即原创 2020-09-20 20:20:51 · 1392 阅读 · 4 评论 -
npm run dev启动项目报错module.exports = merge(prodEnv, {TypeError: merge is not a function....
npm run dev启动项目报错【module.exports = merge(prodEnv, {TypeError: merge is not a function TypeError: merge is not a function at Object. (H:\xxx\vue-admin-1010\config\dev.env.js:5:18)】前言:我的是用vue-element-admin时出现了这个错误,出现这种报错就是webpack-merge这个版本的问题,admin中的原始版本是4原创 2020-09-16 22:18:05 · 2866 阅读 · 1 评论 -
(npm)项目中更新所有依赖,项目中更新指定依赖,更新某个依赖到最新/某个版本
(npm)vue项目中更新所有依赖,项目中更新指定依赖,更新某个依赖到最新/某个版本前言:项目依赖有时会需要更新,可能需要全部更新,也可能局部更新,话不多说,上方法,本人亲测有效1. 第一种,在项目中更新所有依赖npm install -g npm-check-updates这一步如果报错的话,像这样第一步下载不成功,用管理员身份打开PowerShell再次执行npm install -g npm-check-updates,直到成功进行第二步接下来在当前项目中的继原创 2020-09-16 22:07:16 · 7808 阅读 · 0 评论 -
npm报错npm ERR! Unexpected end of JSON input while parsing near ‘...sh_time“:144935090300‘
解决【npm ERR! Unexpected end of JSON input while parsing near ‘…sh_time":144935090300’】方案前言:我们在npm install时有时会报以下的错,附图:解决方案这时可以先执行下面的命令:npm cache clean --force然后再执行npm install就可以了直接执行 npm cache clean --force, 如果执行成功,再npm install即可。如果执行失败,请先升级原创 2020-09-16 18:02:02 · 3401 阅读 · 0 评论 -
Vue错误[Vue warn]: Invalid prop: type check failed for prop “data“. Expected Array, got String
Vue-常见错误[Vue warn]: Invalid prop: type check failed for prop “data”. Expected Array, got String前言:项目中遇见 Invalid prop…Expected XXX, got XXX。像这样的错误一般是同一类型的错误,是数据类型没给对,你给的值和组件需要的数据类型不一致错误截图以上就是报错信息错误分析报错信息的意思是:无效的命名数据:“数据”类型检查失败。期望数组,得到字符串/对象,已经很明原创 2020-09-15 16:59:38 · 13577 阅读 · 0 评论 -
vue2中使用swiper动态遍历数据时出现不轮播的情况
Vue2项目中使用Swiper5出现BUG 前言:我们再开发项目时,难免会用到一些炫酷的轮播图,目前提供较好功能并且多端兼容的就有Swiper,版本目前是4-6,常用的是swiper5,swiper是刚刚出来的最新版本(附上Swiper官网),我这里是使用5版本遇到的动态数据后不轮播的bug1. 去Swiper找到自己想要的配置项根据自己项目需求找配置项2. 这是我需要的swiper配置(修改bug之前)提前下载npm install swiperdata中的ban原创 2020-09-14 22:28:04 · 996 阅读 · 3 评论 -
element ui中实现upload文件、图片上传功能(el-upload)
vue结合Element实现文件上传前言:一些信息化或后台项目开发中,避免不了上传文件的功能,这篇文章可以学会文件上传功能,这次我拿添加图片来实现此功能需要准备一个oss云储存地址和element ui中upload组件1. 第一步,先选择一个upload组件这里我推荐大家选择手动上传的,这样不会因为选错文件而浪费oss资源(自动上传的小弊端)我们复制代码做一些自己的改造,需要用到Dialog对话框2.第二步,对代码进行改造先放上template中代码&原创 2020-09-07 00:27:10 · 4857 阅读 · 2 评论 -
前端项目控制台(F12)打印出带样式的文字、图片(像百度一下一样)
前端项目控制台(F12)打印出带样式的文字、图片(像百度官网一样)原创 2020-09-06 21:36:41 · 1290 阅读 · 0 评论 -
(tab栏)nuxt+element实现路由传参控制tab栏
Vue中用ele UI的tabs栏实现由路由参数控制1. 实现思路(vue+nuxt+eleui)1) 第一步用链接先传递参数,去到tabs栏的页面接收参数2) 第二步用watch监听参数的变化 ,这就是基本思路 2. 实现步骤先解释一下handler方法和immediate属性,这个是watch方法中的.<script>export default {// 让值最初时候watch就执行就用到了handler和immediate属性watch: {原创 2020-08-15 18:24:29 · 797 阅读 · 0 评论 -
在Nuxt(vue)渲染模板中使用mock.js随机生成数据
:nuxt中使用mock随机生成多条不同数据一、nuxt中使用mock二、使用mock随机生成数据并获取一、nuxt中使用mock第一步,下载两个模块安装mock,使用mokcjs产生随机数据 npm install mockjs --save-dev或者cnpm install mockjs --save-dev安装axios,用来发送ajax请求 npm install axios --save或者cnpm install axios --save原创 2020-08-11 19:26:29 · 1378 阅读 · 0 评论 -
配合node+MongoDB后台+vue-cli用API接口获取数据库数据
前端:Node.js+MongoDB模拟后台数据并通过api在Vue中获取数据话不多说,上操作…………1)第一步,我们先简单搭建一个后台服务,创建一个sever文件夹,里面创建model文件夹、api.js、index.js,model文件夹下有connect.js和homeInfo.js...原创 2020-08-02 00:09:57 · 725 阅读 · 0 评论 -
node.js快速入门(环境安装、模块化等)
Node.js概述node开发概述node是什么为什么选择nodenode.js运行环境安装安装node几种安装失败的情况1. 权限不足2502、25032. 执行命令出错Node快速入门1. node.js组成2. node基础hello worldnode.js全局对象globalNode.js模块化开发1. 模块化开发规范用exports.xxx模块成员导出用module.exports.xxx模块成员导出node开发概述node是什么Node是一个基于Chrome V8原创 2020-07-28 11:42:34 · 614 阅读 · 0 评论