某大型公司大数据治理，为减少人力成本，工作繁重等，和我公司及国外Tamr公司合作做一套大数据自动处理系统。 
Tamr公司是专门从事大数据治理，有一套相对成熟的大数据治理软件，为了能适应国内某领域应用场景，提高大数据治理的准确率和召回率，
在经过Tamr软件处理前，先经过辅助软件初步过滤，所以我公司负责开发此类辅助软件：
    KDB为数据特征领域专家知识库系统，主要是对TAMR做好从源数据模型到目标数据模型的数据关系的Scheme Mapping起辅助作用。

  DataProcessPython目录  ---- Python语言开发的算法部分
  eseasky目录            ---- JS语言开发的WEB端
  java Servers           ---- 后台服务
  Design document en/cn  ---- 项目设计相关文档及严格的标准文档及验收
  doc                    ---- 初始的数据文档
  pocsrc                 ---- Pythin相关的

  说明：Python部分及后台部分 对此项目来讲涉及的技术点并不多，开发难度不大，主要介绍web端 --- 本人负责web端

react + flux + react-router + gulp构建 +ES5/ES6混合编程 +jquery +bootstrap

git clone https://git.oschina.net/git_zliang/GongSiKDBDaShuXiangMu.git

cd GongSiKDBDaShuXiangMu

npm install   --- 安装web端依赖库

npm install bower -g 
cd public
bower install bootstrap --- UI组件库

npm run build-watch   ---启动gulp自动监听编译模式（看配置文件gulpfile.js）
npm run build         --- browserify打包模式
npm run build-dist    --- browserify+uglifyjs压缩模式

平常开发调试采用本地访问服务器模式快速开发，因此使用Google Chrome浏览器调试web效果 --- 涉及到本地跨域访问服务器 很好解决

 本项目主要介绍WEB端开发技术栈，正好利用公司中小型项目讲解，理解前沿的react flux及reac-router 配合方式

 如果觉得不错的话 ，您可以点击右上角“Star” 支持一下 谢谢啦
 
 后续还有一个公司项目 也会开源上来。

1. 登录界面 
    功能：用户名规则，密码规则，校验码（防攻击），Tamr用户登录，双方系统单点登录机制，用户名及密码登录错误锁定机制等等

2. 项目界面
   功能：项目创建，搜索，编辑，修改，删除等

3.词典管理界面
   功能：全局内置词典表和普通词典表及权限问题，词典表创建删除，词典新增，修改，删除，导入/导出，词典版本管理机制等等

4.数据特征管理界面
   功能：数据特征表新建删除，特征词新增删除，修改，导入/导出等等

5.分词Tokens管理界面
   功能：分词表新增删除，分词新增删除，修改，导入导出等等、

6.词典变更审批管理界面
   功能：词典变更待管理员审批机制 --- 与词典管理模块挂钩

7.用户模块界面
   功能：内部用户与Tamr用户权限管理，用户创建删除，停用，密码修改及修改规则等等

8.进入项目界面-词典配置
   功能:项目运行前根据需要进行词典表配置，词典表选择，词典词选择，项目已有词典等等

9.进入项目界面-数据特征配置
    功能：项目运行前根据需要进行特征表配置，特征表选择，项目已有特征表等

10.进入项目界面-分词Tokens配置
    功能：项目运行前根据需要进行分词配置

11.进入项目界面-元数据及项目运行界面
    功能：项目运行前需导入元数据，然后点击运行按钮 -运行项目（过程涉及大量数据I/O操作及算法处理，大概十几分钟的样子 进度条显示进度）

12.进入项目界面-运行结果界面
    功能：项目运行结果展示界面，及把结果数据导入Tamr大数据处理平台接口按钮等

14.进入项目界面-Pair界面
    功能：经过DNF算法过滤后，可以机器学习打标。
    详细：过滤结果呈现，人工打标，机器学习自动打标，展示每条详细记录，上下翻页，选择清空人工打标，打标后进行机器学习，下载配置等等。

由于公司前端开发人员紧缺及项目紧张的缘故，公司决定由我来带几个新人负责前端开发（我之前一直做后台嵌入式c/c++开发，偏网络编程协议 3    年），这是信任我还是啥啥的，压力山大，哥也不了解前端的东东的，---就这样接受了艰巨光荣的任务，开始半个多月自研前端的技术栈，为项目启动做准备。
经过一段时间的自研，给我感觉 前端开发技术更新迭代太快，且杂且乱，乱七八糟的感觉（为做前端的兄弟们叫怨，做前端该多辛苦，一不小心迭代掉队且工作量多又杂乱（并不是说技术多么难，其实后台的也不难呀）），前端流行的前沿有reactjs系列，angularjs系列，vuejs系列 （暂不管移动端的）------我决定选型：reactjs系列（稍后解释为什么选它）

reactjs系列需要点什么？ 

  react本质上是状态监听渲染UI的框架，简单说就是只负责UI渲染，不涉及前端技术框架MVC的模式，只是V. 所以一般大中型项目需要配套react系列体系的。根据react官方的参考资料及GitHub学习论坛 比较流行的体系是：reactjs + Flux + react-router +less/sass+webpack+Bootstrap等等，这也是官方推荐的，大众比较流行的，当然还有其他的选型，flux 和router及UI 这部分选型比较灵活，很多选择的，构建工具也可以选gulp，grunt等。最终我选的框架是： reactjs + Flux(官方推荐) + react-router + css （这个懒得去看less语法）+gulp(因为使用过，其实都类似的) + bootstrap (基础需要JS语言（不同系列的 学的JavaScript /ECMAScript过了一遍  项目采用ES5/ES6混合编程  因本人后台开发者习惯ES5函数式的，但ES6很新颖，偶尔用了一下，项目太赶了 怕出错呗），html语言（w3c标准学的），css/css3过了一遍，DOM，BOM等浏览器模型快速过了一遍，jquery ajax (因为后台开发接触网络编程较多，这块也是快速过一遍)  --- 基础大概就这些！！) ， 技术栈选好后，前期我先搭好框架，开始带新人开干了。啧啧啧啧啧啧

React框架机制很新颖，相对其它MVC,MVCM等其它的，我比较喜欢这种轻巧的，可以自由搭配的，当然它也可以嵌套到其它框架做V呀，就喜欢这种灵活的方式。

React框架: （1）组件模式优势 代码复用 效率高 
           （2）虚拟DOM操作 性能高
           （3）支持移动端 结合Bootstrap 可以自适应
           （4）采用JSX语法 类似HTMl语言 代码清晰

缺点：  全新的一套概念，与其它框架很不同，新手难上手 ，要发挥react强大威力 需要采用它的整个技术栈。
        所以这是为什么采用上面的选型原因。

react的一个组件很明显的由dom视图和state数据组成，两个部分泾渭分明。state是数据中心，它的状态决定着视图的状态。这时候发现似乎和我们一直推崇的MVC开发模式有点区别，没了Controller控制器，那用户交互怎么处理，数据变化谁来管理？然而这并不是react所要关心的事情，它只负责ui的渲染。与其他框架监听数据动态改变dom不同，react采用setState来控制视图的更新。setState会自动调用render函数，触发视图的重新渲染，如果仅仅只是state数据的变化而没有调用setState，并不会触发更新。 组件就是拥有独立功能的视图模块，许多小的组件组成一个大的组件，整个页面就是由一个个组件组合而成。它的好处是利于重复利用和维护。

react的diff算法用在什么地方呢？当组件更新的时候，react会创建一个新的虚拟dom树并且会和之前储存的dom树进行比较，这个比较多过程就用到了diff算法，所以组件初始化的时候是用不到的。react提出了一种假设，相同的节点具有类似的结构，而不同的节点具有不同的结构。在这种假设之上进行逐层的比较，如果发现对应的节点是不同的，那就直接删除旧的节点以及它所包含的所有子节点然后替换成新的节点。如果是相同的节点，则只进行属性的更改。

组件在初始化时会触发5个钩子函数：

Facebook 提出 Flux 架构的概念，被认为是 React 应用的标准架构。

最大特点：数据单向流动。与 MVVM 的数据双向绑定，形成鲜明对比。

Flux 的核心思想
  ● 不同组件的state，存放在一个外部的、公共的 Store 上面。
  ● 组件订阅 Store 的不同部分。
  ● 组件发送（dispatch）动作（action），引发 Store 的更新。
Flux 只是一个概念，有30多种实现。

MobX 架构
  
    MobX 的核心是观察者模式。
  ● Store 是被观察者（observable）
  ● 组件是观察者（observer）
一旦Store有变化，会立刻被组件观察到，从而引发重新渲染。
--------------------------------------------------------------------------------
MobX 的最简单例子
   
     const {observable} = mobx;
    const {observer} = mobxReact;

    const person = observable({name: "张三", age: 31});

    const App = observer(
      ({ person }) => <h1>{ person.name }</h1>
    );

    ReactDOM.render(<App person={person} />, document.body);
    person.name = "李四";

UI 层是观察者，Store 是被观察者。

 Store 所有的属性，分成两大类：直接被观察的属性和自动计算出来的属性。
class Store {
  @observable name = 'Bartek';
  @computed get decorated() {
    return `${this.name} is awesome!`;
  }
}
UI 会观察到 Store 的变化，自动重新渲染。

Redux 的核心概念

Redux 应用的架构

Redux 层保存所有状态，React 组件拿到状态以后，渲染出 HTML 代码。

Router就是React的一个组件，它并不会被渲染，只是一个创建内部路由规则的配置对象，根据匹配的路由地址展现相应的组件。Route则对路由地址和组件进行绑定，Route具有嵌套功能，表示路由地址的包涵关系，这和组件之间的嵌套并没有直接联系。Route可以向绑定的组件传递7个属性：children，history，location，params，route，routeParams，routes，每个属性都包涵路由的相关的信息。比较常用的有children（以路由的包涵关系为区分的组件），location（包括地址，参数，地址切换方式，key值，hash值）。react-router提供Link标签，这只是对a标签的封装，值得注意的是，点击链接进行的跳转并不是默认的方式，react-router阻止了a标签的默认行为并用pushState进行hash值的转变。切换页面的过程是在点击Link标签或者后退前进按钮时，会先发生url地址的转变，Router监听到地址的改变根据Route的path属性匹配到对应的组件，将state值改成对应的组件并调用setState触发render函数重新渲染dom。（具体的原理及实例查看官网）

目前react-router在项目中已有大量实践，其优点可以总结如下:

Bootstrap UI响应式布局 是前端开发比较流行的框架，应用到项目可以很快提供布局效率，避免css不深入的尴尬。--- 自行官网学习（有兴趣看看源码）

自行找官网了解  目前我只是简单看了官网资料 项目不大 配置也简单 （因为之前用过一次 所以采用它了）

其实个人建议 使用webpack功能，也是react官网推荐的，后续我会补上。