概述

官方文档

• Umi，中文可发音为乌米
• 是可扩展的企业级前端应用框架
• Umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展
• 然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求

创建项目

1. 先找个地方建个空目录
   $ mkdir myapp && cd myapp
2. 创建项目
   npx @umijs/create-umi-app
3. 安装依赖
   npx @umijs/create-umi-app

路由

pages 下的文件会自动创建路由

嵌套路由

文件夹路径

• 文件名为路由
• 文件夹下的 -layout.tsx 为一级路由
• 一级路由需要{props.childern}方法引入二级路由
• 其他文件夹为嵌套路由

带参数路由

文件结构

• 文件夹名为路由
• 文件需要 [ id ] 获取参数

import React from 'react'
import {useParams} from 'umi'

export default function Detail(props:any) {
  const params = useParams()
  console.log(params)   // 另一种方法获取传入的值
  return (
    <div>Detail-{props.match.params.id}</div>
  )
}

路由拦截

src 文件夹下创建 wrappers 文件

import React from 'react'
function Center() {
  return (
    <div>Center</div>
  )
}
Center.wrappers = ["@/wrappers/Auth"]  // 创建拦截
export default Center

wrappers 下的文件进行判断拦截

import React from 'react'
import { Redirect } from 'umi'

export default function Auth(props:any) {
  if(localStorage.getItem("token")) {
    return (
      <>
      {props.children}
      </>
    )
  }
  return <Redirect to={'/login'}/>
}

组件库集成

• antd 组件的使用

.umirc.ts

• 用来关闭自带的antd

 antd: {
    mobile: false
  }

dva 集成

redux 的使用

• 文件夹：src / models / CityModel.ts

export default {
  namespace: 'city',  // 命名空间，作用：引入使用，为了区分其他model，不写以文件名为准
  state: {
    cityName: '北京',
    cityId: '110100'
  },
  reducers: {
    changeCity(prevState:any, action: any) {
      return {
        ...prevState,
        cityName: action.payload.cityName,
        cityId: action.payload.cityId
      }
    }
  }
}

• 异步处理(redux-saga)

export default {
  namespace: 'cinema',
  state: {
    list: []
  },
  reducers: {
    changeList(prevState:any, action: any) {
      return {
        ...prevState,
        list: action.payload
      }
    },
    clearList(prevState:any) {
      return {
        ...prevState,
        list: []
      }
    }
  },
  effects: {
    *getList(action: any, obj: any):any {
      // console.log('getList')
      const { put, call } = obj
      var res = yield call(getListForCinema, action.payload.cityId)
      yield put({
        type: 'changeList',
        payload:res
      })
    }
  }
}

async function getListForCinema(cityId:any) {
  var res = await fetch(`https://m.maizuo.com/gateway?cityId=${cityId}&ticketFlag=1&k=7265852`, {
    headers: {
      'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"16597710112470525318201345"}',
      'X-Host': 'mall.film-ticket.cinema.list'
    }
  }).then(res=>res.json())
 return res.data.cinemas
}