舞动的灵魂
0%

发表于 更新于 分类于

JWT 介绍

JWT 即 JSON Web Token，是为了在网络应用环境间传递声明而执行的一种基于 JSON 的开放标准。

JWT 由三部分构成：

1 头部（Header）：用于描述关于该 JWT 的最基本的信息，例如其类型以及签名所用的算法等。

2 载荷（Payload）：payload 有五个字段

  1. iss：该 JWT 的签发者
  2. sub：该 JWT 所面向的用户
  3. aud：接收该 JWT 的一方
  4. exp：过期时间
  5. iat：签发时间

3 签名（Signature）：header 与 payload 通过 header 中声明的加密方式，使用密钥 secret 进行加密，生成签名（也就是 token 值）。

阅读全文 »

发表于 分类于

当我们刷新页面时，vue 实例会被重新加载， vuex 仓库里的数据也会被初始化，这会导致数据的丢失。

解决方法：

我们可以在页面将要刷新之前将 state 中的数据保存到 sessionStorage 中，待页面刷新之后再将数据取出，重新赋值给 state，然后清空 sessionStorage。

在根组件 App.vue 中添加如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
setup() {
    const store = useStore();

    const data = sessionStorage.getItem("store");
    if (data) {
        store.replaceState(
            Object.assign(
                store.state,
                JSON.parse(data)
            )
        );
        sessionStorage.removeItem("store");
    }

    window.addEventListener("beforeunload", () => {
        sessionStorage.setItem("store", JSON.stringify(store.state));
    });
}

其中，

1
Object.assign(target, sources)

方法可以将 sources 对象中的属性和值分配到 target 对象中。

发表于 分类于

数组的成员有时还是数组，Array.prototype.flat() 用于将嵌套的数组“拉平”，变成一维数组。该方法返回一个新数组，对原数据没有影响。

1
2
[1, 2, [3, 4]].flat()
// [1, 2, 3, 4]

上面代码中，原数组的成员里面有一个数组，flat() 方法将子数组的成员取出来，添加在原来的位置。

flat() 默认只会“拉平”一层，如果想要“拉平”多层的嵌套数组，可以将 flat() 方法的参数写成一个整数，表示想要拉平的层数，默认为1。

1
2
3
4
[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]
[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]

上面代码中，flat() 的参数为2，表示要拉平两层的嵌套数组。

阅读全文 »

发表于 分类于

点击选取文件夹

我们知道，选取文件可以通过以下方式：

1
<input type="file" multiple/>

其实，想要选取文件夹只需要加上 webkitdirectory 属性：

1
<input id="inputFile" type="file" multiple webkitdirectory/>

现在可以选中文件夹了，那么怎么获取文件夹里的文件呢？方法和获取文件一样，只不过变成了包含多个文件的列表。代码如下：

阅读全文 »

发表于 更新于 分类于

项目结构

在 store 文件夹下新建 user.js 和 cart.js 作为子模块：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const static = () => ({
    
})
    
const getters = {
    
}

const mutations = {
    
}

const actions = {
    
}

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
}
阅读全文 »

发表于 更新于 分类于

在项目中，我们可能会遇到定时任务，比如要每隔一段时间执行一次任务，并且还需要在不打断循环的基础上修改任务。这时，我们可以使用 APScheduler 框架。

APScheduler 的使用

APScheduler 是一个轻量级的 Python 定时任务调度框架。APScheduler 支持三种调度任务：固定时间间隔，固定时间点（日期），Linux 下的 Crontab 命令。同时，它还支持异步执行、后台执行调度任务。

安装
1
pip install APScheduler
阅读全文 »

发表于 分类于

js 实现复制的主要命令是 document.execCommand('copy')，只有在输入框中的内容被选择时执行此命令才有效。

但是一般情况下，我们想要复制的内容并不是输入框中的文字，这时我们把只要临时创建一个 input 元素，将想要复制的内容赋值给 input 的 value 属性，并让它 select，等执行完复制命令后再将其删除就可以了。

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<button @click="copy">点击复制</button>
<p ref="p">hello world</p>

<script>
copy() {
    const val = this.$refs.p.innerText;
    const input = document.createElement('input');
    input.value = val;
    document.body.appendChild(input);
    input.select();
    if(document.execCommand('copy')) {
        input.remove();
        this.$message({
            type: 'success',
            message: '复制成功'
        });
    }
}
</script>

发表于 更新于 分类于

图片预览

安装
1
npm install v-viewer
引入

main.js：

1
2
3
4
import Viewer from "v-viewer";
import 'viewerjs/dist/viewer.css';

Vue.use(Viewer)
使用

使用时只需在父标签中加上 v-viewer 属性，它会自动作用于子 img 标签。

1
2
3
<div v-viewer>
    <img src="" alt=""/>
</div>

点击图片时就会弹出预览的界面。

阅读全文 »

发表于 分类于

如果是跨域请求，而且在请求头中添加了东西（token），那么每次请求服务器时都会有一个 options 请求（预检请求），这会影响服务器响应的速度。

我们可以通过在响应头中添加 Access-Control-Max-Age 来解决，它的作用是把 OPTIONS 响应缓存起来，在指定的时间内，不会再次发起 OPTIONS 预请求，这样只有在第一次请求的时候会有 OPTIONS ，之后浏览器会从缓存里读取响应，也就不会再发送OPTIONS请求了。

1
2
3
4
@app.after_request
def addHeaders(response):
    response.headers['Access-Control-Max-Age'] = '2592000'
    return response

跨域用户身份认证方案

session

flask 的 session 机制是根据请求头中携带的 cookie 值创建对应的 session 对象。每有一个新的 cookie 值，就创建一个新的 session 对象，因此每个用户都对应一个 session 对象，不会混乱。

当在 flask 框架中编写前端代码时（同源），后台会携带带有 “Set-Cookie” 的响应头返回给浏览器，那么用户在请求时浏览器会自动携带带有 “Cookie” 的请求头给后台，”Set-Cookie” 和 “Cookie” 中保存的都是 session_id，后台会根据 session_id 找到对应的 session 对象。

阅读全文 »