Ant Design Pro 从零到一（学习Model）

已于 2022-05-31 16:06:23 修改
阅读量3.3k 收藏 11
点赞数 4
分类专栏： Ant Design Pro 文章标签： reactjs es6 typescript less
于 2021-05-26 15:55:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40432886/article/details/117294772
版权

废话

学习了Mock、Service和page的基本相关知识，勉强能够将项目跑起来了，突然你会发现，哦豁，model为什么没有用到，这个是干嘛的呢？接下来我们就来学习一下。

建议

学习Model之前其实建议先去看看DVA的相关教程，有个理解，看起来不是那么费劲，或者你死记也可以。

这里推荐DVAJS进行学习入门课 | DvaJS https://dvajs.com/guide/introduce-class.html

为什么推荐先看看DVA呢？因为你看懂了那就很牛逼，看不懂了了解一下对下面也有帮助，因为Model就是用Dva写的。

model倒是是个啥

model其实就是对数据的处理过程又进行了一次封装。

一般来说在AntD中数据请求过程是这样的：

1.UI 组件交互操作；

2.调用 model 的 effect；

3.调用统一管理的 service 请求函数；

4.使用封装的 request.ts 发送请求；

5.获取服务端返回；

6.然后调用 reducer 改变 state；

7.更新 model。

通俗点来说，请求方式就是：

View->model->Service->后端（或Mock）

当然你也可以先之前写的一样

View->Service->后端（Mock）

学习Model

还是老样子，想看代码在学习：

import type {Effect} from "umi";
import {Reducer} from "umi";
import {getTableValue, selectTableValue} from "@/pages/table/service";

//设置类型
export type TableValue={
    key?: String;
    name?:String;
    age?:Number;
    address?: String;
    time?:String;
}
export type allValue = {
    tableValue?:TableValue;
}

export type TableModelType = {
    namespace:'tableDemo';
    state:allValue;
    effects:{
        getValue:Effect;
        selectValue:Effect;
    }
    reducers:{
        saveValue:Reducer<allValue>;
    }
}

/**
 * 上面函数的实现
 */
const TableModel:TableModelType={
    //命名空间
    namespace: "tableDemo",
    //设置state
    state: {
        tableValue:{},
    },
    //提供给view调用的接口
    effects: {
        *getValue(_,{call,put}){
            const res = yield call(getTableValue);
            yield put({
                type:'saveValue',
                payload:res
            })
        },

        *selectValue({payload},{call,put}){
            console.log("model:"+payload)
            const res = yield call(selectTableValue,payload);
            console.log(res)
            yield put({
                type:'saveValue',
                payload:res
            })
        }
    },
    //提供给effects通信put的接口
    reducers: {
        saveValue(date,action){
            return{
                ...date,
                tableValue: action.payload
            };
        }
    }

}
export default TableModel;

开始解释：

1、export type：类似定义一下数据结构，数据类型（?:表示非必须字段）

2、

export type TableModelType = {
    namespace:'tableDemo';
    state:allValue;
    effects:{
        getValue:Effect;
        selectValue:Effect;
    }
    reducers:{
        saveValue:Reducer<allValue>;
    }
}

学过java的可以把这个理解成你定义的接口，const TableModel:TableModelType是对你定义接口的实现；

然后我们分别来说一下，这部分结构都有什么东西：

  • namespace : model 的命名空间，Page连接时候要用到
  • state: 初始state
  • reducers: 同步的修改状态的操作，由actions触发(state,action) => state。说白了就是给efffects提供通信的接口，用来修改state
  • effects:异步的操作，并不直接修改state，由action触发，也可以调用actions。(action,{put,call,select})
  • subscriptions:异步的只读操作，并不直接修改state，可以调用actions。({ dispatch, history })

一个Model 一般都有 namespace、state、reducers、effects

3、来看看对接口的实现


/**
 * 上面函数的实现
 */
const TableModel:TableModelType={
    //命名空间
    namespace: "tableDemo",
    //设置state
    state: {
        tableValue:{},
    },
    //提供给view调用的接口
    effects: {
        *getValue(_,{call,put}){
            const res = yield call(getTableValue);
            yield put({
                type:'saveValue',
                payload:res
            })
        },

        *selectValue({payload},{call,put}){
            console.log("model:"+payload)
            const res = yield call(selectTableValue,payload);
            console.log(res)
            yield put({
                type:'saveValue',
                payload:res
            })
        }
    },
    //提供给effects通信put的接口
    reducers: {
        saveValue(date,action){
            return{
                ...date,
                tableValue: action.payload
            };
        }
    }

}

其中effects内我们可以看到有一个带*号的方法，这个玩意是提供给Page调用的，其中put、call、select是提供通信的，例如yield put（）是对reducers中的方法调用。yield call是去访问service中的方法。

来个Demo

配置路由：

{
                name: '表格通信练习',
                icon: 'book',
                path: '/table',
                component: './table'
              }

在page中添加table文件夹，创建index.tsx index.less model.ts service.ts

在mock文件夹下建立table.tx 如图：

page目录下：

image.png

mock目录下

image.png

接下来上代码（建议自己敲）

index.tsx

import {Button, Card, DatePicker, Form, Input, message, Modal, Popconfirm, Space, Table} from 'antd';
import React, {useState} from "react";
import {PageContainer} from "@ant-design/pro-layout";
import {connect} from "umi";
import Search from "antd/es/input/Search";
import styles from "./index.less"
import {TableValue} from "@/pages/table/model";
import moment from "moment";
import {addForm, deleteById} from "@/pages/table/service";
import emitter from './ev'

/**
 * 组件APP为Index主组件调用
 * 主要用作table组件渲染
 * 包含 AddUser 静态模框渲染
 *
 * 父组件：Index
 * 子组件：AddUser
 */
class App extends React.Component {
    constructor(props) {
        super(props);
    }

    //设置状态表示选中行
    state = {
        selectedRowKeys: [],
    };
    //将选中行存入state
    onSelectChange = selectedRowKeys => {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        this.setState({selectedRowKeys});
    };


    //删除
    confirm(e) {
        console.log(e);
        //调用Index的DeleteById函数与Service通信进行删除
        this.props.DeleteById(e);
        message.success('删除成功');
    }

    render() {
        const columns = [
            {
                title: 'Id',
                dataIndex: 'key',
            }, {
                title: '姓名',
                dataIndex: 'name',
            },
            {
                title: '年龄',
                dataIndex: 'age',
            },
            {
                title: '地址',
                dataIndex: 'address',
            }, {
                title: '时间',
                dataIndex: 'time',
            }, {
                title: '操作',
                //函数式声明：text表示当前行内容
                render: (text) => (<Space size="middle">
                    <Popconfirm //ant组件
                        title="您确定要删除吗？"
                        onConfirm={() => {
                            this.confirm(text.key); //调用当前confirm进行删除
                        }}
                        okText="确定"
                        cancelText="取消"
                    >
                        <Button danger type="primary">删除</Button>
                    </Popconfirm>
                    <AddUser valueTemp={"修改"} flag={true} value={text}/>
                </Space>)

            },
        ];

        //定义选中行keys
        const {selectedRowKeys} = this.state;
        //选择
        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
            selections: [
                Table.SELECTION_ALL,
                Table.SELECTION_INVERT,
                Table.SELECTION_NONE,
                {
                    key: 'odd',
                    text: 'Select Odd Row',
                    onSelect: (changeableRowKeys: any[]) => {
                        let newSelectedRowKeys = [];
                        newSelectedRowKeys = changeableRowKeys.filter((key, index) => {
                            if (index % 2 !== 0) {
                                return false;
                            }
                            return true;
                        });
                        this.setState({selectedRowKeys: newSelectedRowKeys});
                    },
                },
                {
                    key: 'even',
                    text: 'Select Even Row',
                    onSelect: (changeableRowKeys: any[]) => {
                        let newSelectedRowKeys = [];
                        newSelectedRowKeys = changeableRowKeys.filter((key, index) => {
                            if (index % 2 !== 0) {
                                return true;
                            }
                            return false;
                        });
                        this.setState({selectedRowKeys: newSelectedRowKeys});
                    },
                },
            ],
        };
        //渲染：this.props.values表示获取Index中的values值
        //将this.props.values(Index中的tableValue)值传给子组件Table
        return <>
            <Table rowSelection={rowSelection} columns={columns} dataSource={this.props.values}/>;
        </>
    }
};

/**
 * 添加/修改界面的静态模框
 * 父组件：APP、Index
 * 子组件：UserForm
 */
const AddUser = (props) => {
    //初始化组件状态，也就是静态模框状态，默认关闭
    const [isModalVisible, setIsModalVisible] = useState(false);
    const showModal = () => {
        setIsModalVisible(true);
        //展示时候打印是否是修改。后面要传值 UserForm => flag表示是否需要修改
        if (props.flag) {
            console.log("进入修改");
            console.log(props.value);
        }
    };

    const handleOk = () => {
        setIsModalVisible(false);
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };
    //Model=> visible:是否可见 onOK：点击确定回调  onCancel:点击取消回调  footer:底部是否可见
    return (
        <div>
            <div className={styles.float}>
                <Button onClick={showModal}>{props.valueTemp}</Button>
            </div>
            <Modal title="用户编辑" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} footer={null}>
                <UserForm handleCancel = {props.handleCancel} userInfo={props.value} flag={props.flag}/>
            </Modal>
        </div>
    );
};

/**
 * 表单组件
 * props：父界面 AddUser中的传入的props
 * 父组件：AddUser
 */
const UserForm = (props) => {
    const [form] = Form.useForm();

    //定义user继承TableValue,值从父组件中获取
    const user: TableValue = props.userInfo;
    console.log("表单渲染：");
    console.log(user);

    //如果是修改，则进行输入框赋值
    if (props.flag) {
        form.setFieldsValue({
            key: user.key,
            name: user.name,
            age: user.age,
            address: user.address,
            //moment函数 npm install moment  时间格式刷
            time: moment(user.time + "")
        })

    }
    //两个布局设置
    const layout = {
        labelCol: {span: 8},
        wrapperCol: {span: 16},
    };
    const tailLayout = {
        wrapperCol: {offset: 8, span: 16},
    };

    //点击确定后提交
    const onFinish = async (values: any) => {
        console.log(values);
        console.log(JSON.stringify(values));
        //异步调用Service
        const result = await addForm(values);
        console.log(result);
        //采用不通组件之间通信方式
        emitter.emit("callMe",result.data);
        // fetch不支持mock模拟数据，需要更换为./mock/xx.json/形式
        // fetch(`/api/addOrUpdate`,{
        //     method: 'POST',
        //     body:new FormData(values)
        // }).then(res => {
        //     console.log(res);
        //     res.text();
        // }).then(
        //     result => {
        //     }
        // )

    };
    //重置表单
    const onReset = () => {
        form.resetFields();
    };

    return (
        <Form {...layout} form={form} name="control-hooks" onFinish={onFinish} className="ant-col-8">
            <Form.Item name="key" label="ID" rules={[{required: false}]}>
                <Input/>
            </Form.Item>
            <Form.Item name="name" label="姓名" rules={[{required: true}]}>
                <Input/>
            </Form.Item>
            <Form.Item name="age" label="年龄" rules={[{required: true}]}>
                <Input/>
            </Form.Item>
            <Form.Item name="address" label="地址" rules={[{required: true}]}>
                <Input/>
            </Form.Item>
            <Form.Item name="time" label="时间" rules={[{required: true}]}>
                <DatePicker showTime format="YYYY-MM-DD HH:mm:ss"/>
            </Form.Item>
            <Form.Item {...tailLayout}>
                <Button type="primary" htmlType="submit">
                    提交
                </Button>
                <Button htmlType="button" onClick={onReset} className={styles.buttons}>
                    重置
                </Button>
            </Form.Item>
        </Form>
    );
};


class Index extends React.Component {
    private eventEmitter: any;

    //设置构造函数
    constructor(props) {
        super(props);
        this.state = {tableValue: this.props.tableValue};
        //将函数进行绑定，必须绑定
        this.DeleteById = this.DeleteById.bind(this);
    }

    //当props发生变化时执行，初始化render时不执行
    componentWillReceiveProps(props) {
        if (props.tableValue !== this.props.tableValue) {
            this.setState({tableValue: props.tableValue});
        }
    }

    //初始化render之后只执行一次
    componentDidMount(){
        // 声明一个自定义事件
        // 在组件装载完成以后
            this.eventEmitter = emitter.addListener("callMe",(msg)=>{
            this.setState({tableValue:msg})
        });
    }

    // 组件销毁前移除事件监听
    componentWillUnmount(){
    }
    //行一次，在初始化render之前执行
    componentWillMount() {
        this.getValue();
    }


    getValue = () => {
        const {dispatch} = this.props;
        //调用Model
        dispatch({
            type: 'tableDemo/getValue',
            payload: {},
        });
    };

    //异步调用移除
    async DeleteById(key) {
        console.log("父组件方法 移除：");
        console.log(key);
        //调用Service
        const result = await deleteById(key);
        this.setState({tableValue: result.data})
    }


    render() {
        const onSearch = value => {
            console.log("进入：value：" + value);
            const {dispatch} = this.props;
            //调用Model
            dispatch({
                type: 'tableDemo/selectValue',
                payload: value,
            });
        };


        return <div>
            <PageContainer>
                <Card>
                    <div className={styles.top}>
                        <Search className={styles.search}
                                placeholder="请输入查询关键字"
                                allowClear
                                enterButton="查询"
                                size="middle"
                                onSearch={onSearch}
                        />
                        <div className={styles.add}>
                            <AddUser  valueTemp={"添加"} flag={false} value={null}/>
                        </div>
                    </div>
                    <App DeleteById={this.DeleteById} values={this.state.tableValue}/>
                </Card>
            </PageContainer>
        </div>
        //rander运行结束后移除 PS：这个写法不正规，但是能用
        emitter.removeListener(this.eventEmitter);
    }
}
//设置绑定的返回数据
const mapStateToProps = (state) => {
    return {
        tableValue: state.tableDemo.tableValue.data,
    }
}
//连接
export default connect(mapStateToProps)(Index);

index.less

.top{
  display: flex;
  padding-bottom: 1rem;
  .search{
    width: 15rem;
  }
  .add{
    margin-left: auto;
    .exchange{
      margin-right: 1rem;
    }
  }

}

.buttons{
  margin-left: 1rem;
}

:global{
  .ant-col-8 {
    display: block;
    /* flex: 0 0 33.33333333%; */
    max-width: 76.33333333%;
  }
}

model.ts

import type {Effect} from "umi";
import {Reducer} from "umi";
import {getTableValue, selectTableValue} from "@/pages/table/service";

//设置类型
export type TableValue={
    key?: String;
    name?:String;
    age?:Number;
    address?: String;
    time?:String;
}
export type allValue = {
    tableValue?:TableValue;
}

export type TableModelType = {
    namespace:'tableDemo';
    state:allValue;
    effects:{
        getValue:Effect;
        selectValue:Effect;
    }
    reducers:{
        saveValue:Reducer<allValue>;
    }
}

/**
 * 上面函数的实现
 */
const TableModel:TableModelType={
    //命名空间
    namespace: "tableDemo",
    //设置state
    state: {
        tableValue:{},
    },
    //提供给view调用的接口
    effects: {
        *getValue(_,{call,put}){
            const res = yield call(getTableValue);
            yield put({
                type:'saveValue',
                payload:res
            })
        },

        *selectValue({payload},{call,put}){
            console.log("model:"+payload)
            const res = yield call(selectTableValue,payload);
            console.log(res)
            yield put({
                type:'saveValue',
                payload:res
            })
        }
    },
    //提供给effects通信put的接口
    reducers: {
        saveValue(date,action){
            return{
                ...date,
                tableValue: action.payload
            };
        }
    }

}
export default TableModel;

service.ts

import request from "@/utils/request";

//异步调用
export async function getTableValue(){
    return request('/api/tableDemo');
}

export async function selectTableValue(temp: String){
    console.log("service:"+temp);
    return request(`/api/tableDemo?temp=${temp}`);
}

export async function deleteById(id: String){
    console.log("service:"+id);
    return request(`/api/deleteById`,{
        method:'POST',
        data:{'id':id},
    });
}
export async function addForm(formData:any){
    console.log("进入service:",formData);
    return request('/api/addOrUpdate',{
        method:'POST',
        data:formData
    });
}

ev.ts

import { EventEmitter } from "events";
export default new EventEmitter();

// npm install events --save

PS:ev.ts是用于组件之间通信的，在使用之前请先执行

 npm install events --save

相关链接

上一篇：👀

Ant Design Pro从零到一（Mock使用）

下一篇：👀

Ant Design Pro 从零到一 （总结）

Ant Design Pro 系列：👀

Ant Design Pro 从零到一教程

React从零到一Demo演练（上）

React从零到一Demo演练（下）

Ant Design Pro从零到一（认识AntD）

Ant Design Pro从零到一（页面创建）

Ant Design Pro从零到一（Mock使用）

Ant Design Pro 从零到一（学习Model）

Ant Design Pro 从零到一 （总结）

sirwsl
关注
  • 4
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
专栏目录
Ant-Design-组件-——-Modal
weixin_43818482的博客
01-02 577
用法 1. 引入 Modal 组件 import { Modal } from 'antd'; 2. 定义组件属性 参数 说明 类型 默认值 title 标题 string 或者 ReactNode 无 visible 对话框是否可见 boolean 无 onCancel 取消回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 functio...
ant.design-pro使用useModel传递全局数据
zh0623的博客
06-22 3343
示例图: 三个组件的数量可以共享使用方法在src目录下models文件夹,新建一个文件,文件名就是引入的数据对象1.2.完整代码/src/models/product.ts import { useState, useCallback } from 'react' export default () => { const [count, setCount] = useState(0) // 增加数量 const addCount = useCallback((val:
ant design pro 的model，service，connect的使用以及如何调取后端服务器的数据并渲染到本地
Jordan_Lierge的博客
03-20 2318
ant design pro的model书写规范： 首先定义好自己的数据类型 export interface TagType { id: number; history_ip: string; history_datetime: string; history_cpu_load: number; history_disk_usage: number; history_me...
前端初学者的Ant Design Pro V6总结（上）
SpringWaterLikeMe
01-18 5291
/ 添加跨域请求头在locales > zh-CN / zh-CN 定义常量Model采用约定式目录结构，约定在src/models和Model即命名空间，它可以划分数据流，src/models/count.ts命名空间即count，src/pages/pageA/model.ts命名空间即pageA.model。src/models目录下不支持目录嵌套定义 model下 model 定义支持嵌套定义Model就是个自定义Hooks，它需要一个默认导出的函数。
ant design pro dva model 使用示例
lvzhyt的专栏
09-16 975
ant design pro dva model 使用示例 创建项目 参考：https://pro.ant.design/docs/getting-started-cn yarn create umi 选择ant-design-pro： npm install npm start 可以使用 yarn 新建文件 pages>DemoPage> model.ts import { Reducer, Effect } from 'umi'; import { Connect...
ant design pro动态菜单
05-18
Ant Design Pro是一款基于React的UI组件库，专为企业级后台管理系统设计，它提供了一整套完善的设计体系、丰富的组件以及强大的开发工具，使得开发者能够快速构建出美观且高效的管理界面。动态菜单是Ant Design Pro...
Ant Design以及Ant Design Pro入门.zip
最新发布
10-10
这个名为"Ant Design以及Ant Design Pro入门.zip"的压缩包文件包含了学习这两个框架的基础资源，包括代码示例、相关资料和讲义，旨在帮助初学者快速掌握ReactJS、Ant Design和Ant Design Pro的基本用法。 ReactJS是...
blog:个人博客（Golang + Ant Design Pro 4）
03-21
综上所述，结合Golang Gin、MySQL数据库、Ant Design Pro 4以及JavaScript，我们可以构建一个高效、美观且功能完善的个人博客系统。通过合理的代码组织和模块划分，可以确保项目易于理解和维护，同时也便于添加新的...
Vue版AntDesignPro基于Elementui实现
08-10
Vue版Ant Design Pro是针对Vue.js框架的一种实现，它借鉴了Ant Design Pro的设计理念和组件库，但将底层UI框架替换为了Element-ui。Element-ui是一款轻量级且高度可定制的Vue组件库，广泛用于构建企业级后台管理系统...
ant-design-draggable-modal:Ant Design的Modal，可拖动
05-02
Ant Design的模态，可拖动。 :globe_showing_Americas: :sparkles: 特征 用标题栏拖动。 调整大小与句柄。 保持界限。 在拖动过程中。 调整大小期间。 在调整窗口大小期间。 具有托管zIndex多个模态。 从...
Ant Design Model 实时更新数据采坑日记
u011487710的博客
08-28 6476
更新一条记录，不在重新刷新所有记录 1 尝试 reducers: { save(state, action) { return { ...state, data: action.payload, }; }, edit(state, action) { console.log(state); ...
React开发（257）:react项目理解 ant design model提示问题
歌谣的博客
12-01 157
React结合Ant Design Pro开发项目理解（service、model、index等文件逻辑关系）
luotouzi的博客
08-06 1667
组件中传值 react——值写在了视图层 Antd pro——值写在model层，通过saveState扩展表达式，把值更新到state后会触发视图层的render方法【通过props获取model中的值】 下图是整个项目各模块的关系 大概流程是UI组件间的交互操作，首先调用Model中的effects，Model通过effects调用Service（封装了request请求）中的请求函数来发起请求，获取服务端返回的响应后，调用reducers来改变state，更新View service文件编写对应
前端学习案例-ant design model实现图片预览
qq_41632427的博客
08-25 409
前端
antd pro 中的 dva 组件page层连接model
zhangyubababa的博客
04-15 305
antd弹窗model组件DIY 模板
zhangyubababa的博客
11-15 938
Model组件： import React, { useState, useEffect } from 'react'; import { Modal, Button, Form, DatePicker, Input } from 'antd'; import { useIntl, connect } from 'umi'; const ResetModel = (props) => { const { dispatch, isModalVisible, setVisible } = pro
antd model 组件的复用（hooks）
zhangyubababa的博客
04-20 898
场景：当很多个 1结构类似的 modle 弹窗 出现时：可以采用以下办法 用hooks 巧妙 复用。 modle1： <div className={styles.toollink} onClick={() => { setModalTitle(intl.formatMessage({ id: 'pcHome.toolbarItem1' })); setModalConte
Ant design pro常用组件( 1 ):Modal的常用写法
好气嗷，但仍要保持微笑!
11-09 982
import {Modal } from 'antd'; class CustomerDetail extend Component{ render(){ return ( <Modal width={750} title='' visible={this.state.isVisible} footer={null} destroyOnClose
antd-design model 数据特点
weixin_30475039的博客
12-20 192
转载于:https://www.cnblogs.com/winyh/p/10151675.html
AntDesignPro开发手册.doc
12-13
AntDesignPro开发手册.doc

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

sirwsl

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值