- 博客(44)
- 收藏
- 关注
原创 42、element表格内容溢出自动往上滚动,鼠标移入停止滚动,溢出继续滚动
【代码】42、element表格内容溢出自动往上滚动,鼠标移入停止滚动,溢出继续滚动。
2023-11-20 16:41:18
402
原创 40、使用elementUI分别实现前端,后端表格分页
data() {return {name : "母线名称" , value : 'busName' , } , {name : "电压等级" , value : 'voltageLevel' , } , {name : "开始时间" , value : 'startDate' , } , {name : "恢复时间" , value : 'recoverDate' , } , {name : "持续时间(分钟)" , value : 'continuedDate' , } , {
2023-07-06 12:44:09
4103
原创 36、根据年份和周数获取周一和周日得日期
/weekNum:第几周,year:年份return {//.replace(/(\/)/g,'-')把所有“/”替换成“-”startTimes: startTimes.toLocaleDateString().replace(/(\/)/g,'-'),//toLocaleDateString()把Date对象的日期部分转换为字符串,并返回结果。
2023-03-17 17:45:58
417
原创 33、element的弹窗dialog设置可拖拽el-dragDialog
【代码】33、element的弹窗dialog设置可拖拽el-dragDialog。
2022-12-16 19:02:21
311
原创 31、element 解决el-select 下拉选择默认赋值后,无法再次选择数据的问题
element 解决el-select 下拉选择默认赋值后,无法再次选择数据的问题。
2022-11-16 10:12:22
2720
原创 30、JavaScript的基本类型和引用类型的判断方法
一、常见的基本数据类型和引用数据类型1、基本数据类型:Number、String、Boolean、Null、undefined。基本数据类型,名字和值都会储存在栈内存中。2、引用数据类型:Object、Array、Function、Date、RegExp、Error等。二、数据类型的4种判断方法typeof、instanceof、constructor、Object.prototype.toString.call()1、typeOf:基本数据类型(除了Null类型,返回’object’)都能被准确
2022-05-19 17:23:29
1149
原创 29、浏览器缓存的原理
一、浏览器缓存和http协议标头1、缓存优点:提高网页请求响应的速度降低服务器带宽的占用降低服务器的负载(主要指的是cpu 内存这些硬件资源)占用提高用户的体验度降低用户的焦虑2、浏览器缓存是在用户的disk(磁盘)或者内存上面3、浏览器的缓存原理(1)当网页需要资源的时候,首先访问浏览器缓存,如果浏览器缓存没有数据时,那么就会请求服务器端,服务器进行响应数据,浏览器就会同时把数据资源存储起来,当网页再次需要这个资源的时候,还是先访问浏览器缓存,发现有数据就会直接返
2022-05-08 15:36:14
1908
原创 28、vue3学习笔记
1.Vue3带来了什么1.性能的提升打包大小减少41%初次渲染快55%, 更新渲染快133%内存减少54%…2.源码的升级使用Proxy代替defineProperty实现响应式重写虚拟DOM的实现和Tree-Shaking…3.拥抱TypeScriptVue3可以更好的支持TypeScript4.新的特性Composition API(组合API)setup配置ref与reactivewatch与watchEffectprovide与i
2022-04-28 15:53:13
1947
原创 27、webpack的配置详解
1、webpack是什么?作用是什么?在项目中能解决什么样的问题?谈谈理解答:(1)webpack是什么?webpack是一种前端资源构建工具,一个静态资源模块打包器。在webpack来看,前端所有资源(js/json/css/less/img)等都会作为模块去处理,它将根据模块的依赖关系进行静态分析,打包生成对应的静态资源(bundle)(2)随着框架的诞生后,单页应用技术的流行,前端网页功能比较丰富,JavaScript的复杂度也随之增长,需要的依赖包也比较多,而且对于ES6+新语法,以及css
2022-04-18 17:09:26
1030
原创 26、vue前端出现跨域问题,如何解决跨域?
问题:因为浏览器的同源策略的限制问题(协议、主机、端口一致),浏览器访问非同源的网址时,会出现无法获取数据(已发请求,服务器已收到请求),出现跨域问题3种解决方法:1、cors跨域(配置服务器) :全称 “跨域资源共享”,原理:它允许浏览器向跨源服务器,发出XMLHttpRequest请求(配置响应头Accesse-Control-Allow-Origin:"*",违背任意一条同源策略都能访问响应数据),从而克服了AJAX只能同源使用的限制。缺点:这样会造成任何人都能向这台服务器要数据。2、js
2022-04-15 15:01:48
14493
原创 25、单页应用及多页应用的理解与区别
1、单页应用:就是刷新页面会请求HTML文件,但是切换页面的时候,不会再次请求HTML文件,只是页面内容发生了变化而已。页面跳转->js渲染(1)优点:页面切换快(无需再次发起HTML文件请求,节约了http请求时延)(2)缺点:首屏时间稍慢,SEO(搜索引擎)差【搜索引擎只认识HTML内容不认识js内容,单页应用的渲染都是靠JavaScript渲染出来。搜索引擎不好识别排名】2、多页应用:每次切换页面都会发起http请求HTML文件页面跳转->返回HTML文件(1)优点:首屏
2022-04-15 14:47:34
1534
原创 24、typescript面向对象
面向对象简介面向对象是程序中一个非常重要的思想,它被很多同学理解成了一个比较难,比较深奥的问题,其实不然。面向对象很简单,简而言之就是程序之中所有的操作都需要通过对象来完成。举例来说:操作浏览器要使用window对象操作网页要使用document对象操作控制台要使用console对象一切操作都要通过对象,也就是所谓的面向对象,那么对象到底是什么呢?这就要先说到程序是什么,计算机程序的本质就是对现实事物的抽象,抽象的反义词是具体,比如:照片是对一个具体的人的抽象,汽车模型是对具体汽车的抽
2022-04-15 11:16:56
79
原创 23、初识TypeScript
0、TypeScript简介TypeScript是JavaScript的超集。它对JS进行了扩展,向JS中引入了类型的概念,并添加了许多新的特性。TS代码需要通过编译器编译为JS,然后再交由JS解析器执行。TS完全兼容JS,换言之,任何的JS代码都可以直接当成JS使用。相较于JS而言,TS拥有了静态类型,更加严格的语法,更强大的功能;TS可以在代码执行前就完成代码的检查,减小了运行时异常的出现的几率;TS代码可以编译为任意版本的JS代码,可有效解决不同JS运行环境的兼容问题;同样的功能,TS的代
2022-04-15 11:14:12
96
原创 22、路由的理解和配置
概括:多个路由,需要经过路由器的管理。为了完成单页面应用SPA(single page web application)的导航区和展示区来来回回的切换展示。4.1、路由的理解:(1)路由就是一组key-value的对应关系。(2)key为路径,value可能是function或component4.2、路由分类4.2.1 后端路由(1)理解:value是function,用于处理客户端提交的请求。(2)工作过程:服务器接收到一个请求时,根据请求路径找到匹配的函数来处理请求,返回响应数据。4
2022-03-11 17:21:01
1717
原创 21、函数防抖和函数节流的区别
概念:(1)函数防抖(debounce):触发高频事件后n秒执行函数,如果在n秒内再次触发事件,那么就要重新计算执行函数的时间。(2)函数节流(throttle):高频事件触发,但在n秒内只会执行一次,所以节流会稀释函数的执行频率。1、...
2022-03-11 17:07:31
668
原创 20、axios的认识与使用
1、为学习axios做准备;安装axios并搭建json server服务(1)安装axios并引入axiosnpm install --save axios vue-axiosimport axios from ‘axios’ //可以在axios配置文件中引入(2)搭建json server服务安装json-server:命令npm i -g json-server 注:nodejs版本要12以上创建文件db.json启动服务 json-server --watc
2022-03-11 10:06:00
2645
原创 19、promise的理解和使用
1.1、promise是什么?(1)抽象表达promise是一门新的技术(ES6规范)promise是js进行异步编程新解决方案 备注:旧方案是单纯的函数回调(2)具体表达从语法上来说:promise是一个构造函数从功能上来说:promise对象用来封装一个异步操作并可以获取其成功/失败的结果值1.2、为什么使用promise?(1)指定回调函数的方式更加的灵活旧的:必须在启动异步任务前指定promise:启动异步任务=>返回promise对象=&
2022-03-11 09:45:21
873
原创 18、Ajax的理解和使用
1、原生Ajax1.1、Ajax简介(1)Ajax全称为 Asynchronous javascript and xml,就是异步的 js 和 xml(2)通过Ajax可以在浏览器中发送异步请求,最大优势:浏览器无刷新获取数据(3)Ajax不是新的编程语言,而是一种将现有的标准语言组合在一起使用的新方式1.2、XML简介(1)可扩展标记语言(2)被设计用来传输数据和存储数据(3)XML和HTML类似,不同的是HTML都是预定义标签,而XML中没有预定义标签,都是自定义标签//比如我有一个学
2022-03-11 09:41:36
21656
原创 解决路由导航冗余报错(路由重复)
重复导航同一个路由出现以下问题解决方案在router的index.js文件里面添加以下代码const originalPush = Router.prototype.pushRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err)}...
2021-12-17 17:38:32
554
原创 解决element 表格升降序排序错乱的问题,并获取排序后的表格数据
触发排序事件时执行以下操作//this.tableDatas.data为表格数据this.tableDatas.data.map((value) => { for (let key in value) { if (key !== 'pdate' && key !== 'sectionname') {//过滤不需要转换类型的值 //纯数字列排序需要转换为Number类型,否者经常出现升降排序混乱 value[key] =
2021-12-03 15:22:35
5542
2
原创 15、vue 处理后台返回的文件流实现word文件导出;以及纯前端实现word文件导出
{#products} {name}, {price} €{/products}
2021-11-08 16:02:23
8605
1
原创 14、使用file-saver插件,js-xlsx纯前端导出Excel的xlsx类型文件
npm安装file-saver,xlsxnpm install file-saver --savenpm install xlsx --save引入file-saver插件和xlsx,封装导出方法import FileSaver from "file-saver";import XLSX from "xlsx";export function excelTable(id,filename){ /* generate workbook object from table */ var wb
2021-09-03 11:33:50
1298
原创 13 、js 获取当前周以及当前月份的第一天和最后一天
1、获取当前周的第一天和最后一天formatDate()日期格式转换函数在前面的文章有细致讲解let nowDate = new Date();//获取一周中的第一天所对应的日期let first = nowDate.getDate() - nowDate.getDay()+1;//getDate()从nowDate对象返回一个月中的某一天;getDay()从nowDate对象返回一周中的某一天let firstDate = new Date(nowDate.setDate(first)).toU
2021-08-28 17:02:47
553
原创 12、使用mockjs模拟前后端交互
新手前端爱好者如果想尝试体验前后台分离开发,可以使用mockjs模拟后台请求数据, mockjs可以生成随机数据,拦截 Ajax 请求,体验独立于后端进行开发。并且支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。1、mockjs的使用方法以vue-cli脚手架初始化项目为例,使用axios进行数据请求(1)、安装axios与mockjs,命令如下npm install axios --savenpm install mockjs --save-dev(2)、安装完成后,在mai
2021-08-23 16:52:18
409
原创 11、vue3项目开发前的准备工作
vue3项目开发的准备工作一、安装环境1、安装node2、安装cnpm或者配置淘宝镜像源3、安装vue脚手架4、安装开发工具5、安装git或者svn6、安装postman二、使用vue脚手架创建项目1、使用vue-cli创建项目如:vue create 项目名称2、使用可视化工具创建项目如:在终端输入vue ui进入可视化工具三、安装项目中所需要的插件并且进行相关配置1、安装axiosnpm install axios --save //安装2、安装ui组件element-
2021-08-20 10:37:19
1105
原创 10、Vue2项目使用axios发送请求数据
一、axios完成Ajax请求,以下为具体介绍1、先在项目中安装axios,安装命令如下cnpm install axios -S2、axios引入,为了避免麻烦,在main.js文件中全局引入import axios from 'axios'Vue.prototype.$axios = axios; //写成原型属性,在main.js中添加这两行代码之后,就能直接在组件中使用axios了3、使用方式this.$axios({ url:"/id/daSysloadFore
2021-08-19 11:35:44
4059
1
原创 9、处理对象数组,获取对象某单个属性值返回新的数组
凡是常用到的方法,我喜欢封装公用函数调取/** * 处理res数据 * @param {*} arr 对象数组 * @param {*} key 对象单个属性 * @returns 数组 */export const toArray = (arr, key) => { let weNeedArr = []; for (let index = 0; index < arr.length; index++) { const element = arr[i
2021-08-17 16:25:16
1370
原创 8、一个Echarts曲线公用函数 实现Vue多页面复用
一、echarts多条曲线公用函数的封装参数解释:id:dom容器节点,data:接收传过来的主要数据,linename:title名称,unit:需要用到的数据单位,xname:X轴的名称export const lineCharts = (id, data, linename, unit = "MW",xname = "时刻") => { let myChart = echarts.init(document.getElementById(id),'purple-passion');
2021-08-17 10:38:00
361
原创 7、js讲解赋值、浅拷贝、深度拷贝的区别
一、赋值赋值是将某一个属性或者对象赋给某一个变量的过程,分为“赋值”与“赋址”1、基本数据类型:赋值,赋值之后两个变量互不影响let object = "lunlun";let object2 = object;console.log(object)// "lunlun"console.log(object2)// "lunlun"2、引用数据类型:赋址,两个变量具有相同的引用,指向同一个对象,相互之间有影响let object = ["2","33",["22",{name:"Copy
2021-08-16 17:53:06
237
原创 6、Element-ui el-table合计属性summary-method的使用,以及合计行样式自定义
根据自己的合计逻辑,使用element官方的合计属性summary-method并传入一个方法,返回一个数组,这个数组中的各项就会显示在合计行的各列中,具体看以下代码//汇总 getSummaries({ columns, data }) { const sums = []; columns.forEach((column, index) => { if (index === 0) {
2021-08-03 15:59:44
8103
1
原创 5、js获取当前日期,可根据传入的日期进行加减天数,并将其格式化为自己所想要的格式
标题JavaScript如何获取当前日期?获取当前日期的方法很简单,以下是获取当前日期的步骤:1.new Date创建时间对象;2.使用getFullYear获取当前的年份;3.使用getMonth获取当前的月份;4.使用getDate获取当天时间。以下是通俗易懂,操作超级简单的日期获取以及日期格式转换函数,直接页面调用,nice~~~~~日期转换函数//日期格式转换函数export function formatDate(time, fmt) { let date = new Da
2021-07-29 17:20:47
628
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人