zoukankan      html  css  js  c++  java
  • 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
    

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

  • 相关阅读:
    ASP.NET Web API 记录请求响应数据到日志的一个方法
    EF删除集中方法对比
    CSS 的优先级机制[总结]
    sql备份命令
    sql两张表关联更新字段
    VSCode隐藏node_modules目录
    C# RSACryptoServiceProvider加密解密签名验签和DESCryptoServic
    模拟退火(转)
    HNOI2006-鬼谷子的钱袋
    HNOI2006-公路修建问题(二分答案+并查集)
  • 原文地址:https://www.cnblogs.com/bruceshao/p/8583047.html
Copyright © 2011-2022 走看看