ajax获取数据用弹窗显示_Vue之 点击返回弹出推荐商品弹窗

08de1a212d54776decab7ab05da16f5d.png阅读本文约需要5分钟

大家好,我是你们的导师,我每天都会在这里给大家分享一些干货内容(当然了,周末也要允许老师休息一下哈)。上次老师跟大家分享了VUE 之 v-on指令的知识,今天跟大家分享下Vue之 点击返回弹出推荐商品弹窗的知识。

1 需求场景非推荐商品详情页返回的时候弹出弹窗推荐商品,点击弹窗按钮可以直接访问推荐商品;只有直接进入商品详情页返回才会弹出推荐商品弹窗;每个用户访问只能弹一次(除非清除缓存)。2 需求分析1. 判断是否直接进入商品详情页可以在商品详情页直接判断 history.length ,如果是则 history.length=2 ;2. 每个用户只能弹一次可以保存一个标志值 hasBeenRecommended=true 到缓存中,有了这个标志值就不再弹出;3. 返回的监控,还是要监听页面的popstate,如果要阻止原来的返回操作的话,就要给页面栈添加一个空栈: 
history.pushState(null, null, document.URL);
3 实例代码1. vue框架内页面初始化时判断是否需要推荐弹窗:
......//修改历史记录状态,需要放在商品数据初始化之后if(history.length<=2 && !localStorage.getItem("hasBeenRecommended")) {    //获取推荐数据信息,页面返回标识修改及页面栈加入空栈操作在判断非当前页面之后再进行                                        this.getRecommendGoodInfo();}......
注:本例需要调用后端接口动态配置,可以在获取商品详情数据之后进行,也可以在页面初始化时查询商品详情时异步进行,这个影响不大,尽量不要在返回监听的逻辑中处理,如果推荐商品数据需要调用后端接口的话,还是放在页面初始化时处理比较好。2. 获取推荐商品详情信息:   
/**             * 获取推荐权益卡信息数据     */        getRecommendGoodInfo: function() {            var self = this            self.$ajax({                method: 'post',                url: self.$utils.DOMIN + 'goods/getAdvert',            }).then((response) => {                var data = response.data.d                if(data && data.goodsId != self.$route.query.goodsId) {                    //给页面添加空的页面栈,同时给推荐弹窗填充数据                    history.pushState(null, null, document.URL);                    //保存阻断返回的标志到缓存中            localStorage.setItem('stopBack',true);                    //填充弹窗元素数据源                    self.recommendGoodInfo = data                }            }).catch(function(error) {                console.log(error);            });        }
注:给页面添加空的页面栈的同时保存一个标志值到缓存中,那么在返回的时候如果有这个值就弹出弹窗,同时将这个值进行重置或清除。3. 返回监控,在vue框架外围处理:
 /**     * 返回监控,若缓存中返回标识为666,则弹出推荐权益卡弹窗,同时缓存中保存已经弹出推荐弹窗的标识     */    window.addEventListener("popstate", () => {        if(localStorage.getItem("stopBack")) {      //使用jquery或原生js的方式是弹窗显示            $(".showRecommendModal").fadeIn()        localStorage.removeItem('stopBack')            localStorage.setItem("hasBeenRecommended", true)        }    })
注:监听浏览器的返回本身就会破坏掉vue的路由,所以这个操作只能在vue框架外围来进行。如此,弹窗的数据是在vue框架中填充的,弹窗的显示是在原生js的返回监控中处理的。后记:整体来说,感觉上边的这种方案还是比较好的,当然如果喜欢原生js的话,也可以在vue框架中将推荐商品数据保存到缓存中,然后在返回监控的逻辑中以操作DOM的方式将弹窗追加到html结构中去,不过个人是不喜欢操作DOM的。
参考:https://www.cnblogs.com/xyyt/p/10517187.html
今天就分享这么多,VUE 之 点击返回弹出推荐商品弹窗,学会了多少欢迎在留言区评论,对于有价值的留言,我们都会一一回复的。如果觉得文章对你有一丢丢帮助,请点右下角【在看】,让更多人看到该文章。00196357297dfcf5696d22ee5665d0a3.png

5be77b8b77e1ee661d358ea2e6c9dedf.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/262045.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Navicat 编辑器自动完成代码功能讲解

2019独角兽企业重金招聘Python工程师标准>>> Navicat 提供广泛的编辑器高级功能&#xff0c;例如&#xff1a;编辑代码功能、智能自动完成代码、设置 SQL 格式及更多。本教程将介绍关于自动完成代码的操作。 Navicat下载地址&#xff1a;http://www.formysql.com/xi…

win2008的搜索功能就是个鸡肋

搜索文件名做得还好&#xff0c;搜索文本关键字连98都不如。 还有远程功能&#xff0c;一个终端登陆了&#xff0c;本地马上就注销了&#xff0c;还比不上WIN03转载于:https://www.cnblogs.com/LCX/archive/2010/04/19/1715698.html

DNN Experience

DNN Experience DNN编译导致异常。在做模块开发时&#xff0c;引用DNN原始Dll文件时&#xff0c;设置为不覆盖原有文件。不然容易导错误异常。 在开发DNN Schedule 或其他扩展功能时。因为此时不在站点的页面文件下&#xff0c;不能直接引用DNN命名空间下的很多全局变量。会造成…

oracle 导入excel时间格式,将.xls或者.excel格式的数据导入到Oracle中

本文档来自:[url]http://hi.baidu.com/wangbin_529/blog/item/6191d74b06b83c2b09f7efbd.html[/url]1、将xls格式另存为cvs(逗号隔开)。例如&#xff1a;左边为xls的表格;右边为转换成csv的文档,保存csv文档到E盘。[img]http://hiphotos.baidu.com/smile_%B1%B4/pic/item/a536c…

com 组件调用不起来_AwesomeGithub组件化探索之旅

阅读前请点击右上角“关注”&#xff0c;每天免费获取Android知识解析及面试解答。Android架构解析&#xff0c;只做职场干货&#xff0c;完全免费分享&#xff01;之前一直听说过组件化开发&#xff0c;而且面试也有这方面的提问&#xff0c;但都未曾有涉及具体的项目。所以就…

将团队迁移到可视化项目管理软件

自2000年代中期&#xff0c;“Scrum”项目管理&#xff08;PM&#xff09;一直统治着软件开发方法。它的迭代结构、频繁会议和清晰的层次结构使其成为受频繁变化的客户需求和条件管制的行业的明显选择。因此&#xff0c;大多数团队习惯基于 Scrum项目管理应用管理开发过程。 \\…

一步一步学Silverlight 2系列(3):界面布局_转载

概述 Silverlight 2 Beta 1版本发布了&#xff0c;无论从Runtime还是Tools都给我们带来了很多的惊喜&#xff0c;如支持框架语言Visual Basic, Visual C#, IronRuby, Ironpython&#xff0c;对JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。《一步一步学Silverlig…

网址

Html5 &#xff1a; http://fff.cmiscm.com/#!/main 20个案例让你了解用HTML5可以做出什么作品转载于:https://www.cnblogs.com/wangdyy/archive/2013/01/21/2869545.html

Spring学习11-Spring管理各种数据源

Spring 完全可以不依赖容器,自己管理数据源,但是却依赖第三方的开源的数据源管理框架. Spring在第三方依赖包中包含了两个数据源的实现类包&#xff0c;其一是Apache的DBCP&#xff0c;其二是 C3P0。可以在Spring配置文件中利用这两者中任何一个配置数据源。 1、DBCP数据源…

b树与b+树的区别_一文详解 B-树,B+树,B*树

B-树B-树是一种多路搜索树&#xff08;并不一定是二叉的&#xff09;1970年&#xff0c;R.Bayer和E.mccreight提出了一种适用于外查找的树&#xff0c;它是一种平衡的多叉树&#xff0c;称为B树&#xff08;或B-树、B_树&#xff09;。一棵m阶B树(balanced tree of order m)是一…

提交按钮禁用的办法

1.html: οnclick"this.value正在打印&#xff0c;请稍候;this.disabled true;" <input id"Button2" type"button" value"打印测试" οnclick"this.disabled true;" /> 效果如下&#xff1a; 2.如果是ASP.NET的服务…

share-Nothing原理

Share nothing理论在数据库设计和优化中的实践应用 首先介绍share nothing概念。最早接触它是在 DataBaseManagentSystem一书的并行数据库章节中。 并行数据库要求尽可能的去并行执行数据库操作&#xff0c;从而提高性能。在并行计算体系结构实现中有很多可选的体系结构。包括&…

linux查看逻辑卷命令,Linux命令--逻辑卷管理

往卷组中添加新的物理卷10.vgcfgbackup备份卷组中各物理卷的VGDA信息到/etc/vmconf目录的文件中11.vgcfgrestore从文件中恢复卷组中物理卷的VGDA12.vgchange改变卷组属性13.vgck检测卷组中VGDA的一致性14.vgdisplay显示卷组信息15.vgexport输出卷组使系统不能识别该卷组16.vgim…

python怎么创建文件夹_如何使用python在文件夹中创建文本文件?

我试图在一个不是运行脚本的目录的文件夹中创建一个.txt文件。我有一个脚本所在的文件夹&#xff0c;我可以在脚本所在的同一个目录中创建该文件夹&#xff0c;但它不会在该文件夹中创建文本文件。我通常遇到两个错误中的一个&#xff1a;PermissionError: [Errno 13] Permissi…

顺利搭建了oracle

哈哈转载于:https://www.cnblogs.com/zzzzw/p/5182224.html

php 计算n天后

法一:date("Y-m-d",mktime(0,0,0,date("m"),date("d")7,date("Y"))); 法二:date("Y-m-d H:i:s",strtotime("-7 day"));转载于:https://www.cnblogs.com/kwishly/archive/2013/01/23/2872834.html

返回对应对象的克隆方法

代码 usingSystem;usingSystem.Collections.Generic;usingSystem.Text;usingSystem.Collections;usingSystem.Reflection;namespaceCommon.CloneObjBase{ ///<summary>///BaseObject类是一个用来继承的抽象类。 ///每一个由此类继承而来的类将自动支持克隆方法…

linux磁盘使用情况脚本,技术|用 Linux Shell 脚本来监控磁盘使用情况并发送邮件...

市场上有很多用来监控 Linux 系统的监控工具&#xff0c;当系统到达阀值后它将发送一封邮件。它监控所有的东西例如 CPU 利用率、内存利用率、交换空间利用率、磁盘空间利用率等等。然而&#xff0c;它更适合小环境和大环境。想一想如果你只有少量系统&#xff0c;那么什么是最…

markdown 语法_Markdown 基本语法

Markdown 是一种轻量级的标记语言&#xff08;markup language&#xff09;&#xff0c;由 John Gruber&#xff08;1973 ~&#xff09;与 Aaron Swartz &#xff08;1986 ~ 2013&#xff09;于2004年创造&#xff0c;被网站用于编写说明文件&#xff08;readme&#xff09;、技…

原来fb可以在一个工程里面输出多个swf模块

转载于:https://www.cnblogs.com/wonderKK/archive/2013/01/23/2873555.html