ant-design-pro 前端框架視頻進階學習

觀看教學視頻

package.json

使用的前端技術依賴插件

布局

主頁 中間使用的 左右伸拉布局 類似於 Layopu布局的側邊布局

主頁 上面 使用的上下布局

組件技術

圖標 折線圖等組件

使用的自己喜得兒Antv的G2

卡片和表單

使用 Ant Design的組件

新建頁面

一個React組件例子

基本頁面

pageheaderWrapper 頭部導航

import React, { Component } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card } from 'antd';
class Index extends Component{
  render(){
    return (
      <PageHeaderWrapper>
      <Card bordered={false}>
      我的New Page
      </Card>
      </PageHeaderWrapper>
      );
  }
}

export default Index;

登錄

流程

Model層

使用<DVA進行請求調用>

index層

智能提示

調用model方法

執行model方法

跳轉頁面失敗

加載BasicLayout.tsx 之前SecurityLayout.tsx給攔截了

調用登錄后端接口的倆種方式{反向代理}

1、
2、（全局）常量路徑

后端參數處理

主頁頭部