- 博客(27)
- 收藏
- 关注
RSS订阅原创 基于elementUI实现图片上传拖拽排序组件
说明：这里有个关于v-model的问题。如果draggable使用v-model,在fileList的值是父视图传过来的，那么是无法更改父组件的值。elementUI 上传文件组件不支持多张图片同时上传实现排序。会产生的问题：1、时间戳有时候会相同。2、顺向排序勉强实现，但想替换中间一张图片就有困难。同时上传图片的时候，在图片名称加上时间戳，上传成功之后，在根据时间戳排序。效果和elementUI的样式是一致的。方案2：拖拽排序，自行拖拽排序，灵活性比较高，没有啥限制。部分核心代码，方法自行实现。
2023-11-23 17:23:26
257
原创 记录一次AES复杂解密过程
对AES加密、解密这里不做介绍，不清楚的可以网上查询相关介绍。这里只记录下AES解密过程，在有限的加密信息下，耗时两天，尝试出来的解密过程。解的怀疑人生。
2023-06-28 10:03:14
1322
原创 多项目打包框架
一个工程里面有多个单独的小项目，公共资源共用，每个项目配置单独的入口，使用webpack打包单个项目。需求方有很多小项目，都是单个页面，如果每个工程单独开设一个工程，资源有点浪费，也不利于开发人员代码统一管理维护。3、给每一个项目配置main.js路口文件，配置路由文件，以及App.vue文件。如果配置中有preload 的配置，那么需要修改相关的配置，不然会运行报错。2、在项目src目录下新建projects目录，用来放项目文件。4、配置打包文件vue.config.js。目的是单独打包每一个小项目。
2023-02-07 14:30:30
196
原创 前端大屏适配方案
4、文字的大小，图片的大小不能默认适配，必须设置宽高尺寸，文字尺寸，不然无法转换rem。切换大屏尺寸大小不会改变。2、最外层图层宽高可使用100vw，100vh。内部模块视情况而定（可采用百分比或者px），建议高度使用vh。② 显示尺寸98inch，分辨率3840 * 2160，显示比例16 : 9。3、自适应屏幕的前提需要保证最终大屏尺寸完整适配，在兼容其他设备屏幕适配。宽高可使用vw/vh,但是需要设置最小宽高度，以免小屏压缩排班错位。1、画布的大小可设置百分比，让画布随着父视图改变，也可设置px。
2023-01-31 13:33:53
2610
原创 Mac 升级到12.3以上出现的问题
那是因为m1 芯片nvm安装低版本的一定要加 arch -x86_64 zsh 每安装一次都要执行该命令。3、M1 nvm安装node (nvm install 11.15.0)以上就是升级12.3以上版本之后遇到的坑。后续还遇到的话，会补充进来。webstorm 也识别不了node路径。就是node版本和python版本冲突。Python 指向 python3。1、ws 打不开webstorm。升级node到12.22 以上。安装python2.7。安装完成之后需要执行。
2022-09-26 11:26:31
755
原创 node 搭建mock servers
mock数据在前端需求前期开发的中，发挥着重要的角色。市面上也有很多第三方的mock数据的库，功能很多，库也大，接入复杂。所以可以使用node搭建一个简便的生成mock的服务器。（还有一种是直接使用接口管理工具提供的mockservers,比如YAPI,APIFOX，这种方式是比较推荐的。说明mock服务只需要根据业务需求选择合适的mock数据方式。其目的就是为了提高开发的效率，能解决前后端同时开发的问题。3、使用mock数据，启动mock服务，配置打包文件路径’…/dist’)是启动打包文件的。...
2022-07-18 11:17:29
657
原创 Nvm 安装
Nvm 安装1、**ls -a **查看文件2、touch ~/.bash_profile 没有bash_profile文件新建文件3、如果有或者新建完成后，我们通过官方的说明在终端中运行下面命令中的一种进行安装：curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash 使用这个或wget -qO- https://raw.githubusercontent.com/nvm-s
2021-11-11 11:16:22
7480
1
原创 webpack自动路由插件
由于之前的搭建的单页面架构自动路由这块，配置meta信息，需要单独写配置文件，而且只配置支持二级路由，三级路由需要手写配置生成。动态路由也是需要配置id。对使用者不太友好。现在就想使用webpack 插件的形式，自动生成路由文件，meta信息在每个vue页面里面去配置，支持多级路由，来优化路由这块的代码。（网上也有一些自动路由插件，但不太合适接入到之前写的单页面架构中，于是就自己动手写了一个）整体思路1、写一个webpack插件，在代码运行时生成routes.js文件2、代码运行时传入需要生成文件的目
2021-10-15 17:56:26
808
1
原创 使用@sentry/webpack-plugin上传SourceMap
sentry监控错误需要定位到代码，项目打包的时候需要SourceMap打开。但会导致代码不安全。为了项目的安全性，对sentry单独上传SourceMap，正式打包的时候可以关闭。1、登入sentry官网2、项目接入sentrynpm install @sentry/vue @sentry/tracing @sentry/webpack-pluginmain.jsimport * as Sentry from '@sentry/vue'import { Integrations } fro
2021-10-15 17:52:51
2159
2
原创 vue项目改造SSR（服务端渲染)
1、SSR（服务端渲染）是什么?传统的vue项目浏览器渲染模式缺点：1、SEO问题2、首屏速度问题3、消耗性能的问题ssr服务器渲染模式优点：1、更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面2、首屏渲染速度快SSR 简单来说就是将页面在服务端渲染完成后在客户端直接展示。2、SSR原理简单示例index.template.html<!DOCTYPE html><html lang="en"><head> <
2021-07-07 16:00:35
2667
3
原创 vue项目 npm 同时执行多个命令
问题：vue项目启动需要同时启动mock 和 dev 服务？尝试解决方案1、npm run dev && npm run mock这样会阻塞npm run serve 运行，因为第一个服务没有抛出执行完成的命令(终止服务)，所以无法执行第二个2、如果是node服务可以使用pm2 &&pm2 start mack.js && pm2 start mack1.js3、使用node.jsnode node.js 执行使用原生的接口const ch
2021-06-26 14:05:20
1430
原创 storybook vue@3.0
Storybook是一个开源工具，用于独立开发React、Vue和Angular的UI组件。它能有组织和高效地构建UI组件。这里介绍vue@3.01、初始化项目npx sb@next init 2、直接运行npm run storybook运行结果3、配置scss需要安装sass-loader和node-sass,这里是自己写的FFButton,icon用的是elementUI的 所以样式需要配置scssnpm install sass-loader@8.0.2 node-sass@
2021-04-15 15:07:44
858
原创 node 构建脚手架
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
2021-04-02 11:34:35
479
1
原创 没有用vue-cli创建的项目引入单元测试（jest+vue/test-utils）
用vue-cli创建的项目可以选择集成单元测试,这样就会自动构建好test文件那没有用vue-cli创建的项目该如何引入单元测试（jest+vue/test-utils）npm install 安装包注意安装版本“@vue/test-utils”: “^1.1.3”,“babel-helper-vue-jsx-merge-props”: “^2.0.3”,“babel-jest”: “^21.0.2”,“babel-plugin-dynamic-import-node”: “^1.2.0”,
2021-04-02 11:06:07
346
原创 axios api请求管理
很多人子啊请求接口的时候都在不断的写axios.get();axios.post();axios.put();axios.delete();每加一个接口都要写一次请求配置现在我来教大家自动管理请求的api就是我们可以根据url来生成对应的api调用的接口无需重复写相同的 代码server.js 配置axios 和拦截import axios from "axios";const service = axios.create({ baseURL: baseURL, hea
2021-03-19 16:57:19
94
原创 二叉树遍历-前中后序
二叉树遍历简单理解为：先向左在向右，当左边到了叶子节点之后，在返回向右。前序 第一次输出中序 第二次输出后序 第三次输出eg: [0,1,2]前序 0,1,2中序 1,0,2后序 1,2,0var node = { "value": 0, "left": { "value": 1, "left": null, "right": null }, "right": { "value": 2
2021-03-17 11:07:06
61
原创 计算数组元素加减和为目标值有多少种
计算数组元素加减和为目标值有多少种eg: 数组[1,1,1,1,1] 目标值：3一共有5种[1, 1, 1, 1, -1][1, 1, 1, -1, 1][1, 1, -1, 1, 1][1, -1, 1, 1, 1][-1, 1, 1, 1, 1]function backtrack(array,path,i,sum,target){ if(i == array.length ){ if(sum === target){ console.l
2021-03-17 10:57:25
394
原创 vue/react打包文件可直接浏览器打开
之前我们使用vue/react 打包 npm run build 之后生成的dist 文件，想要运行代码，需要部署在nginx上面才能运行。配置文件也比较麻烦。现在分享一个直接可以浏览器打开的方法通过cmd命令先在全局中安装browser-syncnpm install -g browser-synccd ‘dist文件目录’browser-sync start --server --files "*.css, *.html , *.js" --reload-delay 800 -no-gh
2021-03-13 11:15:08
1441
原创 基于elementUI自定义表格
这个表格写了很久了，最近才整理。自定义表格可以根据数据自动生成表头，多级表头，列约定的数据格式如下：/** 数据格式 * headList:[ { prop:"date", label:"日期", width:"150", url:'', path:'', yl:'', children:[] }, { prop:"", label:"地址", width:"",
2021-03-13 10:59:59
2141
原创 el-dialog 自定义指令el-drag-dialog
el-dialog 自定义指令el-drag-dialog 的使用可放大，还原，拖拽。直接上代码dialog.jsexport default { bind(el, binding, vnode, oldVnode) { if (!binding.value) { const dialogHeaderEl = el.querySelector('.el-dialog__header') const dragDom = el.querySelector('.el
2021-03-13 10:42:53
2654
原创 vue 过滤器的使用
创建filters.js 文件/** * 10000 => "10,000" * @param {number} num */export function toThousandFilter(num) { return (+num || 0).toString().replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','))}/** * Upper case first char * @param {Str
2021-03-13 10:24:52
92
原创 el-table自定义label 使用h函数 绑定事件和数据
Loading.vue<template> <div v-if="show" class="lds-spinner"> <div class="spinner"> <div class="double-bounce1"></div> <div class="double-bounce2"></div> </div> </div></templa
2021-03-12 11:34:26
2798
原创 echarts堆叠折线图组件
StackedLine.js<template> <div :id="container" style="height: 100%;width: 100%" /></template><script>import echarts from 'echarts';export default { name: 'StackedLine', props: { container: { type: String,
2021-03-09 18:27:54
572
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人