express接收get和post请求参数

1、环境搭建

执行命令：

# 安装express-generator脚手架
cnpm i -g express-generator

# 创建项目
express node-demo

# 安装依赖
cd node-demo
cnpm i

# 启动服务
npm start

安装nodemon，修改项目源码后，无需重启服务就可以实现热部署

# 安装nodemon
cnpm i -g nodemon

在package.json文件中配置

"scripts": {
    "start": "nodemon ./bin/www"
}

安装cors模块解决跨域问题

# 安装cors
cnpm i cors --save

在 app.js 文件中配置 cors 跨域问题

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors());

2、express接收请求参数

2.1、get请求

在routes目录下创建 stu.js 文件，编写如下代码：

let express = require('express')
let router = express.Router()

router.get("/query",(req,res,next)=>{
    let params = req.query;
    res.json({
        code: 0,
        msg: "成功",
        params
    })
})

module.exports = router

在 app.js 文件中引入

let stuRouter = require('./routes/stu')
app.use('/stu',stuRouter);

打开浏览器，发送请求

//请求地址
http://localhost:3000/stu/query?id=1&name=tom

页面中返回的结果：

{"code":0,"msg":"成功","params":{"id":"1","name":"tom"}}

2.2、post请求

安装 body-parser 模块

cnpm i body-parser --save

在express项目的路由文件中接收post请求参数

let express = require('express')
let bodyParser = require('body-parser')
let router = express.Router()

// 解析提交的json参数
let jsonParser = bodyParser.json()
// 解析提交的form表单参数
let urlencodedParser = bodyParser.urlencoded({ extended: true })

router.post("/add",jsonParser,(req,res,next)=>{
    console.log(req.body)
    res.json({
        code: 0,
        msg: '提交成功'
    })
})

module.exports = router

为了模拟post请求，可以使用postman，也可以自己写个ajax请求，这里我使用vue写了一个简单的demo，模拟post请求，示例代码：

<template>
	<div>
		<button @click="add">提交</button>
	</div>
</template>

<script>
	export default {
		methods:{
			add(){
				this.$axios.post('http://127.0.0.1:3000/stu/add',{
					id: 300,
					name: 'Lily',
					age: 20
				}).then(res=>{
					console.log(res.data)
				})
			}
		}
	}
</script>

点击提交按钮，发送请求后，在服务器端控制台打印的结果：

{ id: 300, name: 'Lily', age: 20 }

后端接收到post请求的参数，在客户端控制台打印响应结果：

{code: 0, msg: "提交成功"}