5.1-iuap应用平台前端培训_案例开发（建立相关文件及路由配置）.md

建立相关文件及路由配置

以订单列表为例

相关文件以及目录的建立

1. 在 src/modules 路径下新建业务模块目录：例如：order
2. 在此目录下建立模块页面目录：例如：order-manage； 路由文件router.jsx
3. 在模块页面目录下建立 container.js（容器组件文件） , models.js（数据模型文件） , services.js（HTTP 请求封装）, components/list.js（页面入口文件）, components/list.less（页面样式文件）， components下也可以建立多个目录，根据需要建立

文件固定写法以及部分说明

index.js

1. 引入相关module，这里必须要引入的module如下

import React, { Component } from "react";
import ReactDOM from 'react-dom';
import { actions } from "mirrorx";
import './index.less';

2. 定义组件并导出

class List  extends Component {
    constructor(props) { // 如果不需要state可不写
        super(props);
        this.state = {

        }
    }

    render () {
        return (
            <div className='order-list'> //根据模块写对应className名称，注意不要和其它模块className重复。

            </div>
        )
    }
}

index.less

less语法参考

.order-list{

}

services.js

例如：配置一个获取列表数据的请求

import request from "utils/request";

let BASE_URL_PATH = '';

if(__MODE__ == "development"){
    BASE_URL_PATH = ""
} else {
    BASE_URL_PATH = ""
}

const URL = { //定义接口地址
    "GET_LIST":  "/iuap-example/sany_order/list"
}

export const getList = (params) => { //定义并到处获取接口数据的方法
    //这里可以对传入的参数处理
    return request(URL.GET_LIST, {
        method: "get",
        data: params
    });
}

models.js

import { actions } from "mirrorx";
import * as api from "./services"; //引入services，如不需要接口请求可不写
import { processData } from "utils"; //接口返回数据公共处理方法，根据具体需要

export default {
  name: "order", //设置主具模型名称
  initialState: {  // 初始化
    
  },
  reducers: {
      updateState(state, data) { //更新state
      return {
        ...state,
        ...data
      };
    }
  },

  effects: { //处理异步请求
    //例如：使用以上service.js定义的获取列表数据的请求
    async loadList(param, getState) {//加载数据 
      actions.order.updateState({ //显示loading
        showLoading:true
      })
      let res= processData(await api.getList(param)); //调用service.js配置的方法
      actions.order.updateState({ //隐藏loading
        showLoading:false
      })
      if (res) {
        actions.order.updateState({ //更新state
          list: res.content,
          pageIndex:res.number+1,
          pageSize:res.size,
          totalPages:res.totalPages,
        });
      }
    },
  }
};

containers.js

1. 导入相关模块

import React, { Component } from "react";
import mirror, { actions, connect } from "mirrorx";
import manageList from './components/List';
import model from './models'

2. 注入数据模型 model

mirror.model(model);

3. 将模块和state关联，并导出

export const orderList= connect((state) => state.order)(manageList);

路由注册

1. 在业务模块的router.jsx 注册二级路由

import React from "react";
import { Route, Link } from "mirrorx";
import { orderList } from "./role-manage/containers"; // 引入 containers

const Routers = ({ match }) => (
  <div>
    <Route exact path={`${match.url}/orderlist`} component={orderList} /> //新增路由
  </div>
);

export default Routers;

2. 在src/routes/index.jsx 注册一级路由

import React, { Component } from "react";
import { Router, Route } from "mirrorx";

// Routers
import order from "modules/order/router"; // 导入模块路由

import MainLayout from "layout";
import "./index.less";

const MainRoutes = () => (
  <div>
    <Route path="/order" component={order} /> //注册路由
  </div>
)

class App extends Component {
  render(){
    return (
      <Router>
        <div>
          { (__MODE__ == "development") ? <MainLayout /> : "" }
          <div className="route-content">
            { (__MODE__ == "development") ? <div className="layout-content"><MainRoutes /></div> : <MainRoutes/> }
          </div>
        </div>
      </Router>
    )
  }
}
export default App;

截止目前，使用 npm run dev 命令即可测试当前模块