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

Posted 2022-06-24 陌上烟雨寒

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

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

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')
)

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>

小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