前端
关注
分享
扫一扫
文章平均质量分 50
wakangda
这个作者很懒，什么都没留下…
展开
-
vue的高阶应用mixin在实际项目的应用
vue的高阶应用mixin在实际项目的应用1.混入(mixins)与组件的区别共同点:①:目的都是提高复用性,减少代码量②:可以在全局或者局部使用不同点:①组件注重表现形式相对独立②混入注重逻辑相对独立在实际的开发中经常会遇到表格页面的开发如下图表格页面由3部分组成1.搜索条件部分2.表格主体3.翻页部分共同的逻辑包括:1.表格数据变量,页码变量等2.查找逻辑3.翻...原创 2019-07-10 17:57:47 · 518 阅读 · 0 评论 -
超好理解的webpack入门
webpack理解原创 2023-03-13 19:43:34 · 106 阅读 · 0 评论 -
超实用！JavaScript修改CSS变量,达到动态修改样式的目的
在网页开发中，我们通常使用CSS来设置网页的样式。但是，在开发过程中，有时候我们需要根据不同的条件来动态修改样式，这时候就需要使用JavaScript来实现。在CSS中，有一种变量的概念，可以使用变量来定义颜色、字体大小等样式属性。在本篇文章中，我们将介绍如何使用JavaScript来修改CSS变量，从而动态地修改样式。案例演示：我们假设有一个按钮，当点击按钮时，将改变页面中所有段落的背景颜色。首先，我们需要在CSS中定义一个变量，用来表示背景颜色。在本例中，我们将变量名定义为–bg-color。在上面原创 2023-03-07 14:06:05 · 7675 阅读 · 0 评论 -
jenkins打包提示找不到文件
jenkins打包提示找不到文件原创 2022-10-17 11:54:51 · 1443 阅读 · 0 评论 -
vscode 代码跳转
完成以上两个步骤后，你就可以在 JavaScript 文件中进行定义的跳转了。当你点击一个方法或变量的调用处时，VS Code 将会自动跳转到相应的定义处。如果你需要进行.vue文件的跳转，还需要安装一个名为Vue Peek的插件。这个插件能够帮助你在.vue文件中实现代码定义跳转。通过简单地配置文件和安装必要的插件，你就能够在 Visual Studio Code 中实现代码定义跳转的功能了。这个功能不仅能够提高开发效率，还能够让你更方便地阅读和理解代码。原创 2022-09-21 15:09:16 · 5589 阅读 · 2 评论 -
阿里图标库替代方案
阿里图标替代icomoon教程原创 2022-06-20 17:16:37 · 469 阅读 · 0 评论 -
svg 样式相互影响
svg 样式,不符合预期,相互影响原创 2022-06-20 17:05:31 · 1047 阅读 · 0 评论 -
super expression must either be null or a function 报错解决方法
super expression must either be null or a function 报错解决方法原创 2022-04-15 11:17:35 · 6215 阅读 · 0 评论 -
npm install 做了什么?什么时候会更新安装包?
npm install 流程图可参照下图[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cjaCgtNL-1646703108005)(./npm-install.png)]我们都知道依赖被安装到了node_modules 文件夹内那依赖的依赖安装在哪呢?在项目的node_modules内为什么不是安装在各自安装包的node_modules内呢?其实最早的npm是把各自包依赖都安装在各自的node_modules内,但是这样会造成很深的路径嵌套,和包的重复冗余,所以原创 2022-03-08 09:32:32 · 1754 阅读 · 1 评论 -
npm 入门,基本指令
npm 入门,基本指令原创 2022-03-07 13:52:00 · 431 阅读 · 0 评论 -
typescript 入门
typescript 入门ts基本用法ts类型,接口,断言原创 2022-03-03 14:16:24 · 617 阅读 · 0 评论 -
web 页面性能优化
web 页面性能优化性能优化在视觉上有两个阶段:加载阶段,能够快速的看到页面(首屏渲染时间);交互阶段,能够快速响应操作(动画效果,接口返回速度等)加载阶段加载阶段，是指从发出请求到渲染出完整⻚⾯的过程，影响到这个阶段的主要因素有⽹络和JavaScript脚本。网络决定资源的下载速度,javascript脚本阻塞dom解析,css脚本不阻塞dom解析(但是如果是放在head的话会阻塞渲染)优化策略减少资源的大小,可以通过webpack打包优化工具,压缩代码,去除注释空格等;如果资原创 2022-01-20 15:35:26 · 1332 阅读 · 0 评论 -
web常见攻击手段 XSS,CSRF
web常见攻击手段XSS Cross Site Scripting 为了与“CSS”区分开来，故简称XSS，翻译过来就是“跨站脚本” 1. 存储型 ⾸先⿊客利⽤站点漏洞将⼀段恶意JavaScript代码提交到⽹站的数据库中； 然后⽤⼾向⽹站请求包含了恶意JavaScript脚本的⻚⾯； 当⽤⼾浏览该⻚⾯的时候，恶意脚本就会将⽤⼾的Cookie信息等数据上传到服务器。 eg:文章的标题输入<script>alert(1)</script>原创 2022-01-17 09:43:43 · 1013 阅读 · 0 评论 -
JS防抖和节流，提高性能的秘诀
防抖和节流都是前端开发中常用的优化技术，能够有效地降低页面的性能消耗和提升用户体验原创 2021-11-16 16:46:46 · 620 阅读 · 0 评论 -
如何修改源码
记一次element-ui源码修改需求:el-tree在拖拽的时候会自动处理树的数据以达到拖拽的效果.但是我需要对拖拽的数据做自定义的处理,所以需要屏蔽数据处理功能先找到node_modules>elelment-ui>lib>tree.js 直接修改代码,会生效,需求搞定但是有一个疑惑,为什么这个文件夹的格式这么奇怪,也不易阅读,同样package/tree.vue里的文件却更符合平时写的组件规范.但是修改文件,并不生效.以前修改uniapp的i-view框架的组件并没有遇到原创 2021-11-16 16:38:08 · 2871 阅读 · 0 评论 -
NPM指令说明
NPM指令说明npm init 初始化项目npm install packageName@version -*npm update 更新包版本npm cache clean -f 强制清除缓存默认值为 --save–global，缩写为-g，表示安装包时，视作全局的包。安装之后的包将位于系统预设的目录之下–save，缩写为-S，表示安装的包将写入package.json里面的dependencies。–save-dev，缩写为-D，表示将安装的包将写入packege.json里面的原创 2021-11-16 16:36:41 · 1183 阅读 · 0 评论 -
?? 空值合并运算符
空值合并操作符（??）是一个逻辑操作符，当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。设置默认值通常我们在设置默认值的时候会用 || 在左值为ture的情况下没问题 let a = 2 let sex = a || 1 // sex = 2由于 || 是一个布尔逻辑运算符，左侧的操作数会被强制转换成布尔值用于求值。任何假值（0， ‘’， NaN， null， undefined）都不会被返回。这导致如果你使用0，’'或NaN作为有效值，就会出原创 2021-07-07 16:12:24 · 287 阅读 · 0 评论 -
vscode插件推荐
vscode开发工具规范配置,及插件推荐前段时间终于放弃了webstorm转到vscode门下原因有两个:1.webstorm不免费,破解经常失效;2.部门其他工程师都在用vscode,需要制定代码格式规范;刚开始用vscode感觉很不习惯,与websotorm的功能差距太大了,安装了一堆插件后,真香!!!以下是我安装的插件Vetur vscode自带插件,用于支持各种文件格式及格式化IntelliJ IDEA Keybindings从IDEA转过来的必备插件,可以在vscode上直接使用原创 2021-05-07 14:57:02 · 186 阅读 · 0 评论 -
线程与进程浏览器 Event Loop
一、线程与进程1.概念我们经常说JS 是单线程执行的，指的是一个进程里只有一个主线程，那到底什么是线程？什么是进程？官方的说法是：进程是 CPU资源分配的最小单位；线程是 CPU调度的最小单位。这两句话并不好理解，我们先来看张图：进程好比图中的工厂，有单独的专属自己的工厂资源。线程好比图中的工人，多个工人在一个工厂中协作工作，工厂与工人是 1:n的关系。也就是说一个进程由一个或多个线程组成，线程是一个进程中代码的不同执行路线；工厂的空间是工人们共享的，这象征一个进程的内存空间是共享的，每个线程都转载 2021-04-12 11:42:49 · 129 阅读 · 0 评论 -
前端版本管理规范
前端版本管理规范分支管理规范开发新版本 : 从 master 新建分支,分支命名 develop-版本号修复bug : 从master新建分支,分支命名规则 fix-问题代码提交规范提交内容组成: type:subject+bodytype:提交的类型 (必须)feat: 新功能、新特性fix: 修改 bugperf: 更改代码，以提高性能refactor: 代码重构（重构，在不影响代码内部行为、功能下的代码修改）docs: 文档修改style: 代码格式修改, 注意不是 cs原创 2021-04-09 14:49:23 · 1125 阅读 · 0 评论 -
小程序下载文件
let url = res.data.fileUrl if(that.systemInfo.platform =='windows'){ uni.downloadFile({ url: url, filePath: `wxfile://temp/list.xlsx`, success: function (res) { that.tempUrl =原创 2021-02-03 17:02:43 · 430 阅读 · 0 评论 -
前端项目命名规范
前端项目命名规范源码参考阿里命名规范<html lang="zh-cn"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="referrer" content="never"> <meta http-equiv="X-UA-Comp原创 2021-01-05 14:03:30 · 1797 阅读 · 0 评论 -
使用 eslint 让代码更规范
由于开发人员经验,编码习惯不同,造成维护成本上升,容易产生bug1. 现有的vue-cli 自带eslint代码规范控件,只需对其规则进行配置.通过修改vue.config.js 文件内的 lintOnSave 属性为true来设置是否在保存代码的时候进行代码检测,这个一个人编码习惯自行设置.2. 通过eslint插件进行代码修复,在vue-cli的项目中只需运行vue-cli-service lint 指令即可进行自动代码修复,自动修复有一定风险.3. 规则包括必须规则,vue推荐规则,通用规则,通原创 2020-12-30 09:52:31 · 328 阅读 · 0 评论 -
多个组件的生命周期执行顺序
多个组件的生命周期顺序1.单个组件生命周期执行顺序从官方文档上我们可以看出单个组件的生命周期顺序beforeCreate→created→beforeMount→mounted2. 多个组件的生命周期顺序(1). 父组件与子组件验证步骤:首先嵌套三个组件 父组件:p,一级子组件:c,二级子组件:c-c最终得出从输出可以总结出beforeCreate,created,beforeMount 这个三个生命周期是由内到外,mounted 是由内到外...原创 2020-12-25 11:20:55 · 771 阅读 · 2 评论 -
请求不发送cookie原因及解决方法
1.今天在上线过程中,发现所有的请求都不发送cookie,导致登录失效原因排查1.cookie写入的域名和请求的接口域名不一致,导致浏览器判定位跨域,所以不传递cookie解决办法,设置 axios 的 withCredentials 属性var service=axios.create({ baseURL:baseUrl, withCredentials: true, // send cookies when cross-domain requests timeout:5原创 2020-08-27 14:16:11 · 3961 阅读 · 0 评论 -
手机访问本地项目,报密码错误,验证码错误
在移动端的项目开发中,会经常用到真机调试.如何在手机上访问项目呢?1.项目启动后,将localhost替换成本地IP即可①:命令行输入 ipconfig 可查看本机ip2.如果你的项目有登录的操作,可能会遇到密码错误的问题,这个问题的根本原因是cookie跨域的问题解决方法如下:将config.js代理文件内的cookieDomainRewrite,设置成你本地IP即可...原创 2020-08-17 14:10:01 · 283 阅读 · 0 评论 -
浏览器console高级用法
console.clear();//清空上面的console显示 console.table();//以表格形式输出数组 let arr = [{name:'叶良辰',age:'22',sex:'男',city:'成都'},{name:'孙悟空',age:'2200',sex:'男',city:'顺昌'},{name:'猪八戒',age:'220',sex:'男',city:'猪圈'},{name:'唐僧',age:'500',sex:'女',city:'女儿国'}] co...原创 2020-07-20 15:08:48 · 247 阅读 · 0 评论 -
在静态图片上加跳转链接
开发中常会遇到一张静态图片,需要点击图片不同位置跳转链接如下图因为手机屏幕的大小不同,设置图片宽度为100%,根据浏览器渲染图片机制,高度会根据宽度等比例缩放<img src="https://wodan-idc.oss-cn-hangzhou.aliyuncs.com/shijianke-wap/h5/test/img/doushanzhuanti.jpg" width="100%...原创 2020-04-23 10:05:58 · 1648 阅读 · 0 评论 -
手机不执行js问题排查
开发中遇到一个问题,一个静态页面在pc,和手机上都能正常执行jsoppo r9s 手机浏览器不执行js分析步骤在js代码第一行加 alert(0)并没有弹出弹窗说明js编译失败了查看手机操作系统版本 为android 5.1(对es6支持仅25%)查看代码是否用到新特性...原创 2020-04-23 09:48:23 · 1128 阅读 · 0 评论 -
Promise让代码一目了然
ES6的 Promise 解决了js回调地域的问题,原理就不细说了,直接说用法1.封装一个Ajax 操作的例子const getJSON = function(url) { const promise = new Promise(function(resolve, reject){ const handler = function() { if (this.readyS...原创 2020-04-15 14:43:27 · 125 阅读 · 0 评论 -
巧用js的&& || 精简代码
巧用 &&在js中经常会遇到这样一个需求,获取一个变量的长度’’var data = {a:1,b:2}var b// if else 写法if(a){ b=a }else { b=''}// 问号表达式写法b = a?a:''// || 写法b = a || ''...原创 2020-04-15 14:21:56 · 357 阅读 · 0 评论 -
H5生成二维码海报
在开发过程中，我们可能需要生成带参数的地址二维码，并将其画到海报上。这样的需求在很多场景中都很常见，比如用户扫描二维码后跳转到指定页面。下面，我们将介绍如何使用第三方控件来绘制二维码，并将它画到指定的海报背景上。在使用 qrcodejs2 之前，你需要先安装该第三方控件。原创 2019-12-02 10:30:12 · 2230 阅读 · 2 评论 -
H5网页生成小程序二维码海报
1.产品需求生成一张带有小程序二维码的海报要求:1.携带邀请人信息;2.携带小程序页面参数解决办法:1.通过后端请求微信服务器拿到带参数的小程序二维码;接口参照https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/qr-code/wxacode.getUnlimited.html2.将二维码用canv...原创 2019-12-02 10:17:28 · 2680 阅读 · 0 评论 -
解决cookie跨域,验证码过期或失效
1.在开发过程中跨域是常见的接口跨域浏览器会报错,cookie跨域则不会我是利用webpack的 proxy 进行代理代理开启后,浏览器不提示跨域了,验证码登录一直提示验证码过期或者已失效发现后端返回的头文件中 set-cookie 的 domian与请求的地址不一致所以 cookie 并没有写入 浏览器解决方案在 proxy 配置中加 重写domain cookieDomai...原创 2019-11-07 11:54:34 · 1340 阅读 · 0 评论 -
关于字符串的方法
// String 在js中是基本类型,按道理是不会有方法的let str_1 = 'abcd'let str_2 = str_1.substring(0,1)console.log(str_2) // a//之所以能调用方法,是后台在你,当要访问字符串时,后台执行let s1 = new String('abcd') // 新建一个字符串对象let s2 = str_1.substr...原创 2019-10-14 21:54:32 · 121 阅读 · 0 评论 -
小程序打开网页(webview)自动登录
网页的登录态是根据cookie上的sessionId 字段来判断1.小程序登录后拿到sessionId;2.打开webView页面,将sessionId在url后带上;3.网页获取URL上的sessionId;4.将sessionId写入到cookie;5.直接调用需要登录的接口即可;注意事项:1.小程序的sessionId和网页的sessionId需要能够通用;2.因为小程序没有...原创 2019-10-14 10:57:14 · 3311 阅读 · 0 评论 -
关于时间的方法都在这了
// new Date() 返回标准的日期格式 如果没带参数,则返回当前时间// 日期格式支持 mm dd yyyy hh:ii:ss 或者 yyyy mm dd hh:ii:ssconsole.log(new Date()) // Sat Oct 12 2019 09:42:46 GMT+0800 (中国标准时间) 返回当前的标准时间console.log(new Date('2000'...原创 2019-10-12 15:20:07 · 149 阅读 · 0 评论 -
关于数组的方法都在这了
// 数组 // 确定基本类型用typeOf,确定是哪种引用类型用instanceof let arr = [1, 2] console.log(typeof arr) // object console.log(arr instanceof Array) // true Array.isArray(arr) // true 判断数组用这个 // ...原创 2019-10-12 09:10:03 · 119 阅读 · 0 评论