React-config(環境変数)

7566 ワード
React かんきょうへんすう config API変数 テキストリンク

住所を変更...置換...置換...置換


今回最初のプロジェクトで新しく学んだことがあります.
JavaScriptファイルを再作成し、APIアドレスを変数処理します.
このプロジェクトには3つのバックエンドがあり、サーバを統合する前に、
3人のAPIアドレスを変更してデータを照合する必要があります.
なんて面倒な仕事なんだろう・・・助けて.このままでは死ぬ...

管理config


先生が来ました.
「龍祐以降の住所はconfigで管理しよう」
config.jsというファイルを新規作成し、APIアドレスを変数処理します.

ファイルとインデックスを作成します.jsと同じファイルの場所に置きます.
バックエンドで受け取ったアドレスは変数処理が行われている.

かんきょうへんすう


BASE URLを指定し、ここに変更したアドレスを入力するだけです.
ファイルアドレスをいちいち変更する必要はありません.
ページごとに必要なデータが異なります
バックエンドで指定されたエンドポイント、BASE変数を`(backtic)に囲み、新しい変数を設定
config.js

const BASE_URL = 'http://0000.0000.00000.0000:000000';

export const API = {
  MAIN: `${BASE_URL}/main`,
  MYPAGE: `${BASE_URL}/users/private/user`,
  USER_PAGE: `${BASE_URL}/users/public/user`,
  SIGNUP: `${BASE_URL}/users/signup`,
  WRITERDATA: `${BASE_URL}/users/?user_tag_id=`,
  TAGDATA: `${BASE_URL}/branch_tags/userTagList`,
  DITAILLIST: `${BASE_URL}/postings`,
  KEYWORDS: `${BASE_URL}/keywords/list`,
  LOGIN: `${BASE_URL}/users/signin`,
  DETAIL_PAGE: `${BASE_URL}/postings/detail`,
  RELATED: `${BASE_URL}/postings`,
};
今回は使い心地がよかったです.次回はプロジェクトからconfigを管理します.

実際の使用例


configを使用する場合は、上部で呼び出さなければ使用できません!!

[TIL]20210627
Web圧力テストツール-Siege