用umi开发项目实战

创建一个空文件夹 umi-study 

npm init

npm i -g umi

umi g page index

pages下面有一个隐藏的.umi文件夹。

umi dev 开启一个本地服务器。

http://localhost:8001

 

umi g page user 创建一个user页面

根目录下创建一个mock文件夹

创建user.js

export default {
    "/user/getUserDetail": (req, res) => {
        setTimeout(() => {
            res.send({
                status: 200,
                message: 'success',
                data: {
                    name: '麦乐',
                    age: '1',
                    country: 'cn'
                }
            })
        }, 500)
       
    }
}

根目录下创建一个layouts文件夹,测试了一个 也可以是layout， 不能是其它的名字。

layouts文件夹下创建一个index.js文件

import React from 'react'

class Layout extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: true
        }
    }
    render() {
        return (
            <div>
                <p>common page</p>
                {this.props.children}
            </div>
           
        )
    }
}
export default Layout;

重新启动服务器，会发现所有的路由都会展示这个组件

/

/user

创建config文件夹 index.js

import axios from 'axios'

axios.defaults.timeout = 3 * 1000;
axios.default.baseUrl = 'http://localhost:8001'
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'

const WHITE_URL = [
    '/user/getUserDetail'
]

// 添加请求拦截器
axios.interceptors.request.use((req) => {
   if(WHITE_URL.includes(req.url)) return req;
   if(!store.user.isLogin) {
       location.href = '/login'
   }
   return req;
    // 在发送请求之前做些什么
}, (error) => {
    // 对请求错误做些什么
    return Promise.reject(error);
});
 
// 添加响应拦截器
axios.interceptors.response.use((response) => {
 
    // 对响应数据做点什么
    return response;
}, (error) => {
    // 对响应错误做点什么
    return Promise.reject(error);
});

class Axios {
    get(path, params) {
        return axios.get(path, params).then((res) => {
            console.log('path = ', path, 'params =' , params, 'res = ' ,res)
            return res
        }).catch((error) => {
            console.log(path , error)
            return error
        })
    }
    post(path, params) {
        return axios.post(path, params).then((res) => {
            return res
        }).catch((error) => {
            return error
        })
    }
}

export default new Axios();

这里需要按照axios 

创建api文件夹 user.js

import Axios from "../config/index";

export const getUserDetail = (params) => Axios.get('/user/getUserDetail', {params})

pages下面创建store文件夹

index.js

import user from './user'

export default {
    user
}

user.js

import { observable, computed, action  } from 'mobx'
import { getUserDetail } from '../../api/user'

class User {
    @observable isLogin = false;

    @action.bound
    async fetch() {
        let { data, status } = await getUserDetail({id: '00'})
        this.data = data;
        return data
    }
}
export default new User();

 这里需要按照mobx和mobx-react

更改layout组件

import React from 'react'
import { Provider, observer } from 'mobx-react'
import store from '../pages/store'

class Init extends React.Component {
    render() {
        return (
            <div>加载中</div>
        )
    }
}
@observer
class Layout extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: true
        }
    }
    render() {
        return (
            <Provider {...store}>
                <div>
                    {this.state.loading ? <Init /> : this.props.children}
                </div>
            </Provider>
           
        )
    }
    componentDidMount() {
        store.user.fetch().then((res) => {
            console.log(res)
        })
    }
}
export default Layout;

这里请求到的是本地mock 的数据