Myfun's Blog
2018-09-29

UmiJS

  • UmiJS 是一个类 Next.JS 的 react 开发框架。
  • 他基于一个约定，即 pages 目录下的文件即路由，而文件则导出 react 组件
  • 然后打通从源码到产物的每个阶段，并配以完善的插件体系，让我们能把 umi 的产物部署到各种场景里。 umiJS

2.安装 #

npm install -g umi

3. 启动项目 [#](#t23. 启动项目)

4. layouts [#](#t34. layouts)

4.1 layouts/index.js [#](#t44.1 layouts/index.js)

src/layouts/index.js

import React,{Component,Fragment} from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import Link from 'umi/link';
export default class Layout extends Component{
    render() {
        return (
            <Fragment>
                <nav className="navbar navbar-default">
                    <div className="container-fluid">
                        <div className="navbar-header">
                            <Link to="/" className="navbar-brand">张熙沐枫</Link>
                        </div>
                        <div>
                            <ul className="nav navbar-nav">
                                <li className="active"><Link to="/" >首页</Link></li>
                                <li><Link to="/user" >用户管理</Link></li>
                                <li><Link to="/profile">个人设置</Link></li>
                            </ul>
                        </div>
                    </div>
                </nav>
                <div className="container">
                    <div className="row">
                        <div className="col-md-12">
                            {this.props.children}
                        </div>
                    </div>
                </div>

            </Fragment>
        )
    }
}

5. 用户管理 [#](#t55. 用户管理)

5.1 user/_layout.js [#](#t65.1 user/_layout.js)

pages/user/_layout.js

import React,{Component,Fragment} from 'react';
import Link from 'umi/link';
export default class User extends Component{
    render() {
        return (
            <div className="row">
                <div className="col-md-3">
                    <ul className="nav nav-stack">
                        <li><Link to="/user/list">用户列表</Link></li>
                        <li><Link to="/user/add">新增用户</Link></li>
                    </ul>
                </div>
                <div className="col-md-9">
                    {this.props.children}
                </div>
            </div>
        )
    }
}

5.2 user/list.js [#](#t75.2 user/list.js)

/pages/user/list.js

import React,{Component,Fragment} from 'react';
import Link from 'umi/link';
export default class List extends Component{
    render() {
        return (
            <ul className="list-group">
                <li className="list-group-item">
                    <Link to="/user/detail/1">1</Link>
                </li>
            </ul>
        )
    }
}

5.3 pages/user/add.js [#](#t85.3 pages/user/add.js)

pages/user/add.js

import React,{Component,Fragment} from 'react';
export default class Add extends Component{
    render() {
        return (
            <form className="form-horizontal">
                <div className="form-group">
                    <label className="control-label col-md-2">用户名</label>
                    <div className="col-md-10">
                       <input className="form-control" />
                    </div>
                </div>
                <div className="form-group">
                    <div className="col-md-10 col-offset-2">
                       <input type="submit" className="btn btn-primary"/>
                    </div>
                </div>
            </form>
        )
    }
}

5.3 detail/$id.js

pages/user/detail/$id.js

import React,{Component,Fragment} from 'react';
export default class List extends Component{
    render() {
        console.log(this.props);
        return (
            <table className="table table-bordered">
                <thead>
                    <tr>
                        <td>字段</td>
                        <td>值</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>张三</td>
                    </tr>
                </tbody>
            </table>
        )
    }
}

6. 权限路由 [#](#t106. 权限路由)

6.1 .umirc.js [#](#t116.1 .umirc.js)

export default {
    pages: {
      '/profile': { Route: './routes/PrivateRoute.js' }
    },
  }

6.2 routes/PrivateRoute.js [#](#t126.2 routes/PrivateRoute.js)

import { Route ,Redirect} from 'react-router-dom';

export default (args) => {
  const { render, ...rest } = args;
  return <Route
    {...rest}
    render={props => localStorage.getItem('login')?render(props):<Redirect to="/"/>
    }
  />;
}

7. react动画 [#](#t137. react动画)

npm install react-transition-group --save

7.1 src/pages/user/_layout.js [#](#t147.1 src/pages/user/_layout.js)

src/pages/user/_layout.js

import React,{Component,Fragment} from 'react';
import Link from 'umi/link';
import { TransitionGroup, CSSTransition } from "react-transition-group";
export default class User extends Component{
    render() {
        return (
            <div className="row">
                <div className="col-md-3">
                    <ul className="nav nav-stack">
                        <li><Link to="/user/list">用户列表</Link></li>
                        <li><Link to="/user/add">新增用户</Link></li>
                    </ul>
                </div>
                <div className="col-md-9">
                    <TransitionGroup>
                        <CSSTransition key={this.props.location.pathname} classNames="fade" timeout={300}>
                        {this.props.children}
                        </CSSTransition>
                    </TransitionGroup>
                </div>
            </div>
        )
    }
}

← 安装dva-cli并创建应用 →

Gitalking ...

Markdown is supported

Be the first guy leaving a comment!