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