- 博客(88)
- 收藏
- 关注
RSS订阅
原创 Vue最常见的面试题以及答案（面试必过）
这里写目录标题对MVVM的理解？Vue数据双向绑定原理Vue的响应式原理vue中组件的data为什么是一个函数vue中created与mounted区别Vue中computed与method的区别Vue中watch用法详解Vue中常用的一些指令说说vue的生命周期对MVVM的理解？MVVM 由 Model、View、ViewModel 三部分构成，Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来；ViewMode
2020-12-15 14:39:41
212803
59
原创 vue2 中使用 Tinymce 富文本编辑器详解
有一些博主，安装推荐的是tinymce@5.1.0，最后会遇到报错，import “tinymce/icons/default” 路径找不到，故需要升级tinymce版本，所以我这里直接安装的是tinymce@5.10.9；在node_modules中tinymce依赖包，找到其下面的skins文件下，直接复制，粘贴到src/assets/tinymce目录下；查询资料的时候遇到一篇文章，是一些扩展插件，可用可不用，了解一下就行，文章里有详细的插件介绍，安装命令和使用方法；想了解的可以自己查看；
2024-09-20 14:39:27
846
原创 用exceljs和file-saver插件实现纯前端表格导出Excel（支持样式配置，多级表头）
最近，做公司一个老项目（jquery），有个需求是将表格中的json数据，导出为Excel文件，表格表头还是动态多层级，导出的excel样式和项目中表格一致；老项目中之前用的都是xlsx插件，我查询了一下文章，也看到过用xlsx实现多层表头下载，但是感觉比较麻烦，看到推荐使用exceljs插件比较方便；就了解一下，用在项目中得以实现；话不多说，上案例图：导出excel效果：这个案例我主要演示的是两层分组表头和样式配置的代码；如果要想仔细研究该插件，可以阅读Exceljs官方文档；
2024-08-10 13:02:01
1410
5
原创 element-ui/view-ui表格的合并行和列的多种方法（超级详细）
vue的这两个组件库的表格的行和列的写法是一样的，都是通过span-method方法可以实现的；下面我们就以view ui的表格组件为例；该函数可以返回一个包含两个元素的数组，第一个元素代表 rowspan，第二个元素代表 colspan。也可以返回一个键名为 rowspan 和 colspan 的对象。看上面对该方法的说明太过于官方，我们直接去组件库把实现的效果图拿过来仔细分析一下；
2024-03-29 12:01:10
7508
原创 antv-g6—在vue项目中实现网格拓扑流程图自定义绘制
这个是自己写着玩的，利用@antv/g6自定义绘制流程图，然后保存到localstorage中，在左侧表格展示，还可以通过表格操作来查看对应的流程图以及删除；这里特别注意一下，，vue版本是2.5.x；下面我会把实现代码全部粘贴出来，不需要需改，开袋即食，放到你的项目中直接可以展示；代码中我也会加上注释，不懂的可以看注释；
2023-06-22 16:14:26
6076
3
原创 Echarts—词云库（echarts-wordcloud）配置详解和使用（可自定义形状）
我们经常会看到一些网站或者页面有一堆五颜六色的词汇的聚在一块，有大有小的散落着，看着挺好看的；也许项目中也会涉及到显示一些关键词之类的需求，这个时候也可以用词云库（echarts-wordcloud）来实现；echarts-wordcloud是基于echarts的一个词云库，但是在echart官网中的配置相中却没有关于他的介绍，下面我们就来一起慢慢探索并能手到擒来的使用它；1.下载图片首先要找到一张图片，为了成功率较高，随意对图片也是有要求的，图片一定要是矢量图，并且最好为黑色填充，当然其他颜色也行。
2023-06-14 13:50:18
32885
3
原创 Echarts—根据地理坐标被标注的中国地图（标记可以自定义为图片）
把中国地图的json数据下载下来，放到项目本地中的utils文件夹下；位置随意，想放哪里都可以，能找到就行！这是一个有阴影的,并且根据坐标点被标记的地图展示，下面我们就把实现的代码贴出来，老样子，还是开袋即食！
2023-06-13 18:26:19
3513
原创 Echarts—X轴鼠标滑动或者缩放/多列柱状图中某一列数据为0时不占位
当时听了这个需求，我就很不解，这数据都是不确定的，咋展示，如果只展示一个月的数据还可以，然后通过按钮去选择月份渲染，展示一年的数据，就有点小复杂啦；12个月，按10个项目，正常数据应该有120个，这里只有81个，就是所有有值的柱子的集合，把值为0的已经过滤掉，不显示，这样就不会炸图表中占位；图表上的数据也是自己随意mock的，由于柱子数量布丁，颜色也是随机的，这些都不要在意不要，重点是图表的实现；X轴数据那么多，还不确定，只能看卡能不能实现滑动，结果还真能，那就好办啦，1.X轴鼠标滑动或者缩放、
2023-06-13 16:47:09
5344
原创 Echarts—自定义图例布局样式和图例换行的实现
之前做过各种各样需求的Echarts图表，通过查找博客和查看官网配置项api，都能实现，但是很久不用的话，再去做某些一样功能需求的图表，有些配置项还是需要反复查看，或者去搜索，所以我特意开了一个可视化专栏，去把使用过的可视化记录下来，也方便日后自己复用或者为他人提供便利！这次就记录一下自定义图例布局样式和图例换行的实现，我会把整个图表实现的代码都带出来，如果日后项目中用到类似的需求，也可以直接拿去！案例实现如下图；legend : {
2023-06-13 15:30:52
9038
原创 vue+xlsx实现前端模版下载、导入和导出excel文件
产品需求：后端不想写下载，导入和导出的接口，让我们前端自己实现。这里我们就可以用xlsx插件来实现，我们不多说了，先放一下实现的图片，下面我们分别把模版下载、导入和导出的代码放上来，想用的话，直接复制粘贴即可！模版下载图片导出图片：好了，下面我们就直接上代码！
2023-05-26 13:59:42
2456
1
原创 vue项目用后端返回的文件流实现docx和pdf文件预览
写这篇文章的目的，是因为我比较懒，想把代码记录一下，方便日后使用；哈哈，如果你也需要，也可以复制粘贴啊，为了方便自己和需要的人知道怎么使用，我尽量写的详细一点，没有什么技术难点，就是简单的记录，万一能帮到需要的人呢，也是一件美事；其实也就是使用了两个插件而已，docx-preview和vue-pdf，下面我们就写一下使用方法和详细的代码；
2023-04-12 16:02:19
9012
11
原创 Vue2.x全家桶技术写的一个详细的后台管理架构和数据可视化大屏（附git地址）
详细的后台管理架构，项目运用了Vue2所有全家桶技术，包括Vue-Router，Vuex，mock.js，axios，Echart.js，antv-g6，tinymce，swipe等技；其中包括两个数据可视化大屏展示，用到各种各样的图表展示；
2023-02-07 10:20:08
1757
1
原创 react项目中ant-ui表格用下拉滚动条加载数据
实现需求：在react项目中，在满足表格头部列可以拖动改变的情况下，还要表格利用滚动条下拉来加载表格数据？如下图：**方案一：**利用react-infinite-scroll-component插件，但是表头无法固定，一旦样式固定定位写死，就无法满足拖动，如果你的表格列不需要拖动的话，可以使用，比较方便；**方案二：**先实现ant-ui表格组件的滚动，然后监控表格滚动条，快到达底部后触发加载数据接口来实现下拉加载，比较麻烦，但是表头固定，也不会破坏表头列的拖动；最后我选择了方案二，下面我就.
2022-04-15 17:37:34
2661
原创 用react-resizable插件来拖动改变ant-ui表格的列宽
项目需求：react项目中，做一个可以通过鼠标拖动改变列宽的表格第一步：安装react-resizable插件npm install react-resizable --save第二步：在项目中封装Resizable组件Resizable.jsimport * as React from "react";import { Table } from "antd";import "antd/dist/antd.css"; import { Resizable } from "react-.
2022-04-15 16:32:49
1899
转载 [微服务/API时代的前端开发] BFF进阶--实践中常见的3种反模式
实践中常见的3种反模式前言【反模式1】导致缺乏沟通的“稀疏沟通”【反模式2】BFF处理过度的“Fat Front”【反模式3】 最后阶段一次性发布的“Big Bang Joint”组织问题与架构设计之间有着密切的关系前端开发的未来前言上一篇介绍了BFF相关的5个使用案例。本篇将结合笔者在实际项目中多次采用BFF的经验来说明反模式出现的原因和相应的解决方法。BFF 是一种架构模式，但并不是任何情况都适用。如果对它的优缺点了解不够透彻，就冒然采用的话，你可能会后悔。我在实际项目中多次采用了BFF，但并非所
2022-04-08 12:32:44
611
转载 [微服务/API时代的前端开发] BFF入门--5个实用的BFF使用案例
5个实用的BFF使用案例前言API Gateway服务器端渲染（Server Side Rendering）会话管理（Session Management）上传文件WebSocket、Server Sent Events、Long Polling使用 BFF 时如何开始前言BFF 是做什么的，简单地说，API 服务器负责业务领域的逻辑部分，而 BFF 是支持用户界面的服务器。如果Web应用可以使用领域逻辑简单地创建，那么就不需要BFF。但是在微服务/API时代，前端开发越来越需要“汇总API”和“进行服
2022-04-08 12:21:03
1530
转载 [微服务/API时代的前端开发] BFF超入门--Netflix、Twitter、Recruit选择BFF的理由
BFF超入门什么是BFF(Backends For Frontends)BFF产生的技术背景和历史背景前端工程师还是后端工程师，谁来负责？何时使用 BFF 架构模式，何时不使用BFF 案例研究-Netflix、Twitter、RecruitNetflix案例推特案例Recruit 案例什么是BFF(Backends For Frontends)顾名思义，它是前端的后端（服务器）。专门为前端而调用API，或者生成 HTML 的服务器。看到这里你可能会想，“这与传统的Web应用服务器有什么不同？”。本质上是
2022-04-08 12:04:32
548
原创 BFF的初次探索
BFF的探索之路BFF 解决了什么问题BFF 是什么BFF 的应用场景BFF 的优缺点BFF 解决了什么问题如下图，在我们的前端页面时常存在，某个页面需要向 backend A、backend B 以及 backend C… 发送请求，不同服务的返回值用于渲染页面中不同的 component，即一个页面存在很多请求的场景。此时，每次访问该页面都需要发送 3 个请求。同时为了保障 Android，iOS，以及 Web 端的不同需求，需要为不同的平台写不同的 API 接口，而每当值发生一些变化时，需要
2022-04-06 15:09:39
1266
原创 搞懂Vue-Router的概念和使用，看完这篇文章就够了
Vue-Router一. 前言二. 对SPA应用的理解三. 后端路由和前端路由四. 项目中路由基本使用五. 路由传参六. 路由守卫七. history模式和hash模式的区别一. 前言说到路由，大家都会第一时间想到上图生活中的路由器；可以看到路由器上有几个网线口，每个网线口连接着一台电脑；我们可将路由器的网线口看作key值，连接的电脑看作value值，每一个key对应着一个value，这就是路由；路由就是一种对应关系；而多个路由（route）是由路由器（router）管理的，这就是两者的关系；生
2022-03-02 16:15:27
2866
4
原创 用Vue3+element-plus+express写个简单的后台管理框架
项目图片预览最近刚看一遍Vue3基础视频，然后就迫不及待地试了一试，也没有写多复杂，就是一个登录页和一个菜单导航的内容页；主要使用Vue3 + @vue/cli + element-plus + vue-router + axios 技术，接口调的是自己mock的数据，由于Ts还没有学习这里就用Js，这无关紧要啊，哈哈；项目gitHub地址：https://github.com/lcSuperman/vue3-program.git下面是项目项目截图：项目代码目前写的内容比较简单，只是一
2022-01-24 15:49:34
3836
8
原创 项目中一段时间无操作后自动登出（前端操作）
1.在项目中utils下创建timeOut.js文件let lastTime = new Date().getTime()let currentTime = new Date().getTime()let timeOut = 30 * 60 * 1000 //设置超时时间: 30分钟window.onload = function () { window.document.onmousedown = function () { sessionStorage.setItem("last
2022-01-13 17:16:11
2357
原创 模拟实现JS中new操作符的工作原理
模拟实现new原理官方定义模拟实现new工作原理构造函数有返回值new模拟实现的最终版面试中，有些面试官通常会问：new一个的过程发生了什么？今天我们就来探索一下，并手动模拟一下new操作符的工作原理；首先我们来看一下原生new的用法：function Person(name,age){ this.name = name this.age = age}Person.prototype.hobbit = "听音乐"var XH = new Person('小红','20')cons
2021-12-10 16:44:02
1082
原创 JavaScript函数中call、apply和bind的详解和手动实现
call、apply和bind的详解身世背景call()、apply()和bind()的区别call()和手动模拟实现apply()和手动模拟实现bind()和手动模拟实现身世背景是什么？在前面的学习的JS原型链中，我们可以知道，js中所有的函数都是Function的实例，Function的原型对象即Function.prototype）中有很多属性和方法，其中就包括call,apply和bind方法。根据原型的规则，所有的函数都可以使用原型中属性和方法，所以，所有的函数并且只有函数可以使用call
2021-12-07 16:16:39
411
转载 程序员如何搭建自己的知识体系?
如何搭建知识体系什么是知识体系？什么是个人的知识体系？什么是程序员的知识体系?如何构建知识体系?大量输入梳理脉络笔记整理思考优化实践反馈什么是知识体系？所谓”知识体系”，指的是把大量的不同的零散的知识点,通过内化，存储，整理等方式组合起来，以点成线，以线成面，形成系统的，有序的，清晰的脉络结构。我们在解决问题和处理事情时，会使用自己的知识体系做出选择，不论是潜意识还是显性意识。每一次的抉择和行为都将迭代我们的知识体系，让其更加明确清晰,找到自己不足的地方，优化可以改进的地方,明确接下来的方向，提升自
2021-12-01 13:13:43
1043
原创 关于安装Vue CLI 4.x版本报错的解决方法
报错可能是以下原因安装命令错误（低级错误）未安装node环境或node版本不匹配未删除之前版本脚手架相关缓存（我遇到的问题）安装命令错误（低级错误）Vue CLI 的包名称由 vue-cli 改成了 @vue/cli//旧版本安装命令：npm install -g vue-cli//新版本安装命令：npm install -g @vue/cli未安装node环境或node版本不匹配首先安装vue/cli前，首先先检查其电脑是否安装node,打开cmd输入一下命令：node -v如有
2021-11-16 17:41:44
5904
5
原创 深入理解Javascript中的event loop（事件循环）机制
深入理解事件循环机制面试题JavaScript是单线程同步任务和异步任务event loop（事件循环）宏任务和微任务检测练习面试题我们面试的时候，可能有的面试官问我们：“可以介绍一下JavaScript事件循环机制吗？”或者“对微任务和宏任务有了解吗？”再或者人家也懒得问我们，直接把下面这道面试题甩给我们，让我们写出它最后的执行结果；console.log('1')setTimeout(function callback(){ console.log('2')}, 1000)new P
2021-11-05 15:57:30
5378
6
原创 2021年Javascript最常见的面试题以及答案
js常见的面试题以及答案1.什么是函数柯里化？2.什么是Promise对象，有哪些用法？3.Promise 构造函数是同步执行还是异步执行，那么 then 方法呢？1.什么是函数柯里化？是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。把接受多个参数的函数转换成接受一个单一参数的函数// 普通函数var add = function(x, y) { return x + y;} add(3, 4)
2021-11-02 13:39:32
12140
1
原创 对Javascript中原型和原型链的探索和详解
一起探索原型链的奥秘吧！前言对象构造函数原型对象constructor_proto_（隐式原型）前言原型对象和原型链是Javascript中重要的知识点之一，也是面试官经常提及的问题，特别是刚接触Js的“新生代农民工”，一提到原型链，你的脑海里就出现下面这张图：原型链说难不太难，把上面的图看懂就行，说容易吧，还真不是那么好理解，那接下来我们就一起去认识认识它！对象构造函数原型对象constructorproto（隐式原型）............
2021-10-28 16:19:55
964
原创 对Javscript中浅拷贝和深拷贝的探索和详解
一起开启深浅拷贝的探索之路吧！前言Js数据类型和存储栈(stack)和堆(heap)对象赋值和拷贝的区别手动实现深浅拷贝前言要想对深浅拷贝理解透彻，那我们还真不能开门见山，我们还得先了解一下门，再找到钥匙，把门打开后才会看到山，这样一来你也就完全理解了山存在的意义；因此我们要先了解一下中Js的数据类型以及存储方式，就会再认识到什么是栈(stack)和堆(heap)，接下来你还会意识到对象的赋值和拷贝的区别，然后会继续探索对深浅拷贝的理解，最后我们还要能手动实现对象的深浅拷贝；那接下来我们也会围绕以上
2021-10-24 18:30:39
3159
3
原创 Javscript数组中最常用的方法（建议收藏）
数组最常见的方法操作方法增删改查排序方法转换方法迭代方法js中数组的方法不管是写原生还是用框架，我们都会经常运用到，以及也有一些面试官会问到甚至让我们手写一个数组的排序函数；所以我就通过查找一些好的文章做了一篇对数组方法的归纳包括：数组的基本操作方法、排序方法、转换方法以及es6中的迭代方法；操作方法数组的一些操作方法，也无非就是增、删、改、查：增push()push()方法接收任意数量的参数，并将它们添加到数组末尾，返回数组的最新长度，对原数组有影响；let people = []; //
2021-10-19 12:00:58
1298
原创 浅谈React项目中 Immutable Data
Immutable是什么?Immutable，不可改变的，在计算机中，即指一旦创建，就不能再被更改的数据；对 Immutable对象的任何修改或添加删除操作都会返回一个新的 Immutable对象；Immutable 实现的原理是 Persistent Data Structure（持久化数据结构）：用一种数据结构来保存数据当数据被修改时，会返回一个对象，但是新的对象会尽可能的利用之前的数据结构而不会对内存造成浪费也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变，同时为了避免 deep
2021-08-25 10:46:15
446
原创 React学习笔记十二——组件之间的通信方式
前言前面我们直接介绍了用redux来进行组件通信。如果是一些小型的项目，其实我们无需用到redux，那组件之间要如何来通信呢，父传子我们都知道用pros，兄弟组件和一些不相干的组件之间呢？接下来我们就详细的介绍一下组件通信的所有方式。父组件 => 子组件props父组件利用props把值或者函数传给子组件，子组件通过this.prorps.xx去获取；import React from "react";import PropTypes from 'prop-types';class C
2021-08-18 17:16:18
1237
原创 将图片转化成SVG格式（亲测可行）
1.准备好要转化的图片可以看到左侧图片是一个jpg格式的，接下来我们就要把它转化成svg;2.打开SVG在线编辑器，把图片导入我们可以打开SVG在线编辑器，把图片再百年机器中打开根据我们需要的大小进行设置，如下图：3.设置图片和背景图大小等选项选中图片后，右侧对应的是修改图片的一些选项，包括图片透明度，大小，和旋转角度等设置不选中图片，右侧对应的是背景图的设置选项，包括高宽大小和颜色；3.保存图片图片和背景图设置完成后保存图片保存成功后，图片就成为了SVG格式的啦！最后就可
2021-07-06 16:28:49
40807
11
原创 React学习笔记十一——扩展知识点（setState / lazyLoad / Hook / Fragment / Context）
setState()简单案例：案例代码如下：import React from "react";//UI组件export default class Person extends React.Component{ state = {count:0} increment = () => { const {count} = this.state this.setState({count:count+1}) console.log(this.state.coun
2021-07-05 14:28:04
1293
6
原创 React学习笔记十——用react-redux实现多组件数据共享案例
在笔记八和九介绍了react结合redux在组件内的使用方法，接下来我们就要真正的取利用redux实现多组件之间的数据共享；下面我们八笔记九Count组件和redux通信的案例代码拿过来，再新增个Person组件，实现两个组件的数据共享；多组件数据共享案例只引入组件和redux相关文件代码，App和index.js入口文件就不引入了；需要添加Person容器组件，person_action.js和person_reducer.js文件；Count容器组件import React from "r
2021-07-02 11:26:59
841
4
原创 React学习笔记九——React-redux的使用详解
react-redux模型图所有的UI组件都应该包裹一个容器组件，他们是父子关系容器组件是真正和redux打交道的，里面可以随意的使用redux的apiUI组件中不能使用任何redux的api容器组件会传给UI组件：1.redux中所保存的状态；2.用于操作状态的方法容器组件给UI组件传递状态和操作状态的方法均通过props传递react-redux核心知识点1.利用connect创建一个容器组件连接UI组件和reduximport {connect} from 'react-redu
2021-07-01 16:49:25
745
原创 React学习笔记八——Redux的使用详解
1.Redux是什么Redux专门用于做状态管理的JS库，不是React插件库它可以用在React、vue和angular等项目中，但是基本与React配合使用集中式管理React应用中多个组件共享的状态2.什么情况下需要使用Redux某个组件的状态，需要让其他组件可以随时拿到（共享）一个组件需要改变另一个组件的状态（通信）能不用就不用，如果不用比较吃力才考虑使用3.Redux的工作流程效果案例：组件内count（0）状态保存在Redux，通过组件中【+1按钮】，来改变count
2021-06-30 18:35:08
684
1
原创 React学习笔记七——React-router-web的使用详解
1.拆分组件拆分界面，抽取组件1.设计一个组件需要专一性，即一个组件只负责一个功能，跟封封逻辑功能的思路一致，遵循的原则是就是：一个组件只专注的做一件事，并且要把这件事做好；2.一个组件的功能如果可以拆封成多个功能点，应将每个功能点设计成一个个小组件，但并不是颗粒度越小越好，只要将一个组件内的功能和逻辑控制在一个可控的范围内即可；2.实现静态组件使用组件先实现静态页面效果3.实现动态组件3.1动态显示初始化数据数据类型数据名称保存在那个组件3.2交互（从绑定事件监听开始
2021-06-29 18:44:47
372
1
原创 React学习笔记六——用creact-react-app脚手架创建项目
全局安装create-react-appnpm install -g create-react-app切换到想要创建的目录下，输入命令create-react-app my-react-project进入项目，启动项目进入项目：cd my-react-project启动项目：npm/yarn start创建成功，如下图：React脚手架项目结构...
2021-06-24 18:00:11
485
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人