分类：Vue

2021
07-22

Vue CLI中模式与环境变量的深入详解

前言在实际项目的开发中，我们一般会经历项目的开发阶段、测试阶段和最终上线阶段，每一个阶段对于项目代码的要求可能都不尽相同，那么我们如何能够游刃有余的在不同阶段下使我们的项目呈现不同的效果，使用不同的功能呢？这里就需要引入环境的概念。官方文档中模式和环境变量说明一般一个项目都会有以下3种环境：开发环境（开发阶段，本地开发版本，一般会使用一些调试工具或额外的辅助功能）；测试环境（测试阶段，上... 继续阅读 >
2021
07-22

ant desing vue table 实现可伸缩列的完整例子

ant desing vue table 实现可伸缩列的完整例子 完美解决ant-design-vuetable可伸缩列问题，实现在固定列，多级表头情况下的伸缩列这个东西本来以为手到擒来，因为在官网中已经给出了例子，但是果然还是不能太信任官方，官方给出来的只能是最基础的，然后我们正常的使用场景往往要复杂很多，比如固定列，比如固定表头，比如自带checkbox列，比如多级表头的情况。要想满足这些情况往往需要自行开发。1.首先蒋官方的例子copy下来，居然拖不动。对照了一下官方，css居然都不一样... 继续阅读 >
2021
07-21

springboot+VUE实现登录注册

springboot+VUE实现登录注册 本文实例为大家分享了springboot+VUE实现登录注册的具体代码，供大家参考，具体内容如下一、springBoot创建springBoot项目分为三个包，分别为controller，service，dao以及resource目录下的xml文件。UserController.javapackagespringbootmybatis.controller;importorg.springframework.web.bind.annotation.CrossOrigin;importorg.springframework.web.bind.annotation.PostMapping;importorg.springframework.web.bind.anno... 继续阅读 >
2021
07-21

vue+springboot实现登录验证码

vue+springboot实现登录验证码 本文实例为大家分享了vue+springboot实现登录验证码的具体代码，供大家参考，具体内容如下先看效果图在login页面添加验证码html在后端pom文件添加kaptcha依赖<dependency><groupId>com.github.penggle</groupId><artifactId>kaptcha</artifactId><version>2.3.2</version></dependency>创建KaptchaConfig工具类packagecom.brilliance.module.system.controller.util;importcom.google.code.kaptcha.impl.Default... 继续阅读 >
2021
07-21

vue+spring boot实现校验码功能

vue+spring boot实现校验码功能 本文实例为大家分享了vue+springboot实现校验码功能的具体代码，供大家参考，具体内容如下用vue写了一个校验码来玩玩，样子如下：1.img标签<img="height:40px;width:100px;cursor:pointer;"ref="imgIdentifyingCode":src="selectedLogoPicture.imgUrl"class="logoImg">2.js代码/***获取校验码*/getIdentifyingCode(){letselft=this;//letpic=this.$refs.imgIdentifyi... 继续阅读 >
2021
07-21

vue-cropper组件实现图片切割上传

本文实例为大家分享了vue-cropper组件实现图片切割上传的具体代码，供大家参考，具体内容如下这几日，等来了些空闲，用vue和springboot实践一次头像上传，因此记下了，望将来的开发有所帮助。vue-cropper在vue中的引入1、组件内引入import{VueCropper}from'vue-cropper'components:{VueCropper,},2、全局引入在main.js中配置如下代码importVueCropperfrom'vue-cropper'Vue.use(VueCropper)3、使用示例vue文件<templ... 继续阅读 >
2021
07-21

vue-cropper插件实现图片截取上传组件封装

vue-cropper插件实现图片截取上传组件封装 基于vue-cropper插件实现图片截取上传组件封装的具体代码，供大家参考，具体内容如下需求场景：后台开发需要上传图片并进行相应比例尺寸图片的截取,本组件开发采用AntDesignVue组件库搭配vue-cropper插件进行封装实现如下html<template><div><a-uploadname="avatar"list-type="picture-card"class="avatar-uploader":show-upload-list="false":custom-request="customRequest":before... 继续阅读 >
2021
07-17

Vue使用axios图片上传遇到的问题

目录FormData是个什么鬼？在vue和axios的配合下实战一波append()set()delete()get()和getAll()has()FormData是个什么鬼？经过多方搜索调查了解，这个神奇的东西是XMLHttpRequestLevel2新增的一个对象，于2008年2月提出，可以利用它来提交表单、模拟表单提交，当然最大的优势就是可以上传二进制文件，可以把所有表单元素的name与value组成一个queryString，提交到后台。划重点：可以把所有表单元素的name与value组成一个query... 继续阅读 >
2021
07-17

Vue使用axios图片上传遇到的问题

目录FormData是个什么鬼？在vue和axios的配合下实战一波append()set()delete()get()和getAll()has()FormData是个什么鬼？经过多方搜索调查了解，这个神奇的东西是XMLHttpRequestLevel2新增的一个对象，于2008年2月提出，可以利用它来提交表单、模拟表单提交，当然最大的优势就是可以上传二进制文件，可以把所有表单元素的name与value组成一个queryString，提交到后台。划重点：可以把所有表单元素的name与value组成一个query... 继续阅读 >
2021
07-17

Vue.js 使用AntV X6的示例步骤

目录0x0前言0x1安装0x2节点侧边栏0x3整合例子0x0前言因为项目用到流程图，并且需求也算是不详细，所以选择比较灵活的x6图形编辑器作为流程图编辑器，从文档来看不算复杂，这边就是作为参考教程。AntvX6文档0x1安装根据教程提示安装x6依赖即可，然后新建个容器进行实例化：<divref="containerRef"class="area-center-container"/>constdata={//节点nodes:[{id:'node1',//String，可选，节点的... 继续阅读 >
2021
07-17

Vue实现动态查询规则生成组件

Vue实现动态查询规则生成组件 1.动态查询规则动态查询规则，大致如下图所示。是可以按照用户的自定义进行组织查询语句的一种复杂组件，大致可以实现SQL查询的where条件，下面是摘自mongodb的某一软件。2.组件构建思路按照规则组件的组织形式，可以把其视为一棵树，有树干和树叶，这样看起来就不难了。2.1组件属性data：是树结构的内容，我们定义为：{condition:'AND',rules:[],}fieldList:字段列表数组,可供选择的字段集合；operatorList:操作列表数组,... 继续阅读 >
2021
07-16

详解vue身份认证管理和租户管理

目录概述按钮级权限身份认证管理R/U权限权限刷新租户管理租户切换效果最后概述功能模块的开发往往是最容易的，但是要处理好每个细节就不容易了。就拿这里的身份认证管理模块来说，看似很简单，因为后端接口都是ABP模板里现成的，前端部分无非就是写界面，调接口，绑数据；但是看一下ABPAngular版本的代码，就会发现他其实是有很多细节方面的处理的。回到vue，因为前端部分的代码文件太多，下面只列出一些需要注意的细节，其他的像... 继续阅读 >
2021
07-12

vue实现tab标签(标签超出自动滚动)

当创建的tab标签超出页面可视区域时自动滚动一个tab标签距离，并可手动点击滚动tab标签，实现效果请看GIF图效果预览GIF图<template><divclass="main-box"><button@click="add">添加</button><divclass="main-box-tab"><i@click="previous"><<</i><i@click="next">>></i><divclass="main-box-tab-content"ref="tabs"><divclass="main-box-tab-rol... 继续阅读 >
2021
07-12

如何在在Vue3中使用markdown 编辑器组件

目录安装引入组件基础用法保存后的markdown或者html文本如何渲染在页面上？安装#使用npmnpmi@kangc/v-md-editor@next-S#使用yarnyarnadd@kangc/v-md-editor@next引入组件import{creatApp}from'vue';importVMdEditorfrom'@kangc/v-md-editor';import'@kangc/v-md-editor/lib/style/base-editor.css';importgithubThemefrom'@kangc/v-md-editor/lib/theme/github.js';import'@kangc/v-md-editor/lib/theme/... 继续阅读 >
2021
07-12

vue Tab切换以及缓存页面处理的几种方式

目录1.如何切换2.动态生成tab3.缓存组件3.1keep-alive3.2使用3.3缓存组件的生命周期函数1.如何切换使用动态组件,相信大家都能看懂（部分代码省略）//通过点击就可以实现两个组件来回切换<button@click="changeView">切换view</button><component:is="currentView"></component> importpageAfrom"@/views/pageA";importpageBfrom"@/views/pageB"; computed:{  currentView(){   &nb... 继续阅读 >