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: "提交成功"}