前端全栈架构，组件式开发，响应式开发，全栈工程师架构，用户界面架构，企业级架构项目实战

Posted 2022-02-19 dsjd

我本是一名文科专业半路出家的前端开发人员，从最初只会切图和写CSS、html到现在会写点JS，一路坑坑洼洼，也是经历了很多，从2010年开始就用WordPress开设了自己的博客，虽然内容零零散散的并不多，但是多多少少也留下了时光的缩影，一直希望自己有一个自留地。用Node.js做服务端替换WordPress是去年的一个想法，由于一直腾不出时间，所以拖到了现在。当然了WordPress作为全球用户量最广的开源博客程序，易用性等诸多好处无可厚非，光自己的博客在过去几年就用了很多套模板，也用它做过很多不同风格不同功能的网站， 也许Node.js不是个人博客的最好的开发语言选择，不管是情怀还是其他，我相信一定有前端开发人员跟我一样有想过这样的尝试。市面上开源的博客程序很多，UI模板也相当漂亮，但是自己开发一个属于自己的博客程序，没事的时候折腾折腾，可能会是一件比较美好的事情，最主要的目的是在其折腾的过程中，可以多尝试服务端的功能开发，这对从一个纯前端转向全栈开发工程师是非常好的实践。 git上面有很多开源的Node.js源码，教程也比较详细，有的功能全面，有的相对简约，当然每个人只要选择适合自己的就好,下面简单介绍下我的项目，从技术角度而言，深度有限，大神多提意见。

架构

项目沿用传统的MVC，比较古老的架构，model(对象模型),view（视图）,controller（控制器），model通俗的说就是数据库表字段的映射，view就是界面，UI，controller就是操作数据库，一般是接收到路由信息，然后对数据库进行操作，再把数据返回给view层。如果是熟悉后端的开发人员可能一眼就看的懂，不过对于没有做过后端开发的纯前端人员来说，可能需要一些时间去消化。想起我第一次做全栈开发，一个存储CCTV配置数据的项目，基于c#和sqlserver，也是标准的MVC架构，很简单的增删改查，是废了不少功夫。

数据库

数据库这块用的MongoDB，为什么用它，因为简单好用，再就是它是在非关系数据中功能最丰富，最像关系数据库的。操作数据库的工具用了mongoose，api易读，很容易上手。之前是wordpress用的mysql，导出数据到MongdoDB确实没什么特别的好的方法和工具，尝试用了一些工具和脚本，效率不高，最后还是手工完成的，好在本人比较懒，那么多年没几篇内容。

WEB框架和模板

后端用了Express的web框架，页面渲染部分是handlebars模板，个人感觉大括号的写法比较适合前端开发人员，但是handlebars模板是个弱逻辑语言，有一些不方便，需要helper，特别是分页和评论，逻辑特别复杂，不过如果你喜欢hb模板，可以去git上下helper的库。jade模板(现在改成pug了)会比较方便一些，对一些复杂逻辑的处理比较高效，主要是可以直接在模板中写js语法，但是缩进的写法不是每个前端开发都能习惯的。

前端

如今的前后端分离，MV*框架，工程化，模块化，这些概念大行其道，如果一个做前端的不知道这几个概念，恐怕工作都难找到。但是这个项目没有前后端分离，直接在后端渲染页面，也没有用MVVM框架，工程化和模块化就更不用说了，后台页面用了一个jQuery和BootStrap和一些插件，前台页面好像就一个jQuery，CSS基本手写，我相信前端开发人员看到会比较亲切。我的初衷是希望通过这个项目了解更多后端开发思路和模式，其次个人博客是个传播源，在后端渲染也是为了利于SEO。

原理

我这里简单从一个页面打开到完全加载，程序做了哪些事去论述一下整个项目工作原理，当你打开博客的一个页面，node.js在后端通过路由机制（express提供的路由模块）去匹配到这个页面的url，然后查找对应的controller（就是处理这个URL的函数），在这个controller函数中，对数据库进行一些过滤筛选（用mongoose对数据库进行操作）最终拿到页面需要的数据，然后再把数据传递给对应的模板（handlebars），最终渲染成HTML。

由于时间仓促，博客的功能可能比较简陋，但是基本的功能已经满足了，另外项目也有很多没用到的函数和接口，来不及整理，留待以后扩展吧。 博客demo这是我的博客git地址https://github.com/frogo/blog，欢迎大家star和fork，

Screenshot

 

 

 

 

 

 

 

作者：frogo
链接：https://www.jianshu.com/p/34eaa4e0cb51
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

WEB前端包含：HTML5，CSS3，VueJS，AngularJS，NodeJS，ReactJS，Bootstrap，Webpack，Ajax,JQuery，WepApp，Yii2.0，ES6，Laravel5.4，响应式开发，组件式开发，全栈开发，知乎项目，拉勾网项目，企业级写作平台，用户界面架构，微信公众号开发，全栈工程架构，大众点评项目，饿了么项目，微信全家桶项目，京东商城，电商平台，仿豆瓣电影App，网页特效，高级项目实战等高端视频教程。。