express接收get和post请求参数

小咪咪 2023-02-13 14:41 28阅读 0赞

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