掘金官网项目讨论｜ 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第5天。

项目介绍

利用vite + vue3技术栈仿掘金官网首页实现无限滚动列表，Markdown解析、自动生成toc目录、toc自动滚动等功能。

具体实现

1 布局分析

分析首页布局以及文章展示页布局，分割组件开发，大致分为两部分。 一方面便于分工协作，另一方面可以抽取公共组件和功能减少代码冗余，避免重复开发。利用vueRoute进行页面布局管理，实现组件使用最大化。

2 细节效果分析

对官网的每一个细节功能进行分析，如导航栏部分会跟随文档上下滚动时进行展示或隐藏；文章列表部分，当鼠标悬停时选中的条目颜色发生改变且在右上角出现关闭按钮，悬停在作者名称处将展示作者详情，骨架屏展示等。需要设置动态类名，以及相应的CSS设置，包括display属性、visible属性、transform属性等。骨架屏通过arco-design实现。

3 无限滚动列表

首页列表的无限滚动，关键在于合适的时机请求数据并展示数据，数据请求时机可以通过滚动条距离页面底部的距离确定，距离的计算参考MDN关于Element.scrollHeight属性，在vue中进行一定封装方便使用。当列表滚动到底时，请求数据并将得到的新数据添加至总数据的尾部，vue在虚拟DOM中比较后将只渲染新数据部分的列表。

4 前后端交互设计

1. 后端语言和框架选择：Python + Flask，轻量化与模块化，可拓展性强

2. 前后端分离：Vue 跨域配置，Flask 使用 flask_cors 开放跨域限制

3. 前后端数据交互：使用 axios 进行数据交互，通过 POST 方法在 request body 中传递参数

4. 后端功能：注册，登录，文章列表，新建文章，删除文章等

其中，Vue的跨越配置如下

server: {
  open: false, // 自动打开
  base: "./ " , // 生产环境路径
  proxy: { // 本地开发环境通过代理实现跨域，生产环境使用 nginx 转发
 // 正则表达式写法
   '^/api' : {
      target: 'http://localhost:5000' , // 后端服务实际地址
      changeOrigin: true, //开启代理
      rewrite: (path) => path.replace(/^/ api/, '' )
    }
  }
}