【Nodejs】Express実装インターフェース

プログラミング 2023-12-17 10:52:48 訪問数: null

導入

  • Express は、jquery や DOM と同様サーバーを迅速に構築するために使用されるサードパーティ モジュールです。
  • Express は、Node.js プラットフォームに基づく、高速、オープン、 ミニマリストのWeb 開発フレームです。 。
  • Express は http モジュールの基本的な API を保持しており、express を使用すると http API も使用できます。
  • express は追加の新しいメソッドもカプセル化しているため、サーバーをより簡単に構築できるようになります。
    Express 公式ウェブサイト
    Express の中国語ドキュメント (非公式)
    Express GitHub リポジトリ

ノードフレームワーク

node-http模块 ==⇒ express框架 ==⇒ koa =⇒ egg.js

インストール

npm i express

新しい速達梱包方法

  • 急行
    • express.static()– 静的リソースを開く
    • express.urlencoded()– POSTリクエストボディの取得
  • アプリ
    • app.get()– クライアントのGETリクエストを処理する
    • app.post()– クライアントのPOSTリクエストを処理する
    • app.use()– アプリケーションレベルの構成を設定する
  • 要求
    • req.body– POSTリクエストボディの取得
    • req.params– GETリクエストの動的パラメータを取得します
    • req.query– GETリクエストパラメータの取得（クエリ文字列パラメータの取得）
  • レス
    • res.sendFile(文件的绝对路径)– ファイルを読み取り、結果を応答します
    • res.set({name, value})– 応答ヘッダーを設定する
    • res.status(200)– 応答ステータスコードを設定する
    • res.send(字符串或对象)– 回答結果
    • res.json(对象)– JSON形式の応答結果
    • res.jsonp()– JSONP形式の応答結果

Express では、引き続き http モジュールのメソッドを使用できることに注意してください。

単純なリクエストと複雑なリクエスト

簡単なリクエスト

次の条件を満たしている場合、単純なリクエストです。

  1. リクエストメソッドはGET、HEAD、POSTのみです。
  2. Content-Type の値は次のように制限されます。
    • テキストプレーン
    • マルチパート/フォームデータ
    • application/x-www-form-urlencoded

複雑なリクエスト

機能:2 つのリクエストを送信

プリフライトリクエストが最初に送信されますOPTIONS

OPTIONSクロスドメイン ヘッダー情報が許可されている場合、ブラウザは 2 番目のリクエストを送信します

Expressを使用したWebサーバーの構築

nodemonサービスを開始します。
ここに画像の説明を挿入します

ステップ

  1. Expressモジュールをロードする
  2. エクスプレスサーバーを作成する
  3. サーバーを起動します
  4. ブラウザのリクエストをリッスンして処理する
// 1. 导入express模块
const express = require('express')
// 2. 创建服务器
const app = express()
// 3. 启动服务器
app.listen(3000, function () {
    
    
  console.log('服务器启动成功')
})

// express 处理用户请求
// app.get() 用于处理用户的get请求
// app.post() 用于处理用户的post请求
app.get('/index',(req,res) => {
    
    
  res.send('你好，新世界')
})
app.get('/login', (req,res) => {
    
    
  res.send('<h1>哈哈</h1>')
})
// 更多的是返回一个数据（express自动把这个对象转化为JSON ）
app.get('/user', (req,res) => {
    
    
  res.send({
    
    
    name: 'zs',
    age: 18,
    gender: '女'
  })
})

getインターフェースを実装する

インターフェースサーバー:

ユーザーのリクエストに基づいてデータ（JSONデータ）を返す

シンプルな get インターフェイスを実装する

const express = require('express')

const app = express()
app.listen(3000, () => {
    
    
  console.log('服务器启动成功了')
})
app.get('/login', (req, res) => {
    
    
  // 允许该接口跨域访问  CROS
  res.setHeader('Access-Control-Allow-Origin', '*') // *表示都可以跨域访问
  res.send({
    
    
    code: 200,
    message: '成功'
    
  })
})

クエリ文字列を取得する

クエリ文字列とは何ですか?

URL アドレスに続くのは次のとおりです。
ここに画像の説明を挿入します

使用req.queryクエリ文字列の取得

  • インターフェース
const express = require('express')

const app = express()
app.listen(3000, () => {
    
    
  console.log('服务器启动成功了')
})
app.get('/login', (req, res) => {
    
    
  // 允许该接口跨域访问
  res.setHeader('Access-Control-Allow-Origin', '*') // *表示都可以跨域访问
  console.log(req.query)
  const {
    
    username, password} = req.query
  if(username === 'admin' && password === '123456') {
    
    
    res.send({
    
    
      code: 200,
      message: '成功'
    })
  } else {
    
    
    res.send({
    
    
      code: 400,
      message: '用户名或密码错误'
    })
  }
})

取得したクエリ文字列は次のとおりです。

ここに画像の説明を挿入します

  • ページ
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <input type="text" placeholder="请输入用户名" class="username">
  <br>
  <input type="text" placeholder="请输入密  码" class="pwd">
  <br>
  <button>登录</button>
  <script src="node_modules/axios/dist/axios.js"></script>
  <script>
    document.querySelector('button').onclick = async function () {
      
      
      const username = document.querySelector('.username').value
      const password = document.querySelector('.pwd').value
      const res = await axios({
      
      
        method: 'get',
        url: 'http://localhost:3000/login',
        params: {
      
      
          username,
          password
        }
      })
      console.log(res)
    }
  </script>
</body>
</html>

動的パラメータを取得する

url/:id/:name/:age: 以下は動的パラメータと呼ばれます

使用req.params動的パラメータを取得する

app.get('/getUser/:id', (req, res) => {
    
    
  // 允许该接口跨域访问
  res.setHeader('Access-Control-Allow-Origin', '*')
  console.log(req.params)
  res.send({
    
    
    id: req.params.id,
    name: 'zs',
    age: 10

  })
})

ここに画像の説明を挿入します
ここに画像の説明を挿入します

インターフェイスのスタイル

現在最も人気があるのは、シンプルなインターフェイス スタイルである REST スタイルです。

パフォーマンス: ID は動的パラメータを使用して URL に直接結合されます

投稿リクエストを実装する

注: 投稿リクエストの Content-Type は application/json であるため、これは複雑なリクエストです。

ポストリクエストの送信ステップ

  1. すべてのオプション要求を処理する
app.options('*', (req, res) => {
    
    
  // 允许CORS跨域的域名
  res.setHeader('Access-Control-Allow-Origin', '*')
  // 允许CORS跨域的请求方式，默认只有GET,POST
  res.setHeader('Access-Control-Allow-Methods', 'GET,POST,PUT,PATCH,DELETE')
  // 允许CORS跨域请求的请求头
  res.setHeader('Access-Control-Allow-Headers', 'content-type')
  res.send(null)
})
  1. 投稿リクエストを送信する
app.post('/login', (req, res) => {
    
    
  res.setHeader('Access-Control-Allow-Origin', '*')
  res.send({
    
    
    code: 200,
    message: '登陆成功'
  })
})
  1. 投稿リクエストのリクエストボディを取得したい場合
    • 使用req.body
    • 組み込みミドルウェアを使用する必要がある**express.json()
app.use(express.json())
...
...
app.post('/login', (req, res) => {
    
    
  res.setHeader('Access-Control-Allow-Origin', '*')
  console.log(req.body)
  res.send({
    
    
    code: 200,
    message: '登陆成功'
  })
})

ここに画像の説明を挿入します
ここに画像の説明を挿入します

サーバーはさまざまなタイプのリクエスト本文を受信し、それらをさまざまな方法で使用します。

  • URL コード化 —>app.use(express.urlencoded({extended: false}));
  • application/json —> app.use(express.json()); – デモなし
  • form-data —> サーバーはサードパーティのモジュール処理を使用します (multer)

ミドルウェア

特殊業務処理プロセスにおける中間処理リンク
ここに画像の説明を挿入します

  • ミドルウェアは関数であり、通常はリクエストの前に記述されます。

  • 基本パラメータは 3 つあります

    • req リクエスト関連オブジェクト
    • 応答応答関連オブジェクト
    • next 関数 次 ミドルウェアを呼び出して継承する必要があります
    const express = require('express')
const app = express()
// app.use(中间件) // 所有的请求之前都会调用中间件
const middle = function (req, res, next) {
      
      
  console.log('我是中间件')
  // 处理完一定要记得调用next
  next()
}
app.use(middle)
app.listen(3000, () => {
      
      
  console.log('服务器启动了')
})

app.get('/login', (req, res) => {
      
      
  res.send('登录')
})
app.get('/user', (req, res) => {
      
      
  res.send('用户')
})
app.get('/index', (req, res) => {
      
      
  res.send('首页')
})

ここに画像の説明を挿入します

ミドルウェアを使用してクロスドメインの問題を解決する

ミドルウェアを宣言するAllowCrossDomain

const express = require('express')
const app = express()
// app.use(中间件) // 所有的请求之前都会调用中间件
const AllowCrossDomain = function (req, res, next) {
    
    
  // 允许CORS跨域的域名
  res.setHeader('Access-Control-Allow-Origin', '*')
  // 允许CORS跨域的请求方式，默认只有GET,POST
  res.setHeader('Access-Control-Allow-Methods', 'GET,POST,PUT,PATCH,DELETE')
  // 允许CORS跨域请求的请求头
  res.setHeader('Access-Control-Allow-Headers', 'content-type')
  // 处理完一定要记得调用next
  next()
}
app.use(AllowCrossDomain)
app.listen(3000, () => {
    
    
  console.log('服务器启动了')
})

app.post('/login', (req, res) => {
    
    
  res.send({
    
    
    code: 200,
    message: '登陆成功'
  })
})
app.get('/user', (req, res) => {
    
    
  res.send('用户')
})
app.get('/index', (req, res) => {
    
    
  res.send('首页')
})

高速組み込みミドルウェア

  1. 静的

静的リソース

// img是一个文件夹
// 直接把img作为公共的静态资源目录
app.use(express.static('img'))
  1. URLコード化された
  • 対処するapplication/x-www-form-urlencoded
  • リクエストボディを req.body にハングします。
  1. json
    • 対処するapplication/json
    • リクエストボディを req.body にハングします。

通常は2と3を同時に使用します

// 处理json数据
app.use(express.json())
// 处理form-urlencoded数据
app.use(express.urlencoded({
    
    extended: false}))

おすすめ

転載: blog.csdn.net/qq_41675812/article/details/130524956
おすすめ
ランキング
チップ製造の詳しい説明 エッチング原理 学習メモ(5)
StringBuilderを持つコンストラクタがそうではないのはなぜStringクラスのコンストラクタメソッドは、パラメータのStringBufferの使用の同期ブロックでいますか？
[Done] exited with code=3221225477 in 34.566 seconds
并行端口（Parallel Port）
推奨システム評価試験
3.22のノートが質問を行います
手紙の面白い組み合わせ
Flutter ポッドのインストールが報告されました [!] プロジェクト ディレクトリ ソリューションに Podfile が見つかりません
PromSQL の実践的なクエリ ステートメントの概要 (常に更新)
使用dedecms織ラベルはarclist夢
アーカイブ
もっと
2024-04-30(35)
2024-04-29(5)
2024-04-28(12)
2024-04-27(29)
2024-04-26(22)
2024-04-25(31)
2024-04-24(30)
2024-04-23(31)
2024-04-22(5)
2024-04-21(0)

コードワールド

© 2018 codetd.com