axiosを使用してrest-apiをパブリッシュ!

和弦を全部入れるのはちょっと無理...私はただ少し書きたいだけです.
どうせ大体構造がわかっていれば、やり続けることができる.
携帯電話番号を適切な位置に置き、ボタンを押して認証コードを要求するapiの構造が作成されました.

const getValidationNumber = async () => {
  let num1 = document.getElementById("PhoneNumber01").value;
  let num2 = document.getElementById("PhoneNumber02").value;
  let num3 = document.getElementById("PhoneNumber03").value;
  let number = num1 + num2 + num3;
  axios({
    method: "post",
    url: "http://localhost:3000/tokens/phone",
    data: {
      myphone: `${number}`,
    },
  }).then((res) => {
    console.log(res); // 에러코드같은거 보려고 일부로 넣는 편이다.
  });
  document.querySelector("#ValidationInputWrapper").style.display = "flex";
  console.log("인증 번호 전송");
};

番号を書く入力欄を3つに分けて、まずdocument.getElementById().valueによってもたらされ、1つの作業に統合されます.
次にaxiosを使用します
これはリクエストの値です.method:"post" Expressを使用してWebサーバを開くと、ポート番号とendPointが確定します.url: "http://localhost:3000/tokens/phone"インポートした値はdataで送信され、myphoneにはnumberの値が含まれます.

data: {myphone: `${number}`}

残りは先に入れてエラーコードを確認します.
反対側、受け取った場所で

import { checkValidationPhone, getToken, sendTokenToSMS } from "./phone.js";
import express from "express";
import cors from "cors";

app.use(cors());
app.use(express.json());

app.post("/tokens/phone", (req, res) => {
  console.log(req.body);
  const myphone = req.body.myphone;

  checkValidationPhone(myphone);
  // 1.  휴대폰 번호 자리수 맞는지 확인하기
  const isValid = checkValidationPhone(myphone);
  if (isValid) {
    // 2. 핸드폰 토큰 6자리 만들기
    const mytoken = getToken();
    // 3. 핸드폰 번호에 토큰 정보 전송하기
    sendTokenToSMS(myphone, mytoken);
    res.send("인증완료!");
  }
});

関数を読み込むにはimport { checkValidationPhone, getToken, sendTokenToSMS } from "./phone.js";Webサーバとしてexpressを使うので

import express from "express";
app.use(express.json());

Webホスティングではなく、パーソナルコンピュータのWebサーバとして使用するため、アクセスするには条件をキャンセルする必要があります.

import cors from "cors";
app.use(cors());

endPointを宣言、指定してrest値を交換する必要があるためです.app.post("/tokens/phone", (req, res)1:フロントから送られてきたお金はreqに入っています.
2:その中で私が必要とするデータを体の中に入れる
3:私はmyphoneに入れて、それを再定義します.const myphone = req.body.myphone;次に、作成した関数に含まれるデータのmyphoneをパラメータとして、関数を回転させます.
私は今...フロントの発表の仕方と授業の仕方が違います(ㅠㅠ)
なぜか分かりませんが、初めて課題をするときの基本構造はそれです;;
私はもともと交換したいと思っていましたが、指導者は不思議だと言って、私にこのように彼を見て外に出させました(ハハ)
泣きながらわさびを探して食べる...
ああパッケージもjsonは今モジュールを書いていて、axios、cors、exprssを使っていて、どれも欠けていれば馬鹿になります

 "type": "module",
  "dependencies": {
    "axios": "^0.26.1",
    "cors": "^2.8.5",
    "express": "^4.17.3"
    }

参考になるブログ
後で参考になるかもしれないリンク
コードツリー