- 博客(502)
- 收藏
- 关注
RSS订阅原创 js阻止默认事件和中止冒泡
<div onClick={e => { e.preventDefault() //阻止默认事件 e.stopPropagation() //阻止冒泡 }}></div>
2021-10-04 18:34:59
339
原创 解决谷歌浏览器不支持cookie的问题(单点登录依赖cookie)
在浏览器地址栏里输入：chrome://flags/搜索same-site将这两个SameSite配置禁用
2021-10-04 13:49:42
2816
2
原创 手把手教你封装各种vue+echarts图表封装(含中国省市区地图)
setChartOption.js 地图数据处理函数var colorOption = [ '#3aa0ff', ' #36cbcb', '#4dcb73', '#fad337', '#f2637b', '#975fe4', '#e7bcf3', '#8378ea', '#3aa0ff', ' #36cbcb', '#4dcb73', '#fad337', '#f2637b', '#975fe4', '#e7bcf3', '#8378ea
2021-06-24 15:31:18
2419
原创 Nginx缓存设置
在开发调试web的时候，经常会碰到因浏览器缓存(cache)而经常要去清空缓存或者强制刷新来测试的烦恼，提供下apache不缓存配置和nginx不缓存配置的设置。在常用的缓存设置里面有两种方式，都是使用add_header来设置：分别为Cache-Control和Pragma。nginx:location ~ .*\.(css|js|swf|php|htm|html )$ {add_header Cache-Control no-store;add_header Pragma no-cach...
2021-06-05 19:59:17
979
原创 vue项目禁用浏览器缓存配置
public文件夹中修改 index.html文件meta配置vue cli 构建配置在vue.config.js新增配置const Timestamp = new Date().getTime()module.exports = { configureWebpack: { output: { // 输出重构 打包编译后的 文件名称 【模块名称.版本号(可选).时间戳】 filename: `[name].${Timestamp}.js`, .
2021-06-05 19:58:10
9906
1
原创 moment.js获取本周本月本年日期及具体时分秒
引用moment代码// 本周let start = moment().startOf('week')let end = moment().endOf('week')// 本月let start = moment().startOf('month')let end = moment().endOf('month')// 本年let start = moment().startOf('year')let end = moment().endOf('year')//获...
2021-06-02 03:20:59
4080
原创 找不到模块“xxx.vue”或其相应的类型声明问题解决
解决方法：在项目根目录或 src 文件夹下创建一个后缀为 .d.ts 的文件，并写入以下内容：declare module '*.vue' { import { App, defineComponent } from 'vue' const component: ReturnType<typeof defineComponent> & { install(app: App): void } export default component}注:vu..
2021-04-15 16:40:13
17738
原创 前端 http-server开启本地https服务
首先使用以下命令生成一个证书密钥对 key.pem 和 cert.pem，它将有效期约10年（准确地说是3650天）openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.pem -out cert.pem按步骤输入对应的信息目录会多出两个文件 cert.pem key.pem然后便可以起服务了 下面两个命令都可以，后者会自动打开默认浏览器运行页面http-server -S...
2021-02-04 11:56:19
2884
原创 ‘vue-cli-service‘ 不是内部或外部命令，也不是可运行的程序 或批处理文件
You need to install theVue CLI Servicebefore you can run the binary. Try installing at the project-level as opposed to globally instead.在运行二进制文件之前，您需要安装 Vue CLI 服务。尝试在项目级安装，而不是全局安装。The 404 is a "feature" ofnpxwhereby it attempts to download (then...
2021-02-03 18:34:19
3769
1
原创 JS模块化的几种规范总结
commonJS特点：1、模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。2、模块加载会阻塞接下来代码的执行，需要等到模块加载完成才能继续执行——同步加载。环境：服务器环境 应用：nodejs的模块规范是参照commonJS实现的。 语法：1、导入：require('路径')2、导出：module.exports和exports注意：module.exports和exports的的区别是expor
2021-02-03 11:38:04
988
原创 rollup 开发vue组件库及umd SDK 问题总结
rollup使用过程中遇到的各种问题https://www.dazhuanlan.com/2019/10/22/5dae8543f0ec1/rollup开发依赖包(npm library)，解决引入外部依赖失败的有效方法import nodePolyfills from 'rollup-plugin-node-polyfills'; plugins: [ vue(), nodePolyfills(),](!) Missing global variable nam
2021-02-03 02:14:46
5948
原创 前端异常监控实战方案
本文简单分析前端异常监控的几种方式一、自研代码监控sdk下面讲述三种可以捕捉到的前端错误资源加载错误，通过 addEventListener('error', callback, true) 在捕获阶段捕捉资源加载失败错误。 js 执行错误，通过 window.onerror 捕捉 js 错误。 promise 错误，通过 addEventListener('unhandledrejection', callback)捕捉 promise 错误，但是没有发生错误的行数，列数等信息，只能手动抛
2021-01-20 14:08:24
975
原创 浅析axios及封装方法
一、axios是什么axios是一个轻量的HTTP客户端基于XMLHttpRequest服务来执行HTTP请求，支持丰富的配置，支持Promise，支持浏览器端和Node.js端。自Vue2.0起，尤大宣布取消对vue-resource的官方推荐，转而推荐axios。现在axios已经成为大部分Vue开发者的首选特性 从浏览器中创建XMLHttpRequests 从node.js创建http请求 支持PromiseAPI...
2021-01-20 13:48:16
12048
转载 前端工程化-ESLint - 守住优雅的护城河
转载自 Morrainvivo互联网技术【前端科普系列】帮助阅读者了解web前端，主要覆盖web前端的基础知识，但不深入讲解，定位为大而全并非细而精，适合非前端开发的同学对前端有一个系统的认识，能更好的与前端开发协作。尽可能的写成科普类文章，对于前端开发而言，只适合刚入门的新手。本文为第五章，主要讲前端工程化中的很重要工具 ESLint，主要介绍 ESLint 的历史、用法以及如何基于ESLint 打造保护代码仓库优雅的护城河。一、前言战国时期强大...
2021-01-18 22:13:00
338
原创 浅析Promise
一、介绍Promise，译为承诺，是异步编程的一种解决方案，比传统的解决方案（回调函数）更加合理和更加强大在以往我们如果处理多层异步操作，我们往往会像下面那样编写我们的代码doSomething(function(result){doSomethingElse(result,function(newResult){doThirdThing(newResult,function(finalResult){console.log('得到最终结...
2021-01-18 20:39:08
254
原创 记录docker容器k8s构建前端应用失败问题原因
dockerk8s构建平台构建应用失败原因vue.config.js 生产环境不配置打包优化插件(docker兼容性较差) npmrc 配置合适的镜像地址 Dockerfile 配置保持稳定 nginx.conf配置保持稳定 .env配置保持稳定有效 git忽略大小写 本地改文件夹及文件名称须设置 eslint格式化配置,代码校验不通过会导致构建失败git config core.ignorecase false如下失败日志ERROR Failed to compile wi.
2021-01-15 14:57:36
802
原创 JS数组去重及表格操作行数据方法总结
数组去重一、利用ES6 Set去重（ES6中最常用）function unique (arr) { return Array.from(new Set(arr))}var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];console.log(unique(arr)) //[1, "tru
2021-01-14 14:24:31
356
原创 文件流下载文件封装
前端使用 import { exportMethod } from '@/utils/helper/exportExcel' methods: { downLoadFileTemplate(){ const myObj = { method: 'get', url: process.env.VUE_APP_API_BASE_URL + '/authoritycenter/api/permission/downloadPermissionI
2020-10-23 17:55:16
450
原创 JS常用词汇
1. anonymous [ə'nɒnɪməs]adj. 匿名的2. watch [wɒtʃ]vt. 监视, 观察3. call [kɔːl]vi. 调用4. stack [stæk]n. 栈5. breakpoint ['brek,pɔɪnt]n. 断点6. pause [pɔːz]vi. 暂停7. scope [skəʊp]n. 作用域, 范围8. global ['gləʊb(ə)l]adj. 全局的, 全球的9. lo...
2020-10-07 19:58:58
2789
原创 JS 根据数组对象的属性拆分成多个数组
JS 根据数组对象属性值分类，把一个数组拆分为多个数组在工作中有时前台展示需求的不同要把后台的数组对象进行再分类。举个栗子：this.BaseLineAndLessonLearnByGroupList= [ { name: 'BaseLine', value: 1, DeptName: 'Logisti', }, { name: 'LessonLearn',..
2020-09-10 17:48:05
7633
1
转载 工程师的基本功是什么？该如何练习？听听美团技术大咖怎么说
美团技术团队在美团有一句老话，叫做“苦练基本功”。美团创始人王兴解读的基本功是业务和管理的基本动作。只要能把基本功扎实练好，就能产生巨大价值。然而滴水石穿非一日之功，练好基本功是一个长期的事情。苦练基本功，我们要调整好心态面对长期的挑战，同时在重复工作中得到自我提升，将简单的事情做到更好，将我们的能力提高一大截。那么对于技术团队来说，专业基本功是什么？又该如何练习呢？一起听听美团技术大咖是如何理解技术基本功的吧......技术基本功存在于每一行代码中“好”...
2020-09-05 21:18:45
244
转载 如何防止重复发送ajax请求及用户体验优化
以下文章来源于大转转FE，作者大转转FE大转转FE作者 | 周浪背景先来说说重复发送ajax请求带来的问题 场景一：用户快速点击按钮，多次相同的请求打到服务器，给服务器造成压力。如果碰到提交表单操作，而且恰好后端没有做兼容处理，那么可能会造成数据库中插入两条及以上的相同数据 场景二：用户频繁切换下拉筛选条件，第一次筛选数据量较多，花费的时间较长，第二次筛选数据量较少，请求后发先至，内容先显示在界面上。但是等到第一次的数据回来之后，就会覆盖掉第二次的显示的数据。筛选...
2020-09-04 10:55:07
345
翻译 如何使你的Electron App 运行更快（译文）
How to make your Electron app faster ????⚡如何使你的Electron应用更快So you just made a nice & shiny new app with Electron. It works as expected, has a beautiful UI,eats a lot of RAMandis slow, right?所以你刚刚用 Electron 开发了一个漂亮的新应用。它工作正常，有一个漂亮的用户界面，...
2020-08-20 13:56:34
2409
原创 yarn更新依赖包
解决方案：下载npm-check-updates yarn upgrade-interactive --latest yarn upgrade package@version推荐使用第二种不需要安装过多的依赖就可以达到目的第一种// 先下载yarn global add npm-check-updates// 更新包（yarn.lock和package.json同步更新）ncu --upgrade --upgradeAll && yarn upgrade...
2020-08-06 10:09:56
26590
原创 Vue 图片加载404处理方法及全局注册函数
Vue 图片加载异常处理 <img :src="imgUrl" @error="errorImg" />errorImg(event) { let img = event.srcElement img.src = require('@/assets/img/noImg.png') img.onerror = null //防止一直跳动}全局注册函数暂时排除使用Vue.use注册函数的方式（多写一些繁琐的代码）公共函数jsfunct..
2020-07-20 10:26:26
1191
原创 vue 监听区域滚动条移动参数及分页处理
@scroll实现首先有滚动条的div一定要设固定高度，然后overflow:auto;出现滚动条passive是使滚动更加流畅，减少卡顿, <!-- 搜索联想弹框 --><div class="SearchAssociationBox" @scroll.passive="getScroll($event)"></div> getScroll(event) { // 滚动条距离底部的距离scrollBottom ...
2020-07-16 14:08:42
696
原创 vue键盘监听及销毁
监听回车键，组件销毁即清空事件 created() { document.onkeydown = e => { if (e.keyCode == 13) { this.submit() } } }, beforeDestroy() { document.onkeydown = '' },
2020-07-15 17:32:10
2549
原创 antd vue tree组件经验记录
目录1. 默认全部展开2.替换node名称3.获取选中node的所有参数和key参数4.node参数进行数据转换避坑5.针对tree进行增删改查操作6.默认keys传参等等
2020-07-08 16:43:23
2456
原创 vue axios 下载文件
功能：点击导出按钮，提交请求，下载excel文件；第一步：跟后端童鞋确认交付的接口的response header设置了以及返回了文件流。第二步：修改axios请求的responseType为blob，以post请求为例： this.$post({ method: 'post', url: 'api/user/', data: { firstName: 'Fred', lastName:
2020-06-24 19:08:22
846
原创 修改浏览器默认滚动条样式及自定义盒子滚动条样式
默认浏览器滚动条样式//默认滚动条样式::-webkit-scrollbar-track-piece { //滚动条凹槽的颜色，还可以设置边框属性 background-color: #f8f8f8;}::-webkit-scrollbar { //滚动条的宽度 width: 9px; height: 9px;}::-webkit-scrollbar-thumb { //滚动条的设置 border-radius: 5px; background-colo.
2020-06-24 11:14:06
731
原创 React 与 Redux 中的数组处理
本文将介绍一些常用的数组处理函数和语法，如reduce()、filter()、map()、every()、some()、展开运算符。这些知识和React与Redux本身没有直接关系，但是本章的示例中包含了这些函数和语法的用法，我们正好可以在程序中学习它们。另外值得一提的是，reduce()、filter()、map()等函数的思想来自函数式编程，感谢JavaScript是一门函数式编程语言，让原本复杂的逻辑处理变得如此简单。reduce()概述reduce()方法接收一个函数作为累加.
2020-06-21 17:06:22
1335
原创 ant-vue图片上传组件渲染图片列表的处理
<template> <div class="clearfix"> <a-upload :action="actionUrl" list-type="picture-card" :file-list="fileList" @preview="handlePreview" @change="handleChange" :before-upload="beforeUpload" :re.
2020-06-19 11:26:12
1138
1
原创 vue仿京东放大镜加商品缩略图轮播组件
以下是最终的vue版本,光滑流畅,体验感非常好,99%还原京东放大镜甚至更好1.vue版本<template> <div id="magnifier"> <div class="small-box" @mouseover="smallBoxOver" @mousemove="smallBoxMove($event)" @mouseleave="smallLeave" > <.
2020-06-19 00:05:02
2623
原创 React组件化练习
资源 Context参考 HOC参考 Hooks参考 组件跨层级通信 - Context 范例：模拟redux存放全局状态，在组件间共享 import React from 'react'// 创建上下文const Context = React.createContext()// 获取Provider和Consumerconst Provider = Context.Providerconst Consumer = Context.Consumer// ...
2020-06-11 04:20:39
366
原创 vue 路由刷新页面路由传参丢失的问题
问题：正常情况下 通过router传参，传递对象或者数组时，F5刷新页面，参数会变成[object object]的格式，导致数据失效解决方法1.在路由跳转前，参数使用JSON.stringify 转化成字符串对象 const param = JSON.stringify(e) this.$router.push({ path: '/PlanInDetail', query: { detail: param } })2.路由跳转到对应页，获取路由参数时，使...
2020-06-09 15:08:25
1001
原创 vue-devtools安装文件
新版本的vue-devtools打包失败，暂时没有解决方式，可以使用老版本的插件链接: https://pan.baidu.com/s/1UW0piT4K5t_xjA4BHhVLvg 提取码: jt8t
2020-06-09 14:38:37
206
转载 Hook API 索引
Hook API 索引Hook是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。本页面主要描述 React 中内置的 Hook API。如果你刚开始接触 Hook，那么可能需要先查阅Hook 概览。你也可以在Hooks FAQ章节中获取有用的信息。 基础 Hook useState useEffect useContext 额外的 Hook useReducer useCall...
2020-06-06 19:19:02
249
原创 自用eslintrc.js配置
module.exports = { root: true, env: { node: true, }, extends: ['plugin:vue/strongly-recommended'], rules: { 'no-console': 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'generator-star-spacing': '.
2020-05-29 13:20:47
823
原创 ant design vue 清空upload组件图片缓存的方法
借鉴ant react的做法在upload 组件外包加一个key 赋随机值，即可清除缓存 <a-form-model-item label="Image"> <div :key="Math.random()"> <imgUpload @uploadFileList="uploadFileList" model="moudleImg" ...
2020-05-28 18:09:30
5695
6
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人