好几年之前【大前端】这个词语就开始在“dev er”中流行起来了,那么大前端到底包含了哪些技术呢?传统的FE、Native(Hybrid)、Node、图形技术、VR……,今天我们来着重说说其中简单的一块——Nodejs(请求转发)。
需求
明确用 Node
来干什么,很重要。
- 从后台读取对应的 API
- 处理读取的数据,并发给前端(自己)
很明显这样可以完全抛弃 JSP
语言,并由前端自己来完成。
开发
说完就撸起袖子干吧~~~,下文以「blog中的demo(已开源)」为例,引入 Express
框架。
目录机构
1 | . |
从目录机构开看是比较简单的,好了,我们来详细介绍一下比较主要的功能吧。
创建入口文件
进入工程目录,新建文件 app.js
,输入如下:
1 |
|
拆分路由
新建文件 /router.js
:
1 | var index = require('./../controllers/index') |
以后,再添加其他的任何路由,只要修改 router.js
就是了。
拆分模型
模型 model
专门处理数据,无论是数据库,还是请求远程 api
资源,都应该是它的事。自然,我们可以把请求独立出来,这么做:
新建文件夹和文件 /models/index.js
,剪切粘贴下面的代码:
1 | var myFetch = require('./../utils/fetch') |
拆分控制器
控制器负责从模型请求数据,并把数据发送到前端,是前端和后台的调度员。这里,app.get
方法里的匿名函数便是,我们分别把他们抽取出来,放在 /controllers/index.js
里,并把请求 Api
的代码用模型代替,代码如下:
1 | var Indexs = require('./../models/index') |
说明:按照惯例,控制器的名称,通常是对应模型的名称(名词)的复数。
经过这样的模块化整理,我们轻松实现了一个简单的MVC框架,它的易用性、扩展性得到很大提升。我们已经可以快速添加更多的功能了。
总结
本文涉及的代码还是非常简单的,更多的高大上功能还需要自己去折腾吧。
本文的所有代码均来自我的 BOLG ,欢迎 STAR STAR STAR。传送门>>