0%

本文主要讲一下 axios 响应拦截器对错误的处理。

先来看一下响应拦截器的格式:

1
2
3
4
5
6
7
8
9
const request = axios.create();

request.interceptors.response.use(res => {
// 2xx 范围内的状态码都会触发该函数
// 对响应数据做点什么
}, error => {
// 超出 2xx 范围的状态码都会触发该函数
// 对响应错误做点什么
})
阅读全文 »

需求场景

我们知道,token 用于保持会话和用户身份认证,它具有时效性。之前的策略是,一旦 token 过期,就强制用户重新登录,如果此时用户正在操作表单,提交时突然被强制登录,那用户体验实在太差了。

正确的策略是,如果该用户是活跃用户的话,当 token 过期时,动态地刷新 token,延长时效。若该用户不是活跃用户,则强制重新登录。


阅读全文 »

vue-router 动态修改路由的 api 有两个:addRoute 和 removeRoute。

具体用法请见 (API 参考 | Vue Router)。

注意:

(1)通过 addRoute 和 removeRoute 添加或删除路由后,不会改变 getRoutes 的结果。

(2)由于是通过函数动态添加的,那么当 vue 实例重新加载时,这些路由就没有了。因此,刷新页面或者通过 url 访问的时候就会出现白屏。

阅读全文 »

GSAP(GreenSock Animation Platform)是一个从flash时代一直发展到今天的专业动画库。

GSAP提供4个库文件供用户使用:

  • TweenLite

  • TimelineLite

  • TimelineMax

  • TweenMax

TweenMax 是 GSAP 平台中功能最全的动画工具,可用来构建补间动画(tween)。补间是flash时代的专业词汇,意思是在起始状态和终点状态之间补全中间过程。

它是纯 js 动画。

阅读全文 »

Grow Shadow

1
2
3
4
5
6
7
8
9
10
11
12
13
<h3 class="hover-1">Hover Me</h3>

<style>
.hover-1 {
background-color: #1095c1;
color: #ffffff;
transition: .4s;
}
.hover-1:hover {
transform: scale(1.1);
box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .5);
}
</style>
阅读全文 »

本文将专注于使用 CSS text-shadow 属性来实现有趣的鼠标悬停效果,但是实际上并不会为这些文本制作任何文本阴影效果。

text-shadow 语法
1
text-shadow: h-shadow v-shadow blur color;
参数 描述
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊的距离。
color 可选。阴影的颜色。

text-shadow 为文字添加阴影,而且可以添加多个阴影,用逗号分隔。若我们将 blur 属性设置为 0 或不设置,那么就可以得到清晰的文本,然后可以通过 h-shadow,v-shadow 调整位置,color 调整颜色。


阅读全文 »

background-clip
1
background-clip: text|border-box|padding-box|content-box;

background-clip: text 其核心就在于以区块内的文字作为裁剪区域向外裁剪,文字的背景即为区块的背景,文字之外的区域都将被裁剪掉。

简单而言,就是运用了 background-clip: text 的元素,其背景内容只保留文字所在区域部分。

但是目前 background-clip 只在 chrome 上得到很好的支持。

阅读全文 »

本文将专注于使用 CSS background 属性来实现炫酷的鼠标悬停效果。

background 语法
1
background:bg-color bg-image bg-position/bg-size bg-repeat bg-origin bg-clip bg-attachment

各值之间用空格分隔,不分先后顺序。

background-position 与 background-size 之间用”/“分隔。

一个元素可以有多个背景效果,通过”,“分隔。

background-position 与 background-size 的关系
  1. 当 background-size 为 100% 时,background-position 百分比无效;

  2. 当 background-size 小于容器大小时,背景图片随着 background-position 百分比的增大向右/下移动;

  3. 当 background-size 大于容器大小时,背景图片随着 background-position 百分比的增大向左/上移动;

  4. 当 background-position 为具体值时,无论 background-size 为多大,背景图都随着 background-position 的增大向右/下移动,反之向左/上移动。


阅读全文 »