- 博客(29)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 NanoID库的使用
优点四：短身份证，它使用比 UUID （） 更大的字母表。因此，ID 大小从 36 个符号减少到 21 个符号。NanoID是一个微小的，安全的，URL友好的，唯一的字符串ID生成器，用于JavaScript，有以下几个优点。优点一：体积小，130 字节（缩小和压缩）。无依赖关系，大小限制控制大小。4、自定义（NanoID允许开发者改变字面意思或ID的大小）优点三：安全，它使用硬件随机生成器。优点五：便携式，NanoID被移植到20种编程语言中。优点二：快，它比 UUID 快 2 倍。
2022-09-27 12:14:14
2463
1
转载 时间线步骤条
转载<template> <ul class="timeline-wrapper"> <li class="timeline-item" v-for="t in timelineList" :key="t.id"> <div class="timeline-box"> <div class="out-circle"> <div class="i
2022-05-13 11:01:18
334
原创 vue项目中使用AES算法进行加密和解密
项目中用到AES算法做传输加密的优点。1、对内存的需求非常低，适合于受限环境。2、运算速度快。3、分组长度和密钥长度设计灵活。4、很好的抵抗差分密码分析及线性密码分析的能力。5、AES的密钥长度比DES大，它也可设定为32比特的任意倍数，最小值为128比特，最大值为256比特，所以用穷举法是不可能破解的。简单说一下1、安装crypto-js依赖npm install crypto-js --save-dev2、创建配置文件AES.js路径可以按照这个src/utils/AES.jsi
2022-05-10 19:28:09
8342
原创 VsCode插件，自动生成注释插件koroFileHeader使用
强烈推荐的一款VsCode注释插件koroFileHeader，具体使用参考内容。1、安装插件。在VsCode里选择Extensions搜索koroFileheader进行安装。2、根据需要修改默认注释配置，先选择File-Preferences-Settings，搜索fileheader在setting.json里根据需求自行配置注释的风格。具体可配置字段我简单配置下可满足基本注释例如（直接加载setting.json里即可） "fileheader.customMade": { //此为
2022-04-01 11:05:21
9872
1
原创 vue项目刷新当前页面的三种方法
1、最直接整个页面重新刷新。location. reload();this.$router.go(0);// 这两种都可以刷新当前页面的，缺点就是相当于按ctrl+F5 强制刷新那种，整个页面重新加载，会出现一个瞬间的空白页面，体验不好。2、新建一个空白页面，点击确定的时候先跳转到这个空白页，然后再立马跳转回来。这个方式，相比第一种不会出现一瞬间的空白页，只是地址栏有个快速的切换的过程，也可采用。3、provide / inject 刷新相对比较理想。//首先在app.vue进行修改<
2022-03-30 14:05:35
16209
1
原创 JavaScript中的replace替换
replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。// 需求：把下面字符串中大学替换为中学const str = "张三就读的大学是北京大学";// 替换第一个let str1 = str.replace("大学","中学");// 替换全部匹配内容let str2 = str.replace(/大学/g,"中学");// 全部内容替换let str3 = str.replace(RegExp("大学", "g"),"中学");...
2022-03-15 10:09:12
1495
原创 nvm安装与使用
前端开发工作中经常会同时负责多个项目，所以有时会遇到npm install安装依赖包或者启动本地服务时依赖报错的情况，大部分是因为NodeJS和npm与依赖之间版本的问题，如果频繁卸载并安装对应版本的NodeJS和npm管理工具，会使开发过程极其不方便。而nvm(NodeJS Version Management)可以说完美解决了我们频繁切换版本的困扰，nvm是nodejs版本管理工具，使用命令行方式安装切换不同版本的nodejs。nodejs提供了一个n模块，可用于管理nodejs版本，但它不适用于wi
2022-03-10 11:29:39
18421
转载 vue项目集成金格WebOffice2015
https://www.cnblogs.com/maggieq8324/p/11416851.html
2022-02-14 10:11:22
808
原创 vue项目实现常见的三种文件类型在线预览（pdf/word文件excel表格）
之前做PDF预览一直用的pdf.js，这次想需求们那么多想简化下，决定用vue-pdf这个组件，虽然说它没有原生那样强大，但已经满足常用的需求了，重要是这个组件使用简单。下面我们直接进入正题！一、安装vue-pdfnpm install --save vue-pdf二、在需要的页面注册<script> import PDF from 'vue-pdf'export default { components:{ PDF, }, data(){ re
2022-01-12 10:58:56
24645
5
原创 vue 可拖拽可缩放 vue-draggable-resizable 组件
1.在vue项目中安装npm install --save vue-draggable-resizable2.注册全局注册组件main.js中写入import Vue from 'vue'import VueDraggableResizable from 'vue-draggable-resizable' // 可选择导入默认样式import 'vue-draggable-resizable/dist/VueDraggableResizable.css'Vue.component('v
2022-01-10 11:21:41
1977
原创 vue + element-ui el-dialog拖拽功能
使用el-el-dialog的时候无法拖拽对用户来说还是很不方便的，所有本次针对el-dialogDrag自定义增加拖拽指令。代码直接走起。一、在 utils 中新建 directives.js 文件import Vue from 'vue'// v-dialogDrag: 弹窗拖拽Vue.directive('dialogDrag', { bind(el, binding, vnode, oldVnode) { const dialogHeaderEl = el.querySele
2022-01-10 10:45:08
900
1
原创 Vue 中使用右键菜单
1、安装npm install vue-context-menu --save2、使用<template> <div @contextmenu.prevent="onContextShow()" /> <Contextmenu ref="contextmenu" class="context-menu"> <li v-show="contextmenuList.add" @click="addGroup(0)">添加&l
2022-01-07 09:58:29
3781
原创 在element-ui的select下拉框加上滚动加载
在项目中，我们需要运用到很多来自后端返回的数据。有时是上百条，有时甚至上千条。如果加上后端的多表查询或者数据量过大，这就导致在前端的显示就会及其慢，特别是在网络不好的时候更是如此。所有针对element-ui的select下拉框加上滚动加载。这里通过自定义封装vue指令进行封装。以下以element-ui中的select为例：一、在src/utils文件夹下新建directives.js:import Vue from 'vue'export default {}.install = (Vue,
2021-12-29 10:48:08
1877
原创 elementui el-upload一次请求上传多个文件
el-upload组件文件上传都是每个文件请求一次接口，本次实现一次请求上传多个文件。 <el-upload ref="upload" :limit="10" accept=".jpg,.gif,.png,.jpeg,.txt,.pdf,.doc,.docx,.xls,.xlsx" name="files" :multiple="tr
2021-12-28 15:39:04
9598
11
转载 vue树形菜单无限渲染
treeFor(tree_chil) { //最外层渲染 for (let i = 0; i < tree_chil.length; i++) { let arr = {}; arr.label = tree_chil[i].branchName; arr.branchId = tree_chil[i].branchId; if (tree_chil[i].childrens.length > 0) ...
2021-12-24 11:05:03
399
原创 vuex在electron不同窗口共享的问题
问题描述：项目使用electron在窗口A中打开窗口B B中向vuex中写入数据,B中打印 vuex已经更改完成,但是A中还是没有变化。因为不同的窗口，属于不同的渲染进程，vuex 是被隔离的，相互之间是不能通过 vuex 进行通信的，2个渲染进程之间进行通信，需要通过 主进程进行分发才行。可以用vuex-electron来实现。1、安装Vuex Electronnpm install vuex-electronimport Vue from "vue"import Vuex from "vu
2021-12-18 14:47:57
2769
转载 websocket 断线重连
//1.创建websocket客户端 var wsServer = 'ws://ip/'; var limitConnect = 3; // 断线重连次数 var timeConnect =0; webSocketInit(wsServer); //socket初始化 function webSocketInit(service){ var ws = new WebSocket(service); ws.onopen = function () { c
2021-12-18 10:30:38
9119
转载 Element UI 中 dialog 可拖拽
1.utils文件夹下创建dialog.js文件import Vue from 'vue'// v-dialogDrag: 弹窗拖拽Vue.directive('dialogDrag', { bind(el, binding, vnode, oldVnode) { const dialogHeaderEl = el.querySelector('.el-dialog__header') const dragDom = el.querySelector('.el-dialog')
2021-11-15 13:16:25
630
原创 .eslintrc.js配置
module.exports = { root: true, env: { browser: true, es6: true, node: true, commonjs: true, amd: true, jest: true }, extends: [ 'plugin:vue/essential', 'airbnb-base' ],
2021-11-01 08:46:42
1648
原创 VUE实现页面缓存
主要利用keep-alive实现从列表页跳转到详情页，然后点击返回时，页面缓存不用重新请求资源。一、在router里配置路由import Vue from "vue";import Router from "vue-router";// 避免到当前位置的冗余导航const originalPush = Router.prototype.pushRouter.prototype.push = function push(location) { return originalPush.cal
2021-10-27 09:27:45
3928
原创 VUE跨域
1、在根目录下新建vue.config.js文件2、设置代理在这里插入代码片```module.exports = { // // 基本路径 // publicPath: "/", // // 输出文件目录 // outputDir: "dist", devServer: { proxy: { '/apis': { //代理api target: 'http://123.1123.1.123:8002', // 这就是需要代理到的接
2021-10-14 09:35:28
41
翻译 配置vue.config.js文件详解内容
// const path = require('path');module.exports = { /** 区分打包环境与开发环境 * process.env.NODE_ENV==='production' (打包环境) * process.env.NODE_ENV==='development' (开发环境) * baseUrl: process.env.NODE_ENV==='production'?"https://xxx":'', */ // 项目部署的基础路径
2021-10-13 15:37:13
310
原创 bcrypt加密和sha256加密
bcrypt加密和sha256加密 今天做登录要用到Bcrypt加密，于是了解下，Bcrypt是一个跨平台的文件加密工具。由它加密的文件可在所有支持的操作系统和处理器上进行转移。它的口令必须是8至56个字符，并将在内部被转化为448位的密钥。简单的说，Bcrypt就是一款加密工具，可以比较方便地实现数据的加密工作。我是用的bcryptjs这是一个第三方密码加密库，对bcrypt进行了优化。另一种是sha256加密，这两种使用步骤都很简单，具体如下。一.bcrypt加密1.安装npm instal
2021-10-12 14:15:26
1307
原创 VS Code中统计有效代码行数（除去注释行，空格）
之前用正则表达式在VSCode中直接查询代码行数。不过这种太麻烦了需要先设置好“要包含的文件”和“要排除的文件”而且还不能排除注释行和空格。所有给大家安利VS Code的一款很好用的插件。1.首先在VS Code中搜索VS Code counter安装。2.然后最好重新启动VS code，再用快捷键ctrl+shift+p工作区选择VscodeCounter:Count lines in directory后回车会出现当前项目的默认路径。3.最后在回车就会显示当前项目的代码总行数以及注释空格行数
2021-08-03 18:00:16
17848
2
原创 如何关闭ESLint校验功能?
如何关闭ESLint校验功能?写项目的时候总会遇到语法错误，一个空格错误，就会让项目进行不下去，因此关闭ESLint校验功能，如何关闭呢？方法一:创建项目时不要勾选Linter/Formatter选项方法二:图形化界面中关闭Linter功能方法三:直接修改配置文件vue.config.jsmodule.exports = { lintOnSave: false}此时项目可正常进行下去此时格式化代码默认带双引号，以及分号，也会（波浪线）报错，但是项目可正常进行下去，此时需要新增一
2021-07-19 09:34:50
3052
原创 VUE+ElementUI导出复杂（多级表头、合并单元格）excel表格
一个超简单实用的excel导出，之前看网上很多教程都是修改配置文件来操作的，这种方法是直接通过数据导出，所以会觉得麻烦，其实只需要把要导出的表格用el-table渲染出来，然后导出就可以了。当然这种只是针对于数据不多，如果数据太多都上万条了，这种还是让后端来搞。1.安装npm install file-saver -S npm install xlsx -Snpm install -D script-loader2.在src目录下建excle文件夹下创建两个文件（两个文件代码放在文章最后）。
2021-07-07 16:58:15
4104
8
原创 Echarts柱状图x轴增加滚动条
柱状图x轴增加滚动条在option里新增配置dataZoom即可。dataZoom: [{start: 0,//默认为0end: 100 - 1500 / 31,//默认为100type: ‘slider’,show: true,xAxisIndex: [0],handleSize: 0,//滑动条的 左右2个滑动条的大小height: 10,//组件高度left: ‘5%’, //左边的距离right: ‘4%’,//右边的距离bottom: 26,//底边的距离borderCo
2021-06-28 13:07:51
6508
1
转载 实现前端 Excel 导出(支持多 sheet)
实现前端 Excel 导出(支持多 sheet)【实现步骤】首先安装依赖npm install xlsx --save在组件中导入 xlsximport XLSX from 'xlsx';提供导出按钮，编写导出方法<Button type='primary' onClick={this.handleExport}>EXCEL 导出</Button>handleExport = () => { const sheetData1 = data1.ma
2021-06-07 08:54:07
1291
3
空空如也
前端导入多级表头excel该怎么指定导入的excel的区域？
2021-07-22
TA创建的收藏夹 TA关注的收藏夹
TA关注的人