9.1 项目工程化

文章目录

9.1 项目工程化

一项目工程化概念
二 BaseForm的封装

2.0 项目工程化
2.1 Utils 代码
2.2 BaseForm组件代码
2.3 Order组件代码

三 axios封装

3.1 axios 代码
3.2 Order代码

Github项目工程化

一项目工程化概念

二 BaseForm的封装

城市管理中FilterForm子组件：

订单管理中FilterForm子组件：

员工管理中FilterForm子组件：

Github地址

2.0 项目工程化

components->BaseForm->index.js
关键：抽象出formList，根据formList中的item.type判断要渲染的AnTD表单类型

const formList =this.props.formList;

实现表单数据的双向绑定：getFieldDecorator

const {getFieldDecorator } = this.props.form;
 
<FormItem label={label} key={field}>
          {
              getFieldDecorator([field])(
                   <Input type="text" style={{width: width}} placeholder={placeholder}/>
              )
          }
</FormItem>

获取组件中全部表单控件的内容：getFieldsValue()

 handleFilterSubmit = () => {
    let fieldsValue = this.props.form.getFieldsValue();// 获取表单的值
    this.props.filterSubmit(fieldsValue); // 将子组件的值传递到父组件(order.js)
  };
//order->index.js中
<BaseForm formList={this.formList} filterSubmit={this.handleFilter}/>
 
handleFilter = (params) => {
        this.params = params;
        this.requestList();
}

order->index.js中：按照AntD 的getFieldDecorator.option规则定义formList数据

formList = [
    {
      type: 'SELECT',
      label: '城市',
      field:'city',
      placeholder:'全部',
      initialValue:'1',
      width:80,
      list:[{id:'0',name:'全部'},{id:'1',name:'北京'},{id:'2',name:'天津'},{id:'3',name:'上海'}]
    },
/*    {
      type: 'INPUT',
      label: '模式',
      field:'mode',
      placeholder:'请输入模式',
      width:100,
    },*/
    {
      type: '时间查询',
    },
    {
      type: 'SELECT',
      label: '订单状态',
      field:'order_status',
      placeholder:'全部',
      initialValue:'1',
      width:100,
      list:[{id:'0',name:'全部'},{id:'1',name:'进行中'},{id:'2',name:'结束行程'}]
    },
  ];

2.1 Utils 代码

//src/utils/utils.js
import React from 'react';
import {Select} from 'antd';
const Option = Select.Option;

export default {
...

    // 封装Option 外层接收data
    getOptionList(data){
        if (!data) {
          return []
        }
        let options = []//[<Option value="0" key="all_key">全部</Option>]

        data.map((item) => {
            //在options 中添加option 对象
            options.push(<Option value={item.id} key={item.id}>{item.name}</Option>)
        })

        return options;
    }
}

2.2 BaseForm组件代码

// src/components/BaseForm/index.js
import React from 'react';
import {Input, Select, Form, Button, Checkbox, Radio,DatePicker} from "antd";
import Utils from '../../utils/utils';

const FormItem = Form.Item;

class FilterForm extends React.Component {

  handleFilterSubmit = () => {
    let fieldsValue = this.props.form.getFieldsValue();// 获取表单的值
    this.props.filterSubmit(fieldsValue); // 将子组件的值传递到父组件(order.js)
  };

  reset = () => {
    this.props.form.resetFields(); // 重置表单的方法
  };

  initFormList = () => {
    const {getFieldDecorator} = this.props.form;
    const formList = this.props.formList; // 从父组件Order.js 中获取该对象进行使用
    const formItemList = [];
    if (formList && formList.length > 0) {
      formList.forEach((item, i) => {
        let label = item.label;
        let field = item.field;
        let initialValue = item.initialValue || ''; //默认给空字符串
        let placeholder = item.placeholder;
        let width = item.width;

        if (item.type == '时间查询') {
          const begin_time = <FormItem label="订单时间" key={field}>
            {
              getFieldDecorator('begin_time')(
                <DatePicker showTime={true} placeholder={placeholder} format="YYYY-MM-DD HH:mm:ss"/>
              )
            }
          </FormItem>;
          formItemList.push(begin_time);

          const end_time = <FormItem label="~" colon={false} key={field}>
            {
              getFieldDecorator('end_time')(
                <DatePicker showTime={true} placeholder={placeholder} format="YYYY-MM-DD HH:mm:ss"/>
              )
            }
          </FormItem>;
          formItemList.push(end_time);

        } else if (item.type == 'INPUT') {
          // 中括号 [变量]  ,会将其看作变量对待
          const INPUT = <FormItem label={label} key={field}>
            {
              getFieldDecorator([field], {
                initialValue: initialValue
              })(
                <Input type="text" placeholder={placeholder}/>
              )
            }
          </FormItem>;
          formItemList.push(INPUT);
        } else if (item.type == 'SELECT') {
          // 中括号 [变量]  ,会将其看作变量对待
          const SELECT = <FormItem label={label} key={field}>
            {
              getFieldDecorator([field], {
                initialValue: initialValue
              })(
                <Select
                  style={{width: width}}
                  placeholder={placeholder}
                >
                  {Utils.getOptionList(item.list)}
                </Select>
              )
            }
          </FormItem>;
          formItemList.push(SELECT);
        } else if (item.type == 'CHECKBOX') {
          const CHECKBOX = <FormItem label={label} key={field}>
            {
              getFieldDecorator([field], {
                valuePropName: 'checked', // 设置checkbox的属性
                initialValue: initialValue // true | false
              })(
                <Checkbox>
                  {label}
                </Checkbox>
              )
            }
          </FormItem>;
          formItemList.push(CHECKBOX);
        }
      });
    }
    return formItemList;
  };

  render() {
    return (
      <Form layout="inline">
        {this.initFormList()}
        <FormItem>
          <Button type="primary" style={{margin: '0 20px'}} onClick={this.handleFilterSubmit}>查询</Button>
          <Button onClick={this.reset}>重置</Button>
        </FormItem>
      </Form>
    );
  }
}

export default Form.create({})(FilterForm);

2.3 Order组件代码

// src/pages/order/index.js
import React from 'react';
import {Card, Table, Form, Modal, Button, message, Select, DatePicker,} from 'antd';
import axios from './../../axios/index';
import Utils from './../../utils/utils';
import BaseForm from '../../components/BaseForm';

const FormItem = Form.Item;

export default class Order extends React.Component {
  state = {
    orderInfo: {},
    orderConfirmVisble: false
  };

  params = {
    page: 1
  };

  formList = [
    {
      type: 'SELECT',
      label: '城市',
      field:'city',
      placeholder:'全部',
      initialValue:'1',
      width:80,
      list:[{id:'0',name:'全部'},{id:'1',name:'北京'},{id:'2',name:'天津'},{id:'3',name:'上海'}]
    },
/*    {
      type: 'INPUT',
      label: '模式',
      field:'mode',
      placeholder:'请输入模式',
      width:100,
    },*/
    {
      type: '时间查询',
    },
    {
      type: 'SELECT',
      label: '订单状态',
      field:'order_status',
      placeholder:'全部',
      initialValue:'1',
      width:100,
      list:[{id:'0',name:'全部'},{id:'1',name:'进行中'},{id:'2',name:'结束行程'}]
    },
  ];

  componentDidMount() {
    this.requestList();
  }

  handleFilter = (params) => {
    this.params = params; // 从子组件传来的值赋值给 params
    this.requestList();
  };

  // 默认请求我们的接口数据
  requestList = () => {
    let _this = this;
    axios.ajax({
      url: '/order/list',
      data: {
 +       params: this.params
      }
    }).then((res) => {
      let list = res.result.item_list.map((item, index) => {
        item.key = index;
        return item;
      });
      this.setState({
        list: list,
        pagination: Utils.pagination(res, (current) => {
          _this.params.page = current;
          _this.requestList();
        })
      });
    });
  };

...

  render() {
...
    return (
      <div>
        <Card>
          <BaseForm formList={this.formList} filterSubmit={this.handleFilter}/>
        </Card>

       ...
       <div>
    );
  }
}

...

三 axios封装

列表数据请求封装

每个管理模块几乎都有一个requestList()调用axios.ajax请求Easy Mock接口中的数据。

依据【项目工程化】思想，封装这部分代码，简化开发过程。

src->axios->index.js中：定义requestList方法，接收_this、url、params、isMock参数

 static requestList(_this, url, params,isMock){
    var data = {
      params: params,
      isMock // 使用Mock数据
    };

    // 调用ajax 拦截公共机制
    // ES6省略语法
    // 相当于 url:url
    this.ajax({
      url,
      data
    }).then((data) => { //得到数据data
      if (data && data.result) {
        // 如果data 是true 进行操作
        let list = data.result.item_list.map((item, index) => {
          item.key = index;
          return item;
        });
        _this.setState({
          list,
          pagination: Utils.pagination(data, (current) => {
            _this.params.page = current;
            _this.requestList();
          })
        });
      }
    });
  };

order->index.js中：requestList()中直接调用axios.requestList()即可获取接口数据

 requestList = () => {
    axios.requestList(this, '/order/list',this.params,true)
 }

Github地址

3.1 axios 代码

//src/axios/index.js
//对jsonp的方法进行封装
import JsonP from "jsonp";//*导入jsonp的插件
import axios from 'axios';//*导入axios插件
import {Modal} from "antd";
import Utils from "../utils/utils";
//导出一个对象供其他对象进行使用
export default class Axios {
  // 定义方法,为请求的列表使用
  static requestList(_this, url, params,isMock){
    var data = {
      params: params,
      isMock // 使用Mock数据
    };

    // 调用ajax 拦截公共机制
    // ES6省略语法
    // 相当于 url:url
    this.ajax({
      url,
      data
    }).then((data) => { //得到数据data
      if (data && data.result) {
        // 如果data 是true 进行操作
        let list = data.result.item_list.map((item, index) => {
          item.key = index;
          return item;
        });
        _this.setState({
          list,
          pagination: Utils.pagination(data, (current) => {
            _this.params.page = current;
            _this.requestList();
          })
        });
      }
    });
  };
    
 ...
}

3.2 Order代码

// src/pages/order/index.js
import React from 'react';
import {Card, Table, Form, Modal, Button, message, Select, DatePicker,} from 'antd';
import axios from './../../axios/index';
import Utils from './../../utils/utils';
import BaseForm from '../../components/BaseForm';

const FormItem = Form.Item;

export default class Order extends React.Component {
  state = {
    orderInfo: {},
    orderConfirmVisble: false
  };

  params = {
    page: 1
  };

  formList = [
    {
      type: 'SELECT',
      label: '城市',
      field:'city',
      placeholder:'全部',
      initialValue:'1',
      width:80,
      list:[{id:'0',name:'全部'},{id:'1',name:'北京'},{id:'2',name:'天津'},{id:'3',name:'上海'}]
    },
/*    {
      type: 'INPUT',
      label: '模式',
      field:'mode',
      placeholder:'请输入模式',
      width:100,
    },*/
    {
      type: '时间查询',
    },
    {
      type: 'SELECT',
      label: '订单状态',
      field:'order_status',
      placeholder:'全部',
      initialValue:'1',
      width:100,
      list:[{id:'0',name:'全部'},{id:'1',name:'进行中'},{id:'2',name:'结束行程'}]
    },
  ];

  componentDidMount() {
    this.requestList();
  }

  handleFilter = (params) => {
    this.params = params; // 从子组件传来的值赋值给 params
    this.requestList();
  };

  // 默认请求我们的接口数据
  requestList = () => {
+    axios.requestList(this, '/order/list',this.params,true)
/*    axios.ajax({
      url: '/order/list',
      data: {
        params: this.params
      }
    }).then((res) => {
      let list = res.result.item_list.map((item, index) => {
        item.key = index;
        return item;
      });
      this.setState({
        list: list,
        pagination: Utils.pagination(res, (current) => {
          _this.params.page = current;
          _this.requestList();
        })
      });
    });*/
  };
...
  render() {
  ...
    return (
      <div>
        <Card>
          <BaseForm formList={this.formList} filterSubmit={this.handleFilter}/>
        </Card>

...
      </div>
    );
  }
}

React共享单车后台管理系统开发（记录笔记9）——9.1 项目工程化

9.1 项目工程化

文章目录

一项目工程化概念

二 BaseForm的封装

2.0 项目工程化

2.1 Utils 代码

2.2 BaseForm组件代码

2.3 Order组件代码

三 axios封装

3.1 axios 代码

3.2 Order代码

猜你喜欢

React共享单车后台管理系统开发（记录笔记9）——9.1 项目工程化

9.1 项目工程化

文章目录

一 项目工程化概念

二 BaseForm的封装

2.0 项目工程化

2.1 Utils 代码

2.2 BaseForm组件代码

2.3 Order组件代码

三 axios封装

3.1 axios 代码

3.2 Order代码

猜你喜欢

一项目工程化概念