node.js读取传入的json数据

ゞ浴缸里的玫瑰 2023-02-17 14:57 12阅读 0赞

最近在学习node.js，期间在json数据传输的问题上遇到了很多困难

比如获取到的数据都是些奇奇怪怪的东西：

\{\}（空的对象）  
\[Object object\]（无法解析的数组）  
undefined（明明就有，但是它就是说我undefined的元素）  
\{‘data’:‘i am data’\}（看上去很像json数据，实则是字符串的东西）

这些问题困扰了我好几天，最近才找到解决方案，在此分享给大家，希望对各位有帮助

**先说一个最好操作的方法：**

## 前端代码 ##

//我用的是vue框架，应该引入axios的方法都是一样的吧
    <template>
    	<div>
    		//一个用于启动数据发送函数的按钮
    		<button @click="data_send()">测试json</button>
    	</div>
    </template>
    
    <script>
    	//引入axios来发起网络请求，安装方法一查就有
    	import axios from 'axios'
    	
    	//配置发送网络请求的默认端口
    	//(可以不配置，在之后发起请求时写全地址就ok了)
    	//注意此处的单词是defaults而不是default
    	//编译器的自动补全很容易会补全成default，导致无效
    	axios.defaults.baseURL = 'http://localhost:3000'
    
    	export default{ 
    		methods:{ 
    			data_send(){ 
    				//用axios发送一条json数据
    				axios.post('/data_send',{ 
    					data:{ 
    						message:'i am message',
    						info:'i am info'
    					}
    				})
    			}
    		}
    	}
    </script>

## 后端代码 ##

//使用express框架，安装方法一查就有
    const express = require('express')
    const app = express()
    
    //使用bodyParser，安装方法一查就有
    //（不必纠结其原理，有效就好）
    const bodyParser = require('body-parser')
    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({  extended: false }))
    
    //网上找的跨域请求解决方案
    app.all('*', function(req, res, next) { 
    	res.header("Access-Control-Allow-Origin", "*");
    	res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
    	res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    	res.header("X-Powered-By", ' 3.2.1')
    	if (req.method == "OPTIONS") res.send(200); /*让options请求快速返回*/
    	else next();
    });
    
    //获取前端发来的json数据
    app.post('/data_send', function(req, res) { 
    	//用req.body就能获取到json格式的数据
    	console.log(req.body)
    	
    	//验证是否能取出其中的数据
    	//以免出现看上去很像json其实是字符串的情况
    	console.log(req.body.data.info)
    })
    
    //在localhost:3000端口启动服务器
    app.listen(3000, function() { 
    	console.log('服务器已启动')
    })

**启动node.js服务器**  
![启动node.js服务器][node.js]  
**启动vue项目（使用HTML文件的可略过此步骤）**  
![启动vue项目][vue]  
**点击 测试json 按钮**  
![点击 测试json 按钮][_json]  
**node控制台显示，已经成功获取到了从前端传过来的json数据**  
![成功获取json数据][json]

**再来说一个比较复杂的方法，顺便聊一下网上的一些方法没效果的原因：**

## 前端代码（和上面的一样） ##

## 后端代码 ##

//先把关于bodyParser的内容都注释掉，否则报错
    //const bodyParser = require('body-parser')
    //app.use(bodyParser.json());
    //app.use(bodyParser.urlencoded({ extended: false }))
    
    app.post('/data_send', function(req, res) { //勉强成功的方法
    	let str = []//定义一个空字符串
    	req.on('data', function(chunk) { 
    		str += chunk//将数据加入字符串
    	})
    	req.on('end', function() { 
    		//输出不同形式的数据
    		//我之所以要这样输出，是因为用连接符居然会影响输出的结果
    		console.log('\n接收到的json数据')
    		console.log(str,str.data)
    		
    		console.log('\neval转化后的数据')
    		var obj = eval('(' + str + ')')
    		console.log(obj,obj.data)
    		
    		console.log('\n转化为json字符串的数据')
    		var str1 = JSON.stringify(str)
    		console.log(str1,str1.data)
    		
    		console.log('\n转化为json对象的数据')
    		var str2 = JSON.parse(str1)
    		console.log(str2,str2.data)
    	})
    })

**node.js控制台的输出结果**  
![输出结果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhb3NpeG5vdHdv_size_16_color_FFFFFF_t_70]  
只有形如 \{data: ‘i am data’\} 的数据才能被读取

形如 \{‘data’: ‘i am data’\} 的数据是没法被解析的

就是这样，希望我的发现能帮助到各位

–2020/6/14

[node.js]: https://img-blog.csdnimg.cn/20200614205757556.png
[vue]: https://img-blog.csdnimg.cn/20200614210034922.png
[_json]: https://img-blog.csdnimg.cn/20200614210141616.png
[json]: https://img-blog.csdnimg.cn/20200614210305626.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhb3NpeG5vdHdv_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200614213600346.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhb3NpeG5vdHdv,size_16,color_FFFFFF,t_70