安装了 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、请求成功后可以将返回值直接传给前端,这样前端也可以拿到返回的值。
这部分介绍如何在自己写的后台中去请求一个第三方的网络接口,主要是用来解决跨域问题。
(未完待续……)