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))
}
}
}
}