斌の顶级理解

需求：

在一个工作计划模块中，在新增或修改计划单时，要实现一个文件上传的功能，已上传的文件要实现点击下载。

首先，实现文件上传的功能

1
2
3
4
5
6

<el-upload
action="/uploadApi"
:file-list="fileList"
:on-success="uploadSuccess">
	<el-button size="small" type="primary"">上传文件</el-button>
</el-upload>

然后，文件上传成功之后要关联到该计划单，我是这样做的

webpack 是一个现代 JavaScript 应用程序的静态模块打包器，当 webpack 处理应用程序时，会递归构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将这些模块打包成一个或多个 bundle。

1、webpack 的核心概念

• entry: 入口
• output: 输出
• loader: 模块转换器，用于把模块原内容按照需求转换成新内容
• 插件(plugins): 扩展插件，在webpack构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要做的事情

2、初始化项目

新建一个文件夹，如: webpack-first (当然，你可以使用任意一个你喜欢的项目名)。推荐大家参考本文一步一步进行配置，不要总是在网上找什么最佳配置，你掌握了webpack之后，根据自己的需求配置出来的，就是最佳配置。

• 在自定义组件上使用时，v-model的prop和event默认名称会更改：prop: value => modelValue event: input => update:modelValue
• v-bind的.sync修饰符和组件model选项被删除并替换为v-model
• v-model现在可以在同一个组件上进行多个绑定
• 可以自定义v-model修饰符

vue2.x语法

在input中使用

1
2
3
4
5

<input v-model='message'>

<!-- would be shorthand for: -->

<input :value='message' @input='message=$event.target.value'>

在组件中使用

location的匹配规则

1. = 表示精确匹配。只有请求的url路径与后面的字符串完全相等时，才会命中。
2. ^~ 表示如果该符号后面的字符是最佳匹配，采用该规则，不再进行后续的查找。
3. ~ 表示该规则是使用正则定义的，区分大小写。
4. ~* 表示该规则是使用正则定义的，不区分大小写。

注意的是，nginx的匹配优先顺序按照上面的顺序进行优先匹配，而且注意的是一旦某一个匹配命中直接退出，不再进行往下的匹配

剩下的普通匹配会按照最长匹配长度优先级来匹配，就是谁匹配的越多就用谁。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

server {
  server_name website.com;
  location /document {
    return 701;
  }
  location ~* ^/docume.*$ {
    return 702;
  }
  location ~* ^/document$ {
    return 703;
  }
}
curl -I  website.com:8080/document 702
# 匹配702 因为正则的优先级更高,而且正则是一旦匹配到就直接退出 所以不会再匹配703

server {
  server_name website.com;
  location ~* ^/docume.*$ {
    return 701;
  }

  location ^~ /doc {
    return 702;
  }
  location ~* ^/document$ {
    return 703;
  }
}
curl http://website.com/document
HTTP/1.1 702
# 匹配702 因为 ^~精确匹配的优先级比正则高 也是匹配到之后支持退出

server {
  server_name website.com;
  location /doc {
    return 702;
  }
  location /docu {
    return 701;
  }
}
# 701 前缀匹配匹配是按照最长匹配，跟顺序无关

场景

给某一用户绑定组织，由于组织数据量比较大，做成懒加载的树结构模式，出于与别的模块进行联动，需要把关联的选中的组织和半选的组织均存到库中，此时存在一个问题，当对该数据编辑时半选组织的回显无法实现。

解决方法

弹窗显示前先拿到选中和半选的数据，注意el-tree标签要给node-key属性，然后在树加载的方法中设置选中和半选的节点，示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

loadNode(node, resolve) {
  if(node.level === 0) {
    // 接口请求 data
    resolve(data)
    // 设置选中
    this.$refs.tree.setCheckedKeys(selectedKeyArr)
  } else {
    // 接口请求 data
    resolve(data)
    // 设置选中
    this.$refs.tree.setCheckedKeys(selectedKeyArr)
  }
  // 设置半选
  halfKeyArr.forEach(key => {
    const node = this.$refs.tree.getNode(key)
    node.indeterminate = true
  })
}

1. 含义

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。
所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。

2. 异步和回调

只要有一件异步事情发生时，就会存在两个阶段 unsettled未决阶段和settled已决阶段
事情总是从未决阶段走向已决阶段，并且未决阶段拥有控制通往已决阶段的能力，可以决定事情最终走向的结果。

将程序分为三种状态 pending resolved rejected。
pending 等待 处于unsettled阶段,表示事情还在等待最终的结果。
resolved 已处理 处于setteled阶段，表示事情已经出现结果，并且可以按照正常的逻辑进行下去的结果。
rejected 已拒绝 处于setteled阶段，表示事情已经出现结果，并且不可以按照正常的逻辑进行下去的结果。

1、vuex的优缺点

优点：

能够在vuex中,集中管理共享的数据,易于开发和后期维护；

Vuex 的状态存储是响应式的，当 Vue 组件从 store中读取状态的时候，若 store 中的状态发生变化，能够触发响应式的渲染页面更新 (localStorage就不会)，那么相应的组件也会相应地得到高效更新。

js 原生的数据对象写法, 比起 localStorage 不需要做转换, 使用方便

限定了一种可预测的方式改变数据, 避免大项目中, 数据不小心的污染

缺点

刷新浏览器，vuex中的state会重新变为初始状态；

解决方案-插件 vuex-persistedstate

72、大文件上传

1. 分片上传

将大文件分割成多个小块（chunks），分别上传到服务器，最后在服务器端合并。

实现步骤：

1. 前端分片：
   • 使用 File 对象的 slice 方法将文件分割成多个小块。
   • 每个分片通过 **FormData**上传到服务器。
   • 记录分片的顺序，方便服务器合并。
2. 后端合并：
   • 服务器接收到分片后，按顺序存储。
   • 所有分片上传完成后，服务器将分片合并成完整文件。

vue3.2 版本开始才能使用语法糖！

在 Vue3.0 中变量必须 return 出来， template 中才能使用；而在 Vue3.2 中只需要在 script 标签上加上 setup 属性，无需 return ， template 便可直接使用，非常的香啊！

1、如何使用setup语法糖

只需在 script 标签上写上 setup 代码如下（示例）：

1
2
3
4
5
6

<template>
</template>
<script setup>
</script>
<style scoped lang="less">
</style>

NutUI Bingo - 基于 Vue 3.0 的移动端抽奖组件，由京东前端团队打造

京东出品的抽奖组件，12个常用抽奖场景，基于新的Vue3/ts技术构建。

关于 NutUI Bingo

NutUI Bingo 是由京东 NutUI 前端团队出品的一款基于 NutUI + Vue 3 的抽奖组件库，用于快速开发营销活动和小游戏场景的抽奖玩法。

NutUI Bingo 抽奖组件技术特性