之前项目超时判断是后台根据token判断的,这样判断需要请求接口才能得到返回结果,这样就出现页面没有接口请求时还可以点击,有接口请求时才会退出 现在需要做到的效果是:页面超过30分钟未操作时,无论点击页面任何地方都退出到登录页 代码app.vue <template> <!-- 添加点击事件 --> <div id="app" style="height: 100%" @click="isTimeOut"> &

前台代码: var start; var end; var state; var lasturl = document.referrer; start = new Date($.ajax({ async: false }).getResponseHeader("Date"));//start是用户进入页面时间,此当前时间为服务器时间主要是处理客户端本地机器时间错误问题 $(document).ready(function () {//用户页面加载完毕 $(window).unload(

需求 要求用户阅读完本页所有内容后,下一步按钮才可以点击. 实现思路 通过判断当前页面是否到达底部来设置按钮的点击事件. 要判断当前页面是否到达底部需要用到三个距离--距离顶部的距离scrollTop.可视区域的高度clientHeight.滚动条的高度scrollHeight. 代码(在vue项目中使用) mounted() { this.$nextTick(() => { // 进入nexTick const body: any = document.getElementById("a

最近项目有这么个需求:要在关闭当前系统的窗口的时候,退出登录, 因为如果不退出登录可能存在安全风险,其实我想说,电脑没事别借给别人活着离开工位记得一定要锁屏,其实我们设置了cookie失效时间的,过了一段时间会自动清空cookie. 经过我查资料,自身尝试网上的各种方法,发现都有问题. 总结这一路的尝试: 一.页面加载时只执行onload ,页面关闭时只执行onunload,页面刷新时先执行onbeforeunload,然后onunload,最后onload. 经过验证我得出的结论是: (1)对

前言:最近的项目中用到了spring security组件,说句显low的话:我刚开始都不知道用了security好不勒,提了bug,在改的过程中,遇到了一些问题,找同事交流,才知道是用的security组件.  这个bug,真的是一波三折:复现它就是个问题,然后我又把403改成了404,后来干脆登录不进去主站,最后,这个bug,被消灭在本宝宝的代码中,哈哈哈哈哈! 问题所在:token 过期 一.关于问题的想法 1,我在想是不是写的登录逻辑有问题,用代码控制住了当前登录页的相关缓存问题,一路跟

#构建思路 虽然当前前端项目多以单页面为主,但多页面也并非一无是处,在一些情况下也是有用武之地的,比如: 项目庞大,各个业务模块需要解耦 SEO更容易优化 没有复杂的状态管理问题 可以实现页面单独上线 #前言 这里就第4点做一些解释,也对多页面的应用场景做一个我认为有价值的思路,在组内的一个项目中,因为项目日益膨胀,拆分系统有一定困难,项目页面达到200+个以上, 因此构建速度十分缓慢,部署时间也很长,经常因为文案的更改及一些简单的bug修复就要进行重新构建,如果采用单页面一方面构建部署时间会随

写在前面 本期内容是适合第一次使用vue或者golang开发的,内容会以实战的形式来讲解.看懂本段内容需要了解基础内容有html,css,最好可以看一下vue的基础.并且这里的每个知识点不可能详细解说,只会告诉你大概做什么的,入门切记要不求甚解,不然学到自闭 远征的第一步,启动一个vue项目 我们这次主要是写一个以vue为前端框架的登陆和注册,因此我们的第一步也就是创建一个vue项目,并且这个内容在上一节已经讲过了,不过这里我们可以再操作一番. vue create your_projectna

vue-meta-info 官方地址: monkeyWangs/vue-meta-info (设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender-spa-plugin形成更优的配合) 单页面应用在前端正大放光彩.三大框架 Angular.Vue.React,可谓妇孺皆知.随着单页面应用的普及,人们在感受其带来的完美的用户体验,极强的开发效率的同时,也似乎不可避免的要去处理 SEO 的需求. 本文主要针对 vue 2.0 单页面 Meta SEO 优化展开介

github 地址: VV-UI/VV-UI 演示地址: vv-ui 文档地址:skeleton 关于骨架屏介绍 骨架屏的作用主要是在网络请求较慢时,提供基础占位,当数据加载完成,恢复数据展示.这样给用户一种很自然的过渡,不会造成页面长时间白屏或者闪烁等情况. 常见的骨架屏实现方案有ssr服务端渲染和prerender两种解决方案.这里主要通过代码为大家展示如何一步步做出这样一个骨架屏: prerender 渲染骨架屏 本组件库骨架屏的实现也是基于预渲染去实现的,有关于预渲染更详细的介绍请参考这

部署各vue项目,走了一遍坑.... vue单页面应用刷新404 找到nginx多网站配置文件:类似nginx/sites-available/www.baidu.com server { listen ; index index.html index.htm index.nginx-debian.html; server_name www.baidu.com; location / { root /mnt/www/www.baidu.com; try_files $uri $uri/ /ind

目的:vue-cli构建的vue单页面应用,某些特定的页面,实现前进刷新,后退不刷新,类似app般的用户体验.注: 此处的刷新特指当进入此页面时,触发ajax请求,向服务器获取数据.不刷新特指当进入此页面时,不触发ajax请求,而是使用之前缓存的数据,以便减少服务器请求,用户体验更流畅. 项目需求: 任何技术的探索,都来自项目的需求.之前经手的一个项目是微信端商城,使用的是传统的mvc模式,利用的是jq+js,因此对于商城的项目需求比较熟悉.目前在学习vue,练手一个商城,遇到之前经常提及而无法

1. 概述 1.1 说明 项目开发过程中会遇到需要多个主页展示情况,故在vue单页面的基础上进行配置多页面开发以满足此需求,此记录为统一配置出入口. 2. 实例 2.1 页面配置 使用vue脚手架搭建后将默认index.html,app.vue,main.js三个页面删除,然后在src目录下新增pages文件夹,增加所有的多页面文件. 2.1.1 首页一 src>pages>index>index.html,index.vue,index.js 2.1.2 首页二 src>page

vue判断是pc端还是移动端分别进入不同的页面 判断移动端代码如下: function IsPC(){ var userAgentInfo = navigator.userAgent; var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"); var flag =

目的:vue-cli构建的vue单页面应用,某些特定的页面,实现前进刷新,后退不刷新,类似app般的用户体验.注: 此处的刷新特指当进入此页面时,触发ajax请求,向服务器获取数据.不刷新特指当进入此页面时,不触发ajax请求,而是使用之前缓存的数据,以便减少服务器请求,用户体验更流畅. 项目需求: 任何技术的探索,都来自项目的需求.之前经手的一个项目是微信端商城,使用的是传统的mvc模式,利用的是jq+js,因此对于商城的项目需求比较熟悉.目前在学习vue,练手一个商城,遇到之前经常提及而无法

判断页面加载完成这个方法是很常见的,下面有三个常用的方法,各有利弊. 一.纯js方法 // (1).页面所有内容加载完成执行 window.onload = function(){ } // (2).ie9以上版本监听事件 if('addEventListener' in document){ document.addEventListener('DOMContentLoaded', function(){ }, false)//false代表在冒泡阶段触发,true在捕获阶段触发 } // (

一.概述 在Vue单页面开发过程中,遇到这样的情况,当我切换页面时,由于上一页面请求执行时间长,切换到该页面时,还未执行完,这时那个请求仍会继续执行直到请求结束,此时将会影响页面性能,并且可能对现在页面的数据显示造成一定影响 所以我们应该,切换页面前中断前面所有请求 二.解决方法 在main.js中,重新封装axios请求,在router.beforeEach强制中断请求 Vue.prototype.$http= axios; //Vue函数添加一个原型属性$axios 指向axios,这样vu

vue-meta-info 官方地址: https://github.com/monkeyWang... (设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender-spa-plugin形成更优的配合) 单页面应用在前端正大放光彩.三大框架 Angular.Vue.React,可谓妇孺皆知.随着单页面应用的普及,人们在感受其带来的完美的用户体验,极强的开发效率的同时,也似乎不可避免的要去处理 SEO 的需求. 本文主要针对 vue 2.0 单页面 Meta SE

Vue刷新页面VueX数据清空了,怎么重新获取? 点击打开视频讲解更详细 在vue中刷新页面后,vuex中的数据就没有了,这时我们要想使用就要重新获取数据了, 怎么在刷新后重新获取数据呢??? 这时我们就可以写个公共的方法,在公共页面(可以是根页面)判断store仓库中数据是否为空,若为空的话,就可以重新请求接口,拉取数据.当然你也可以在每次使用数据前判断是否为空,若为空就重新请求数据,这样的话就时写的代码有的繁琐了. 但这其实存在一个小bug,就是在根页面我们拉取数据的时间段中,当前页面中正好

在原生的Javascript里,当我们对某个页面元素进行某种操作前,最好先判断这个元素是否存在.原因是对一个不存在的元素进行操作是不允许的. 例如: document.getElementById("someID").innerText = "hi";  如果ID为"someID"的元素不存在,我们将得到Javascript运行错误:document.getElementById("someID") is null 正确的写法

Onunload,onbeforeunload都是在刷新或关闭时调用,可以在<script>脚本中通过window.onunload来指定或者在<body>里指定.区别在于onbeforeunload在onunload之前执行,它还可以阻止onunload的执行. Onbeforeunload也是在页面刷新或关闭时调用,Onbeforeunload是正要去服务器读取新的页面时调用,此时还没开始读取:而onunload则已经从服务器上读到了需要加载的新的页面,在即将替换掉当前页面时调

//判断页面滚动到顶部和底部 $(window).scroll(function(){ var doc_height = $(document).height(); var scroll_top = $(document).scrollTop(); var window_height = $(window).height(); if(scroll_top == 0){ alert("到顶啦"); }else if(scroll_top + window_height >= doc