React 大数据可视化大屏项目教程

1. 项目目录结构及介绍

Project
├── mock          # 模拟数据
├── src           # 源代码目录
│   ├── assets    # 静态资源
│   ├── components # 各个模块组件
│   ├── models    # Dva模型管理
│   ├── routes    # 路由主界面定义
│   ├── services  # 异步获取函数
│   ├── style     # 全局样式
│   └── utils     # 工具函数
│       ├── index.js # 主函数文件
│       └── router.jsx # 路由定义文件
│       └── roadhogrc.mock.js # 导出模拟数据

目录结构说明

• mock: 存放模拟数据的文件夹。
• src: 源代码目录，包含项目的核心代码。
  • assets: 存放静态资源，如图片、字体等。
  • components: 存放各个模块的组件。
  • models: 存放Dva的模型管理文件。
  • routes: 存放路由主界面的定义文件。
  • services: 存放异步获取数据的函数。
  • style: 存放全局样式文件。
  • utils: 存放工具函数，如主函数文件index.js和路由定义文件router.jsx。

2. 项目的启动文件介绍

主函数文件 index.js

index.js 是项目的入口文件，负责初始化应用并启动项目。以下是文件的主要内容：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootReducer from './models';
import rootSaga from './sagas';
import App from './App';

const sagaMiddleware = createSagaMiddleware();
const store = createStore(rootReducer, applyMiddleware(sagaMiddleware));
sagaMiddleware.run(rootSaga);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

启动命令

在项目根目录下运行以下命令启动项目：

npm install
npm run start

3. 项目的配置文件介绍

roadhogrc.mock.js

roadhogrc.mock.js 文件用于导出模拟数据，供开发环境使用。以下是文件的主要内容：

export default {
  'GET /api/users': { users: [1, 2] },
  'POST /api/users/create': (req, res) => {
    res.end('OK');
  },
};

webpackrc.js

webpackrc.js 文件用于配置Webpack，以下是文件的主要内容：

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
};

package.json

package.json 文件包含了项目的依赖和脚本命令，以下是文件的主要内容：

{
  "name": "react-big-screen",
  "version": "1.0.0",
  "scripts": {
    "start": "roadhog server",
    "build": "roadhog build"
  },
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "dva": "^2.0.0"
  },
  "devDependencies": {
    "roadhog": "^2.0.0"
  }
}

通过以上配置文件，可以实现项目的启动、构建和模拟数据的配置。