ant-design 实现一个登陆窗口
来源:互联网 发布:java 高并发 高性能 编辑:程序博客网 时间:2024/06/05 11:17
前提:已经完成项目实战(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
- ant-design 实现一个登陆窗口
- ant-design 实现一个登陆窗口
- ant-design 实现一个登陆窗口
- 用JAVA实现一个简单的登陆窗口
- 登陆窗口实现dojo
- 登陆窗口的实现
- Wpf 实现登陆窗口
- ant design+node.js+mongoose实现一个简单的注册登录功能
- 实现Ant Design 自定义表单组件
- Ant Design
- openLaszlo简单登陆窗口实现
- Android 一个简单的登陆窗口的实现(文件的保存与读取)
- mac登陆窗口 有两个登陆用户,怎么删除一个
- react+ant design实现Table的增、删、改
- BCB中登陆窗口的实现
- JQuery EasyUI实现登陆小窗口
- Android仿QQ登陆窗口实现原理
- java 登陆窗口的实现
- sass/scss、less
- Android本地化设置----使用标记不应翻译的消息部分(xliff)
- Linux 内核数据结构:位图(Bitmap)
- 正则表达式知识点总结
- JAR、WAR、EAR的使用和区别
- ant-design 实现一个登陆窗口
- [Swift] 2.0 运算符
- synchronized和volatile的区别
- :w ! sudo tee %
- 嵌入式面试题——ARM面试题(四)
- Java代理模式
- 2.重回编码
- sql server misc
- JDK里的设计模式