フロントエンドとして、これらのバックエンドの常識を理解する必要があります。

この記事では、フロントエンドとバックエンドに関する関連知識をお届けします。主に、フロントエンド担当者として知っておくべきバックエンドの知識について説明します。興味のある友人は、見てみましょう。皆さんもぜひ知っておいてください。ヘルプ。

サーバーとは

• サーバーはバックエンドおよびサーバーサイドとも呼ばれます
• フロントエンドはユーザーです。 枝や葉など、目に見えて操作可能な部分です。
• サーバーは、木の根など、フロントエンドに「サポート」と「栄養」を提供します。

---

#フロントエンドとは

• 狭義: Webページ
• 広義: アプリ、PCクライアントなどのさまざまなクライアント

---

サーバーの役割

• フロントエンドが表示するデータを提供する
• フロントエンドが送信するデータを受信する
• ストレージデータ(ソフトウェア)企業はデータを非常に重視しており、さまざまなデータを収集します)

---

サーバーの表現形式

• フロントエンドの ajax は、次のようなインターフェイスを呼び出す必要があります。データを取得するには get リクエストを使用し、データを送信するには post リクエストを使用します。
• このインターフェイスはサーバーによって提供されます。

---

フロントエンドとバックエンドの対話型通信 - HTTP プロトコル

• ハイパー テキスト転送プロトコルハイパー テキスト転送プロトコル
• は、クライアントとサーバーの通信方法を規定します。
• は、データ通信の標準および基礎です。インターネットの世界では

---

#HTTP - Universal

• url: backend インターフェイスのアドレス、つまりフロントエンド Ajax リクエストのアドレス
• メソッド: GET POST PUT DELETE などのリクエスト メソッド。
• ステータス コード: 200 302 404 500 など、インターフェイスによって返されるステータス

---

HTTP - リクエスト

• リクエスト: リクエスト、フロントエンドがサーバーに送信します

• • リクエストの本文: リクエストはバックエンドに送信されるデータです。
  • Request Content-type: 送信されるデータの形式 (JSON 形式など)
  • ...

---

HTTP - レスポンス

• レスポンス: リターン/レスポンス、サーバーはフロントエンドに戻ります

• レスポンスボディ: フロントエンドに返されたデータの後
  • ##レスポンスコンテンツタイプ: 返されたデータの形式 (JSON 形式など)

Get リクエストのデモを行う

---

POST リクエストのデモを行う

---

#Web ページでは、複数のサーバーに対応します

---

Web ページによってロードされる必要があるリソースには、

#html

css

• js
が含まれる場合があります。
• 写真
• オーディオとビデオ
• ビジネスデータ
• 異なるリソースは異なるドメイン名から取得される場合があります

---

html は別のドメイン名から取得される可能性があります

js css は独立したドメイン名から取得される場合があります

• データは独立したドメイン名から取得される場合があります
• 異なるドメイン名は異なるドメイン名に対応することができます。サーバー

サービス 最後は主に静的サービス (html css js 画像の処理など) とデータ サービス (データ インターフェイスの提供) に分けることができます

サーバーがデータを処理して返す方法

---

フロントエンド リクエストの URL ルールを定義する - ルーティング (フロントエンド Ajax リクエストには URL が必要です)

リクエストデータを取得し、Response を使用してデータを返します

req および res の場合は省略することもできます

• Request: メソッド URL 本文を通じて取得します
  • 応答経由: 設定可能: ステータス コード、コンテンツ タイプ、本文
  データの読み取りと保存 - データベース

データストレージとクエリ専用のデータベース

• データベースは独立していますシステムはnodejs専用ではありません
  • 基本操作: クエリ、追加、削除、変更、並べ替えなどにはすべてクエリ条件が必要です
  ##

  ---

  ルーターとは

  • サーバーの入力ルール
  • フロントエンドとの合意が必要
  • 古代都市の門のように、市の門 入るには特定の入り口があり、それぞれの入り口には特定の機能があります
  • バックエンド定義 GET /api/list routing=> フロントエンド axios.get( /api/list' )
  • バックエンド Define POST /api/create Route => フロントエンド axios.post( '/api/create' , {..)
  • ルートは送信ルールを定義し、URL は特定の送信形式

  ---

  ルーティングには何が含まれますか?

  • GET/POST などのメソッドを定義します。
  • URL ルールを定義します/api/list や /api/create
  • 入力 (リクエスト本文) と出力 (レスポンス本文) の形式を定義する

  Nodejs 環境を構成する

  Enter Node 公式 Web サイトのインストール:

  

  インストールが完了したら、次のコマンドを使用してインストールが完了したかどうかを確認します:

  • node -v
  • npm -v

  nrm 管理パッケージのソースのインストールを続行します:

  • npm i nrm -g
  • nrm ls
  • nrm use taovao

  nvm を使用して nodejs を管理する複数のバージョン

  • Mac OS、brew install nvm
  • windows を使用、github で nvm-windows を検索すると、ダウンロード アドレスがあります。

  nvm を使用する

  • ##nvm list 現在のノードのバージョンをすべて表示する
  • nvm install v16.10.0 インストール指定されたバージョン
  • nvm use —delete-prefix 16.10.0 指定されたバージョンに切り替えます

  ---

  Nodejs と Javascript の違い
  Javascript
  • ECMAScript 構文仕様と Web API (DOM 操作、BOM 操作、Ajax) を使用します。いずれか 1 つは必須です

  • この 2 つの組み合わせにより、ブラウザ側であらゆる操作を完了できます。

  • ECMAScript 定義 構文 (変数定義、ループ、判定、関数、プロトタイプとプロトタイプ チェーン、スコープとクロージャ、非同期など) .) JavaScript と nodejs を記述するときは必ず従う必要があります。

  Nodejs
  ECMAScript 構文仕様と、nodejs API を使用します。両方とも不可欠です
  • http の処理、ファイルの処理など、具体的なリファレンス:
  • nodejs.cn/api-v16/
  この 2 つを組み合わせると、サーバー側であらゆる操作を完了できます

  ---

  CommonJs
  Nodejs 環境では、モジュール システムがデフォルトでサポートされており、モジュール システムは CommonJS 仕様に従います
  • Nodejs では、js ファイルはモジュール

  • // index.js
    function add(a, b) {
      return a + b;
    }
    
    function minus(a, b) {
      return a - b;
    }
    
    // 导出单个
    module.exports = add;
    // 在别的文件引入
    // const add = require("index.js");
    
    // 导出多个
    module.exports = {
      add,
      minus
    };
    // 在别的文件引入
    // const { add, minus } = require("index.js");
    
    // 直接引入npm包
    // const _ = require("lodash");

  デバッグ
  vscodeに付属のブレークポイントデバッグを使用します
  1. package.json
  2. --inspect=9229#を追加します## パラメーターを使用してプログラムを開始し、URL: chrome://inspect を入力し、対応するプログラム デバッガーを選択します
  バックエンド開発とバックエンド開発の違いフロントエンド開発

  ---

  サービスの安定性

  サーバー側はさまざまな悪意のある攻撃や誤操作の被害を受ける可能性があります
  単一クライアントは予期せずハングアップする可能性がありますが、サーバーはハングアップできません
  CPU とメモリ (最適化、拡張) を考慮する
  クライアント専用のブラウザがあり、メモリと CPU は問題ありません。
  • サーバーは多くのリクエストを処理する必要があり、CPU とメモリはリソースが不足しています
  • ロギング

  #フロントエンドもログの書き込みに参加しますが、それはログの開始者にすぎず、後続の

  サーバー側によるログの記録、ログの保存、およびログの分析については考慮しません。フロントエンドはあまり気にしません
  • #セキュリティ
  サーバーはいつでもさまざまな悪意のある攻撃を受ける準備ができている必要がありますが、フロントエンドはあまり気にしません
  例: 不正な操作、データベース攻撃待機
  • #クラスターとサービスの分割
  ##製品の開発は速いため、トラフィックが急速に増加する可能性があります
  大規模なトラフィックを伝送するために拡張してマシンとサービスを分割するにはどうすればよいですか?
  • 推奨される調査: 「
  Web フロントエンド開発
  • 」

以上がフロントエンドとして、これらのバックエンドの常識を理解する必要があります。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。