VUE
文章平均质量分 66
VUE技术整理
穆雄雄
5年讲师经验,5年的软件研发及技术总监经验,7年自媒体运营经验,进机器人交流群的可以加我:mxx2451999120,备注:机器人
展开
-
通过域名的方式访问服务器里的资源
在平时的项目过程中,我们可能经常会遇到这样的场景。上传资源,比如图片或者视频到服务器中,上传上去后,我们给数据库中存的是文件所在路径,然后在前端使用的时候直接通过路径的方式来获取上传的文件。那么,在vue项目中,我们上传的文件至服务器中后,我们如何通过域名的方式,来获取到上传的文件呢?今天我们就来看一下。原创 2023-06-20 18:13:08 · 1647 阅读 · 0 评论 -
vue中集成省市区街四级地址组件
省市区地址大家应该都不陌生吧,网上买个东西,得填地址。中午定个饭,得写地址;叫个货拉拉叫个跑腿,是不是也得写地址。但是选择地址的时候,不同场景下选择的范围不同,就像出门在外,根据所处的地域,回答别人“你是哪里的”的话也不一样。比如我是山西吕梁柳林县的,我到了县城,我的回答是:我是XXX镇的。我到了市里,我的回答是:我是XXX县的。我到了省城,我的回答则是:我是XXX市的。当我到省外的时候,我的回答肯定是:我是XXX省的。原创 2022-12-28 20:18:38 · 1998 阅读 · 3 评论 -
jeecg-boot前端实现表格插槽、定制化修改
关于jeecg-boot,之前介绍过好多好多次,至于说这是个什么样的技术,这里不在详细介绍,大家可以在gitee或者百度上搜搜,大致了解一下。因为是个开源的框架,所以一般小项目,我们都是直接将jeecg-boot源码拉下来,在此基础上,将现有业务嵌入进去,耗费时间不多,一整个项目就出来了,方便又快捷。微服务的我们也用过,单服务的我们也用过,关于怎么选,那就得看实际项目了,不过我还是建议,小企业,能不用微服务架构尽量不要用微服务架构,直接用单服务的也可以,因为微服务太吃服务器内存了…原创 2022-12-27 21:27:11 · 2497 阅读 · 0 评论 -
vue实现随机生成分享海报(内容动态)
自己整理的vue实现生成分享海报(含二维码),看着网上的没实现主要是介绍了如何使用vue实现,动态分享内容为海报,且附带二维码,扫描二维码能直接进去文章的页面。但是有个小缺点,就是海报的背景,只有一种;相信大家在看CSDN这种分享海报的时候,是可以随机切换精美背景的,今天,我们就来看看,随机海报背景如何实现。原创 2022-12-25 20:26:52 · 1344 阅读 · 0 评论 -
自己整理的vue实现生成分享海报(含二维码),看着网上的没实现
相信大家在许多的场景下,看到过这样的案例。当我们在某购物app上看好一件商品,想分享给别人时,app会给我们生成一张海报,我们将其保存在手机里面转发给其他人达到分享。当我们逛CSDN的时候,想要将某篇有营养的文章分享给别人时,也会生成一张好看的海报,用户只需一扫码,既能跳转到相应页面浏览。穆雄雄的博客中,我们看到某篇正合胃口的文章,想要分享给别人怎么办?也会生成一张精美小海报,然后随便转发。今天,我们就来看看,如何使用vue实现精致海报的分享。原创 2022-12-25 00:20:05 · 1888 阅读 · 1 评论 -
vue实现将自己网站(h5链接)分享到微信中形成小卡片(超详细)
我们在分享公众号信息到微信或者群中的时候,会出现一个小卡片,如下所示:但是呢,这种小卡片只能走微信的接口来实现,比如我们从公众号、小程序中分享的内容可以是这样的。如果我们将自己的博客分享到微信的话,只会出现个链接。那么,试问一下你,分享出来个这样的链接,你会去点吗?会不会以为这就是个钓鱼链接。今天,我们就来看看,如何将我们自己的站,搞一个和微信一样的分享卡片出来。原创 2022-12-21 20:25:21 · 14553 阅读 · 9 评论 -
Vuetify中的v-pagination如何实现分页
昨天在改一个系统的时候遇到了个技能点,观察解决了好久,终于解决了,趁热打铁,今天来记录一下。这个系统是个个人博客,目前我也在使用,但是有个地方用的很不舒服。就是首页,源码的作者本意是让不断的下拉,滚动加载出文章。如果有篇文章在第5页,那么我们得往下拉,直到滚动加载到了第5页,我们才会发现它。博客右边的内容,是自适应的,也就是意外着只要左边没有拉到底,右边一直也就到不了底(这个不知道大家能不能明白)所以体验感很不好,我就想着改改吧,按照固有的用户思维,加上个分页,体验感应该会好很多。原创 2022-12-19 21:27:58 · 721 阅读 · 0 评论 -
jeecg-boot中实现跳过登录验证访问其他vue页面
大家都知道,我们正常的项目,都做了访问限制,也就是,只有当用户登录本平台后,才能让用户访问别的页面,否则默认重定向到登录页面。但是,需求总有不尽人意的地方:比如我们需要做一个单独的页面,此页面所有用户都可以微信扫码进行跳转访问,然后去进行别的业务操作,所以我们不能给做登录限制,那么这种需求下,我们应该怎么实现呢?原创 2022-12-09 18:03:21 · 2804 阅读 · 0 评论 -
jeecg-boot中如何修改自定义主题颜色
今天第一次上老丈人家,哈哈哈,有点猝不及防,本来没准备去,结果正好在小区门口碰到,人家让我去,我就把后备箱里面的东西拿下来带着去的。聊了几个小时,也还行吧,人家对我的第一印象就是,这孩子,咋这么瘦…原创 2022-10-02 22:24:20 · 1423 阅读 · 0 评论 -
HTM文件中使用vue
代码啊,尤其是比较重要客户的项目,即使包出去了,代码也一定要回到自己手里,不然干着急。这个项目,已经经过两手了,做的都不满意,客户那边还比较着急,所以智能将代码收回来我们自己改。结果收回来一看,代码是写的,当时我一听是不是,心凉了一截,于是为了调用接口方便,不用使用的,我就把给加上了,然后特地来记录一下。下面就是给中加入环境的步骤:1.引入vue的js文件:2.给根节点添加,起个名字叫:3.在最后添加的内容:然后你就可以在里面写代码啦....原创 2022-06-21 19:23:15 · 585 阅读 · 0 评论 -
springboot实现用户统一认证、管理-前端实现
现在是:2022年6月2日15:43:51上篇文章讲述了springboot中实现用户统一认证的具体内容,主要从后端角度出发的,其实大部分功能还是前端与后端交互的比较多,上篇文章知识罗列了几个回调接口,我一般写这种API接口都是这样的思路。将调用的地址统一放在一个工具类(或者接口)中,然后具体的业务放在层来实现,这样也方便后面别的类中共用。代码如下:拿到地址栏中参数值,去上游系统中获取用户信息,接口已经在上篇文章中发出,这边只写调动的地方。代码如下:注意:的值,需要记录住,在退出的时候需要用,我这原创 2022-06-02 16:42:22 · 1565 阅读 · 0 评论 -
springboot实现用户统一认证、管理(单点登录)
大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂前言现在是:2022年5月25日13:44:16最近和模拟登录杠上了,这不,又来了个需求,还是以这个技术点入手的。需求大概是这样的:为了统一管理系统的用户,上游平台做了个统一认证平台,所有用户进入子系统只有一个入口,即:上游平台登录入口,新用户也是上游平台进行添加;子系统的用户登录和注册模块都屏蔽掉。设计技能点前端:Vue后端:springboot (bladex框架)数据库:mysql 5.7及以上实现思路上游平台通过回调接..原创 2022-05-25 22:01:16 · 2529 阅读 · 0 评论 -
解决vue登录信息不及时更新问题
大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂前言现在是:2022年5月20日09:59:34前面写过一篇文章,基于bladex框架实现的模拟登录,后来在测试的过程中发现了个问题,即A系统在跳转到本系统时,携带用户名和密码进行登录本系统是没有问题的;但是当A系统切换了别的用户,再跳转到本系统时,则本系统的用户信息还是上一个用户的信息,没有及时更新过来,本篇文章就是对这一问题的解决。思路出现这个问题的原因:没有清空登录信息没有重新登录所以基于这两点出发,原来想的是在登录之前,先调..原创 2022-05-20 10:36:36 · 629 阅读 · 0 评论 -
elementui解决el-dialog不清空内容的问题,el-dialog关闭时销毁子组件
大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂前言现在是2022年5月5日22:48:21!今天在使用element-ui中的el-dialog的时候遇到了个这样的问题:页面上点击添加的按钮,弹出el-dialog对话框,该对话框中有个添加表单的子组件,然后填写值进行保存,点击保存按钮之后,el-dialog框关闭。继续点击添加的按钮,el-dialog框继续弹出,但是上次填写的表单内容没有清空。图如下:大致就是图上的意思。实现思路一开始我和同事想的是表单没有清空,于是我们就开..原创 2022-05-05 23:16:47 · 6518 阅读 · 12 评论 -
element ui实现多层级复杂表单的操作(添加与回显)之回显功能实现
大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂前言现在是2022年5月3日17:02:30!文接上两篇。[element ui实现多层级复杂表单的操作(添加与回显)之表单操作交互操作](element ui实现多层级复杂表单的操作(添加与回显)之表单操作交互操作_穆雄雄的博客-CSDN博客)[element ui实现多层级复杂表单的操作(添加与回显)之添加功能实现]((30条消息) element ui实现多层级复杂表单的操作(添加与回显)之添加功能实现_穆雄雄的博客-CSDN博客)这是..原创 2022-05-03 17:57:01 · 2895 阅读 · 0 评论 -
element ui实现多层级复杂表单的操作(添加与回显)之添加功能实现
大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂前言现在是2022年5月3日13:35:15!文接上篇。[element ui实现多层级复杂表单的操作(添加与回显)之表单操作交互操作](element ui实现多层级复杂表单的操作(添加与回显)之表单操作交互操作_穆雄雄的博客-CSDN博客)上篇文章主要写了纯页面端的交互,包括一些判断,本篇文章我们来看看具体的功能实现。实现代码在做这块儿的时候,原来想的是,直接在元素个数的改变事件里把form的值赋上。直到最后,我发现元素个数后面还有个表单..原创 2022-05-03 17:55:30 · 1482 阅读 · 0 评论 -
element ui实现多层级复杂表单的操作(添加与回显)之表单操作交互操作
大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂前言现在是2022年5月3日11:47:15!劳动节假期已经过去了三天了,今天是被封家里的第7天,也是解封的第一天。说实话,在家里的工作效率一点都不如公司的高,这两天完善了下系统中一个复杂表单的操作,大致实现的是这样的功能:一个设备下是可以添加多个采集类型的每个采集类型下面可以添加多个元素个数根据元素个数不同,来添加其他信息由于内容有点多,所以我分了三篇来整理,分别是:element ui实现多层级复杂表单的操作(添加..原创 2022-05-03 17:52:57 · 2151 阅读 · 0 评论 -
多信息登录、检测用户信息是否完善且引导补全
大家好,我是雄雄,欢迎关注:穆雄雄的博客前言现在是2022年4月28日13:41:29!今天分享两块内容。1.需求:用户可以通过手机号、邮箱来注册我们的系统,用户完成之后,可以去完善自己的个人信息,比如修改手机号,邮箱以及用户名。下次上来,用户可以使用手机号、邮箱以及用户名三种中的任何一种方式登录系统。2.登录系统之后,检测用户信息是否完善,比如手机号、邮箱、用户名等,如果不完善,则引导用户去完善个人信息,完善了之后就可以用不同信息对其账号登录。实现方法使用手机号、邮箱、用户名以及账号登..原创 2022-05-01 09:00:00 · 872 阅读 · 0 评论 -
elementui实现表格单选功能
大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂前言需求是这样的:用户单击购买产品的按钮时,会出现一个产品的列表,但是呢只能买一种产品,暂时不可以多选。效果如下所示:原来做的是,单击前面的单选按钮,后面的数量表单放开禁用,可以选择和填写;现在需要改成,直接点击某一行,则改行自动选中,当然数量表单也放开可供用户直接输入和填写。实现方法框架原来用的是avue写的,这个框架,确实好用,可以提高开发效率,很少的代码实现很多的功能,但这也是个缺点,代码是少了,实现的功能也确实多,不过你要单个实现某..原创 2022-04-26 16:51:48 · 2576 阅读 · 1 评论 -
若依实现单点登录(解析请求链接中的参数做鉴权认证)
大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂前言现在是:2022年4月19日19:56:56昨天写了个bladex的单点登录,回想起来还是比较复杂的,今天又收到了个在若依里面实现单点登录。具体是这样的:别的系统中访问我们的系统,但是用户已经在那边系统登录过了,跳转到这边无需在来一次登录,直接上本系统中继续后续的操作。实现思路三方系统(也就是需要跳转我们系统的系统),直接请求我们系统的登录页面,挂着token参数。在我们系统登录界面,判断请求链接中有没有token,没有则正常走登录流..原创 2022-04-19 20:03:38 · 4551 阅读 · 7 评论 -
bladex实现单点登录
大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂前言现在是:2022年4月17日16:19:51在实际开发中,有时候我们有这样的需求,即,一个体系中的用户是共通的,比如统一体系下,A系统的张三,去B系统中不需要重新注册即可直接登录,今天简单的整理了下,希望对大家有帮助。效果如下同步用户至别的系统中1.配置代理找到vue.config.js文件,在devServer节点下面配置一个代理:"/programme": { //本地服务接口地址 targe..原创 2022-04-17 16:22:33 · 3066 阅读 · 2 评论 -
vue中父组件怎么调用子组件
前言前段时间,写了个地址的控件,封装成了一个子组件,在其他页面共用。原文地址:vue利用级联选择器实现全国省市区乡村五级菜单联动然后当时出现了个bug,也没有太注意,后来才发现的。就是重置不了地址栏里面的信息,于是今天又写了写。思路在子组件里面写了个清空地址栏的方法,如下:cleanModel(){ this.selectedOptions = []; },然后在父组件引用地址栏的地方写:ref="resetArea"完整代码如下: <!-- 地址组件 --&原创 2022-03-01 21:07:01 · 736 阅读 · 0 评论 -
vue+elementui中,el-select多选下拉列表中,如何同时获取:value和:label的值?
大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂。项目场景:正如题目所说,今天在项目过程中遇到了个需求,因为需要在前台展示运动员的名称,但是运动员的编号在别的地方还需要使用,所以想了想,还是将编号和名称一并添加到数据库中,到时候拿的时候也比较方便。就不用在根据编号查询一遍呢了(接口是外部的,重新查的话会影响效率)使用的技术:element-ui的el-select标签问题描述:下面是下拉列表展示的代码:<el-form-item label="人员名称" > ..原创 2021-10-24 10:20:11 · 2539 阅读 · 2 评论 -
avue中实现消息的实时展示
“大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂。”前言一个功能写了大半天,主要是数据表设计的有点复杂,且这个项目是10月份就写的放那的,里面有些东西都忘记了……先看数据库结构,然后理...原创 2021-12-06 06:00:00 · 1078 阅读 · 1 评论 -
利用bladex+avue实现一对多的关系
“大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂”今天,记录一篇技术文章吧,也是解决了好久才解决掉的(说来也惭愧)。涉及技术前端:vue,element ui后端框架:bladex其中...原创 2021-08-13 06:00:00 · 1087 阅读 · 0 评论 -
利用bladex+avue实现下拉数据源展示
“大家好,我是雄雄,欢迎关注微信公众号:????雄雄的小课堂????”昨天给大家整理了下如何使用bladex实现多表查询的方法,今天我们趁热打铁,顺便看看下拉列表的实现。????需求我们经...原创 2021-08-14 06:00:00 · 1290 阅读 · 3 评论 -
vue中如何在地图中标点…
“大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂。”前言昨天分享了下vue中v-for的一些特殊用法,料想标题给写成了vi-for…太粗心了。文章连接在这里:vue中如何使用v-for...原创 2021-11-09 06:00:00 · 2847 阅读 · 1 评论 -
Vue.js基础体验(一)
今天开始学习Vue.js啦,刚开始看起来,确实很难很难,但是经过一番“周折”,发现也就那样,没有想象的那么难。下面是今天记录的代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="js/v...原创 2020-04-13 22:41:56 · 330 阅读 · 0 评论 -
avue中怎样隐藏新增和编辑的按钮
“大家好,我是雄雄,欢迎关注微信公众号:????雄雄的小课堂????”????♂️今天给大家分享的技术是:avue中如何设置新增和编辑的按钮隐藏掉。????????涉及技术????前端...原创 2021-08-16 06:00:00 · 5323 阅读 · 4 评论 -
vue中如何使用vi-for限制遍历的条数?只查询前三条、查询4-6条怎么实现?
“大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂。”前言今天整理个简单的功能,vue中的v-for如何限制遍历输出的数据,比如我想在一个存放10条数据的集合中只输出3条怎么写?只想从第...原创 2021-11-08 06:00:00 · 11988 阅读 · 0 评论 -
vue中设置子组件的点击事件不影响父组件的点击事件
“大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂。”今天分享个技术块儿。在做项目的过程中,遇到了个问题,简单的描述一下:有一个card卡片,上面绑定了个点击事件,点击card卡片,就会...原创 2021-10-23 06:00:00 · 4260 阅读 · 1 评论 -
vue使用element ui实现下拉列表分页的功能!!!
“大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂。”前几天做了个功能,需求是使用利用element ui如何给下拉列表分页,经过网上查找,自己摸索,已经完成,今天来记录一下吧。实现的效...原创 2021-11-04 06:00:00 · 7679 阅读 · 8 评论 -
vue实现下拉列表远程搜索示例(根据关键词模糊搜索)
“大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂”前言昨天的链接没有放上去……大家访问新站的时候,可以在浏览器地址栏中输入:www.穆雄雄.com或者www.muxiongxiong....原创 2021-11-30 06:00:00 · 3137 阅读 · 3 评论 -
vue中如何实现全全全屏和退出全屏?
“大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂”最近总有人给我说ta有社恐,明明是有社牛好不好……前言在做大屏界面的时候,客户有个要求,一进去登录成功之后,要有全屏的功能,全屏指的是...原创 2021-12-02 06:00:00 · 2520 阅读 · 1 评论