react+react-router+redux开发体育馆管理系统（2）--需求分析，完善目录

体育馆管理系统主要分为四个模块：用户模块，器材模块，场地模块，赛事管理

由于本人负责的是场地模块，仅此仅对场地模块进行细化分析，其他的类似
场地模块的划分，又可以划分为场地类型管理，场地管理，场地租借管理

目录完善

1. 页面（containers）
   页面一般会有三个页面，列表页，增加页，修改页。
   

2. 路由（routers）
   

3. 常量（constants）
   每个小模块对应一个文件
   

placeLeaseRecordManage.js

export const CHANGE_PAGE_NUM = 'CHANGE_PLACE_LEASE_RECORD_PAGE_NUM';
export const GET_PLACE_LEASE_RECORD_LIST = 'GET_PLACE_LEASE_RECORD_LIST';
export const SAVE_PLACE_LEASE_RECORD_LIST = 'SAVE_PLACE_LEASE_RECORD_LIST';
export const GET_ONE_PLACE_LEASE_RECORD = 'GET_ONE_PLACE_LEASE_RECORD';

placeManage.js

export const CHANGE_PAGE_NUM = 'CHANGE_PLACE_PAGE_NUM';
export const GET_PLACE_LIST = 'GET_PLACE_LIST';
export const SAVE_PLACE_LIST = 'SAVE_PLACE_LIST';
export const GET_ONE_PLACE = 'GET_ONE_PLACE';

placeTypeManage.js

export const CHANGE_PAGE_NUM = 'CHANGE_PLACE_TYPE_PAGE_NUM';
export const GET_PLACE_TYPE_LIST = 'GET_PLACE_TYPE_LIST';
export const SAVE_PLACE_TYPE_LIST = 'SAVE_PLACE_TYPE_LIST';
export const ADD_PLACE_TYPE = 'ADD_PLACE_TYPE';

  4. 接口（api）
   请求插件使用的是axios，使用npm install axios --save安装
   

apiConfig.js

const baseUrl = '/GMS/';
export default baseUrl;

placeLeaseRecordManageApi.js

import * as http from 'axios';
import baseUrl from './apiConfig';

export const getPlaceLeaseRecordList = (data,options) => http.post(baseUrl+'placeLeaseRecordManage/selectPlaceLeaseRecordList',data,options);
export const checkPlaceLeaseRecord = (data,options) => http.post(baseUrl+'placeLeaseRecordManage/checkPlaceLeaseRecord',data,options);

plcaceManageApi.js

import * as http from 'axios';
import baseUrl from './apiConfig';

export const getPlaceList = (data,options) => http.post(baseUrl+'placeManage/selectPlaceList',data,options);
export const addPlace = (data,options) => http.post(baseUrl+'placeManage/addPlace',data,options);
export const getOnePlace = (data,options) => http.post(baseUrl+'placeManage/selectOnePlace',data,options);
export const updatePlace = (data,options) => http.post(baseUrl+'placeManage/updatePlace',data,options);
export const deletePlace = (data,options) => http.post(baseUrl+'placeManage/deletePlace',data,options);
export const getPlaceStatus = (data,options) => http.post(baseUrl+'placeStatusManage/getPlaceStatusListByPlaceId',data,options);

placeTypeManageApi.js

import * as http from 'axios';
import baseUrl from './apiConfig';

export const getPlaceTypeList = (data,options) => http.post(baseUrl+'placeTypeManage/selectPlaceTypeList',data,options);
export const addPlaceType = (data,options) => http.post(baseUrl+'placeTypeManage/addPlaceType',data,options);
export const deletePlaceType = (data,options) => http.post(baseUrl+'placeTypeManage/deletePlaceType',data,options);
export const getOnePlaceType = (data,options) => http.post(baseUrl+'placeTypeManage/selectOnePlaceType',data,options);
export const updatePlaceType = (data,options) => http.post(baseUrl+'placeTypeManage/updatePlaceType',data,options);

  5. Vo实体（models）
   根据接口文档或者已经定义好的接口定义
   

PageVo.js

export default class PageVo{
  constructor(pageNum,pageSize,order,keyWords,fuzzy) {
    this.pageNum = pageNum;
    this.pageSize = pageSize;
    this.keyWords = keyWords;
    this.fuzzy = fuzzy;
  }

  voToJson() {
    return JSON.stringify(this);
  }
}

PlaceLeaseRecordVo.js

export default class PlaceLeaseRecordVo{
  id;
  placeId;
  startTime;
  endTime;
  userId;
  cost;
  result;
  payStatus;
  checkStatus;
  constructor() {
  }

  voToJson() {
    return JSON.stringify(this);
  }
}

PlaceStatusVo.js

export default class PlaceStatusVo{
  id;
  placeId;
  timeId;
  placeStatus;
  constructor() {
  }

  voToJson() {
    return JSON.stringify(this);
  }
}

PlaceTypeVo.js

export default class PlaceTypeVo{
  constructor(id,placeTypeName) {
    this.id = id;
    this.placeTypeName = placeTypeName
  }

  voToJson() {
    return JSON.stringify(this);
  }
}

PlaceVo.js

export default class PlaceVo{
  id;
  placeName;
  placeLocation;
  placeType;
  cost;
  status;
  constructor() {
  }

  voToJson() {
    return JSON.stringify(this);
  }
}

  6. redux三要素（stores，actions，reducers）
   

   

   

好不容易把所有的文件都创建了，接下来就是填代码的事了。

小提示：及时把代码上传的Git是个好习惯