公司KDB大数据项目: 本公司与华为及Tamr算法治理三方合作项目，公司负责定制一款大数据平台前期大数据处理的辅助软件。web端采用React+flux+react-router+gulp构建；后台服务java.

**- 项目介绍 **

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

DataProcessPython目录  ---- Python语言开发的算法部分
      eseasky目录            ---- JS语言开发的WEB端
      java Servers           ---- 后台服务
      Design document en/cn  ---- 项目设计相关文档及严格的标准文档及验收
      doc                    ---- 初始的数据文档
      pocsrc                 ---- Pythin相关的
 
      说明：Python部分及后台部分 对此项目来讲涉及的技术点并不多，开发难度不大，主要介绍web端 --- 本人负责web端

-----------------------------------------------------------------------------------------------------------------------------
 **-WEB端技术栈** 
    
    react + flux + react-router + gulp构建 +ES5/ES6混合编程 +jquery +bootstrap
    
    
  ** -下载** (安装git)
    
    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用户登录，双方系统单点登录机制，用户名及密码登录错误锁定机制等等

![登录界面](https://git.oschina.net/uploads/images/2017/0731/155953_53bebb7f_1447612.jpeg "1501487941(1).jpg")

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

![项目界面](https://git.oschina.net/uploads/images/2017/0731/160745_c6de951c_1447612.jpeg "1501488474(1).jpg")

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

![词典管理界面](https://git.oschina.net/uploads/images/2017/0731/160928_365103a9_1447612.jpeg "1501488586(1).jpg")

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

![数据特征管理界面](https://git.oschina.net/uploads/images/2017/0731/161220_ccc7768e_1447612.jpeg "1501488759(1).jpg")

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

![分词Tokens管理界面](https://git.oschina.net/uploads/images/2017/0731/162506_edd4c7df_1447612.jpeg "1501489489(1).jpg")

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

![词典变更审批管理界面](https://git.oschina.net/uploads/images/2017/0731/162758_35af7652_1447612.jpeg "1501489686(1).jpg")

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

![用户模块界面](https://git.oschina.net/uploads/images/2017/0731/163008_d20d20b5_1447612.jpeg "1501489822(1).jpg")

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

![进入项目界面-词典配置](https://git.oschina.net/uploads/images/2017/0731/163212_ddea9d83_1447612.jpeg "1501489949(1).jpg")

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

![进入项目界面-数据特征配置](https://git.oschina.net/uploads/images/2017/0731/163346_4146fa77_1447612.jpeg "1501490042(1).jpg")

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

![进入项目界面-分词Tokens配置](https://git.oschina.net/uploads/images/2017/0731/163505_4b4ef2b2_1447612.jpeg "1501490122(1).jpg")

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

![进入项目界面-元数据及项目运行界面](https://git.oschina.net/uploads/images/2017/0731/163639_e3982c4f_1447612.jpeg "1501490218(1).jpg")

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

![进入项目界面-运行处理结果界面](https://git.oschina.net/uploads/images/2017/0731/163747_ecf9ce74_1447612.jpeg "1501490287(1).jpg")
    13.进入项目界面-DNF过滤界面
        功能：对“经过前面环节对ods/bds元数据的替换,结巴分词，数据特征提取后的数据”进行初步的匹配度过滤
        详细: 选择过滤的条件（选择列，匹配度范围，选择对应处理算法，选择规则，支持“或”或“并”操作，新建，清除，run机器学习（初步过滤））

![进入项目界面-DNF过滤界面](https://git.oschina.net/uploads/images/2017/0907/181852_06726bd7_1447612.jpeg "1504779533(1).jpg")
    
    14.进入项目界面-Pair界面
        功能：经过DNF算法过滤后，可以机器学习打标。
        详细：过滤结果呈现，人工打标，机器学习自动打标，展示每条详细记录，上下翻页，选择清空人工打标，打标后进行机器学习，下载配置等等。

![进入项目界面-Pair界面](https://git.oschina.net/uploads/images/2017/0908/104716_f8f93814_1447612.jpeg "1504838835(1).jpg")

![查看每条pair详细](https://git.oschina.net/uploads/images/2017/0908/105421_6eef53cf_1447612.jpeg "1504839258(1).jpg")

![下载配置](https://git.oschina.net/uploads/images/2017/0908/105607_594a821f_1447612.jpeg "1504839356(1).jpg")

### 项目感悟

### 前端流行的前沿是啥/React系列方向需要怎样一个体系？
    
    由于公司前端开发人员紧缺及项目紧张的缘故，公司决定由我来带几个新人负责前端开发（我之前一直做后台嵌入式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是个啥 这么喜欢它

React框架机制很新颖，相对其它MVC,MVCM等其它的，我比较喜欢这种轻巧的，可以自由搭配的，当然它也可以嵌套到其它框架做V呀，就喜欢这种灵活的方式。
    
    React框架: （1）组件模式优势 代码复用 效率高 
               （2）虚拟DOM操作 性能高
               （3）支持移动端 结合Bootstrap 可以自适应
               （4）采用JSX语法 类似HTMl语言 代码清晰
    
    缺点：  全新的一套概念，与其它框架很不同，新手难上手 ，要发挥react强大威力 需要采用它的整个技术栈。
            所以这是为什么采用上面的选型原因。

###  React组件化

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

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

对于列表的diff算法稍有不同，因为列表通常具有相同的结构，在对列表节点进行删除，插入，排序的时候，单个节点的整体操作远比一个个对比一个个替换要好得多，所以在创建列表的时候需要设置key值，这样react才能分清谁是谁。当然不写key值也可以，但这样通常会报出警告，通知我们加上key值以提高react的性能。

### react生命周期
 
    组件在初始化时会触发5个钩子函数：

1、getDefaultProps()

设置默认的props，也可以用dufaultProps设置组件的默认属性。

2、getInitialState()

在使用es6的class语法时是没有这个钩子函数的，可以直接在constructor中定义this.state。此时可以访问this.props。

3、componentWillMount()

组件初始化时只调用，以后组件更新不调用，整个生命周期只调用一次，此时可以修改state。

4、 render()

react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行。此时就不能更改state了。

5、componentDidMount()

组件渲染之后调用，可以通过this.getDOMNode()获取和操作dom节点，只调用一次。
在更新时也会触发5个钩子函数：

6、componentWillReceivePorps(nextProps)

组件初始化时不调用，组件接受新的props时调用。

7、shouldComponentUpdate(nextProps, nextState)

react性能优化非常重要的一环。组件接受新的state或者props时调用，我们可以设置在此对比前后两个props和state是否相同，如果相同则返回false阻止更新，因为相同的属性状态一定会生成相同的dom树，这样就不需要创造新的dom树和旧的dom树进行diff算法对比，节省大量性能，尤其是在dom结构复杂的时候。不过调用this.forceUpdate会跳过此步骤。

8、componentWillUpdate(nextProps, nextState)

组件初始化时不调用，只有在组件将要更新时才调用，此时可以修改state

9、render()

不多说

10、componentDidUpdate()

组件初始化时不调用，组件更新完成后调用，此时可以获取dom节点。
还有一个卸载钩子函数

11、componentWillUnmount()

组件将要卸载时调用，一些事件监听和定时器需要在此时清除。
以上可以看出来react总共有10个周期函数（render重复一次），这个10个函数可以满足我们所有对组件操作的需求，利用的好可以提高开发效率和组件性能。

### Flux

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

最大特点：数据单向流动。与 MVVM 的数据双向绑定，形成鲜明对比。
   
   --------------------------------------------------------------------------------
    Flux 的核心思想
      ● 不同组件的state，存放在一个外部的、公共的 Store 上面。
      ● 组件订阅 Store 的不同部分。
      ● 组件发送（dispatch）动作（action），引发 Store 的更新。
    Flux 只是一个概念，有30多种实现。
  ----------------------------------------------------------------------------------------------------------------------------
   目前最流行的两个 React 架构
     React 架构的最重要作用：管理 Store 与 View 之间的关系。
     ● MobX：响应式（Reactive）管理，state 是可变对象，适合中小型项目
     ● Redux：函数式（Functional）管理，state 是不可变对象，适合大型项目
  
    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 的核心概念
  ● 所有的状态存放在Store。组件每次重新渲染，都必须由状态变化引起。
  ● 用户在 UI 上发出action。
  ● reducer函数接收action，然后根据当前的state，计算出新的state。

--------------------------------------------------------------------------------
    Redux 应用的架构

Redux 层保存所有状态，React 组件拿到状态以后，渲染出 HTML 代码。
    
--------------------------------------------------------------------------------
  ● Redux 将组件分成 UI 组件和容器组件两类。
  ● UI 组件是纯组件，不包含 state 和生命周期方法，不涉及组件的行为，只涉及组件的外观。
<div className="index">
  <p>{this.props.text}</p>
  <input
    defaultValue={this.props.name}
    onChange={this.props.onChange}
  />
</div>
--------------------------------------------------------------------------------
容器组件正好相反。
  ● 不涉及组件的外观，只涉及组件的行为。
  ● 负责订阅 Store，将 Store 的数据处理以后，再通过参数传给 UI 组件。
  ● 用户给出配置以后，由 Redux 生成。
// MyComponent 是纯的 UI 组件
const App = connect(
  mapStateToProps,
  mapDispatchToProps
)(MyComponent);

● mapStateToProps: 定义 UI 组件参数与 State 之间的映射
  ● mapDispatchToProps：定义 UI 组件与 Action 之间的映射
--------------------------------------------------------------------------------
拆分 UI 组件和容器组件的好处
  ● UI 组件与后台数据无关，可以由设计师负责
  ● 容器组件只负责数据和行为，一旦 Store 的数据结构变化，只要调整容器组件即可
  ● 表现层和功能层脱钩，有利于代码重用，也有利于看清应用的数据结构和业务逻辑
--------------------------------------------------------------------------------
Reducer 函数
reducer是一个纯函数，用来接收action，算出新的state。
function reducer(state = {
  text: '你好，访问者',
  name: '访问者'
}, action) {
  switch (action.type) {
    case 'change':
      return {
        name: action.payload,
        text: '你好，' + action.payload
      };
  }
}
--------------------------------------------------------------------------------
  ● Store由 Redux 提供的createStore方法生成，该方法接受reducer作为参数。
  ● 为了把Store传入组件，必须使用 Redux 提供的Provider组件在应用的最外面，包裹一层。
const store = createStore(reducer);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.body.appendChild(document.createElement('div'))
);

### react-router

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在项目中已有大量实践，其优点可以总结如下:
  ● 风格: 与React融为一体,专为react量身打造，编码风格与react保持一致，例如路由的配置可以通过component来实现
  ● 简单: 不需要手工维护路由state，使代码变得简单
  ● 强大: 强大的路由管理机制，体现在如下方面
      ○ 路由配置: 可以通过组件、配置对象来进行路由的配置
      ○ 路由切换: 可以通过<Link> Redirect进行路由的切换
      ○ 路由加载: 可以同步记载，也可以异步加载，这样就可以实现按需加载
  ● 使用方式: 不仅可以在浏览器端的使用，而且可以在服务器端的使用
    当然react-router的缺点就是API不太稳定，在升级版本的时候需要进行代码变动。

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

### Gulp自动构建

自行找官网了解  目前我只是简单看了官网资料 项目不大 配置也简单 （因为之前用过一次 所以采用它了）
    
    其实个人建议 使用webpack功能，也是react官网推荐的，后续我会补上。

总结：
    （1）react抽象安全与漏洞 可以问题出现在虚拟与真实DOM操作上  ----项目需要频繁操作真实DOM怎么办  性能就不在是优势了 
    （2）react组件间通信机制   可以看看我项目中怎么实现的， 有没有更好的方式？   深度组件嵌套又会是怎样 你该怎样处理 等等

gz1243463939/公司KDB大数据项目

简介

发行版

贡献者

近期动态

gz1243463939/公司KDB大数据项目 .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

gz1243463939/公司KDB大数据项目