前端开发工程师的成长之路：从技术积累到项目实践

hwyzw

    作为一名前端开发工程师，除了css和html的积累之外，我们还需要有一些http的知识、浏览器渲染原理甚至后端的知识，这样对我们的职业发展更有帮助。

    项目背景

    由于我对前端领域很感兴趣，接触前端也比较早，所以平时会利用前端技术做一些有趣的事情，包括H5游戏、一些简单框架的封装、脚手架等我之前的文章中也有比较详细的介绍。最近希望总结一下node-技术、vue、react hooks的技术实践。我也希望自己能做出一些更实用的项目并开源出来，以便我们一起改进、优化、迭代。

    于是基于这个想法，我想到了CMS。我们是否可以制作一个这样的系统，通过一些配置生成我们自己的博客网站呢？虽然目前有很多更好的博客系统可用，比如hexo等，但是你也可以参考这些优秀的开源代码，你会收获很多。

    技术架构

    我是通过前后端分离的方式来开发的。具体技术栈为：

    我们将使用最新的react-hooks基础并教授react的一些基本用法。技术架构图：

    （本图采用绘图，请多分享技巧）

    实施效果及技术要点介绍

    1.节点服务器搭建

    这里我们使用的是Node社区中比较轻量级的服务端框架Koa，服务端中间key为：

    以上是我们的网络服务器使用的主要中间密钥。稍后我将一一介绍如何组织和构建每个部分，包括实现错误检查中间件。由于我在写服务器的过程中也查阅了很多资料，如果有什么不足或者需要优化的地方，欢迎大家交流。

    服务器大致分为以下几层：

   

    主要分为数据层、服务层和底层框架层。

    2.后台管理系统

    后台管理系统主要采用Vue相关生态。我将使用Vueex来组织和管理代码和项目状态。主要模块包括登录模块、权限控制、博客配置页面、文章撰写与修改页面、数据统计页面等。第三方UI使用antd，效果如下：

    登录模块：

    主页模块：

    预览页面：支持PC端和移动端预览

    那么关键就是如何维护配置的数据以及数据结构的设计。考虑到预览功能和编辑设计的状态都是同步和异步的，所以我们80%的业务都是在vuex中完成的。对于文章编辑，还可以使用其他更好的富文本编辑器来实现非常强大的功能。效果图如下：

   

    一般来说，Vue做的后端管理系统主要使用vuex、vue-、antd、axios。这些核心库主要用于类型检查。主要涉及接口类型的定义。第一个版本不会涵盖更多内容。泛型等知识，但是会涉及一点接口继承的知识。页面中组件的使用以及自定义组件的封装也会在后面详细介绍。如果您有更好的想法和经验，可以分享更多。

    3.CMS前端实现

    对于前端的实现，我主要使用react相关的生态来实现。也可以使用 vue 来实现此目的。主要原因是我想回顾并进一步使用react hooks来实现一些有趣的东西。主要用到的技术有：react--dom、antd、axios、react-hooks。如果你想尝试使用redux，也可以使用它。后面我也会总结相关的文章和技术技巧。

    理论上，这涉及到服务端渲染，因为C端产品的一个重要点就是SEO，所以后面也会添加SSR相关的技术实现。目前，伪SSR技术主要采用骨架屏来实现。

    然后我们使用-react-app作为项目的脚手架，但是基于脚手架我们自己总结开发的。如果你有兴趣，可以一起探索其中的秘密。因为每个人配置页面的方式不同，这里我展示一个通过我们的管理系统配置的博客网站：

    终于

    由于最近闲暇时间都在进行项目代码优化调整、nginx服务器配置以及服务器性能优化等工作，希望有兴趣的朋友能够共同参与，共同打造一个更加完美的CMS。稍后我会更详细地介绍系统的具体实现过程和细节以及服务器相关的配置，包括项目的开源地址。 11月之前我会告诉你。欢迎您在公众号“趣探前端”上加入我们的讨论。

    有趣的前端讨论

    Vue、React、小程序、Node

    前端算法|性能|架构|安全