前端如何处理后端一次性传来的10w条数据

因为之前在看到了这样的文章，博主介绍了很多种实现方式，作为一名菜鸟级选手，我选择了其中一种实践了一下，因为在平时的项目中其实只需要熟练掌握一种就可以了（( • ̀ω•́ )✧还有就是我是菜鸟~）

懒加载实现大数据量的列表展示

node 简单的写一下接口

const express = require('express');
const cors = require('cors')
const app = express();
app.use(cors())
app.get('/user', (req, res) => {
  let list = []
  let num = 0
  // 生成10万条数据的list
  for (let i = 0; i < 100000; i++) {
    num++
    list.push({
      src: 'https://p3-passport.byteacctimg.com/img/user-avatar/3b4dabc9f03e3a13a72d443412e03d6e~300x300.image',
      text: `我是${num}号嘉宾陌上烟雨寒`,
      icon: 'text',
      tid: num
    })
  }
  res.send(list)
})
app.listen(8081, () => {
  console.log('serve running at http://127.0.0.1:8081')
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

vue3 懒加载

<template>
  <div
    id="container"
    style="height: 500px; overflow: auto"
    @scroll="handleScroll"
    ref="container"
  >
    <div class="sunshine" v-for="item in showList" :key="item.tid">
      <img :src="item.src" style="height: 30px; width: 30px" />
      <span>{{ item.text }}</span>
    </div>
  </div>
</template>
<script >
import { ref, defineComponent, onMounted, computed } from "vue";
import axios from "axios";
axios.defaults.baseURL = "http://127.0.0.1:8081/";
export default defineComponent({
  name: "",
  setup() {
    const container = ref();
    // const blank = ref();
    const list = ref([]); // 列表
    const page = ref(1);
    const limit = 200; // 一次展示200条
    const maxPage = computed(() => Math.ceil(list.value.length / limit)); // 向下取整获取页数
    // 真实展示的列表
    const showList = computed(() => list.value.slice(0, page.value * limit));
    const handleScroll = () => {
      if (page.value > maxPage.value) return;
      const clientHeight = container.value.clientHeight; // 

      const scrollHeight = container.value.scrollHeight;

      const scrollTop = container.value.scrollTop;
      
	  // 触底监测
      if (scrollHeight <= scrollTop + clientHeight + 10) {
        page.value++;
      }
    };
    onMounted(() => {
      getDataList();
    });
    const getDataList = () => {
      axios.get("user").then((res) => {
        list.value = res.data;
      });
    };
    return {
      handleScroll,
      showList,
      container,
      list,
      page,
      limit,
      maxPage,
    };
  },
});
</script>


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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

小tip

clientHeight ，offsetHeight，scrollHeight，scrollTop介绍
O(∩_∩)O~ 精准打击基础知识不清晰

• clientHeight 元素可视区域高度：
  它返回该元素的像素高度，高度包含内边距（padding），不包含边框（border），外边距（margin）和滚动条，是一个整数，单位是像素 px。
  
• offsetHeight高度：
  它返回该元素的像素高度，高度包含内边距（padding）和边框（border），不包含外边距（margin），是一个整数，单位是像素 px。

• scrollHeight 高度
  它返回该元素的像素高度，高度包含内边距（padding），不包含外边距（margin）、边框（border），是一个整数，单位是像素 px。
  
• element.scrollTop
  返回当前视图中的实际元素的顶部边缘和顶部边缘之间的距离

参考链接：https://juejin.cn/post/7031923575044964389