Le backend vue2+node.js coopère avec le framework express pour réaliser un débogage conjoint local du front-end et du back-end (suite avec les méthodes d'écriture du front-end et du back-end des trois méthodes de requête)

Il y a plusieurs difficultés impliquées ici, comme deux formats d'obtention, comment écrire le front-end ? Comment écrire le backend ? , get, post request, comment le backend récupère-t-il les paramètres transmis par le frontend.

Le premier type de get --- vous pouvez transmettre des paramètres ou non.

Frontal ↓

dans api.js

export function authLogout(params) {
  return request({
    url: baseUrl + "/authLogout",
    method: "get",
    params:params
  });
}

Les paramètres d'appel ↓ réels peuvent être transmis ou non

authLogout(params).then((res) => {
    console.log(1,res);
});

Utilisez des paramètres pour transmettre des paramètres. À ce stade, le frontal peut transmettre ou non des paramètres et ne signalera pas d'erreur (cette méthode est donc recommandée)

extrémité arrière:

// get  ---可以传参数 也可以不传入参数
app.get('/api/test/authLogout', (req, res, next) => {
  console.log("req.query",req.query)
  res.end("hello express----get1")
})

Vous pouvez utiliser req.query pour recevoir des paramètres du front-end.

Le deuxième type de get ------ doit passer en paramètres selon le format

Frontal ↓

Dans api.js, le front end configure l'url en fonction des paramètres requis, séparés par / au milieu

export function authCodeLogin(params) {
  return request({
    url: baseUrl + "/authCodeLogin" + '/'+ params.code+ '/'+ params.name,
    method: "get",
  });
}

Les paramètres d'appel réels ↓ doivent être transmis et le format doit être le même

let params = {code: code,name:"zhangsan"};    
authCodeLogin(params).then((res) => {
     console.log(2,res);
});

Étant donné que le format de l'URL du backend est codé en dur, les paramètres doivent être transmis en fonction du format.

extrémité arrière:

app.get('/api/test/authCodeLogin/:code/:name', (req, res, next) => {
  console.log("req.params",req.params)
  res.end("hello express----get2")
})

Vous pouvez utiliser req.params pour recevoir des paramètres du front-end.

Le troisième type de publication --- vous pouvez transmettre des paramètres ou non.

Frontal ↓

dans api.js

export function getUserInfo(params) {
  return request({
    url: baseUrl + "/getUserInfo",
    method: "post",
    data:params
  });
}

Les paramètres d'appel ↓ réels peuvent être transmis ou non

 getUserInfo(params).then((res) => {
            console.log(3,res);
          });

Utiliser des données pour transmettre des paramètres

extrémité arrière:

app.use(express.json())
// post 
app.post('/api/test/getUserInfo', (req, res) => {
  console.log("req.body",req.body)
  res.end('hello express----post');
});

Vous pouvez utiliser req.body pour recevoir des paramètres du front-end.

Remarque : Body-Parser est obsolète

Lorsque req.body est utilisé pour obtenir les paramètres de publication, différentes méthodes sont utilisées pour transcoder selon différentes méthodes d'analyse, sinon la valeur ne peut pas être obtenue.

↓

// 解析 application/json
app.use(express.json()); 
// 解析 application/x-www-form-urlencoded
//app.use(express.urlencoded());
app.use(express.urlencoded({ extended: false }))