フロントエンドからバックエンドへの接続

Web アプリ開発者として、私が興味深いと思うことの 1 つは、自分またはアプリケーションのフロントエンド ウィングをアプリケーションのバックエンド ウィングにリンクすることです。常に JavaScript を扱うのが大好きな開発者として。 JavaScript は長年にわたって大きく進化してきました。アプリケーションのフロントエンドをアプリケーションのバックエンドにリンクするには、クライアント側のコード (通常は HTML、CSS、JavaScript で構成されます) とサーバー側のコード (ほんの数例を挙げると、Node.js、Python、Ruby、Java などのさまざまな言語で書かれています)。以下に、私がアプリケーションのバックエンド側とフロントエンド側の両方で作業する Web 開発者として働き始めたときに実行した簡単な手順をリストします。

1. 私は通常、バックエンドをセットアップすることを好みます まず、これにより、フロントエンドが通信するための API を提供するバックエンド サーバーを取得します。 MERN スタックを使用してアプリを開発するときの基本的な例は、Express で Node.js を使用することです。

私の基本的なサーバー設定は (Node.js + Express) です:

Node.js と npm (ノード パッケージ マネージャー) をインストールします。

新しいプロジェクトを作成し、Express をインストールします:

どうすればいいですか?まず、プロジェクト フォルダー内にフォルダーを作成します。

mkdir myProjectApp
cd myProjectApp
npm init -y
npm install Express

次に、単純なサーバーまたは JavaScript ファイル (server.js など) を作成します。

JavaScript
コードをコピー
const Express = require('express');
const app =express();
const ポート = 3000;

// JSON を解析するミドルウェア
app.use(express.json());

// エンドポイントの例
app.get('/api/data', (req, res) => {
res.json({ メッセージ: 'バックエンドからこんにちは!' });
});

app.listen(port, () => {
console.log(http://localhost:${port} で実行されているサーバー);
});

サーバーを実行します:

ノードサーバー.js

1. 次に、フロントエンドをセットアップしました。フロントエンドは通常、優先 API 呼び出しを行うための JavaScript コードを含む HTML ファイルです。

index.html ファイルを作成します:

以下の HTML コード

フロントエンドとバックエンドの相互作用

フロントエンドからバックエンドへの通信

バックエンドからデータを取得

<script src="script.js"></script>

JavaScript の script.js ファイルを作成します:

JavaScript
以下のコードを入力してください
document.getElementById('fetchButton').addEventListener('click', () => {
fetch('http://localhost:3000/api/data')
.then(response =>response.json())
.then(データ => {
document.getElementById('response').innerText = data.message;
})
.catch(error => {
console.error('データ取得エラー:', error);
});
});

1. アプリケーションの実行
   バックエンドサーバーが実行されていることを確認し、ブラウザでindex.htmlを開きます。ボタンをクリックしてバックエンドからデータを取得すると、ページに応答が表示されるはずです。

2. 上級: フレームワークとライブラリの使用
   より複雑なアプリケーションの場合は、両端でフレームワークとライブラリを使用することもできます:

フロントエンド: React、Vue.js、Angular など
バックエンド: Express (Node.js)、Django (Python)、Rails (Ruby) など
React の例 (フロントエンド):

Create React App を使用して React アプリケーションを作成します:

以下のコードを入力してください
npx create-react-app my-react-app
cd my-react-app
App.js のコンテンツを置き換えます:

JavaScript
以下のコードを入力してください

import React, { useState } from 'react';

関数 App() {
const [メッセージ, setMessage] = useState('');

const fetchData = () => {
fetch('http://localhost:3000/api/data')
.then(response =>response.json())
.then(データ => {
setMessage(data.message);
})
.catch(error => {
console.error('データ取得エラー:', error);
});
};

戻る (

フロントエンドからバックエンドへの通信

バックエンドからデータを取得

{メッセージ}

);
}

デフォルトのアプリをエクスポート;
React アプリケーションを実行します:

以下のコードを入力してください
npm 開始
これで、ボタンをクリックすると、React アプリがバックエンド サーバーからデータを取得できるようになります。

概要
JavaScriptを使用したフロントエンドとバックエンド間の接続は、上記の手順で簡単に行うことができます。バックエンド サーバーは API を公開し、フロントエンドはこれらの API に対して HTTP リクエストを作成してデータを取得または送信します。このアプローチは、プロジェクトの特定の要件に基づいて、さまざまなフレームワークや環境に適応できます。

以上がフロントエンドからバックエンドへの接続の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。