在前两篇文章
【带并发限制的异步调度器Ⅰ】原始Demo
【带并发限制的异步调度器Ⅱ】点餐排队系统Demo
的基础上，这次加入了图形化界面，这样就升级成一个完整的项目。我把这三篇文章总结为以下三种递进的阶段：
①单通道的任务调度器
②多通道的任务调度器，无页面的应用场景演示Demo，并增加了通道数及任务运行数的初始化配置
③多通道的任务调度器，有页面的应用场景操作，可配置初始化信息并持久化保存，可查看某一任务的运行情况，可实时添加及移除任务
第三阶段的技术总结如下：
- React组件图形化界面，形成最原始的可视化页面
- Egg.js企业级Node.js框架，提供接口请求以及安全防护
- Mongoose数据库存储，持久化配置信息
- React-redux提供组件间交互的状态管理，store机制给所有组件（隔层组件以及不同页面组件）提供全局数据
- Ant Design模态框提供便于交互的组件服务
第三阶段的功能点总结如下：
- 在“初始化”界面添加配置桌子信息，可移除添加的信息，可编辑添加的信息（添加相同人数的桌子信息即可覆盖原信息），可点击“完成配置”持久化配置数据，以供下次启动试用，可立即切换到“点餐排队”使用配置信息
初始化页面
添加配置数据
完成添加
- 进入系统时，系统会自动请求配置数据接口初始化操作页面需要用到的全局数据store（“点餐排队”和“初始化”使用的是store里的同一个数据源）
初始界面
数据加载后界面
-
点击初始化后，会出现后续操作按钮，点击“查看桌子使用信息”，会出现桌子的使用信息情况
操作按钮
桌子使用情况
-
点击“用餐入座”，相应的顾客就会在N人桌里占一个位子，如果有空闲桌，可以直接用餐（若按原始Demo的说法，就是执行任务队列有空缺，任务直接进入执行任务队列运行，若已满，则会进入待执行任务队列），若没有，则会拿到一个排队编号等待入座
添加用餐信息
取号情况
- 当拿到编号时，可点击“查看某桌排队情况”，输入相应编号来查看此编号目前所处的情况，具体情况如下：
- 无此桌点餐信息
- 正在用餐
- 排队情况
无此桌点餐信息
正在用餐
- 排队情况
- 当某桌用餐结束时，可点击“结束用餐”，输入桌子编号，把执行任务从正在用餐队列里移除
移除用餐前
移除用餐
移除用餐后
以上就是此系统的全部功能，完整项目放在github上，如有需要请自取。
总结下开发此系统遇到的问题：
- 服务端无法接受 post 请求，并且请求接口报错
403 ：message: 'invalid csrf token'
原因：Egg框架内置中间件安全防护，默认开启防止 XSS 攻击 和 CSRF 攻击，所以前端请求post接口时需要在header请求头里添加csrfToken，让Egg帮忙验证，具体配置如下：
server端:
//config.default.js
//csrf配置
exports.security= {
csrf : {
headerName: 'x-csrf-token', // 自定义请求头
}
}
client端:
'use strict'
import api from './api';
// 封装获取 cookie 的方法
function getCookie(name){
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg))
return unescape(arr[2]);
else
return null;
}
function saveSetting(deskData, successCB, failCB) {
return $.ajax({
url: api.COMPANY + '/setting',
method: 'POST',
contentType: 'application/json',
headers:{
// 前后端不分离的情况加每次打开客户端，egg会直接在客户端的 Cookie 中写入密钥 ，
//密钥的 Key 就是 'scrfToken' 这个字段，所以直接获取就好了
'x-csrf-token': getCookie("csrfToken"),
},
data: JSON.stringify({ data:deskData })
}).then(successCB, failCB);
}
- 开发前端的操作页面时，对React-redux的store使用不当，导致不同页面组件获取store中的全局数据出现问题。
具体情况：当把页面组件从UI组件变为容器组件（使用connect处理）时，未能成功获取到store数据，但实际是错误理解了React-redux和redux获取全局数据store的方式。
解决：React-redux子组件获取store的方式是在mapStateToProps方法中处理的，而redux是通过this.context.store来获取，以下是React-redux获取store的项目代码：
/app/view/container/DinnerPane.js
import { connect } from 'react-redux';
import dinnerPane from '../component/dinnerPane/dinnerPane';
function mapStateToProps(state) {
return {
deskData: state.deskData||{}
};
}
function mapDispatchToProps(dispatch) {
return {};
}
export default connect(mapStateToProps, mapDispatchToProps)(dinnerPane);
初始化store是在dinnerPane的上层容器Content里处理的，先请求配置数据get接口，然后dispatchinitDeskDataAction到store里更新数据：
/app/view/container/content/Content.js
import { connect } from 'react-redux';
import Content from '../../component/Content/Content';
import { getSetting } from '../../utils/WebAPIUtils';
import { initDeskDataAction } from '../../action/initDataActionCreator'
function mapStateToProps(state) {
return {
deskData: state.deskData
};
}
function mapDispatchToProps(dispatch) {
return {
initDeskDataRequest: function (companyId, callback) {
return getSetting(companyId, function (result) {
callback(null, result);
}, function (err){
callback(err);
});
},
initDeskData: function(deskData){
dispatch(initDeskDataAction(deskData));
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Content);
