node:express defines the way the interface receives parameters

Table of contents

Foreword:

1. In the request address of the request parameter

2. Query String Parameters

3. application/json

4. application/x-www-form-urlencoded

5. multipart/form-data

Full code:

---

Foreword:

        Create a new node project, install express, etc. I won’t say much, just execute the command

npm init -y
npm install express
npm install cors

app.js

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

const app = express()
app.use(cors())

app.listen(80, () => {
    console.log('http://127.0.0.1')
})

I used vue3 here on the front end, and the axios package was used for the request, but I did not encapsulate the request for axios, but used it directly. In a real project, it must still need to be encapsulated, hehe!

<template>
</template>

<script setup>
import axios from "axios";
import Qs from "qs";

const baseUrl = "http://127.0.0.1";
</script>

1. In the request address of the request parameter

app.js

app.get('/api/userInfo/:id', (req, res) => {
    console.log(req.params)
    res.send({code: 200, msg: 'success'})
})

vue

const request1 = () => {
  axios
    .get(`${baseUrl}/api/userInfo/999`)
    .then((resp) => {
      console.log(resp);
    })
    .catch((err) => {
      console.log(err);
    });
};

req.params： 

 

2. Query String Parameters

Request parameters will be passed in the form of url string, that is, the string after ? is its request parameter, and & is used as a separator.

app.js

app.get('/api/userInfo', (req, res) => {
    console.log(req.query)
    res.send({code: 200, msg: 'success'})
})

vue

const request2 = () => {
  axios
    .get(`${baseUrl}/api/userInfo`, { params: { userid: 999 } })
    .then((resp) => {
      console.log(resp);
    })
    .catch((err) => {
      console.log(err);
    });
};

req.query

 

3.application/json

app.js

app.use(express.json())

app.post('/api/userInfo', (req, res) => {
    console.log(req.body)
    res.send({code: 200, msg: 'success'})
})

vue

const request3 = () => {
  axios
    .post(`${baseUrl}/api/userInfo`, {
      name: "qianjue",
      age: 22,
      phone: "13678945612",
    })
    .then((resp) => {
      console.log(resp);
    })
    .catch((err) => {
      console.log(err);
    });
};

 

From here we can know that the default Content-type of axios is application/json

req.body, it is worth noting that we need to use a node middleware to parse the passed data, because the front desk uses the application/json format, so we can use express built-in json to parse this format data

4.application/x-www-form-urlencoded

app.js

app.use(express.urlencoded({extended: false}))

app.post('/api/userInfo/submit', (req, res) => {
    console.log(req.body)
    res.send({code: 200, msg: 'success'})
})

vue

const request4 = () => {
  const params = {
    name: "千珏",
    age: "22",
    phone: "13678945612",
    email: "[email protected]",
  };
  axios
    .post(`${baseUrl}/api/userInfo/submit`, Qs.stringify(params), {
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
      },
    })
    .then((resp) => {
      console.log(resp);
    })
    .catch((err) => {
      console.log(err);
    });
};

 

req.body, because we use the application/x-www-form-urlencoded data format, so we need to use the corresponding parsing middleware, and express has a built-in express.urlencoded({extended: false}) for us

 

5.multipart/form-data

Generally used in conjunction with file uploads, node:express parses multipart/form-data data; uploads files (single file + multiple files)

Full code:

app.js:

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

const app = express()
app.use(cors())
app.use(express.json())
app.use(express.urlencoded({extended: false}))

app.get('/api/userInfo/:id', (req, res) => {
    console.log(req.params)
    res.send({code: 200, msg: 'success'})
})

app.get('/api/userInfo', (req, res) => {
    console.log(req.query)
    res.send({code: 200, msg: 'success'})
})


app.post('/api/userInfo', (req, res) => {
    console.log(req.body)
    res.send({code: 200, msg: 'success'})
})


app.post('/api/userInfo/submit', (req, res) => {
    console.log(req.body)
    res.send({code: 200, msg: 'success'})
})

app.listen(80, () => {
    console.log('http://127.0.0.1')
})

 vue:

<template>
  <el-button type="primary" @click="request1">请求接口1</el-button>
  <el-button type="success" @click="request2">请求接口2</el-button>
  <el-button type="warning" @click="request3">请求接口3</el-button>
  <el-button type="danger" @click="request4">请求接口4</el-button>
</template>

<script setup>
import axios from "axios";
import Qs from "qs";

const baseUrl = "http://127.0.0.1";

const request1 = () => {
  axios
    .get(`${baseUrl}/api/userInfo/999`)
    .then((resp) => {
      console.log(resp);
    })
    .catch((err) => {
      console.log(err);
    });
};

const request2 = () => {
  axios
    .get(`${baseUrl}/api/userInfo`, { params: { userid: 999 } })
    .then((resp) => {
      console.log(resp);
    })
    .catch((err) => {
      console.log(err);
    });
};

const request3 = () => {
  axios
    .post(`${baseUrl}/api/userInfo`, {
      name: "qianjue",
      age: 22,
      phone: "13678945612",
    })
    .then((resp) => {
      console.log(resp);
    })
    .catch((err) => {
      console.log(err);
    });
};

const request4 = () => {
  const params = {
    name: "千珏",
    age: "22",
    phone: "13678945612",
    email: "[email protected]",
  };
  axios
    .post(`${baseUrl}/api/userInfo/submit`, Qs.stringify(params), {
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
      },
    })
    .then((resp) => {
      console.log(resp);
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>