使

使用 NodeJS 搭建后台程序

NodeJS 4 月前

环境要求

安装了 NodeJS 环境(可以使用npm包管理工具)

操作步骤

1、新建一个文件目录，然后进入该目录运行命令行工具，通过以下命令初始化一个 package.json 文件，如下：

npm init

输入上述命令后出现的选项中都会有一个默认值，我们每一步只需要回车即可，如果想自定义值的话，自己输入相应的值后回车就可以。初始化的 package.json 文件如下所示：

{
  "name": "disaster_backstage",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

2、然后通过以下命令安装 express，如下：

npm install express --save-dev

3、然后在文件目录下新建 index.js 文件，编写以下代码：

var express = require('express');
var app = express();
 
app.get('/', function(req, res) {
    res.send('hello world');
});
 
app.listen(3001);

4、然后在命令行中输入以下命令启动后台程序，在浏览器中通过 localhost:3001 来访问，如下：

node index.js

5、以上就是一个简单的 express 框架的后台，关于路由和模板这些知识点，我们后续介绍。以上的 demo 中有一个比较烦人的问题，每当我们修改完 index.js 中的文件时，我们都要重启后台程序，所以我们借助以下这个插件来解决。

6、通过以下命令全局安装 supervisor 插件，然后通过如下命令启动：

npm install -g supervisor
supervisor --harmony index.js

7、由此一来，当我们当前目录下的 js 后缀或者 node 后缀的文件内容发生变化后，它会监听到变化，并且重新启动后台程序。

以上部分我们初始化了一个简单的 NodeJS 后台，并给前端返回了一个 hello world 字符串，但是所有的代码都在一个 index.js 文件中，所以这并不是一个好的编码方式，接下来我们试着看看如何组织一下我们后台中的代码，让它们看起来可以做到井然有序。

8、在项目根目录下新建 routers 文件夹，然后在里面新建一个路由文件，并编写所要的后台接口代码，如下所示：

var express = require('express');
var router = express.Router();
 
router.get('/forward', function(req, res) {
    res.send('geocode forward');
});
 
module.exports = router;

以上代码是 geocode.js 文件中的代码，也就是我们新建的一个路由文件代码，然后我们在 index.js 文件中，引入这个路有文件，并编写一些配置代码，如下：

var express = require('express');
var app = express();
 
var geocode = require('./routers/geocode');  //引入新建的路由文件
 
app.use('/geocode', geocode);   //配置该文件
 
app.get('/', function(req, res) {
    res.send('hello world!');
});
 
app.listen(3001);

9、然后我们保存代码在浏览器中通过地址 localhost:3001/geocode/forward 来访问我们新建的路由文件中的接口。

我们保存代码后并没有重启后台程序，代码也能生效，是因为我们用了上文介绍的 supervisor 这个插件，它会自动监听代码文件的变化并重启后台程序。

10、为了代码的整洁，我们将 index.js 中的关于主路由，即 localhost:3001/ 的代码也单独存放在一个路由文件中。同样的，在 routers 文件夹中新建一个 home.js 文件，然后将 index.js 中的相关代码移动到 home.js 文件中，并在 index.js 中引入和配置 home.js 路由文件，最终两个文件中的代码如下：

// home.js
var express = require('express');
var router = express.Router();
 
router.get('/', function(req, res) {
    res.send('hello world!');
});
 
module.exports = router;
 
// index.js
var express = require('express');
var app = express();
 
var home = require('./routers/home');
var geocode = require('./routers/geocode');
 
app.use('/', home);
app.use('/geocode', geocode);
 
app.listen(3001);

11、然后保存代码浏览器访问主路由 localhost:3001，也能得到和上文一样的结果。

这部分介绍了如何为我们创建的 node 后台配置路由信息，通俗点说，就是为了更好地组织后台中的代码，我是这么理解的。

跨域这个问题只要是涉及前后端数据交互，就会经常遇到，所以我们开发中也一样，即便你是在本地启动后台服务，然后在你的项目中去调用，依然存在跨域问题，所以我们要为我们新建的 NodeJS 后台配置跨域访问，也就是说让它允许跨域访问。

12、在 index.js 文件中添加如下代码即可：

//设置跨域访问
app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With");
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By", ' 3.2.1')
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});

13、最终的 index.js 文件代码如下所示：

var express = require('express');
var app = express();
 
var home = require('./routers/home');
var geocode = require('./routers/geocode');
 
//设置跨域访问
app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With");
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By", ' 3.2.1')
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});
 
app.use('/', home);
app.use('/geocode', geocode);
 
app.listen(3001);

NodeJS 的后台配置跨域其实很简单，只需要添加文中的几行代码即可实现后台接口的跨域访问。

NodeJS 后台主要是用来实现后台数据库的增删改查，那么数据库的增删改查是需要依赖我们前端传过来的数据值，也就是说，我们要在数据库中插入一个值，插入的这个过程是 NodeJS 后台代码来做，具体要插入的值则是我们前端通过 ajax 或者 axios 传过去的值，所以就有一个问题：在 NodeJS 后台我们要接受前端传过来的值。

14、在后台接口中，我们一般是使用 req.body 来获取前端通过 ajax 或者 axios 传递过来的参数的，但是有时候我们通过 req.body 去获取的时候发现参数为空，所以我们就要找一种解决方法，在这里推荐使用 body-parser 插件来解决。

15、首先在后台项目根目录下运行命令行工具，然后安装这个插件，如下：

npm install body-parser --save-dev

16、然后在 index.js 文件中添加如下两行配置代码：

var express = require('express');
var app = express();
var bodyParser = require('body-parser');    //首先要引入这个插件
 
var home = require('./routers/home');
var geocode = require('./routers/geocode');
 
//设置跨域访问
app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With");
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By", ' 3.2.1')
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});
 
app.use(bodyParser.urlencoded({  //配置这两行代码
    extended: true
}));
app.use(bodyParser.json());      //配置这两行代码
 
app.use('/', home);
app.use('/geocode', geocode);
 
app.listen(3001);

17、在后台接口代码中去获取前端传递的参数，如下：

var express = require('express');
var router = express.Router();
 
router.post('/forward', function(req, res) {
    res.send({
        state: 'success',
        data: req.body.queryStr     //获取前端传递的参数
    });
});
 
module.exports = router;

18、在前端通过 ajax 来访问，如下：

        $.ajax({
            url: 'http://localhost:3001/geocode/forward',
            type: 'Post',
            data: {
                queryStr: '成都'
            },
            dataType: 'json',
            success: function(result) {
                console.log(result);
            },
            error: function(err) {
                console.log('请求出错',err);
            }
        })

这部分介绍了一个 POST 类型的后台 NodeJS 接口如何接收前端传过来的参数问题，对于 GET 类型的后台接口，我们后续讨论，因为博主暂时并没涉及到 GET 类型的后台接口需求。

NodeJS 后台主要是用来实现后台数据库的增删改查，但有时候我们也需要在 Node 后台中进行网络请求，就是说我们自己写的后台接口中要请求另一个其它接口的需求。这种场景其实在解决跨域问题的时候用的比较多，比如有一个第三方的接口，我们请求时出现了跨域问题，这个时候我们可以在自己的前端项目里配置跨域，比如 Vue、React 中都可以配置跨域访问，我们也可以自己写一个后台，在这个后台中去请求第三方接口，然后我们解决自己写的后台的跨域问题就可以了，第三方的接口我们只是相当于做一下转发而已，所以这个过程中就涉及到 Node 中进行网络请求，我们接下来看看详细的介绍。

19、安装 axios，通过以下命令安装，如下：

npm install axios --save-dev

当然，你也可以使用 ajax，直接 npm 方式安装 jquery 后引用即可。

20、引入 axios，然后其他使用方法跟在前端是用一致，代码如下：

var express = require('express');
var axios = require('axios');
var router = express.Router();
 
router.post('/forward', function(req, res) {
    var queryString = req.body.queryStr;
    axios
    .get('https://www.geoq.cn/geoq.do',{
        params: {
            handler: 'api',
            opt: 'single',
            querystr: queryString
        }
     })
    .then(result => {
        console.log('后台获取成功', result);
 
        res.send(
            {
                'state': '后台获取成功',
                'data': result.data.result
            }
        );
    })
    .catch((e) => {
        console.log('后台获取错误', e);
 
        res.send({
            'state': 'error',
            'data': '后台获取错误'
        });
    });
});
 
module.exports = router;

21、请求成功后可以将返回值直接传给前端，这样前端也可以拿到返回的值。

这部分介绍如何在自己写的后台中去请求一个第三方的网络接口，主要是用来解决跨域问题。

（未完待续……）

关于作者

X北辰北

X北辰北，毕业于中国矿业大学 - 地理信息科学专业，曾任职于 ESRI（中国）担任地理平台研发工作。 目前在 中国 - 四川 - 成都 居住和工作，从事 IT 行业。 喜爱阅读、撸猫 & 撸狗、数码技术和一切美的事物，也喜欢周易和占卜。 一直钻研与前端开发和数据可视化领域。

查看所有

评论(0)

发布评论

相关文章

X北辰北

X北辰北

X北辰北，毕业于中国矿业大学 - 地理信息科学专业，曾任职于 ESRI（中国）担任地理平台研发工作。 目前在 中国 - 四川 - 成都 居住和工作，从事 IT 行业。 喜爱阅读、撸猫 & 撸狗、数码技术和一切美的事物，也喜欢周易和占卜。 一直钻研与前端开发和数据可视化领域。

文章4 评论1