Ant Design Pro (二) 添加頁面+使用mock(無model)

1. 建立ant design pro simple代碼

simple代碼指
[官方入門指引](https://pro.ant.design/zh-CN/docs/getting-started)
cnpm install
cnpm run start
之後網頁輸入IP:8000顯示登入界面登入之後如下

2. 目錄建立頁面檔案

1) 在src/pages/ 建立Demo目錄
2) 在Demo目錄下建立index.tsx 和 index.less兩個檔案
參考 [新增頁面](https://pro.ant.design/zh-CN/docs/new-page)
3) index.tsx添加代碼

import { Card, Tabs, Input, Typography, Space } from 'antd';
import styleObj from '../components/style'

import React from 'react';
import { useState } from 'react';
import { postData, getData } from '@/services/demo';

const { Text } = Typography;
const { Search } = Input;

const DemoPage: React.FC = () => {
    const [currentKey, setCurrentKey] = useState("1");
    const [tabText1, setTabText1] = useState("Tab1");
    const [tabText2, setTabText2] = useState("Tab2");
    const [tabText3, setTabText3] = useState("Tab3");

    const handleOnChange = (key:string) => {
        console.log("handleOnChange: " + key);
        setCurrentKey(key)
    }

    async function onSearch (text:string) {
        console.log("Current Key: ", currentKey, ", On Search Text: ", text)
        
        let dat = { text: text }
        switch (currentKey) {
            case '1': {
                let result = await postData(dat);
                let res = result.data.text
                setTabText1(res)
                break;
            };
            case '2': {
                let result = await getData(dat);
                let res = result.data.text
                setTabText2(res)
                break;
            }
            case '3': {
                let result = await postData(dat);
                let res = result.data.text
                setTabText3(res)
                break;
            }
            default: {
                console.log("On Search: Error Key");
                break;
            }
        }
    }
    return (
        <div className="site-card-border-less-wrapper">
        <Card title='demo_page' style={styleObj.CardStyle}
        headStyle =  {styleObj.HeadStyle}
        >
        <Tabs defaultActiveKey="1" activeKey={ currentKey } onChange={ handleOnChange }>
        <Tabs tab="Demo_Tab_1" key="1"/> 
        <Tabs tab="Demo_Tab_2" key="2"/>
        <Tabs tab="Demo_Tab_3" key="3"/>
        </Tabs>
        {
            currentKey === '1' && (
                <Space direction="vertical">
                    <Search placeholder="input search text1" onSearch={onSearch} enterButton />
                    <Text> { tabText1 } </Text>
                </Space>
            )
        }
        {
            currentKey === '2' && (
                <Space direction="vertical">
                    <Search placeholder="input search text2" onSearch={onSearch} enterButton />
                    <Text> { tabText2 } </Text>
                </Space>
            )
        }
        {
            currentKey === '3' && (
                <Space direction="vertical">
                    <Search placeholder="input search text3" onSearch={onSearch} enterButton />
                    <Text> { tabText3 } </Text>
                </Space>
            )
        }
        </Card>
        </div>
    );
};

export default DemoPage;

3. 添加目前頁面到路由

config/routes.ts 添加如下代碼

{
    path: '/demo',
    name: 'demo',
    icon: 'smile',
    component: './Demo',
  },

最終檔案

export default [
  {
    path: '/user',
    layout: false,
    routes: [
      {
        path: '/user',
        routes: [
          {
            name: 'login',
            path: '/user/login',
            component: './user/Login',
          },
        ],
      },
      {
        component: './404',
      },
    ],
  },
  {
    path: '/welcome',
    name: 'welcome',
    icon: 'smile',
    component: './Welcome',
  },
  {
    path: '/admin',
    name: 'admin',
    icon: 'crown',
    access: 'canAdmin',
    component: './Admin',
    routes: [
      {
        path: '/admin/sub-page',
        name: 'sub-page',
        icon: 'smile',
        component: './Welcome',
      },
      {
        component: './404',
      },
    ],
  },
  {
    name: 'list.table-list',
    icon: 'table',
    path: '/list',
    component: './TableList',
  },
  {
    path: '/demo',
    name: 'demo',
    icon: 'smile',
    component: './Demo',
  },
  {
    path: '/',
    redirect: '/welcome',
  },
  {
    component: './404',
  },
];

Ant Design Pro (二) 添加頁面+使用mock(無model)

4. 添加mock代碼

mock 目錄下建立demo.ts, 添加如下代碼

import {Request,Response} from "express";

const getData = async (req:Request,res:Response)=>{
    const result = {
        success:true,
        data:{
            "text": "MOck Get Test"
        }
    };
    return res.json(result);
}

const postData = async (req:Request,res:Response)=>{
    const result = {
        success:true,
        data:{
            "text": "MOck Post Test"
        }
    };
    return res.json(result);
}

export default {
    'GET /api/getData':getData,
    'POST /api/postData':postData,
}

5. 添加service代碼

src/services 目錄下建立檔案 demo.ts

import {request} from "umi";
import {stringify} from 'qs';

export async function postData(params:any){
    return request('/api/postData', {
        method: 'POST',
        data: params
    });
}

export async function getData(params:any){
    return request(`/api/getData?${stringify(params)}`);
}

6. 調用service通路mock測試資料

src/pages/Demo/index.tsx 修改代碼如下

import { Card, Tabs, Input, Typography, Space } from 'antd';
import styleObj from '../components/style'

import React from 'react';
import { useState } from 'react';
import { postData, getData } from '@/services/demo';

const { Text } = Typography;
const { Search } = Input;

const DemoPage: React.FC = () => {
    const [currentKey, setCurrentKey] = useState("1");
    const [tabText1, setTabText1] = useState("Tab1");
    const [tabText2, setTabText2] = useState("Tab2");
    const [tabText3, setTabText3] = useState("Tab3");

    const handleOnChange = (key:string) => {
        console.log("handleOnChange: " + key);
        setCurrentKey(key)
    }

    async function onSearch (text:string) {
        console.log("Current Key: ", currentKey, ", On Search Text: ", text)
        
        switch (currentKey) {
            case '1': {
                let result = await postData(text);
                let res = result.data.text
                setTabText1(res)
                break;
            };
            case '2': {
                let result = await getData(text);
                let res = result.data.text
                setTabText2(res)
                break;
            }
            case '3': {
                let result = await postData(text);
                let res = result.data.text
                setTabText3(res)
                break;
            }
            default: {
                console.log("On Search: Error Key");
                break;
            }
        }
    }
    return (
        <div className="site-card-border-less-wrapper">
        <Card title='demo_page' style={styleObj.CardStyle}
        headStyle =  {styleObj.HeadStyle}
        >
        <Tabs defaultActiveKey="1" activeKey={ currentKey } onChange={ handleOnChange }>
        <Tabs tab="Demo_Tab_1" key="1"/> 
        <Tabs tab="Demo_Tab_2" key="2"/>
        <Tabs tab="Demo_Tab_3" key="3"/>
        </Tabs>
        {
            currentKey === '1' && (
                <Space direction="vertical">
                    <Search placeholder="input search text1" onSearch={onSearch} enterButton />
                    <Text> { tabText1 } </Text>
                </Space>
            )
        }
        {
            currentKey === '2' && (
                <Space direction="vertical">
                    <Search placeholder="input search text2" onSearch={onSearch} enterButton />
                    <Text> { tabText2 } </Text>
                </Space>
            )
        }
        {
            currentKey === '3' && (
                <Space direction="vertical">
                    <Search placeholder="input search text3" onSearch={onSearch} enterButton />
                    <Text> { tabText3 } </Text>
                </Space>
            )
        }
        </Card>
        </div>
    );
};

export default DemoPage;

7. 最終呈現

Ant Design Pro (二) 添加頁面+使用mock(無model)

其他文章

Ant design pro (一) 環境搭建篇

Ant Design Pro (三) Golang+Gin後端簡單實作

元件文檔

Ant Design Pro元件文檔

錯誤處理：

提示qs錯誤，注釋掉config目錄下config.ts 檔案下的mfsu

方式一: 實時速度變慢 // mfsu: {},

方式二: mfsu: {production: { output: ‘.mfsu-production’ }}

方式二同時需要删除掉src/.umi目錄

參考

https://github.com/umijs/umi/issues/6766

https://blog.csdn.net/w544924116/article/details/120123331

示例程式

Ant Design Pro (二) 添加頁面+使用mock(無model)

1. 建立ant design pro simple代碼

2. 目錄建立頁面檔案

3. 添加目前頁面到路由

4. 添加mock代碼

5. 添加service代碼

6. 調用service通路mock測試資料

7. 最終呈現

其他文章

元件文檔

錯誤處理：

繼續閱讀

React中對于this.setState參數為函數或對象的問題。

react input Onchange事件不能立刻拿到值，隻能拿到上次輸入的值

SetState的進階用法

setState詳解

setState 說明1.11.21.3

React中setState的怪異行為 ——setState沒有即時生效

你真的了解 setState 嗎？1、為什麼需要 setState2、什麼是 setState3、setState 用法4、state 的不可變性5、setState 到底是異步還是同步？6、源碼解讀

react學習6-React 元件接收資料props和類元件狀态state元件接收資料props類元件狀态state

react元件的生命周期的介紹以及适用場景

6.25 react setState異步的坑setState向事件回調函數傳參

React Native For Android初體驗

Vue實作元件的局部重新整理

react 之 openlayer 繪制幾何圖形

React實作聊天機器人

React中less的引用初窺

web開發之前後端渲染