220113_TIL_04

11707 ワード
Today I learned TIL テキストリンク
express
:NodeでWebサーバを簡単に開発できるフレームワーク
  • ヘルプリクエストおよびレスポンスの役割
    • クイックインストール
  • 糸はinitで包装されています.インストールjsonファイル
  • package.jsonファイルにtypeを追加:module
  • 糸add express:express取付
  • package.expressがjsonファイル(package.jsonファイルはインストールディレクトリにのみ通知され、実際にインストールされたファイルはnode modulesフォルダにある)
    • に追加されていることを確認します.
  • について、梱包します.jsonにはexpressがあります.node modulesフォルダがない場合は、expressを使用するには、糸を再インストールする必要があります.
  • 📌node modulesフォルダはハブにアップロードされません->ファイルが大きすぎます
  • Gitignoreファイルを作成し、node modulesを作成すると、ハブにアップロードされません.
    • expressの使用
    :インストールしたexpressを使用するには、関数を読み込む必要があります.
  • importでクイックロードすればいい!
    • import express from 'express'
    npmサイトの説明に従ってAPIを作成
    import express from 'express' // 다른 파일에서 express 불러오기
const app = express() //express를 실행하여 실행된 결과를 새로운 변수 app 에 담아준것 
----------------------------------------------------------------------
// app 사용 (app.post / app.delete/ app.update / app.get)
// '/'의 endpoint 를 가진 get 방식의 api 만들기
app.get('/', function (req, res) {   
  res.send('Hello World') // GET 요청이 들어왔을 때 Hello World라고 응답을 보내주는것
})
app.listen(3001) // 고유 포트번호 : 서버를 3001번 포트에서 실행되도록 설정하는것
    APIの起動
    1) node index.jsコマンドでサーバを開く
    2)postmanからGETへhttp://localhost:3001リクエストを送信
  • は、要求を一意のポート番号で送信する必要があります.(要求を他のポート番号に送信すると応答なし状態が表示される)
    • 3)Hello Worldを応答として受け取る
    サーバを終了したい場合は、ターミナル컨트롤 + cでよい.
    ルート
    :アプリケーションが、URI(またはパス)および特定のHTTPリクエストメソッド(GET、POSTなど)に対するクライアントのリクエストにどのように応答するかを決定します.
    Swagger
    :REST APIを簡単に記録およびテストできるツール
    マクロのインストールと使用
  • yarn add swagger-ui-express
  • yarn add swagger-jsdoc
  • をインストール
    • をインポートする.
    import swaggerUi from 'swagger-ui-express';
import swaggerJsdoc from 'swagger-jsdoc'
  • app.「use create=>npmサイトswager-jsdoc」を参照してください.
    (app.use=ミドルウェアロール:中間でデータ交換を行うソフトウェア)
    • app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerJsdoc));
    プロファイル(オプション)を
  • SwagerJSDocセクション=>npmサイトSwager-jsdocに挿入する
    • を参照してください.
    import express from 'express'
import {checkValidationPhone, getToken, sendTokenTOSMS} from './phone.js' 
import swaggerUi from 'swagger-ui-express';
import swaggerJsdoc from 'swagger-jsdoc'
import {options} from './swagger/config.js'

const app = express()    
app.use(express.json())  
app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerJsdoc(options)));
app.get('/', (req, res) => {res.send('Hello World!');});
  • オプションを設定します.jsファイルからインポート
    (npmサイトswager-jsdocを参照)
    • export const options = {
    definition: {
      openapi: '3.0.0',
      info: {
        title: '나만의 미니프로젝트 API 명세서',  
        // title = swagger 접속했을때의 제목부분
        version: '1.0.0',
      },
    },
    apis: ['./swagger/*.js'], // files containing annotations as above
  };
    API-Docsの作成
    /**
 * @openapi
 * /board:
 *   get:
 *     summary: 게시글 가져오기
 *     tags: [Board]
 *     parameters:
 *         - in: query
 *           name: number
 *           type: int
 *     responses:
 *       200:
 *         description: 성공
 *         content:
 *              application/json:
 *                  schema: 
 *                      type: object
 *                      properties:
 *                          number:
 *                              type: int
 *                              example: 1
 *                          writer:
 *                              type: string
 *                              example: 철수
 *                          title:
 *                              type: string
 *                              example: 제목입니다!~~~
 *                          contents:
 *                              type: string
 *                              example: 내용입니다!!!
 */



/**
 * @openapi
 * /board:
 *   post:
 *     description: Welcome to swagger-jsdoc!
 *     responses:
 *       200:
 *         description: Returns a mysterious string.
 */
    反応4
    Vue.js親子コンポーネントは値を伝達する.兄弟コンポーネントの値