无解的菜鸟晖-CSDN博客

原创前端 Vue 操作文件方法（导出下载、图片压缩、文件上传和转换）

本文对前端 Vue 项目开发过程中，经常遇到要对文件做一些相关操作，比如：文件导出下载、文件上传、图片压缩、文件转换等一些处理方法进行归纳整理，方便后续查阅和复用。1、后端的文件导出接口，返回数据是文件流 blob，转成 url 链接下载；2、后端接口返回数据是文件下载的 url 链接；3、文件 file 或文件流 blob 转成 base64；4、base64 转成文件 file 或文件流 blob；5、压缩图片文件的方法封装；6、通过第三方库image-conversion 压缩图片；7、前端上传图片

2024-06-06 10:02:08 2961 1

原创 CSS 伪类、伪元素的应用实例：电池充电、高能进度条

本文通过 CSS 伪类、伪元素，结合动画 animation 和 Vue 动态样式属性（通过 CSS 变量）的写法，来实现电池充电、高能进度条的效果。CSS 伪类是对当前元素下，处于某些特定状态时而添加特殊效果的样式（基于文档之外的抽象，所以叫伪类），不产生新元素，写法用单冒号（:）开头。CSS 伪元素是对当前元素下，某些特殊部位应用样式，通过创建虚拟元素实现，一般与 content 属性一起使用（基于元素的抽象，所以叫伪元素），写法用双冒号（::）开头。CSS 变量 var() 用于插入自定义属性。

2024-04-30 09:57:08 1639

原创 Docker 基础系列(2) —— 常用命令

一、常用命令：1、帮助命令dockerversion# 查看docker版本号dockerinfo# 显示docker系统信息，包括镜像和容器数docker--help# 查看docker有哪些命令2、镜像命令dockerimages# 查看当前docker中的镜像dockersearch某个镜像名字...

2021-10-24 19:05:02 369

原创 ElementUI 组件的 Table 自定义表头，控制列的显示或隐藏

1、从 Element 官方文档（链接：Element - The world's most popular Vue UI framework）的 Table 组件，可以看到 Element 支持采用插槽的形式自定义表头。所以表格中列的表头不仅仅只有个标题，可以另外自定义一个按钮来控制操作。2、表格中每一列是否显示或者隐藏，可以用一个变量来存放列的状态（colShow），那上一条说的自定义按钮触发事件就是来改变这列的状态。3、页面上列的显示或者隐藏，可以用 Vue 指令 v-if 来控制

2021-10-05 22:02:17 13762 2

原创 Vue 项目打包后可修改基础接口地址配置

一、目的最近在学习或工作中遇到，把 Vue 前端项目打包后，要求可以再次修改请求后端接口的基础地址。平常开发中在 Vue 项目中使用 axios 时把请求后端接口的基础地址写在了 baseURL 里。这样子打包后如果要改图里红框处的地址，要么去打包编译后的文件堆里一个个搜索（如果项目不小的话，这文件堆可不少...），找到后直接改，要么在源码里改完后重新再打包部署，这两种做法都显得有些麻烦，且维护性也不好。所以本文用一种较好的方案来解决以上问题，通过创建一个静态资源里的外部文件，引...

2021-10-04 14:40:14 19497 10

原创 Vue 移动端实现调用相机扫描二维码或条形码

实现二维码或条形码的扫描识别比较普遍的做法是去调用微信 JS-SDK 的扫一扫功能或者支付宝 H5 开放的API。但是这两者都会比较麻烦且有一定的局限性，微信的扫一扫只能在微信里用，而且还需要公众号认证等配置操作。支付宝在内置 App 内可以同时识别二维码和条形码，但外部调用的 API 无法一次性同时识别，只能分开识别。使用开源库：https://github.com/zxing-js/library，本人移动端前端开发的框架是 Vue，组件库用的是 Vant，本文方案只要开发时用的电脑具有摄像头就可以实现

2021-10-03 21:38:42 17552 132

原创 JavaScript 实现关闭浏览器、判断支付宝或微信内置浏览器

1、写入工具类文件handleBrowser.js// 判断是否为微信内置浏览器export function isWeixinBrowser() { const agent = navigator.userAgent.toLowerCase(); if (agent.match(/MicroMessenger/i) == "micromessenger") { return true; // 是 } else { return false; // 否 }}/.

2021-10-03 11:38:36 1179

原创前端 Vue 请求数据使用 3DES 加密/解密

一、目的最近工作中，前端联调后端接口请求的数据是 JSON 格式的明文，考虑到安全问题，与后端同事沟通协调后，规定前端采用 3DES 对请求数据加密，后端接收到请求后再用 3DES 进行解密。二、效果图三、具体实现1、3DES 参数有加密模式、填充方式、偏移量、密码、字符集、输出格式参数，这些值的选定都是前后端沟通好后统一的，这样加密解密得到的内容才能一致。2、前端项目通过 npm 安装npm install crypto-js --s...

2021-07-24 19:30:04 3986 8

原创 Vue 的 JSON 格式数据与树形(Tree)结构数据转换的插件

1、

2021-06-08 00:08:21 4215

原创 Vue + Element 前端调用后端接口获取微信支付二维码和支付宝支付二维码

Vue + Element 前端调用后端接口获取微信支付二维码和支付宝支付二维码。在表格点击“支付”按钮，跳出支付弹窗，有微信支付和支付宝支付的两种方式按钮选择，当点击某个方式会跳出相应的二维码，并设置定时器去查询支付状态是否支付成功。

2021-05-27 10:09:46 9549 7

原创 Vue + ElementUI 后台管理系统实现顶部一级菜单栏，左侧多级菜单栏（二级、三级等）

一、目的接之前的一篇博客文章，https://blog.csdn.net/weixin_41856395/article/details/110441057Vue + ElementUI 后台管理系统实现顶部一级菜单栏，左侧二级菜单栏。

2021-04-23 18:29:59 21325 33

原创 Vue + ElementUI 后台管理系统实现主题风格切换

一、目的此次写作内容是在我之前发布一篇文章的基础上进行新增的。上一篇文章：Vue + ElementUI 后台管理系统实现顶部一级菜单栏，左侧二级菜单栏_无解的菜鸟晖的博客-CSDN博客这次要实现在页面上新增一个切换主题风格的按钮，点击后实现页面主题风格的切换功能。二、效果图三、具体实现步骤1、前期准备：使用 bus 进行组件通信在要相互通信的组件之间，引入一个新的 Vue 实例，然后分别通过调用这个实例的事件触发和监听，来实现通信和参数传递。在utils 文件夹下放入

2021-01-07 20:14:13 5653 18

原创在 Element-UI 组件的事件中传递自定义参数

以 Element-UI 分页组件的完整功能为例官方文档组件实例的代码如下：<template> <div class="block"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage1" :page-sizes="[100, 20

2020-12-23 10:25:46 7189 3

原创 Docker 基础系列(1) —— 简介，CentOS7 上安装和配置 Docker

Docker 是一个开源的应用容器引擎，它可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中，然后发布到任何流行的 Linux 机器或 Windows 机器上，也可以实现虚拟化，容器是完全使用沙箱机制，相互之间不会有任何接口（类似 iPhone 的 app），更重要的是容器性能开销极低。

2020-12-16 14:07:53 211 1

原创 Vue + ElementUI 后台管理系统实现顶部一级菜单栏，左侧二级菜单栏

一、目的后台管理系统页面的整体结构如图：实现顶部一级菜单和左侧二级菜单进行响应，选哪个一级菜单时，左侧菜单栏有相对应下的二级菜单，产生联动效果。然后选不同的二级菜单，主体内容区域展示对应内容。二、效果图三、具体操作实现1、用 vue-cli 创建的 Vue 项目后，自己再手动搭建项目的基本目录结构，如图：2、创建一个公共组件Whole.vue 来实现整体页面结构的布局，通过 div 来进行区域定位和大小设定。使用 el-menu 组件的 mode ...

2020-12-02 12:07:16 45918 52

原创 JavaScript 字符串和数组之间相互转化

1、字符串 --> 数组split() 方法：用于把一个字符串分割成字符串数组，省略分隔符时，是把整个字符串转化成数组的 1 个元素。把空字符串 ('') 当做分割符时，那么字符串中的每个字符之间都会被分割。<script> var str = 'hxh,ooo,p,g,666,**'; console.log(str.split()); // ["hxh,ooo,p,g,666,**"] console.log(str.split(..

2020-11-27 12:00:20 473

原创 JavaScript 将数字字符串(String)转换成数值类型的数字(Number)

JavaScript 中将字符串转换成数字有三个函数 Number()、parseInt()、parseFloat() 这三个函数，都可以将数字格式的字符串转换成数字1、Number()<script> var str1 = 'hxh'; // 字母字符串 var str2 = '11223344'; // 数字字符串 var str3 = 'hxh666'; // 字母 + 数字字符串 var str4 = '666hxh'.

2020-11-26 11:10:16 11189 1

转载 .NET、C#和ASP.NET三者之间的区别

一、什么是.NET?.NET是微软公司下的一个开发平台，.NET核心就是.NET Framwork(.Net框架)是.NET程序开发和运行的环境，在这个平台下可以用不同的语言进行开发，因为.NET是跨语言的一个平台。语言可以是C#,f#,j#,vb.net等等。JAVA和.NET不同的是java是跨平台的，不跨语言的。.NET跨平台仅限于安卓系统和IOS苹果系统。1..net框架的组成分为...

2020-11-12 18:07:27 998

原创 Vue 常用方法和函数的知识整理

整体总结：var vm = new Vue({ el: '#app', // 控制区域 data: { }, // 定义数据 methods: { }, // 定义事件方法 filters: { }, // 定义私有的过滤器 directives: { }, // 定义私有的指令 components: { }, // 定义实例内部私有的组件 watch:{ }, // 监听值的变化

2020-11-09 23:10:31 7209

原创 Vue + ElementUI 实现全国各个省份相对应城市的联动选择

此文章是本人在前端开发工作中遇到的问题，然后对解决问题的方案进行一次做笔记记录下来。需求

2020-11-09 15:22:55 10358 6

原创 vue-resource 的入门学习笔记

Vue 要实现异步加载时需要使用到 vue-resource 库一、安装和导入npm install vue-resource --save-dev出现 vue-resource 的版本号表示安装成功！接下来在 Vue 项目的 main.js 文件中导入：/*引入Vue框架*/import Vue from 'vue'/*引入资源请求插件*/import VueResource from 'vue-resource'/*使用VueResource插件*/Vue.use(V

2020-11-04 17:08:30 694 3

原创 ElementUI 的组件 Switch（开关）如何让文字显示在按钮上

1、引入相对应的组件定义组件所属类 tableScopeSwitch ，为后面样式指定做准备，设置开关的值和对应展示的文字（开为1，并展示启用；关为0，并展示禁用），v-model 与后端数据库数据进行绑定，指定改变触发事件 handleStatusChange 函数。2、设定 CSS 样式来实现文字显示在按钮上

2020-11-02 13:59:58 7512 1

转载 JavaScript数组遍历方法总结

1.for循环使用临时变量，将长度缓存起来，避免重复获取数组长度，当数组较大时优化效果才会比较明显。for(j = 0,len=arr.length; j < len; j++) { //。。。}2.foreach循环遍历数组中的每一项，没有返回值，对原数组没有影响，不支持IE.//1 没有返回值arr.forEach((item,index,array)...

2020-04-28 21:38:16 230

原创 Linux（CentOS 7.x）下安装ActiveMQ 5.x版本

一、ActiveMQ 5.x介绍 Apache ActiveMQ™是最流行的开源，多协议，基于Java的消息传递服务器。它支持行业标准协议，因此用户可以通过广泛的语言和平台从客户选择中受益。可以使用C，C ++，Python，.Net等进行连接。使用无处不在的AMQP协议集成您的多平台应用程序。在Websocket上使用STOMP在Web应用程序之间交换消息。使用MQTT管理您的IoT设...

2020-04-28 16:15:50 394

原创基本的入门SQL语句总结

首先，先看看SQL语句都有哪些核心动词。SQL动词 SQL功能动词数据查询 select 数据操作 insert，update，delete 数据定义 create，drop，alter 数据控制 grant，revoke SQL包括以下一系列操作：定义和修改、删除关系模式，定义和删除视图，插入数据，建立数据库。对数据库中的数据进...

2020-03-15 10:06:44 348

无解的菜鸟晖的博客