题外话
因为个人原因休整了几个月，想了想未来的路，做了些以前没时间做的事情，最终发现，自己还是觉着敲代码适合我。于是又重新着手刷起了题，巩固了以前薄弱的地方，敲起了代码，向着新一段的程序猿生涯进军！
项目简介
这个项目主要是用于给一个展览组织做门户网站使用的，包括了内容展示，登陆验证，授权展示，用户交流等过程。
在这个项目中，我主要负责的就是实现一个整体的展示框架，比如轮播图的展示啦，首页的排版和优化啦，最最重要的是，将整个网站的首页和纯展示类的页面做成一个可配置的系统。这对我来说也是一个挑战，所以我欣然接受了这个任务。
项目背景
甲方之前的网站，整体展示风格过时，维护上有诸多不便，而且功能上也满足不了他们的业务需求了，因此找到了前公司，希望能做一个风格现代化，易于维护，并且具有新功能的门户网站。
由于做可配置化的门户网站不管对于我还是leader来说都是第一次（leader还是个纯后端），因此我们从头到尾都是一边探索一边实践。
实践过程
1. 技术选型
由于公司的前端项目都是使用Vue作为基础框架进行的开发，因此这个项目也不例外，使用了Vue的全家桶来开发。
组件库方面在比较了好几种之后，最终选定了Element UI作为基础组件库。因为同体量的其他Web组件库，比如Ant Design Vue或者ViewUI这些，或是移植不完全，或是更新慢甚至停更，还有些则是风格上不符合业务需求。
2. 实现思路
定下了选型之后，就是整理实现思路。
由于需要实现纯展示页面的配置化，于是我们参考了一些CMS系统的实现思路，将每一个需要展示的模块看做一个节点，对于每个节点都保留必要的信息和它的父节点与子节点，从而形成一个树型结构，通过对树形结构数据的解析，搭配自定义封装的Vue组件来进行页面的渲染。
下面是节点表的大致结构（类图将就着用了，请勿吐槽他的四不像= =）
classDiagram
Node <|-- Node
Node <|-- SubNode
class Node{
+Number id
+String lang
+Number pid
+Number sort
+Array<Node> subs
+...
}
class SubNode{
+String type
+...
}
数据在查询的时候，以lang为查询条件，查询对应语言的节点，形成一颗树，然后按照节点的顺序依次解析内容，并结合自定义封装的Vue组件，展示不同的内容。
同时节点的顺序也是导航栏的顺序，动态渲染的导航栏，使得增删页面的时候非常方便。
针对叶子节点的不同类型，我们也设立了多种type的对应方案，每种不同的type都有不同的处理方式，如LINK节点会进行跳转；ARTICLE节点会将content内容直接以V-HTML的方式插入页面，从而达到不同的自定义效果。
这样子，当我们需要更换显示的内容或图片时，只需要更换相应的数据即可，极大地提升了维护的效率，减少了业务变动时需要进行的工作。
3. 难点
在实践的过程中，遇到的最头疼的问题就是自定义组件的封装。由于首页是由好几个不同功能的模块组成的，并不像内容页那样直接插入HTML代码就可以实现展示效果，于是在Element UI的组件库基础上进行了魔改，以适应业务的需求。
4. 优化
在初步实现了效果之后，首屏的加载速度很不理想，因为甲方的需求中，首屏有很多图片的加载，针对这个问题，我在后续开发中采取了几点措施来提升用户体验：
- 使用了懒加载来减少首屏的资源加载量，从而减少用户等待时间。
- 使用骨架屏，避免用户产生网络卡顿的感觉。
- 使用图片服务器，减少对用户网络资源的使用，减轻页面请求时的服务器压力。
- 优化自定义组件，提升渲染效率。
- 使用Local Storage缓存数据，减少资源的请求次数，减少白屏时间。
总结
一开始leader是说首页先可以不做配置化，将整体框架搭起来后，再处理首页，但我转念一想，反正都是要做的，干脆一起处理得了，咬咬牙，在花了一个周末和一周的奋战到11点之后，终于做出了初版。
后续的任务也证明我的决定没有错，由于后续开发有诸多事宜都和首页相关，如果我当初先做了一个硬编码的首页，在后续的改动中还要重新再写一遍新的实现，得不偿失。
在做这个项目时，和产品沟通了很多，针对一些不合理的设计提出了自己的意见，反馈给甲方之后也争取到了甲方的同意，我本来以为这些应该都是前端该做的，后来和leader、产品他们聊天时才知道，整个团队只有我积极反馈了自己的想法，细节部分有提出自己的思想，leader还说我除了编程方面，其他的地方也给他带来了一些惊喜，还有点怪不好意思的。
在我离职的时候，项目也算是基本上实现了甲方要求，但是从技术细节和当初的进阶设想来看其实还有很多不足的地方，比如实现整个网站的无代码化编辑内容，实现网站的多语言支持功能等等。
这个项目的总结就到这里啦，由于代码不方便贴出来，因此可能有些枯燥，但还是希望能给观看的你带来一些启发和闪光。感谢阅读！
本文正在参与「掘金 2021 春招闯关活动」, 点击查看活动详情
