Node.js 之前端请求转发

Haley的空间 · 掘金 · · 2018-04-19 09:58

正文

好几年之前【大前端】这个词语就开始在“dev er”中流行起来了，那么大前端到底包含了哪些技术呢？传统的FE、Native（Hybrid）、Node、图形技术、VR……，今天我们来着重说说其中简单的一块——Nodejs（请求转发）。

需求

明确用 Node 来干什么，很重要。

从后台读取对应的 API
处理读取的数据，并发给前端（自己）

很明显这样可以完全抛弃 JSP 语言，并由前端自己来完成。

开发

说完就撸起袖子干吧～～～，下文以「 blog中的demo （已开源）」为例，引入 Express 框架。

目录机构

.
├── app.js //入口文件
├── config //配置文件
├── controllers //控制器
├── logs //日志
├── models  //模型
├── node_modules //依赖
├── package.json
├── public //静态资源
├── routes //路由
├── services //服务
├── utils //工具方法
├── views //模版
│   └── index.html
└── yarn.lock

从目录机构开看是比较简单的，好了，我们来详细介绍一下比较主要的功能吧。

创建入口文件

进入工程目录，新建文件 app.js ，输入如下：

var express = require('express')
var http = require('http')
var path = require('path')
var ejs = require('ejs')
var router = require('./routes/index')
var app = express();
router(app); //拆分路由
app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.use(express.static(path.join(__dirname, 'public'))); //静态文件服务位置
app.engine('.html', ejs.__express);//使用.html做为后缀
app.set('view engine', 'html'); //使用ejs为模版引擎

http.createServer(app).listen(app.get('port'), function () {
  console.log('Express server listening on port http://localhost:' + app.get('port'));
});

拆分路由

新建文件 /router.js ：

var index = require('./../controllers/index')
module.exports = (app) => {
  app.get('/', index.index);
  app.get('/api/get', index.get);
}

以后，再添加其他的任何路由，只要修改 router.js 就是了。

拆分模型

模型 model 专门处理数据，无论是数据库，还是请求远程 api 资源，都应该是它的事。自然，我们可以把请求独立出来，这么做：

新建文件夹和文件 /models/index.js ,剪切粘贴下面的代码：

var myFetch = require('./../utils/fetch')
var config = require('./../config/config')
var errCode = require('./../config/errCode')
var Index = {
  //get
  get: function (req, callback) {
    //这里使用了知乎日报API
    myFetch('https://news-at.zhihu.com/api/4/news/before/' + req.t, {}, function (err, data) {
      if (!err) {
        callback(null, data)
      } else {
        callback(null, errCode.SERVER_ERR)
      }
    })
  }
}
module.exports = Index

拆分控制器

控制器负责从模型请求数据，并把数据发送到前端，是前端和后台的调度员。这里， app.get 方法里的匿名函数便是，我们分别把他们抽取出来，放在 /controllers/index.js 里，并把请求 Api 的代码用模型代替，代码如下：