- 博客(118)
- 资源 (3)
- 问答 (4)
- 收藏
- 关注
RSS订阅
原创 前端需要掌握的技术栈
vue 双向数据绑定实现原理 数据劫持，卡槽slot，生命周期vue routerhash 模式，history模式，meta参数，keep-alive，路由传值params和query的区别vuexstate， action， mutation，数据流vue axioses6 箭头函数，解构赋值 ，异步，设计模式，模块化组件：组件间传值，css预处理器：stylus，less，s...
2019-03-06 17:26:07
627
1
原创 Vite 4.0发布，下一代的前端工具链
继在五个月前发布 Vite 3 后，现在 Vite 4 正式发布。如今 npm 每周的下载量从 100 万上升到 250 万，并继续保持增长。在今年的 Jamstack Conf 调查中，社区中的使用率从 14% 跃升至 32%，同时保持了 9.7 分的高满意度。
2022-12-14 09:39:20
885
1
原创 echarts关系图vue完整代码
vue 使用echarts 实现关系图，效果如下：vue全部代码如下<template> <div class="uni-chart-container"> <div class="uni-bar-charts" :id="id"></div> </div></template><script>import echarts from "echarts";import resize from "
2022-05-07 15:24:28
1675
原创 dataease、AJ-report大屏可视化工具对比
一、从功能层面出发dataeasereport-ui总结支持数据源sql，excel等格式支持数据源sql、API接口、静态json等后者更灵活数据集功能，可预览数据集数据集功能，不可预览数据集可拖拽式大屏可拖拽式大屏分享大屏url分享大屏url支持pc端、大屏、移动端PC端、大屏前者适用平台更广一键发布一键发布组件支持line、bar、pie、文本等组件组件支持line、bar、pie、文本等组件组件库丰富程度相当
2021-11-12 16:39:59
15944
3
原创 前端面试题：2021年7月26
2021年7月26日：腾讯会议线上面试1.上来就问的 了解浏览器缓存么？说一说。答：浏览器缓存分为 强缓存和协商缓存，我就知道这点了，具体说不下去。看下面链接吧浏览器缓存机制2. 知道我这方面知识匮乏，就转移话题了，问了一些项目上的东西，那个项目感觉对你帮助最大？可以自己独立搭建项目么？webpack了解多少？，，，，然后提到了模块化和组件化。所以问题来了。什么是模块化和组件化？简单说说你对他们的理解？答：一个单页应用按照功能区域或者布局划分模块，不同的模块有由更颗粒化的组件构成。然后vue,cs
2021-07-27 13:56:58
203
原创 前端面试js篇-执行上下文、闭包、原型、异步机制
一、预编译在函数（JS）执行的前一刻，会创建一个叫做执行期上下文的(AO)对象这个创建执行期上下文的过程叫做预编译。执行上下文栈(下文简称执行栈)也叫调用栈，执行栈用于存储代码执行期间创建的所有上下文执行上下文创建分为创建阶段与执行阶段两个阶段：1）创建阶段； 2）执行阶段创建阶段：1.确定 this 的值，也被称为 This Binding全局执行上下文中，this 的值指向全局对象（window）函数执行上下文中，this 的值取决于函数的调用方式。具体有：默认绑定、隐式绑定、显式绑定（
2021-07-22 11:18:44
315
原创 前端面试总结：视频会议面试
2021.7.16 东软集团（视频会议面试）首先问了一些js和es6的一些基础1.如何去除字符串两边的空格：答：就是String.trim();2.如何去除数组中间的空值答：我的回答是通过filter，把不满足的筛选出去。ArrayObject.filter(item => item); 返回一个新数组。filter 条件为true则返回，如果数组中有0，再加一个判断。3.一个数组对象，每个对象中有一个number类型的字段，如何将数组中每一个对象中的这一个字段累乘并返回值，有什么好方法。
2021-07-16 10:44:06
712
2
原创 前端面试js篇-ES6的使用（一）
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
2021-07-14 14:23:02
215
1
原创 websocket + nodejs（nodejs-websocket ）实现即时通讯的基础
websocket + nodejs（nodejs-websocket ）实现即时通讯的基础首先客户端要建立连接并且能接受到服务端返回的信息：建立连接let ws = new WebSocket('服务端地址 + 端口号');ws.onopen = function() {console.log("连接服务器成功");}关闭服务器的回调 ws.onclose = function(e){ console.log("服务器关闭"); }连接出错的回调 ws.onerro
2021-06-23 15:14:55
510
6
原创 基于Vue的下拉select选择区间组件
业务场景 选择职级范围，ant-design-vue的适用的组件是两个select并用，前值后值充当区间范围，这样会比较麻烦，对用户不友好，与是开发一个 模拟下拉select，但是可选择区间，回显样式类似于 A -B看图：这样一个select就可以完成区间选择了。下面看代码：首先基于antdv的基础组件 dropdown、input、icon、menutemplate部分：这个ant基础组件的使用就不在这里解释了<template> <a-dropdown cla
2021-06-15 17:04:04
1125
7
原创 华为鸿蒙OS 2.0开发文档
鸿蒙开发者官网：https://developer.harmonyos.com/cn/home鸿蒙应用设计文档：https://developer.harmonyos.com/cn/design鸿蒙应用开发文档： https://developer.harmonyos.com/cn/documentation鸿蒙W3c开发文档：https://www.w3cschool.cn/harmonyos/欢迎大家一起来学习鸿蒙开发，一起支持鸿蒙，早一点建立起强大的开源社区...
2021-06-08 15:40:22
1832
原创 window.open打开新窗口设置显示位置及大小
window.open(“url”) 这样的window.open大家想必都熟悉。但是**window.open(URL,name,features,replace)**实际上是这样的，可接受四个参数，来控制窗口属性。下面就说一下 这四个参数都代表什么：参数描述URL一个可选的字符串，声明了要在新窗口中显示的文档的 URL。如果省略了这个参数，或者它的值是空字符串，那么新窗口就不会显示任何文档。name一个可选的字符串，该字符串是一个由逗号分隔的特征列表，其中包括数字、字
2021-06-08 15:26:20
7490
1
原创 ant-desing-vue table 可伸缩列在固定列、多级表头情况下的实现以及问题解决
这个东西本来以为手到擒来，因为在官网中已经给出了例子，但是果然还是不能太信任官方，官方给出来的只能是最基础的，然后我们正常的使用场景往往要复杂很多，比如固定列， 比如固定表头，比如自带checkbox列，比如多级表头的情况。要想满足这些情况往往需要自行开发。1.首先蒋官方的例子copy下来，居然拖不动。对照了一下官方，css居然都不一样，于是增加了第一个改动因为style内联样式自带了 translate属性，所以直接去掉right：0；只留left -5.height设置100%就可以。...
2021-05-26 10:28:22
4273
20
原创 vue通过mock（json-server）实现前端数据模拟
当前开发模式基本都是前后端分离，那么在写vue或者react（数据驱动）时前端页面的展现，以及一些交互逻辑往往是需要数据驱动的，但是后端要建表，写逻辑接口没有那么快交给前端。这时就需要mock一些假数据，好让前端可以无障碍的做下去。json-server就是一种前端mock工具在node环境下通过npm安装npm install json-server -g然后在跟目录下创建db.json的目录,然后写入信息{ "api": [ { "text": "数据统计",
2021-05-08 14:26:44
317
原创 npm publish 组件流程以及报错总结
想要在npm 上publish 自己的组件。1.注册账号可以在npm官网上注册，可以在命令行： npm adduser 之后输入 username password email（注意email 注册后需要打开邮箱确认，之后publish才不会报错）2.创建一个项目：配置packege.json“name”: 组件名称,“version”: “1.9.70”, 版本号“private”: false, 一定要 false“main”: “src/index/packages/index.js
2021-04-16 09:19:45
1493
3
原创 js 实现树形数据遍历之广度优先遍历
接上一篇深度优先遍历直接上方法： // 广度优先遍历， tree 数据源， ope是回调函数，处理遍历逻辑 bfs(tree, ope) { const walk = (tree, depth = 1) => { const queue = []; ope(tree, depth); if (tree.children) { queue.push({ nodes: tree.children,
2021-04-12 14:20:43
558
1
原创 js 树形数据遍历之深度优先遍历
首先什么是深度优先，看这里深度优先遍历的实现分两种一种是递归的，一种是非递归的。递归比较简单，这里我说一下非递归的实现。注：这种对树形数据的深度遍历在开发中比较常见，于是封装过程中业务逻辑部分尽量自定义。便阿里的流程写死。具体实现如下：数据结构：const DEEPDATA = [ { name: "all", children: [ { name: "图片", children: [ { n
2021-04-12 14:14:44
1567
原创 前端开发App的几种开发方式
今天来探讨下开发手机APP都有那些技术手段大致分为三种开发模式：原生、混合开发、跨平台开发原生方式：原生技术栈指的是，只能用于特定手机平台的开发技术。比如，安卓平台的 Java 技术栈，iOS 平台的 Object-C 技术栈或 Swift 技术栈。混合开发：混合开发，也就是把 Web 网页放到特定的容器中，然后再打包成各个平台的原生 App。所以，混合技术栈其实是 Web 技术栈 + 容器技术栈，典型代表是 PhoneGap、Cordova、Ionic 等框架跨平台 App：跨平台开发指的是
2021-04-09 14:49:05
8129
原创 table单元格溢出处理
& > .ant-table-body > .ant-table-fixed { // table-layout: fixed; .ant-table-tbody { // display: table-row-group; vertical-align: middle; border-color: inherit; & > tr { // display: table-row; vertical-align:
2021-03-10 17:09:31
134
原创 滚动条的样式
// &:hover::-webkit-scrollbar {// display: inline-block;// }// 美化// &::-webkit-scrollbar {// // display: none;// width: 6px; /*高宽分别对应横竖滚动条的尺寸*/// height: 6px;// }// &::-webkit-scrollbar-thumb {// border-radius: 6px;// ba
2021-03-10 17:08:06
105
原创 使用map获取数组某一属性的合集
es6 map 详解请参考 链接es6 map 优雅的实现获取数组对象中某一属性的合集 arrGetfields(arr, key) { if (arr.map) { return arr.map(item => item[key]); } else { return []; } }
2021-02-09 14:21:41
1303
原创 js 对象数组去重方式-之reduce
es6 reduce的的使用详见对于对象数组去重，如果用for循环等来写，很不美观。下面reduce实现起来很nice // 对象数组去重， arr 数组， key 关键字 arrRemoveRepeat(arr, key) { var obj = {}; // 利用reduce方法遍历数组,reduce第一个参数是遍历需要执行的函数，第二个参数是item的初始值 arr = arr.reduce(function(item, next) { obj[nex
2021-02-09 14:18:56
366
原创 手机号，邮箱，证件号，银行卡等格式校验
下面是封装好的类，全局引用方式import ValiadUntils from "./commonJs/until";let valid= new ValiadUntils ();const install = function(Vue) { if (install.installed) return; install.installed = true; Vue.prototype.$valid= valid;};使用方式this.$valid.validCommon("p
2021-02-08 16:08:35
1181
原创 [vue-router] Duplicate named routes definition: { name: “indexView“, path: “/indexView“ }
我的路由是这么配置的：结果报错，Duplicate named routes definition 重复的命名路由定义这样改过后：就好了
2021-02-05 09:43:53
898
1
原创 如何在vs-code 中进行debugger调试
链接首先安装 vs-code 插件接下来配置vs-code我使用的vue-cli3构建的项目因此设置并更新 vue.config.js 内的 devtool property：module.exports = { configureWebpack: { devtool: 'source-map' }}再之后点击在 Activity Bar 里的 Debugger 图标来到 Debug 视图，然后点击那个齿轮图标来配置一个 launch.json 的文件，选择 Chrome/
2021-01-29 13:58:32
4186
原创 vue进阶，组件化必备
vue 隐秘的角落1. this.$attrs2. this.$scopedSlots,3. this.$slots4. this.$nexttick()5. this.$forceUpdate()
2021-01-28 15:50:06
338
3
原创 antdv a-timeline自定义流程节点、审批节点，历史节点
ant 的时间节点组件支持自定义节点内容， 以及节点状态。下面封装了几个业务组件，供应不同业务场景。流程审批节点的设置，查看历史节点信息，代办已办审批流程的状态查看。如下图所示：...
2021-01-28 15:10:30
5516
4
原创 js-doc 常用书写格式
接上篇 js-doc集成vuecli 传送门已经在vue项目中安装了 js-doc 接下来就是按照规范书写注释代码来生成文档先来个图吧首先组件说明/** * 自定义下拉选择区间组件 * @module 组件名 * @author *** * @description 组件描述 * */props 说名 /** * Props 说明 * @prop {type} 参数名称 注释内容 */类似的 计算属性 组件引用等一致的方法说明/** * 解释 *
2020-12-31 16:27:16
422
原创 vuecli + js-doc 生成漂亮的说明文档
维护代码 重要的是有文档，js-doc 在线生成文档 是一个很好的选择依赖“vue-template-compiler”: “^2.6.11”,“minami”: “^1.2.3”,js-doc 6.9.0根目录下创建 .jsdoc.conf.json内容{ "tags": { "allowUnknownTags": true, // 指定所用词典 "dictionaries": [ "jsdoc" ] },
2020-12-29 15:55:17
1140
7
原创 基于 antv table 实现合计行组件
项目需求：工资表实现合计行开发前牢骚一下合计行和列这么基础的东西 ant-table 居然没有（element 是有的），查了文档，ant 还是留了一手，支持slot footer。这就需要自己手动去实现了。分析我们要知道那些列是合计列， 那些列不需要。1. 合计列需要手动计算 总和。 2.而不需要合计的列需要做列合并。3.再有合计列的实现实际上是利用slot 插入一个a-table （去除表头的）和 上边正统的a-table， 如果出现滚动条，这两个表格是需要一同联动的。这就是实现合计行的三个
2020-12-17 17:52:37
1465
原创 关于表单流程设计器 以及 问卷调查生成器的开发准备
实际上表单流程设计器已经开发结束， 包括一个表单设计器一个流程设计器。 表单设计器和多数的一直，网上有很多。流程设计器是 可添加分支节点的 ，看下图。开发之前没有想太多导致表单设计器和流程设计器存在耦合，很多地方是固定写死的。这样一来为开发 问卷调查生成器带来了困难。本想着直接拿来用的。项目组件化，低耦合很重要。接下来会继续更新表单流程设计器 以及 问卷调查生成器的具体实现。...
2020-12-02 15:21:39
411
原创 antdv a-datepicker 日期组件设置禁用时间区间， 区间外等总结
日期组件 经常会出现要求某段时间内不可选， 或者某个时间节点前、后不可选。每次都写很麻烦。于是就总结了一下可能出现的情况。首先 vue部分 <a-date-picker :key="key" v-model="dateValue" :value="moment(dateValue, attrBute.format)" @change="onChange" @openChange="openChange" :format=
2020-10-20 16:04:43
5602
4
原创 Ellipsis vue 实现文本自动识别是否溢出，高亮显示关键字
在开发中有很多地方要处理文本溢出，原生的写法有很多弊端，并且不美观。接下来就是我封装的溢出内容自动检测组件。这样的：html部分提示信息为了没关采用ant组件。并且为了支持搜索结果的展示增加了关键字高亮显示<template> <a-tooltip :overlayClassName="overlayClassName" trigger="hover"> <template slot="title"> {{ text }} &l
2020-10-12 17:04:11
1284
4
原创 动态引入 某文件夹下所有vue组件的方法
引入vueconst context = require.context('./', true, /\.vue$/);const install = (Vue) => { context.keys().forEach((key) => { const component = context(key).default; Vue.component(component.name, component); });};引入css 等const context = re
2020-10-10 13:36:13
2840
原创 nrm 快速切换npm 源地址
切换npm 源地址， 我们可以这样 npm set registry=https://registry.npm.taobao.org/切换到淘宝镜像这样切换需要记忆的东西比较复杂，而且不方便管理因此需要引入nrmnrm 是一个 npm 源镜像管理器，快速切换npm 源地址安装npm install -g nrm 必须全局安装 -g检查 nrm -V 查看版本，以及是否安装成功安装成功一些指令：1.nrm ls 查看所有源地址， *表示当前使用的镜像地址。2.nrm add 名称
2020-10-09 15:05:33
291
CommonFrame.vue
2020-04-03
express 框架介绍 安装 路由 动态路由 get传值 - avi.zip
2020-04-03
nodeAuth.zip
2020-04-03
vue 运行报错，好像是eslint问题，找了好久没解决
2021-10-18
面试中最讨厌的问题是什么.？
2021-07-21
antd vue TreeSelect 默认展开第一个节点
2021-03-30
如何对jwt生成的token 实现验证（已经可以验证）、过期处理以及token刷新
2019-04-29
TA创建的收藏夹 TA关注的收藏夹
TA关注的人