这是我参与「第四届青训营 」笔记创作活动的的第7天
前言
青训营行将完毕，项目也渐近了尾声。期间的日子无非便是听课，记笔记和做项目，尽管单调，但也不乏缺失趣味。咱们的项目起步较早，尽管不是每天都在精进的那种，但也做到了一肝便是一整天的状况。
下面我就来复盘一下自己在写项目以来的新路进程。
仿项目github地址 (github.com/IamTrust/ju…)
进程
前期预备
在做项目之前，我只要把握的是 “三件套” ，会一些的小程序的编写，可是关于前端结构如Vue或Reate并不了解，所以也花了一些时间在B站上自学了一下Vue(首要是部队的大佬用到是Vue,当然也很感谢大佬的协助，也拓宽了许多关于git的运用，他主写后端，我是前端)。
一开始首要是关于网站的静态页面的编写，而大佬首要预备数据的获取。
页面的编写并没有太大的问题，首要头疼的是取类名😅，当然我是直接打开官网看控制台，也算是取巧了。能够说官网的结构十分复杂，一层套一层的，很简单看晕，可是编写到后期的时分仍是有一种感觉，这样编写的确会功用完结上便利许多。也理解了，能用 html 和 css 达到的作用就绝不动用 js 。
尽管前期预备了许多东西，但仍是缺少了很重要的一点，项目数据的确立。获取数据虽由大佬完结，可是他获取的数据终究要放到前端展现。因为缺少了前期约好，他获取的数据前端有一部分并没有用上，而我想要的展现的数据大佬并没有获取，后期再去追加就稍显繁琐。
这儿罗列一下咱们用到的那些技术栈：
- 前端：HTML + CSS + JavaScript + Vue
- 后端：Java + Spring + SpringMVC + Mybatis + SpringBoot + MybatisPlus
- 数据库：MySQL、Redis
- Web容器：Tomcat、Nginx
- 获取数据：Python
功用完结
虚拟列表
静态页面编写完毕，数据也已经绑定至页面对应位置，接下来就要完结第一个页面优化————虚拟列表
虚拟列表的详细完结我在另一篇文章详细评论了 仿项目，虚拟列表完结📜 | 青训营笔记 – ()
这儿首要来聊聊编写代码的进程以及遇到的一些问题。说实在的，我刚开始听到“虚拟列表”的时分被他唬到了，觉得很难理解的东西，十分高大上，但其实他的首要中心思想，便是选出你想要展现的部分放到视窗内烘托，其重要的点就在于怎么选。我一开始在B站上也查找了许多视频观看，有写得特别高雅的，整个进程被封装成了一个类，也有简陋的，可是首要功用仍是完结了。
我在编写时一个绕了一个好久的问题，便是无限下拉和虚拟列表的兼容。页面下拉触底就会再次数据恳求加载数据，可是我写了一个容器，在里面有滑动条，而且超出者隐藏，这样容器内部的滑动就独立于外面的滑动，自然再次触底就不会发送数据恳求。这种解决方案是固定父容器的高度，看上去并不美观，与官网的作用相差甚远。终究采取了不定高度，根据数据的条数来决议高度。
完结作用：
文章款式烘托
扛过了虚拟列表，主页也算是完结了，接着便是点击能够跳转到文章详情页，来烘托文章的款式，究竟咱们知道文章的款式要根据文章的作者在发布时决议的款式风格。相应的数据也在获取到的markdown数据的头部。详细见 仿项目，文章款式烘托🎨 | 青训营笔记 – ()
能够说这样也取巧了，用了写文章的markdown编辑器。头一天拿到文章数据很兴奋，想着将markdown格局转成html格局就能够在页面上烘托了，于是去查找markdown转html的Vue依赖，试了一圈发现数据乱的仍是怎么乱。能够说我能想到用markdown编辑器或许仍是根据一时的灵光乍现（也不排除文章写多了的条件反射🤣）
目录高亮
目录高亮的完结，说实话很大程度上根据参考他人的代码，能够说真的特别好用，代码十分高雅。见：仿项目，文章目录生成📜 | 青训营笔记 – ()
可是在完结的进程中也发现了一些我现阶段无法修复的 bug，当文章页面滚动时，目录会呈现对应高亮。或许会呈现页面并未滚动到下一标题，下一标题提早呈现高亮。这是因为目录根据标题的scrollTop来判别当时高度，一档超出高度，即为判别下一标题。还有一种致命缺点，当文章数据中存在图片等资源时，数据恳求会导致目录生成先一步履行，造成标题scrollTop判定失误，没有算上图片的的高度。这个问题我在原文中也有所提及。
完结作用：
总结
总体来说，就所提的两个首要功用，咱们的项目完结度仍是挺高的。可是假如想在此基础上继续完结其他功用乃至整个网站，因为前期预备没用沟通好和一些情况没有考虑到，难度仍是有的，需要将前期一些代码进行修改。
一切遗憾，但项目还算圆满，也很感谢大佬的协助，咱们前后端配合作业，也算是完结了一项关于自己来说不小的应战。
