![](https://img-blog.csdnimg.cn/20200220124502720.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端
文章平均质量分 67
有关前端的总结
是日前端
每次不论输棋赢棋,要做的不是立即欣喜、沮丧,而是沉静地复盘。。。
展开
-
后端返回JSON数据格式,前端根据JSON数据 导出.CSV文件
【代码】后端返回JSON数据格式,前端根据JSON数据 导出.CSV文件。原创 2022-10-21 11:12:09 · 799 阅读 · 1 评论 -
Vue中利用Js实现鼠标滚轮控制盒子横向滚动(监听鼠标滚轮滚动事件,火狐DOMMouseScroll、谷歌mousewheel)
思路:使用js来实现监听鼠标滚轮滚动监听事件<div id="box" class="box"> <div></div></div>mounted() { this.scrollInit() },methods: {scrollInit() { // 获取要绑定事件的元素 const scrollDiv = document.getElementById("box"); // docume.原创 2021-12-03 09:44:56 · 1795 阅读 · 2 评论 -
Vue前后端交互总结
前后端交互模式接口调用方式原生ajax基于jQuer的ajaxfetchaxiosPromise用法原创 2021-11-22 09:30:45 · 228 阅读 · 0 评论 -
CSS利用伪元素方法实现边框
先写下实现思路,有空贴代码示例实现思路:将盒子的边框设置为要设置的边框颜色,添加::before和:after两个伪元素,将其设置为和背景颜色一样的,利用伪元素将边框不需要的部分盖住目前发现的一个缺点:伪元素只能使用颜色,我的背景是一张背景图片,所以只能取接近的颜色了...原创 2020-10-23 07:16:03 · 1168 阅读 · 0 评论 -
一次表格及分页优化完善实践,表头固定及分页固定(模仿禅道)
需求:1、当表格数据未查看到最后一条时,分页固定在页面最下方,直到查看表格最后一行,分页取消固定;2、当表格滑动到上方,表头固定在系统的上方思路:1、当鼠标滑动时判断表格距离浏览器上方的距离,当距离小于系统头部时,表头固定,反之取消固定, 获取滑轮滚动事件也可以使用@Wheel,也可以使用window.addEventListener监听滑动2、表头固定的方式有三种:方法一:给el-table的height赋值,获取表格中滚动条滚动到最后一行,始终差着点值,不知道什么原因,考虑不周,想加.原创 2021-11-19 15:40:25 · 2015 阅读 · 2 评论 -
是日前端交流
不知不觉中发现,距离第一次20年2月在“是日前端”上发表文章,已经有将近2年的时间了,由于种种原因吧,学习总结更新的不是很频繁,更多的是个人工作中使用时候踩的一些坑和常用的总结吧,但是也积累了近10万的浏览量,竟然有了100个粉丝,当上周快结束的时候,惊喜的发现有了98个粉丝时,我心里就暗暗下了决定,当到了100个粉丝时,我也创建一个交流群,今早一看这不就100个粉丝了,非常感谢大家喜欢我的分享,如果大家想一起交流学习,共同进步,欢迎扫码进“是日前端交流群”,进群可以改下备注,地区_昵称,群里请勿发广告,原创 2021-11-15 10:30:53 · 154 阅读 · 0 评论 -
Vue中axios全局配置响应拦截器超时重新请求,跳转到错误页面
需求:调用后台接口时如果调用响应失败,重复请求10次,如果还是不成功则跳转到错误页面提示用户http.jsimport axios from 'axios' // 引入axiosimport router from '@/router'// 设置axios请求urlaxios.defaults.baseURL = window.config.baseURL// 设置重新请求次数axios.defaults.retry = 10;// 设置请求延时axios.defaults.ret.原创 2021-11-10 17:10:10 · 3035 阅读 · 5 评论 -
vue中文件上传和下载使用总结
上传文件核心代码<el-upload class="upload-demo" action="uploadFileUrl" ref="upload" multiple :show-file-list=false :on-change="handleFileChange" :before-upload="beforeUpload"> <el-button type="primary" size="mini">上传</el-butt原创 2021-08-26 15:22:33 · 526 阅读 · 0 评论 -
vue+elementUI组件递归实现可折叠动态渲染多级侧边栏导航
早就实现了功能,但是发现点击的时候,选中的菜单项背景色会变白,周五时候仔细观察了一下,发现并不是调整样式的问题,而是选项没有被选中,于是好好研究了一下组件递归这块,总结记录一下心路历程一、概念递归:递归其实说白了,就是自己调用自己,样子就像是套娃一个套一个的,小时候玩过一个游戏汉诺塔就是利用的递归原理:函数递归:函数利用函数名还调用自己组件递归:所以组件递归利用的是vue组件中的name属性来实现的二、需求实现可折叠动态渲染多级侧边栏导航三、分析1、观察到侧边栏导航是一级一级的,第二.原创 2021-04-17 23:19:43 · 4096 阅读 · 6 评论 -
CSS3实现立体书效果
思路:利用CSS3中3D转换的perspective属性,通过左面和前面的旋转rotate、位移变化translate实现立体书的效果具体可参考:HTML5+CSS3学习总结(完结)该文章中的3D导航栏案例的思路示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w原创 2021-02-08 11:56:09 · 780 阅读 · 1 评论 -
vue elementUI实现双(多)列表格,内容均自定义
需求类似这样的:使用普通table实现,样式需要自己设置:<table class="person-info" border="1" cellspacing="0"> <tbody> <tr> <th>档案编号</th> <td>{{ personInfo.name }}</td> <th>姓名</th> &原创 2021-02-07 16:41:14 · 7279 阅读 · 2 评论 -
vue + elementUi中el-table表格高度自适应
首先html里设置table的高度<el-table ref="recordTable" :data="tableData" border :height="tableHeight"><el-table>data(){ return { tableHeight: 50 //默认初始值 }}根据浏览器高度设置初始高度,并监听浏览器高度变化,改变表格高度,70表示表格距离浏览器的高度mounted(){ this.$nextTick(() =>{原创 2021-01-15 17:07:10 · 4691 阅读 · 4 评论 -
vue + elementUI中的滚动条el-scrollbar使用总结
由于需要使用滚动条,原生滚动条长的太丑,查到了elementUI中的滚动条el-scrollbar,使用简洁方便,样式如下:使用方法如下:外部的div必须给固定高度才行<!-- 外部div --><div style="height: 650px; display: flex" class="cab" > <el-scrollbar style="height:100%"> <!-- 内部div --> &l原创 2021-01-15 16:54:13 · 16305 阅读 · 7 评论 -
mac系统升级后npm安装依赖报错gyp: No Xcode or CLT version detected
mac更新系统后,npm安装依赖包报错如下:gyp: No Xcode or CLT version detected原因:缺少了XCODE的CLI(command-line tools )工具解决方法:1、查看原来CLI工具路径xcode-select --print-path查看 command-line tools 的安装路径,显示的结果应该是/Library/Developer/CommandLineTools2、将原来的CLI工具移除sudo rm -r -f /Librar原创 2021-01-08 11:39:33 · 1000 阅读 · 0 评论 -
本地存储简单总结
总结来自黑马本地存储特性数据存储在用户浏览器中设置、读取方便,甚至页面刷新不丢失数据容量较大,sessionStorage约5M、localStorage约20M只能存储字符串,可以将对象JSON.stringify( )编码后存储window.sessionStorage生命周期为关闭浏览器窗口在同一个窗口(页面)下数据可以共享以键值对的形式存储使用存储数据sessionStorage.setItem(key, value)获取数据sessionStorag.原创 2020-12-22 00:13:46 · 157 阅读 · 0 评论 -
开课吧大圣老师性能优化训练营笔记
切记:过度优化是万恶之源一、从输入url到页面显示发生了什么(万能面试题)**宏观层面:DNS其实也是一个网络协议把域名变成ip地址,dns解析后获取到目标地址的ip,我们会基于这个ip地址发起一个TCP的链接TCPTCP三次握手、慢启动、滑动窗口、超时重发···TCP稳定传输,不会丢包HTTP/SSL跟缓存相关的是在HTTP里完成的,还有HTTPS一些是SSL响应解析(SPA,SSR)如果是SPA,后端直接丢一个空的html,加载一个js、一个css,js执行完成之后,里面会有v原创 2020-12-22 00:02:38 · 1176 阅读 · 0 评论 -
vue中使用JSMpeg的使用总结及踩坑
一、JSMpeg简介JSMpeg是用JavaScript编写的视频播放器。它由MPEG-TS Demuxer,WebAssembly MPEG1视频和MP2音频解码器,WebGL和Canvas2D渲染器以及WebAudio声音输出组成。JSMpeg可以通过Ajax加载静态文件,并可以通过WebSockets进行低延迟的流传输(〜50ms)。JSMpeg可以在iPhone 5S上以30fps的速度解码720p视频,可以在任何现代浏览器(Chrome,Firefox,Safari和Edge)中使用,并且压缩原创 2020-12-16 14:18:36 · 14532 阅读 · 9 评论 -
Vue组件化开发简单总结
组件化开发直观地将一个复杂的页面分割成若干个独立的组件,每个组件都包含自己的逻辑和样式(html、css、js),再将这些组件自由组合起来形成完整的界面。个人感觉组件化很符合编程的思想,能重复多次使用的就封装起来,提高代码的可维护性组件化开发的好处提高开发效率方便重复使用便于协同开发更容易被管理和维护组件分类按功能分页面级组件:一个页面就是一个组件基础组件:将可复用的部分抽离出来,形成基础组件按用法分全局组件:可以声明一次在任何地方使用,一般写插件或者是使用很频繁时候原创 2020-11-19 12:08:22 · 1162 阅读 · 0 评论 -
ES6部分内容(Vue前置知识)
一、JS数据类型基本数据类型:number string boolean null undefinedObject func…Symbol ( es6 )二、操作数组数组的变异能改变原数组的:pop push unshift shift splice reverse sort不能改变原数组的:indexOf lastIndexof concat slice常用方法:es5:forEach filter(过滤) map(映射) some every reducees6:incl原创 2020-11-15 15:44:52 · 798 阅读 · 1 评论 -
Vue中使用axios(Promise)
前端小白简单总结,参考黑马珠峰等课程以及其他内容整合,还望各位大佬多多指教~一、axios的使用axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,本质上也是对原生XHR的封装,只不过它是Promise的实现版本,符合最新的ES规范,有以下特点:从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客户端支持防御 XSR.原创 2020-11-15 15:04:07 · 6057 阅读 · 0 评论 -
vue项目打包总结(babel安装问题、打包后直接访问dist文件夹、elementui样式失效等)
官方文档有简单的方法:npm install -g serve(全局安装) serve -s dist(运行打包后的文件)原创 2020-11-11 20:13:01 · 4396 阅读 · 0 评论 -
Vue + elementUI使用中总结,包括踩坑(更新中)
<el-table-column prop="reportName" label="报告名称"> <template slot-scope="scope"> <el-input v-model="scope.row.reportName" @blur="confirmData" clearable></el-input> </tem原创 2020-11-11 20:03:29 · 2676 阅读 · 2 评论 -
Vue中使用moment格式化日期格式
安装momentnpm install moment全局使用main.js中引入import moment from 'moment'注册组件Vue.prototype.$moment = momentVue组件中使用dateFormat(row, column){ var date = row[column.property]; if (date == undefined) { return ""; } return t原创 2020-11-06 14:24:39 · 3940 阅读 · 0 评论 -
Vue实现pdf(excel)及压缩包或其他类型在线预览、导出下载功能总结(后端返回流,pdf.js)
先说这次的需求,需要在一个vue页面中的一部分实现预览pdf功能一、全屏预览模式先说直接全屏预览的,直接axios获取到数据,将流转为二进制文件,可以window.open也可以嵌入到a标签的href属性中二、利用pdf.js嵌入到iframe中预览第一步跟全屏一样,就是最后打开方式不一样pdf.js官网下载pdf.js文件将文件解压缩,将里面的build和web文件夹放在static目录下面,一定要是static目录目录结构如下接着在组件里就可以直接使用了,iframe的原理是原创 2020-11-05 20:30:58 · 5095 阅读 · 3 评论 -
Elementui el-tabs 选项卡 踩坑记录
el-tabs选项卡必须要有一个默认选中项,value或v-model原创 2020-11-04 21:38:33 · 5617 阅读 · 0 评论 -
elementui实战学习总结(更新中)
一、登录和退出功能登录状态保存问题:当前端与后端接口之间存在跨域问题,推荐使用Token,反之,推荐使用Session或CookieToken原理原创 2020-11-04 13:51:52 · 527 阅读 · 0 评论 -
js 防抖和节流简单总结
先搁着吧,抽空研究总结一下,先把这段高度调节利用防抖的代码贴上<template> <div id="functions" :style="defaultHeight"> </div></template><script> export default { name: "index.vue", components: { NavHeader: ()=>import('原创 2020-11-04 08:54:00 · 737 阅读 · 0 评论 -
vue中利用flex布局实现横向时间轴简化
最终效果:代码如下:<div class="timeline body-bgcolor"> <!--时间线--> <div class="timeline-title"> <span v-for="item in timeLineList" class="timeline-title-item">{{ item.title }}</span> </div>原创 2020-10-28 21:44:18 · 4304 阅读 · 0 评论 -
Vue中使用echarts实现仪表盘
实现效果:echarts使用说明请查看:Vue中使用echarts实现常用图表总结option配置:option = { tooltip: { formatter: '{a} <br/>{b} : {c}%' }, toolbox: { feature: { restore: {}, saveAsImage: {} } }, series: [原创 2020-10-26 16:13:14 · 4022 阅读 · 2 评论 -
CSS 用position相对定位或者绝对定位必须要给宽度
用echarts时候出现的问题,中午没睡觉排查了一中午终于知道原因了。。。/* 这种方式不给宽度就默认高度为0,给了宽度才会撑开盒子 */.sensor{ position: absolute; top: 50px; height: 138px;}.sensor{ position: absolute; top: 50px; width: 100%; height: 138px;}...原创 2020-10-23 14:16:25 · 1628 阅读 · 0 评论 -
Vue中使用echarts实现折线图
实现效果:echarts使用说明请查看:Vue中使用echarts实现常用图表总结option配置:option = { legend: { icon: 'rect',//形状 类型包括 circle,rect,line,roundRect,triangle,diamond,pin,arrow,none itemWidth: 10, // 设置宽度 itemHeigh原创 2020-10-21 09:11:41 · 7042 阅读 · 4 评论 -
Vue中使用echarts实现柱状图(双柱)
实现效果:echarts使用说明请查看:Vue中使用echarts实现常用图表总结option配置:option = { tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: { color: '#999'原创 2020-10-21 09:08:14 · 8129 阅读 · 0 评论 -
Vue中使用echarts实现常用图表总结
一、使用echarts前准备1、安装echarts控制台输入安装echartsnpm install echarts --save2、vue main.js中注册import echarts from 'echarts' //引入echarts二、Vue组件中使用1、先找一个要放置图表的dom节点<template> <div class="hygrometer" ref="hygrometer"></div></template>原创 2020-10-21 08:52:57 · 6009 阅读 · 0 评论 -
Vue中使用echarts实现水球图
控制台输入安装echarts以及水球图npm install echarts --savenpm install echarts-liquidfill --savevue main.js中注册import echarts from 'echarts' //引入echartsimport 'echarts-liquidfill'组件中使用<template> <div class="hygrometer" ref="hygrometer"></div>原创 2020-10-20 20:37:43 · 12038 阅读 · 6 评论 -
Vue中使用echarts实现温度计
感谢大佬提供思路,稍加修改实现了需求<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="echarts.js"></script></head><body><原创 2020-10-19 14:16:11 · 5275 阅读 · 17 评论 -
webSocket使用及vue中封装使用(客户端和服务端搭建)
一、Websocket简介Websocket是一个持久化的网络通信协议,可以在单个TCP连接啥功能进行全双工通信,客户端和服务端没有了Request和Response的概念,地位平等,一旦连接建立,客户端和服务端之间可以实时进行双向数据传输。...原创 2020-10-19 02:33:26 · 6102 阅读 · 8 评论 -
Vue+elementUI+echarts项目从零开始使用总结
一、创建vue项目(Vue-cli脚手架)可以看Vue环境搭建(Vue-cli脚手架)二、安装echarts在项目目录中打开terminal命令行输入npm install echarts安装element-uinpm i element-ui -S字体颜色渐变background-image: -webkit-linear-gradient(top, #88b6d8 0%, #d3e4f1 100%);-webkit-background-clip: text;-webkit-text原创 2020-10-17 12:44:56 · 3741 阅读 · 0 评论 -
Vue项目目录结构优化总结
由于刚开始用,不完善的后面想到会继续补充一、项目基本结构如下图是借的,使用Vue cli脚手架搭建可查看文章:Vue环境搭建(Vue-cli脚手架)二、build:构建编译脚本目录三、config:构建配置目录四、src:source目录(非常重要,核心代码都在里面)五、components目录(组件目录)六、package:非公共,单独的组件目录...原创 2020-10-17 12:40:39 · 495 阅读 · 0 评论 -
JavaScript里缺少分号引起的bug
今天在项目里想试试对象解构,看了阮一峰的es6里的一种嵌套赋值的方式,用到项目里怎么都实现不了,报错如下:阮一峰es6:我用在项目中:就是报错:结果最后查到原因是option后面少了一个分号这样就可以了通过查询,发现尤大给出了解释:至于说 “很难总结什么时候加不加”,其实真的很简单。真正会导致上下行解析出问题的 token 有 5 个:括号,方括号,正则开头的斜杠,加号,减号。我还从没见过实际代码中用正则、加号、减号作为行首的情况,所以总结下来就是一句话:一行开头是括号或者方括号的时候原创 2020-10-15 22:39:36 · 946 阅读 · 0 评论 -
快速学习掌握移动Web开发布局总结(流式布局+flex伸缩布局+rem布局+Boostrap框架 )
移动端常见布局移动端技术选型移动端布局和以前学习的PC端有所区别一、流式布局(百分比布局)流式布局,就是百分比布局,也称非固定像素布局通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充。流式布局方式是移动web开发使用的比较常见的布局方式max-width 最大宽度(max-height 最大高度)min-width 最小宽度(min-height 最小高度)二、flex伸缩布局1)传统布局和flex布局2)布局原理flex是flexi原创 2020-10-14 23:50:35 · 1455 阅读 · 0 评论