【NodeJS】基于Express框架创建的Node后台获取前端传过来的参数 |
您所在的位置：网站首页 › 后端如何给前端返回数据 › 【NodeJS】基于Express框架创建的Node后台获取前端传过来的参数 |
【NodeJS】基于Express框架创建的Node后台获取前端传过来的参数
|
此文章是这个系列的第四篇文章，我们给大家介绍下如何在Node的后台项目中获取前端页面传过来的值。 写在前面NodeJS后台主要是用来实现后台数据库的增删改查，那么数据库的增删改查是需要依赖我们前端传过来的数据值，也就是说，我们要在数据库中插入一个值，插入的这个过程是NodeJS后台代码来做，具体要插入的值则是我们前端通过ajax或者axios传过去的值，所以就有一个问题：在NodeJS后台我们要接受前端传过来的值。所以这一篇文章应运而生。 环境要求安装了NodeJS环境(可以使用npm包管理工具)初始化了一个NodeJS后台项目demo操作步骤1、在后台接口中，我们一般是使用req.body来获取前端通过ajax或者axios传递过来的参数的，但是有时候我们通过req.body去获取的时候发现参数为空，所以我们就要找一种解决方法，在这里推荐使用body-parser插件来解决。 2、首先在后台项目根目录下运行命令行工具，然后安装这个插件，如下： 代码语言：javascript复制npm install body-parser --save-dev3、然后在index.js文件中添加如下两行配置代码： 代码语言：javascript复制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;"); next(); }); app.use(bodyParser.urlencoded({ //配置这两行代码 extended: true })); app.use(bodyParser.json()); //配置这两行代码 app.use('/', home); app.use('/geocode', geocode); app.listen(3001);4、在后台接口代码中去获取前端传递的参数，如下： 代码语言：javascript复制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;5、在前端通过ajax来访问，如下： 代码语言：javascript复制$.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); } })6、最后可以看到结果如下：  img总结这篇文章介绍了一个POST类型的后台NodeJS接口如何接收前端传过来的参数问题，对于GET类型的后台接口，我们后续讨论，因为博主暂时并没涉及到GET类型的后台接口需求。 |
【本文地址】
今日新闻 |
推荐新闻 |