前端工程师转向全栈最好的实践-设计开发于自己的 nodejs 博客

[frogo]

我本是一名文科专业半路出家的前端开发人员，从最初只会切图和写 CSS、Html 到现在的全栈开发，一路坑坑洼洼，也是经历了很多，从 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，

[poorcai]

厉害了

[frogo]

@poorcai 谢谢捧场

[wszbdyyy]

和你一样，我也是一名前端。这是我基于 node 开发的社区网站，boxopened.com 。给你加油~

[frogo]

@wszbdyyy 不错不错，共勉！