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
可以启动整个项目，然后就可以看到界面了
