Mobx+Reactjs+Material-UI+Webpack+React-Router 搭建后台管理系统

先讲一下mobx，mobx是一个强大的状态管理工具，相比redux, 更将深入的阐释了面向对象的概念，mobx官网的几个实例demo也写得很精彩，大家可以好好拜读一下。https://github.com/mobxjs/awesome-mobx#example-projects中有很多封装得不错的工具类。mobx简单的应用方法官网都有介绍，自行入门。

Material-ui号称是最流行的ui框架之一，手残入坑，个人觉得这个ui框架还有很多成长空间。倒是有不少基于当前框架的第三方组件，需要在实际应用中去挖掘，该框架的优势是web端和移动端用起来都没有违和感。可能是之前在使用antd留下的惯用，第一次接触表单控件时觉得很费劲，后期跟mobx结合使用，也算是一大利器。

其他三个都是常用的技术栈，无须赘述，下面直接讲项目。

在项目中添加material-ui一定要按照官网的步骤进行操作，避免不必要的错误，例如图标不显示，css样式不对等，mobx同理。

项目入口：index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import {Provider} from "mobx-react";
import * as rootStore from './store/rootStore';
import {BrowserRouter} from 'react-router-dom';
import Routes from './routes/index';
ReactDOM.render(
    <Provider {...rootStore}>
        <BrowserRouter>
            <Routes />
        </BrowserRouter>
    </Provider>, document.getElementById('root'));

这里涉及到怎么管理多个store文件，rootStore是多个store的集合，以便于在项目编译过程中进行统一管理。以下是rootStore的代码

import UserStore from './userStore'
import CommonStore from './commonStore'
export {UserStore,CommonStore}

react-router的基础配置，因为系统本身有多级菜单的情况，除了外部链接地址，其他内部链接地址将在另外一个文件中进行配置

import {Route, Switch} from "react-router";
import React from 'react';
import Main from "../pages/main";
import Login from "../pages/login"; // 导入store
import SignUp from '../pages/signup'
const Routes = () => (
    <Switch>
        <Route path={"/signup"} component={SignUp}/>
        <Route path={"/main"} component={Main}/>
        <Route path={"/"} component={Login}/>
    </Switch>
)

export default Routes;

下图所示为左侧菜单栏，mui中没有可以直接用的菜单，需要自己写控件，官网有一级菜单的写法，稍作优化改成了二级菜单的样子

下图是数据展示的控件，可以直接使用第三方控件material-table

常用的模块权限的分配

网络请求选用的是fetch，对fetch进行了简单的封装，结合mobx，控制整个框架的mvc结构模式

import "whatwg-fetch"
import commonStore from '../store/commonStore'
const API_ROOT = '';
const _req = (url,body,method)=>{
  fetch(url, {
    method: method,
    body: JSON.stringify(body),
    headers:{
      "Content-type":"application:/x-www-form-urlencoded:charset=UTF-8"
    },
  }).then(resp => {
    return resp;
  }).then((data) => {
    return data
  }).catch(error => {
    throw error;
  });
}
const requests = {
  get: url =>{
     return fetch(url, {
      method: 'GET',
    }).then((res) => {
          return res.json();
        })
        .then((data)=>{
          return JSON.stringify(data)
        })
        .catch((error)=>{
          throw error
        });
  },
  post: (url,body)=>{
     _req(API_ROOT+url,body,"POST")
  },
  delete:(url,body)=>{
    _req(API_ROOT+url,body,"DELETE")
  },
  put: (url,body)=>{
    _req(API_ROOT+url,body,"PUT")
  }
};

const Auth ={
  login:()=>{
     return requests.get("http://jsonplaceholder.typicode.com/posts").then((data)=>{
        return data;
    }).catch((e)=>{
      throw  e
     })
  },
  register:(username,email,password)=>{
    return requests.post("/register",{"username":username,"password":password,"email":email})
        .then((data)=>{
          return data;
        }).catch((e)=>{
          throw e;
        })
  }
}

export default {
  Auth
}

简单封装后在mobx中进行调用，

@action
setUser(){
      return agent.Auth.login().then((data)=>{
          return data;
      }).catch((e)=>{
          throw e;
    })
}

在ui中调用store再调用该方法

this.props.UserStore.setUser().then((data)=> {

    this.props.history.push('main/dashboard');
}).catch((error=>{
    alert("error"+error)
}));

附一份具体的链接地址

https://gitee.com/joycewu/reactjs_mobx_material-ui

转载于:https://my.oschina.net/u/588582/blog/3075429