React开发流程及认识

React开发流程及认识

1、新建模块

打开Visual Studio Code，然后选择“文件” - “打开文件夹”（注意此文件夹是之前使用nj init命令初始化好的那个）。

打开控制台：快捷键（Ctrl + ~）

调用命令：

nj ap

然后使用上下键选择对应的类型，例如default，

输入Page名称，例如test4，创建成功。

2、模块理解

刷新之后可以看到增加了三部分内容：

• src/web/pages 下新增了test4文件夹，里面有js、css和html文件， 这部分类似于我们正常开发时的页面部分 ；
• src/stores/pages 下新增了test4Store.js， 这部分是数据更新的部分，主要是被src/web/pages下面的test4.js其中的方法调用 ；
• server/routes 下新增了test4.js， 这部分是模拟Java服务端功能，给页面返回数据使用 ；

3、src/web/pages简单说明

这个目录下新建了三个文件：test4.js、test4.m.scss和test4.html，我们不关注test4.m.scss，这部分主要是处理css样式的。

下面是test4.html的部分代码：

    <div class="{styles.handlerBox}">
      <span class="{styles.lable}">{intl('roleName')}</span>
      <ant-input class="{styles.input}" value="{inputRole}" onChange={onInputRole}/>
      <ant-Button class="btn" onClick={onSearch}>查询</ant-Button>
      <ant-Button class="btn" onClick={onAddRole}>新增</ant-Button>
      <ant-Button class="btn" onClick={onDeleteRole}>删除</ant-Button>
    </div>

    <ant-Table rowSelection={rowSelection}
               columns={toJS(tableColumns)}
               dataSource={toJS(tableData)}
               bordered />

其中只简单介绍两点：

• 1、查询按钮，我们可以看到它的点击事件是onSearch函数，这个函数定义在test4.js中，可以在test4.js中查找；
• 2、ant-Table标签中有两个很重要的属性：columns，这个字段是配置表格有哪些列，来源于test4.js中查找，是一个方法；

test4.js中有和html交互的代码，例如：

  @autobind
  onSearch() {
    if (this.inputRole == '') {
      const closeLoading = Message.loading('正在获取数据...', 0);
      Promise.all([
        this.props.store.test4.getRoleManagementData(),
      ]).then(() => {
        closeLoading()
      });
    } else {
      const { store: { test4 } } = this.props;
      const searchRole = test4.tableDataO.filter(n => n.name.indexOf(this.inputRole.trim()) > -1)
      test4.setTableData(searchRole);
    }
  }

这部分代码是与查询按钮配套的，我们注意到其中的代码：

Promise.all([
        this.props.store.test4.getRoleManagementData(),
      ])

这部分代码应该是执行具体数据更新操作的，可以看到它其实来自于store下的js文件；

同时我们也可以看到定义表格的代码：

  @computed get tableColumns() {
    return [{
      title: '序号',
      dataIndex: 'key',
    }, {
      title: '角色名称',
      dataIndex: 'name',
    }, {
      title: '角色描述',
      dataIndex: 'describe',
    }, {
      title: '创建时间',
      dataIndex: 'cTime',
    }, {
      title: '修改时间',
      dataIndex: 'mTime',
    }, {
      title: '操作',
      dataIndex: 'handler',
      render: (text, record, index) => nj `
        <span>
          <a href="javascript:;" onClick=${()=>this.onEdit(record, index)} className="btn-link">编辑</a>
          <a href="javascript:;" onClick=${()=>this.onDetail(record, index)} className="btn-link">用户明细</a>
        </span>
      ` (),
    }];
  }

4、新增“检索”按钮，实现表格加载

说下需求：

• 1、新增一个“检索”按钮，可以点击查询
• 2、检索按钮查询完成时表格显示两列：序号、名称；
• 3、检索按钮查询完成时，显示两条记录：1、张三；2、李四

具体实现步骤：

1) 在test.html中新增“检索“按钮，如下：

<ant-Button class="btn" onClick={onSearch}>查询</ant-Button>
<ant-Button class="btn" onClick={onShow}>检索</ant-Button>
<ant-Button class="btn" onClick={onAddRole}>新增</ant-Button>

注意此处给按钮增加了点击事件的方法：onShow，我们需要在test4.js中增加这个方法

2）在test.js中增加onShow方法，如下：

  @autobind
  onShow() {
    if (this.inputRole == '') {
      const closeLoading = Message.loading('正在获取数据...', 0);
      Promise.all([
        this.props.store.test4.showUser(),
      ]).then(() => {
        closeLoading()
      });
    } else {
      const { store: { test4 } } = this.props;
      const searchRole = test4.tableDataO.filter(n => n.name.indexOf(this.inputRole.trim()) > -1)
      test4.setTableData(searchRole);
    }
  }

注意此方法是从其它中copy了一份，这个地方调用了store中的showUser方法，这个方法是没有的，需要在对应的文件中添加。

3）修改显示列，在test,js中修改tableColumns中显示的列，只保留三列：

@computed get tableColumns() {
    return [{
      title: '序号',
      dataIndex: 'key',
    }, {
      title: '角色名称',
      dataIndex: 'name',
    }, {
      title: '操作',
      dataIndex: 'handler',
      render: (text, record, index) => nj `
        <span>
          <a href="javascript:;" onClick=${()=>this.onEdit(record, index)} className="btn-link">编辑</a>
          <a href="javascript:;" onClick=${()=>this.onDetail(record, index)} className="btn-link">用户明细</a>
        </span>
      ` (),
    }];
  }

注意此处我们保留表格对应的dataIndex是key和name，name需要server返回数据的时候对应到这个上；

4）修改test4Store.js，位于目录：src/stores/pages

根据第2步，我们需要在这个文件中新增showUser方法，代码如下：

showUser(params) {
        return fetchData(`${__HOST}test4/showUser`,
          self.setShowUser,
          params, { method: 'get' }).catch((ex) => {
          Notification.error({
            description: '获取角色数据异常:' + ex,
            duration: null
          });
        });
        },
        
        setShowUser(result) {
        if (result.success) {
          const data = result.data;
          self.tableData = data.length > 0 ? data : [];
        } else {
          Notification.error({
            description: '获取角色数据异常:' + result.message,
            duration: null
          });
        }
        },

这里面有两点：

• 1、其中我们新增了一个get请求，请求的地址是showUser，目前我们的服务端（server目录）是没有的，需要增加；
• 2、在setShowUser方法中更新表格时，我们用到了tableData，这个tableData是什么？就是在html页面中的那个ant-table的dataSource属性；

5）server中增加showUser方法，用于返回数据

server对应的js文件是在server/routes目录下，在test.js中增加代码如下：

router.get('/showUser', function(req, res) {
  res.type('json');
  let params = req.body,
    ret = {};
  Object.assign(ret, resultData, {
    data: [{
      key: 1,
      name: '张三',
    },
    {
      key: 2,
      name: '李四',
    }
  ]
  });
  res.send(ret);
});

其中需要有两点进行说明：

• 1、router.get标识的是get方法；
• 2、数据（data）中的两个字段key和name必须和表格的属性配置一样，这个属性是在第三步配置的。

经过上述操作之后我们回到命令行页面，调用：

npm rum dev-web

可以启动整个项目，然后就可以看到界面了