フロントエンドとバックエンドの分離ソリューション_html/css

0.悟空

悟空は、「ドラゴンボール」の主人公、孫悟空です。彼は優れた超能力を持っており、世界の問題を解決することができます。同様に、フロントエンドとバックエンドを分離しようとすることで、フロントエンド開発における現在の問題点を解決することも期待されています。

1. 基本的な考え方

全体として MVC アーキテクチャを使用すると、Angular (双方向バインディング) とは異なり、一方向のデータフローには次の利点があります。予測可能性、ビュー層の変更はモデルから来る必要があります

MVC の各層で使用される基本テクノロジー:

view: ビュー層のレンダリングとして React を使用し、ここでのレンダリングはノードに分割されます側、ブラウザ側のReact の仮想 DOM、UI への重点、および一方向フローは、ページのパフォーマンスを解決するための強力なツールです。

2. 全体的なアーキテクチャ

悟空の全体的なアーキテクチャは、主にブラウザ、nginx、ノード中間層、バックエンドサーバーの 4 つのエンティティで構成されます。従来の Web サイトのアーキテクチャと比較して、追加のノード中間層があり、これも悟空のコアです。

3. 詳細な説明

3.1 ブラウザ

react-router が使用されるため、システム全体が単一ページアプリケーション (SPA) になります:

ページが初期化されると、最初の画面データがレンダリングされて表示されます。

ここで問題があります: フロントエンドとバックエンドのレンダリングの一貫性が確保されているかどうかです。前後の結果の一貫性を維持するには、react の data-react-checksum が必要です。

最初の画面データは、JSON.stringify(datat) を通じてページに渡す必要があります

3.2 nginx

nginx は非常に人気があり、リクエストの分散と負荷分散に役割を果たしています。ここでは、さまざまなリクエストが nginx を通じてさまざまなサーバーに分散されます。

url リクエストはノードサーバーに均一に分散され、そこからフロントエンドの静的リソースが取得されます。

3.3 ノードサーバー

ノードサーバーは 2 つの役割を果たす中間層です:

フロントエンドの静的リソースの管理

具体的には、以下の機能点に分けることができます:

3.3.1 ルートマッチング

アイデア: リクエストされた URL + React Router のルーター設定情報に従って、一致するコンポーネントを取得します

import { match, RoutingContext } from 'react-router';import routes from './routes';serve((req, res) => {  match({ routes, location: req.url }, (err, rediction, renderProps) => {    if (...) {      res.status(200).send(htmlStr);    }  })})

ログイン後にコピー

3.3.2 最初のコンポーネントを取得します画面データ

アイデア: 各 URL はすべて指定されたファーストスクリーンデータを持ち、すべてのデータが取得されると、コールバック関数が実行されます

Promise.all([promise1, promise2, ..., promisen], (vals)=> {  ...  const initialState = val;  const store = createStore(reducer, initialState);})

ログイン後にコピー

3.3.3 静的レンダリング

アイデア:静的データを取得するには、react の renderToString を使用します

Promise.all([promise1, promise2, ..., promisen], (vals)=> {  ...  const initialState = val;  const store = createStore(reducer, initialState);  ...  const props = { store, ... };  str = React.renderToString(App, props);});

ログイン後にコピー

3.3.4 データモック

アイデア: 各 API は対応する js ファイルに対応し、js ファイルは、mockjs データテンプレートを通じてデータモックを完成させます

3.3.5 完全な HTML に戻る

アイデア: Get 3.3 文字列 str は、HTML の他のコンテンツ (mta、

人気のチュートリアル

詳細>

フロントエンドとバックエンドの分離ソリューション_html/css_WEB-ITnose

0.悟空

1. 基本的な考え方

import { match, RoutingContext } from 'react-router';import routes from './routes';serve((req, res) => { match({ routes, location: req.url }, (err, rediction, renderProps) => { if (...) { res.status(200).send(htmlStr); } })})
ログイン後にコピー

Promise.all([promise1, promise2, ..., promisen], (vals)=> { ... const initialState = val; const store = createStore(reducer, initialState);})
ログイン後にコピー

3.3.4 データモック

フロントエンドとバックエンドの分離ソリューション_html/css_WEB-ITnose

0.悟空

1. 基本的な考え方

import { match, RoutingContext } from 'react-router';import routes from './routes';serve((req, res) => { match({ routes, location: req.url }, (err, rediction, renderProps) => { if (...) { res.status(200).send(htmlStr); } })})ログイン後にコピー

Promise.all([promise1, promise2, ..., promisen], (vals)=> { ... const initialState = val; const store = createStore(reducer, initialState);})ログイン後にコピー

3.3.4 データ モック

import { match, RoutingContext } from 'react-router';import routes from './routes';serve((req, res) => { match({ routes, location: req.url }, (err, rediction, renderProps) => { if (...) { res.status(200).send(htmlStr); } })})
ログイン後にコピー

Promise.all([promise1, promise2, ..., promisen], (vals)=> { ... const initialState = val; const store = createStore(reducer, initialState);})
ログイン後にコピー

3.3.4 データモック