shop-statistics-p工程说明文档

该工程为达人店后台PC端工程,采用React & Redux作为基础框架,基于es6进行开发,通过webpack进行工程资源打包管理。

使用说明

  • 安装node依赖
    • npm install
  • 开启本地服务器(开发模式)
    • npm start
  • 开启浏览器访问页面(开发模式)
    • http://loacalhost:3000/view/*.html
  • 资源压缩打包(发布到线下或线上环境之前的操作)
    • webpack --config production.config.js

涉及node依赖说明

  • babel 针对es6/7代码进行处理
  • webpack 相关(*-loader)
  • immutable 不可变数据
  • echarts & echarts-for-react echarts各类表库
  • react & react-dom react框架相关
  • react-date-range 日期选择react组件
  • redux redux框架相关
  • superagent 异步请求方法库

工程结构说明

  • src/ 开发路径
    • common/ 公共部分内容,包括公共的global.js、global.less、color.less、mixins.less,可进行引用
    • component/ 组件部分
    • pages/ 页面内容
  • build/ 输出路径
    • 通过webpack压缩打包好的输出文件,build之后的路径和spon工程的build路径相同,静态资源名称和页面的对应和spon工程保持一致。
  • view/ html路径
  • webpack.config.js
    • 开发环境的webpack配置文件,开启localhost:3000服务端口提供访问,并提供热替换等功能。
  • production.config.js
    • 资源压缩打包,时间较长,生成build目录。

工程组件说明 src/component

组件可以被分成两种类型: react组件redux组件,两种组件的本质区别在于,react组件依赖于自身的state进行状态的存储,而redux组件依赖于redux框架中的store进行状态的控制。

react组件说明

FilterBlock组件为例子进行说明

//import node modules
import React from 'react';

//import style
import './style';

//component body
export class FilterBlock extends React.Component {  
  constructor(props) {
    super(props);

    this.state = {
      currentKey: this.props.init ? this.props.init : this.props.dataSource[0].key
    };
  }

  listClick = (key) => {
    let tempState = Object({}, this.state);
    tempState.currentKey = key;
    this.setState(tempState);
    this.props.onFilterClick(key);
  };

  render() {
    let onFilterClick = this.props.dataSource.map(data => {
      let className = '';
      if (data.key === this.state.currentKey) {
        className = 'active';
      }

      return (
        <li className={className} onClick={(e) => this.listClick(data.key)}>{data.value}</li>
      )
    });

    return (
      <div className="filter-block">
        <ul>
          {onFilterClick}
        </ul>
      </div>
    );
  }
}

组件可以通过construtorprops获取初始化的数据、配置项,从此之后数据状态在组件内部运行;通过props向上调用方法的方式进行方法的暴露。因此react组件相对于页面或者是其他组件来说只暴露了部分接口,可以很好的进行服用而不需要知道其内部的实现。

redux组件说明

Input组件为例子进行说明

//import node modules
import React from 'react';

//import style
import './style';

//define action type
export const _componentAction = {  
  INPUT_VALUE_CHANGE: 'INPUT_VALUE_CHANGE',
  INPUT_PLACEHOLDER_CHANGE: 'INPUT_PLACEHOLDER_CHANGE'
};

//component body
export class Input extends React.Component {  
  constructor(props) {
    super(props);

    this.state = {
      value: this.props.value ? this.props.value : ""
    };
  }

  valueChange = (value) => {
    if (this.props.onTextChange) {
      this.props.onTextChange(value);
    }
    let tempState = Object.assign({}, this.state);
    tempState.value = value;
    this.setState(tempState);
  };

  inputClick = (value) => {
    if (this.props.onInputClick) {
      this.props.onInputClick(value);
    }
  };

  render() {
    let InputNode = [];

    if (this.props.rctype === 'props') {
      InputNode.push(<input type="text" className="form-control input-sm" value={this.props.dataSource.value}
                            placeholder={this.props.dataSource.placeholder}
                            onChange={(e) => this.props.onTextChange(e.target.value)} readOnly={this.props.readonly}
                            onClick={(e) => this.inputClick(e.target.value)}/>);
    } else {
      InputNode.push(<input type="text" className="form-control input-sm" value={this.state.value}
                            placeholder={this.props.placeholder ? this.props.placeholder : ""}
                            onChange={(e) => this.valueChange(e.target.value)} readOnly={this.props.readonly}
                            onClick={(e) => this.inputClick(e.target.value)}/>);
    }

    return (
      <div style={this.props.width ? {width: this.props.width, padding: "0 5px"} : {}}
           className={this.props.size ? "rc-input col-sm-" + this.props.size : "rc-input col-sm-2"}>
        {InputNode}
      </div>
    );
  }
}

export const InputProperty = {  
  value: '',
  placeholder: ''
};

export function InputReducer(state = InputProperty, action) {  
  if (state.id && state.id !== action.id) {
    return state;
  } else {
    let tempState = Object.assign({}, state);
    switch (action.type) {
      case _componentAction.INPUT_VALUE_CHANGE:
        tempState.value = action.value;
        return tempState;
      case _componentAction.INPUT_PLACEHOLDER_CHANGE:
        tempState.placeholder = action.value;
        return tempState;
      default:
        return tempState;
    }
  }
}

在redux组件中,一定包含下面的三个部分:

  • _componentAction: 组件可被触发的action
  • InputProperty: 组件的数据结构
  • InputReducer: 组件针对所触发action对数据进行的处理

悟空

前端开发码农一枚,爱摄影,爱旅游