V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
frogo
V2EX  ›  Node.js

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

  •  1
     
  •   frogo · 2018-06-29 16:44:32 +08:00 · 4047 次点击
    这是一个创建于 2360 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我本是一名文科专业半路出家的前端开发人员,从最初只会切图和写 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,

    4 条回复    2018-07-03 14:54:17 +08:00
    poorcai
        1
    poorcai  
       2018-06-30 00:05:54 +08:00 via iPhone   ❤️ 1
    厉害了
    frogo
        2
    frogo  
    OP
       2018-07-01 00:26:19 +08:00
    @poorcai 谢谢捧场
    wszbdyyy
        3
    wszbdyyy  
       2018-07-03 13:09:19 +08:00
    和你一样,我也是一名前端。这是我基于 node 开发的社区网站,boxopened.com 。给你加油~
    frogo
        4
    frogo  
    OP
       2018-07-03 14:54:17 +08:00
    @wszbdyyy 不错不错,共勉!
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1090 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 18:04 · PVG 02:04 · LAX 10:04 · JFK 13:04
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.