我本是一名文科专业半路出家的前端开发人员, 从最初只会切图和写 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 http://blog.frogo.cn/
这是我的博客 git 地址 https://github.com/frogo/blog https://github.com/frogo/blog , 欢迎大家 star 和 fork,
Screenshot
来源: http://www.qdfuns.com/article/50594/af89a152cdc1094f8272646faff8fc6e.html