Ant-design-proハンドメモ

6644 ワード
ANtd
この文書はAnt Design Pro 1.1.0バージョンに基づいています.参照する前にバージョン情報に注意してください.
Ant Design Pro アリの金服チームがAnt Designの設計規範とコンポーネントライブラリに基づいて発表したReact実装のエンタープライズクラスのバックグラウンドフロントエンド/設計ソリューションです.
に手を触れる
使用方法は、GitHub倉庫を直接cloneして実行します.  npm install、または公式に提供されているcliツールをインストールしてプロジェクトを作成します(ただし、このプロセスではcloneのGitHub倉庫にも関連します).新しいプロジェクトが作成されると、テンプレートページとツールチェーンが付属し、迅速に変更できます.
git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project
cd my-project
npm install

開発者にとって、もちろんプロジェクトを迅速に自分のニーズに合わせることです.公式には中国語のドキュメントが提供されていますが、コンテンツの組織はこまごましています.ここでは、サンプルページの を例に簡単に整理し、このフレームワークを素早く手に入れるのに役立つようにしたいと思います.
インストールが完了したら、実行します.  npm run start  ローカル開発サーバを起動すると、スクリプトが自動的にパッケージ化されます.Ant Design Proのデフォルトはブラウザが一方的に処理できる  HashHistory  で行ないます.に切り替えるには  BrowserHistory、それは  src/index.js  には対応するコンテンツも直接変更できますが、バックエンドサーバで対応するルーティング構成が必要です.
ルーティングからコンポーネントへ
左側のナビゲーションバーでクリックします  >  すると、上のスクリーンショットに示すページにアクセスできます.ナビゲーションバーの内容は  src/common/menu.js  で、
/*      
 * src/common/menu.js
 */

{
  name: '   ',
  icon: 'table',
  path: 'list',
  children: [{
    name: '    ',
    path: 'table-list',
  }, {
    name: '    ',
    path: 'basic-list',
  }
  ...],
}

グローバルなルーティング関係は、src/index.jsの方向性です. に合格  app.router(require('./router').default);  src/router.js  バインド先  dva  インスタンス  router  方法上.そして  src/router.js  に導入されました  src/common/router.js  タブで行います.  getRouterData  データソースとして使用します.少し回り道をしていて、すぐに理解できない場合は、次の結論を直接覚えておきます.
したがって、src/common/menu.js 中  path  指定されたパスは  src/common/router.js  に表示されます.
/*     
 * src/common/router.js
 */

export const getRouterData = (app) => {
  const routerConfig = {
    ...,
    '/list/basic-list': {
      component: dynamicWrapper(app, ['list'], () => import('../routes/List/BasicList')),
    },
    ...,
  };
  ...
}

ここでは、同じファイル内のlazy-loadingの動的ロード関数を呼び出します.  dynamicWrapper、3つのパラメータがあり、app グローバル  dva  例、modelsは、関連付けられた  dva  Model 1 のArray,component すなわち、このルーティングレコードに対応する実際のコンポーネントである.
const dynamicWrapper = (app, models, component) => {...};

順藤が瓜を触ったら開けましょう  src/routes/List/BasicList.js、具体的なコンポーネントの考察を開始します.
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';

@connect(({ list, loading }) => ({
  list,
  loading: loading.models.list,
}))
export default class BasicList extends PureComponent {
  componentDidMount() {
    this.props.dispatch({
      type: 'list/fetch',
      payload: {
        count: 5,
      },
    });
  }

  render() {
    return (
      {/*        */}
    );
  }
}

@connectアクセサリ
最初のコンポーネント書き方で呼び出しました  dva  カプセル化された  react-redux  の  @connect  アクセサリー、バインドを受信するための  list  このモデルに対応するredux store.ここの装飾器は実際には  app.state.list  実際に受信する  app.state.loading  パラメータとして、これ  loading  のソースは  src/index.js  で呼び出された  dva-loading  2 このプラグイン.
/*
* src/index.js
*/
import createLoading from 'dva-loading';
app.use(createLoading());

返される情報にはglobal、model、effectの非同期ロード完了が含まれます.
{
  "global": true,
  "models": {
    "list": false,
    "user": true,
    "rule": false
  },
  "effects": {
    "list/fetch": false,
    "user/fetchCurrent": true,
    "rule/fetch": false
  }
}

ここで持っていくことに気づきました  {count: 5}  このpayloadはstoreにタイプを行いました.  list/fetch  では、私たちは  src/models/list.js  に表示されます.
import { queryFakeList } from '../services/api';

export default {
  namespace: 'list',

  state: {
    list: [],
  },

  effects: {
    *fetch({ payload }, { call, put }) {
      const response = yield call(queryFakeList, payload);
      yield put({
        type: 'queryList',
        payload: Array.isArray(response) ? response : [],
      });
    },
    /* ... */
  },

  reducers: {
    queryList(state, action) {
      return {
        ...state,
        list: action.payload,
      };
    },
    /* ... */
  },
};

バックエンドシミュレーションデータ
上の分析では  list/fetch  payloadを持ち込むペアになります  src/services/api  中  queryFakeList  に表示されます.
export async function queryFakeList(params) {
  return request(`/api/fake_list?${stringify(params)}`);
}

ここまで来ると、バックエンドインタラクションが発生し始めます.ルートディレクトリの下に下がった  .roadhogrc.mock.js  この書類.Ant Design Proはそのまま roadhog に付属しているmock機能は、ここで簡単に検索すると具体的なmock転送構成が表示されます.
import { getActivities, getNotice, getFakeList } from './mock/api';

const proxy = {
  // ...,
  'GET /api/fake_list': getFakeList,
};

では、私たちは  mock/api.js  JSONコンテンツの生成が見られます.
開発環境では、前後開発サーバがlocalhostの異なるポートに配備されることが多く、この問題は前後分離モデルの開発者を悩ませることが多い.しかしroadhogがあった後、上記の  .roadhogrc.mock.js  少し修正すると、フロントエンドの開発サーバ上でローカルの反世代を「構築」することができ、この問題を簡単に回避できます.
ローカル開発におけるドメイン間問題
ほとんどのブラウザはfetchにHTTPSで行うように要求していますが、localhostにはローカル赦免があり、HTTPの下のfetchリクエストには問題はありません.△しかし、localhostにhostsルールを作ったら、ローカル開発の赦免は適用されません.
また、ローカルの場合、ブラウザはCORSドメイン間チェックを強制し、バックエンドポートが設定されていない場合は  Access-Control-Allow-Origin  応答ヘッダは依然としてドメイン間セキュリティの問題に直面します.roadhogが提供するこの機能は、ローカル開発デバッグのドメイン間問題をうまく解決します.
// FROM https://github.com/sorrycc/roadhog#proxy
"proxy": {
  "/api": {
    "target": "http://localhost:8080",
    "changeOrigin": true,
    "pathRewrite": { "^/api" : "" }
  }
}

締めくくりcreate-react-app  基本的なツールチェーンを予め配置しておき、フロントエンドのプロジェクトをすぐに手に入れることができます.Ant Design Proという足場には、より完全な開発ツールチェーンが予め配置されており、前後のインタラクティブな開発を迅速に行うことができます.上手な主な難点は,膨大なエンジニアリング構造を理解し,より膨大な依存チェーンを理解することである.
作者のレベルが限られているので、漏れがあれば指摘してください.
について  dva  のモデルの概念は Andt Designプロジェクトの実践-Modelを定義し、 dvaの実際の応用についてのいくつかの経験と疑問 ↩
について  dva-loading、表示 dva-loading実践用法 ↩
CSSセレクタ学習ノート
52の有効なメソッド(18)-可変オブジェクトをできるだけ使用