vue2+node.jsバックエンドはExpressフレームワークと連携し、フロントエンドとバックエンドのローカル共同デバッグを実現します（3つのリクエストメソッドのフロントエンドとバックエンドの書き方の続き）

ここには、2 つの get 形式、フロントエンドの記述方法など、いくつかの困難が伴います。バックエンドはどのように書くのでしょうか? 、get、post リクエスト、バックエンドはフロントエンドから渡されたパラメーターをどのように取得しますか。

最初のタイプの get --- パラメーターを渡すかどうかを指定できます。

フロントエンド↓

api.jsで

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

実際の呼び出し ↓ パラメータを渡すかどうか

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

params を使用してパラメータを渡します。この時点で、フロントエンドはパラメータを渡しても渡さなくてもエラーを報告しません (この方法が推奨されます)

後部：

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

req.query を使用してフロントエンドからパラメーターを受け取ることができます。

2 番目のタイプの get ------- は、形式に従ってパラメータを渡す必要があります。

フロントエンド↓

api.js では、フロントエンドは、中央の / で区切られた必要なパラメータに従って URL を構成します。

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

実際の呼び出し ↓ パラメータを渡す必要があり、形式は同じでなければなりません

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

バックエンドの URL 形式はハードコーディングされているため、パラメータは形式に従って渡す必要があります。

後部：

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

req.params を使用してフロントエンドからパラメーターを受け取ることができます。

3 番目のタイプの投稿 --- パラメータを渡すことも、渡さないこともできます。

フロントエンド↓

api.jsで

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

実際の呼び出し ↓ パラメータを渡すかどうか

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

データを使用してパラメータを渡す

後部：

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

req.body を使用してフロントエンドからパラメーターを受け取ることができます。

注: Body-Parser は非推奨になりました

req.body を使用して post パラメータを取得する場合、異なる解析方法に従って異なる方法を使用してトランスコードが行われます。そうしないと、値を取得できません。

↓

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