umi部分使用总结
1. 创建页面及路由
1
2
3
4
5
6
7
8
|
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. 动态路由添加
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
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. 动态路由跳转
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
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 配置路由
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
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
1
2
3
4
5
6
7
8
|
export default { // "method url": (req, res) => {} "get /Api/goods" : (req, res) => { setTimeout( () => { res.json({result: data}) },300) } } |
6. umi models 示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
// 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
1
2
3
4
5
6
7
8
9
10
|
// config/config.js export default { plugins: [ "umi-plugin-react" , { antd: true , // true为启用 dva: true } ] } |
8. 拦截器在全局下的应用——global.js
9. src/app.js——修改dva的配置
1
2
3
4
5
6
7
8
9
|
export default dva = { config: { onStateChange(state){ if (localstorage) { localStorage.setItem( 'cart' , JSON.stringify(state.cart)) } } } } |