1. 程式人生 > 實用技巧 >ant-design-pro 前端框架視訊進階學習

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方法


跳轉頁面失敗

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

呼叫登入後端介面的倆種方式{反向代理}

1、
2、(全域性)常量路徑

後端引數處理