ant-design 实现一个登陆窗口

来源：互联网发布：济南舜德数据怎么样编辑：程序博客网时间：2024/05/16 01:38

前提：已经完成项目实战（https://ant.design/docs/react/practical-projects-cn#定义-Model）

如果要想实现一个登陆窗口，首先得有一个ui，想到的是应该创建一个组件；有了组件之后，可以考虑直接在实战的组件中去显示，或者单独定义一个路由，去访问该路由去显示（这里采用路由的方案），最终效果如下：

第一步：在src/components文件间中，实现：

/** * Created by kunyashaw on 2017/2/28. */import { Button } from 'antd';import React from 'react';const Login = () => {  return (    <div>      <h2>这是登录窗口</h2>    <Button type="primary">注册</Button>    <Button>登录</Button>      <br/>    <Button type="dashed">Dashed</Button>    <Button type="danger">Danger</Button>    </div>);};export default Login;

第二步：在routes目录中创建Login.js

import React from 'react';import Login from '../components/Login'const LoginRoute = (props) => (  <Login></Login>);export default LoginRoute;

第三步：在router.js中添加路由信息的配置

首先引入：

import LoginRoute from './routes/Login'

添加路由信息的设置：

<Route path="/login" component={LoginRoute} />

最终代码如下：

import React from 'react';import { Router, Route } from 'dva/router';import IndexPage from './routes/IndexPage';import Products from './routes/Products';import LoginRoute from './routes/Login'function RouterConfig({ history }) {  return (    <Router history={history}>      <Route path="/" component={IndexPage} />      <Route path="/products" component={Products} />      <Route path="/login" component={LoginRoute} />    </Router>  );}export default RouterConfig;

此时就已经实现功能了，其他更复杂的在此基础上修改就可以了。

0 0