umi 部分使用介绍

1. 创建页面及路由

umi  g page index
// 创建index首页，会创建一个pages文件夹，里面有index.js 和index.css

umi dev
// 启动项目到8000端口，localhost:8000会显示刚刚创建的index

umi g page about 
// 创建about页面， pages文件夹里面增加about.js 和 about.css,即可访问localhost:8000/about

2. 动态路由添加

 pages文件夹里面创建users文件夹，users文件夹里面创建$id.js和$id.css

// $id.js
import styles from './$id.css';

export default function(props) {
  return (
    <div className={styles.normal}>
      <h1>Page {props.match.params.id} test</h1>
    </div>
  );
}

// url输入localhost:8000/users/1 显示 page 1 test
// url输入localhost:8000/users/2 显示 page 2 test

umi g page users/_layout
// 在users文件夹里面增加_layout.js 和 _layout.css

// url输入localhost:8000/users/1 显示 page layout
// url输入localhost:8000/users/2 显示 page layout

// 修改layout.js代码
import styles from './_layout.css';

export default function(props) {
  return (
    <div className={styles.normal}>
      <h1>Page _layout</h1>
      {props.children} // 显示子路由内容
    </div>
  );
}

// url输入localhost:8000/users/1 显示 page layout 和page 1 test

// url输入localhost:8000/users/1 显示 page layout 和page 2 test

3. 动态路由跳转

umi g page users/index

// users/index 代码
import Link from 'umi/link'
// umi 对props.history进行了封装
import router from 'umi/router'
import styles from './index.css';
const users = [
  {id: 1, name: 'Tom'},
  {id: 2, name: 'Jerry'},
  {id: 3, name: 'Bob'}
]

export default function(props) {
  return (
    <div className={styles.normal}>
      <h1>Page User List</h1>
      <ul>
        {users.map(user => 
            // 通过点击事件的方式跳转
          <li key={user.id} onClick={() =>
          // 也可使用router.push(`/users/${user.id}`)
          props.history.push(`/users/${user.id}`)}>
            {/* <Link to={`/users/${user.id}`}>{user.name}</Link> */} // 通过标签方式跳转
            {user.name}
          </li>
        )}
      </ul>
    </div>
  );
}

4. config/config.js 配置路由

export default{
    routes: [
        {path: "/", component: "./index"}, // 是相对于pages
        {path: "/about", component: "./about", Routes: [
            "./routes/PrivateRoute.js"  // 是相对于根目录的  
        ]}, // Routes  路由守卫
        {
            path: "/users",
            component: "./users/_layout"
            routes: [
                {path: "/users/", component: "./users/index"},
                {path: "users/:id", component: "./users/$id"}
            ]
        }
    ]
}

5. models/goods.js

export default {
    // "method url": (req, res) => {}
    "get /Api/goods": (req, res) => {
        setTimeout( () => {
            res.json({result: data})
        },300)
    }
}

6. umi models 示例

// goods.js

import axios from 'axios'

function getGoods(){
    return axios.get('/Api/goods')
}

export default{
    namespace: 'goods', // model的命名空间,若不定义则跟文件名同名
    // {title: 'WEB前端'},{title: 'WEB全栈'} 初始数据
    state: [], 
    effects: {// 异步操作
        *getList(action, {call, put}){
            const res = yield call(getGoods);
            yield put({type: 'initGoods', payload: res.data.result})
        }
    }, 
    reducers: {
        initGoods(state, action){
            return action.payload
        },
        // 更新状态
        addGood(state, action){
            return [...state, { title: action.payload.title }]
        }
    }
}

// gooods. js 中代码应用dva
import { connect } from 'dva'

@connect(
    state => ({
        goodsList: state.goods // 获取指定命名空间的模型状态
    }),
    {
        addGood: title => ({
            type: 'goods/addGood', // 命名空间+reducer组成名字
            payload: { title }
        }),
        getList: () => ({
            type: 'goods/getList' // 命名空间+effects组成名字
        })
    }
)

export default class extends React.Component{

    componentDidMount(){
        this.props.goodList()
    }

    render(){
        return (
            <div>
                <h2>Page Goods</h2>
                <ul>
                    { 
                        this.props.goodList.map(good =>
                            <li key={good.title}>
                                { good.title }
                            </li>
                    }
                </ul>
                <button onClick={() => this.props.addGood('商品'+ new Date().getTime())}>添加商品</button>
            </div>
        )
    }
}

7. umi 中使用antd

// config/config.js
export default{
    plugins: [
        "umi-plugin-react",
        {
            antd: true, // true为启用
            dva: true
        }
    ]
}

8. 拦截器在全局下的应用——global.js

9. src/app.js——修改dva的配置

export default dva = {
    config: {
        onStateChange(state){
            if (localstorage) {
                localStorage.setItem('cart', JSON.stringify(state.cart))
            }
        }        
    }
}