米斯特曹、-CSDN博客

原创 JavaScript - 递归：将平级结构转为树状结构。

5、遍历一级数据，递归调用listToTree工具函数，判断父级id是否与当前递归项的id相等，找到子级继而push到每项的children子级。在前端日常开发中，会频繁的重组来自服务端的基础数据结构，本篇文章记录采用递归的方式，将平级数据结构转为树状数据结构。4、筛选出一级数据，并且给每一级添加 children 字段，用于存储子级。2、该工具函数接收三个值，分别是：重组前的数据、数据ID、重组后的数据。1、减少服务器压力，繁琐的数据结构重组交给客户端处理。4、优化用户对系统的整体体验感。

2021-12-07 23:03:10 2114 5

原创 Vue移动端 / PC端适配解决方案：postcss-px-to-viewport

本文介绍一款移动端 / PC端非常不错的适配解决方案：postcss-px-to-viewport 【进入官网】在此之前为解决适配问题“普遍”会给html根节点设置font-size来计算单位值，兼容多端适配问题。开发者需要实时换算单位、还需要精确到六七位小数点。这样的解决方案在现在看来似乎不是最简洁高效的方案。希望有这样一种方案：首先、不论转换是否方便，我就是不想在开发代码的时候换算这些单位，更不想去操心什么转换系数（根节点单位）我会考虑某些属性不需要转换为REM、VW等，如果统一...

2021-08-09 18:09:21 3905 6

原创 Vue实现前端页面缓存、分页记忆、性能最大化

前言：产品性能优化是每个开发者老生常谈的话题，优秀的产品之所优秀，绝不单单只是因其功能强大、背景稳定，用户对于产品的交互体验、视觉效果恰恰占很大的分值。试想以下两款产品，作为用户的你更倾向于使用哪款？产品A：界面简洁清晰，色系搭配完美，既能体现各模块数据增长趋势，又能迅速把使用者眼球聚集到绿色增长的具体数字重点区域。产品B：一眼瞅上去全是满屏文字在密密麻麻排挤，操作栏根本不知道可以点击，页面按钮采用的原生样式，菜单全部展开给用户增加了很多额外操作。web前端已..

2021-06-05 16:24:30 1791 4

原创如何在Vue中使用Echarts可视化库

前言：由于最近项目需要做可视化数据展示，也就是用图表展示数据，他还有一个很高端的名字：“大数据可视化”（参考图一），首先考虑选择什么图表库来作为基础开发，被认可的目前有三个：介绍：Hcharts：国外的一款图表库，是图表库的领头羊Echarts：百度开发的数据可视化库，国内图表库的 “领军人物”AntV：是蚂蚁金服开发的数据可视化库总结出以下几个优略点区别Echarts、Hcharts哪个比较合适：1、学习容易程度：只要懂JS，那么相信你能很快上手。两者打分相同。但是百

2020-10-18 15:12:47 10600 37

原创踩坑：Vue sass-loader V10配置全局变量

本文字数：349 预计阅读时间：1.5分钟问题：Vue中使用 scss 配置全局变量时报错 ~版本信息：Vue 2.6.11 Cli4.5.00sass-loader10.0.2node-sass4.14.1Sass、Less是强化 CSS 的辅助工具，它并不是一门语言，但能有效提高开发效率，最直白的感受是大幅度减少了各种寻找Class，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mix...

2020-10-09 16:23:20 7145 13

原创 ES6 - 手摸手教你解构后台特定字段的正确姿势

前言：如果你是一名前端开发者，那么请确保下文能够一字不落的看完，因为接下来的问题你曾经100%遇到过、且高达90%的人会忽略或者处理方式不够简洁....应用场景：在处理来自后台的数据时，字段名不匹配、掺杂了多余数据。假设现有一个编辑功能，编辑时需要做数据回显，即根据id向后台查询该条数据的关联数据，把结果赋值给视图绑定的数据模型。ok，一切看起来并没有什么问题，接着往下看：数据模拟：// 模拟后台接口返回的数据let res = { id: "21432423523", .

2020-07-21 10:27:11 2304 7

原创 ES6中Promise、async&await从入门到精通！

1、Promise 对象①：Promise可以看作为一个容器，容器内部装着未来才会结束的异步操作；②：Promise用于三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）；③：状态一旦开始，只有两种可能：从 pending 变为 fulfilled 和从 pending 变为 rejected，且只会有一个最终结果；④：Promise对象是...

2020-03-18 17:18:55 1485 10

原创 JavaScript之ES6数组排序高逼格！

前言：针对于前端开发者来讲、数组排序的应用场景其实并不多，大多数情况下都是后台数据排序之后再返回给前端。但是很多面试题中会经常遇到数组排序的问题，经典案例有冒泡排序、插入排序、选择排序等等... 逻辑性比较强硬。为了追求完美、拒绝花里胡哨，所以今天写一篇以ES6相关知识实现排序的文章、并且挂载至原型链上方便使用，希望对大家的开发有所帮助！技术点：ES6中 sort()方法、箭头函数，p...

2020-01-17 14:17:04 22370 11

原创 JavaScript之call()、apply()、bind() 详解！

作为一名合格的前端开发者，大家都知道JavaScript中的this指向问题是一件很苦恼的事情，因为你稍不留意他就跳来跳去很多Bug就是在不经意间this上下文出错导致。call()、apply()、bind()的作用也恰恰与this有关，因为在项目开发中很少用到，大家只知道他们是为了：“改变this指向”，但是这样草草了事的答案，只会暴露出你对它们“根本不了解”！！OK，先来看一段简单的代码...

2020-01-05 13:24:43 3220 7

原创 JavaScript之递归详解！

作为一位名副其实的前端菜鸡，不懂递归肯定是不符合气质的。今天就深究一下递归的定义以及如何运作的，他的内部到底干了什么不可告人的事情？首先了解一下递归的定义：递归：递归函数自己调用自己，且函数内部必须有结束条件、否则就是一个死循环；递归案例：求 n的阶乘（循环 || 递归）阶乘公式先了解一下：即n的阶乘 = n*（n-1）的阶乘，如归使用for循环来做这件事件就很...

2020-01-02 15:04:04 3559 5

原创前端：下载文件实现方式及跨域下载（详解）

前言：本文详细介绍在开发过程中前端如何与后端配合实现文件下载至本地，并详细说明特殊格式文件如何处理。如果你是一名前端开发者，恰好需要实现后端文件下载至本地的需求，那么恭喜你本篇文章一定会帮到你！需求：实现二进制下载、URL下载、跨域下载后端：Spring前端：Vue要点：后端返回文件流还是URL下载地址？一、解析：二进制式下载流程：后端返回二进制文件流的情况下，我们前端需要...

2019-12-07 18:07:26 21903 19

原创 Vue-cli4.0.x报错Unexpected console statement

尤大大10月22日把脚手架更新到了4.0.5版本，新项目入手4.0版本开发，随后会持续记录4.x版本的坑（只有永远躺在泥坑里的人,才不会掉进坑里）每次看到尤大大在笑我就想哭...，因为又要学新的了.....代码：Login: { user: "", //用户名 password: "" //密码 },------------...

2019-10-30 11:28:30 1301 5

原创 Vue实现自定义组件数据双向绑定

前言：使用Vue进行项目开发的时候，通常会用到Vue提供的组件化机制封装开发所需要的组件以达到开发项目的需求，大到项目中的一快筛选模块、数据表格，小到分页面板、级联面板、乃至一个小小的button按钮，之所以组件化也是为提高我们实际的开发效率，那到底什么是组件化呢？参考一张尤玉溪大大的图就会很快明白；简单来讲一个完整项目会分为很多部分，每个部分都会有各自独立的功能，每个独立的功能组件又是由...

2019-09-22 21:18:14 3727 2

原创 JavaScript-ES6 神秘的解构赋值

写这篇文章之前早已有“提笔画西游”的冲动，苦苦翻阅很多资料终于理解了神秘感十足的解构赋值，可奈何最近忙于工作上的事情挤不出时间更新博客。话不多说、先请JS祖师爷 - Douglas Crockford！解构赋值：ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。1、数组解构赋值：通常定义变量并赋值的时候只能一个一个定义之后再赋值，例如：let...

2020-04-28 17:33:49 489 1

原创 ES5数组新方法（详解）

导读本文介绍ECMAScript 5 语法新增的常用数组新方法①：forEach let Arr = [20, 50, 87, 99, 10]; let newarr = Arr.forEach((element, index) => { element += 1; console.log(element); //20,50,87,99,10 });...

2019-10-23 16:30:38 915

原创 SPA单页面应用和SSR服务端渲染的区别

目录一、概念1.1、什么是单页面应用（SPA）？概念：整个web项目只有一个页面，使用路由机制进行组件之间的切换；优点：客户端渲染、数据传输量小、减少服务器端压力、交互/响应速度快、前后端完全分离；缺点：首屏加载慢、对SEO不友好，不利于百度，360等搜索引擎收录快照；1.2、什么是服务端渲染（SSR）？概念：将组件或页面通过服务器端生成HTML字符串，再发送到...

2019-10-22 17:28:42 3365

原创 computed与watch、methods的区别，以及运用场景！

目录需求：根据单价、数量、优惠金额计算/处理之后得出合计金额；export default { data() { return { discounts: 50, //优惠券 Money: null, //单价 Num: null, //数量 Total: 0 //合计 }; },};这时候至少有四种方式可以实...

2019-10-20 22:56:59 811 1

原创 Vue全局定义过滤器

需求：Vue开发过程中，通常会把后台数据特意处理之后再展示在页面上，例如展示百分比 / 时间戳 / 计算结果等...如果选择特意在methods中处理就会显得代码比较凌乱，且每个实例下面都需要复制该方法，无论是从性能上还是代码可维护性上来讲都不是很好的解决办法！filter：Vue提供的过滤器（filter）可以很好的解决这个问题，且允许自定义过滤规则、可全局使用、可维护性很高。w...

2019-10-11 16:19:06 655

原创 Vue全局封装axios请求

一、简介使用Vue开发项目时，数据请求不再使用原生的ajax来请求数据，Vue官方库提供的vue-resource已经不再更新和维护，现在新项目基本都以axios作为主要请求方式；二、使用本例以POST单例请求为例axios({ method: "POST", //请求方式 url: baidu.com, //请求地址 data: this....

2019-10-05 19:56:48 2626 1

原创 ElementUI dialog初始化获取不到元素

前言：Vue+ElementUI开发项目，使用Dialog作为子组件时，父组件初始化子组件内部未能获取到dom元素；假设在父组件初始化完成之后，从后台异步拿到数据传递给子组件；子组件接收到父组件数据之后，做某种处理返回给父组件用于展示；比如我需要做一个修改功能，整个页面作为父组件、Dialog作为子组件、并且嵌套级联面板用于勾选数据（也可以想象一下嵌套的是一个...

2019-09-24 20:38:02 5141 8

原创 Vuex异步请求导致子组件报错

目录：前言：不知道大家有没有遇到这样的情况，A组件需要v-model绑定一个依赖于Vuex的数据，通常会直接绑定至Vuex数据源，如下所示是正常的处理流程；data：-------- trimesterId: "", //学期ID-------- computed: { Term() { return this.$store.state.Term; //返回...

2019-09-15 10:53:38 631

原创 Vue+ElementUI实现table表格动态合并

**本篇博客主要记录个人在开发过程中遇到的难点问题，万分期待大家的讨论以及弥补短缺之处！**首先看看elementui提供的table组件，直达【官网】**文档说明**官方文档中指出el-table组件接收一个"span-method"属性，属性值是一个回调函数，四个参数分别返回当前行、列、行号、列号，该回调函数需返回合携带rowspan、colspan的一组对象！ ...

2019-08-22 18:52:57 3342 2

原创 Vue全局定义方法

简单介绍一下Vue全局定义方法以及如何使用！1、首先在src目录下新建一个commonjs（用来写多个js文件）2、文件内部安排上封装好的代码3、最后在main.js引入并且挂载到prototype原型上然后就可以正常在项目中使用了！除了在组件上直接使用以外，还可以在其他函数中直接使用，Vue的router、router、router、emit等等就是这么来的；-------...

2019-08-08 19:14:09 2113

原创 Vue-cli3.x解决跨域问题，配置vue.config.js

Vue3.x项目中官方已经删除了vue.config.js配置文件，但是我们仍然需要配置跨域、打包、静态资源目录等问题，这时候仍然需要在vue项目中创建vue.config.js配置文件。需要注意的是创建vue.config.js时，我们无需再次导入该文件，该文件创建在与“src”同级目录下文件配置详解：出口：整个文件需要以module.exports = { … }作为出口配置项；...

2019-06-24 23:26:30 2763

原创 Vue-cli3.x引入本地json报404 解决方案

（近期公司用Vue开发后台管理系统，顺便做一些Vue方面的记录，本人菜鸟一枚希望大家多多指正；）众所周知，前端开发中“数据模拟”是很重要的，今天探讨一下关于Vue加载本地json报404错误的解决方案！Vue-cli3.x中删除了static、 vue.config.js 等，个人感觉cli2.x和cli3.x改动还是特别大的，3.x中加载本地json只需要把json数据放在public文件...

2019-06-16 10:18:37 2508 6

米斯特曹