前提:已经完成项目实战(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;

  

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

ant-design 实现一个登陆窗口的更多相关文章

  1. 使用Ant Design写一个仿微软ToDo

    实习期的第一份活,自己看Ant Design的官网学习,然后用Ant Design写一个仿微软ToDo. 不做教学目的,只是记录一下. 1.学习 Ant Design 是个组件库,想要会用,至少要知道 ...

  2. 使用Vue+Django+Ant Design做一个留言评论模块

    使用Vue+Django+Ant Design做一个留言评论模块 1.总览 留言的展示参考网络上参见的格式,如掘金社区: 一共分为两层,子孙留言都在第二层中 最终效果如下: 接下是数据库的表结构,如下 ...

  3. QT+动手设计一个登陆窗口+布局

    登陆窗口的样式如下: 这里面涉及着窗口的UI设计,重点是局部布局和整体布局, 首先在ui窗口上添加一个容器类(Widget),然后将需要添加的控件放置在容器中,进行局部布局(在进行局部布局的时候可以使 ...

  4. React学习及实例开发(二)——用Ant Design写一个简单页面

    本文基于React v16.4.1 初学react,有理解不对的地方,欢迎批评指正^_^ 一.引入Ant Design 1.安装antd yarn add antd 2.引入 react-app-re ...

  5. Ant Design 的一个练习小Demo

    Ant Design 由蚂蚁金服团队出品, 基于 React 的组件化开发模式,封装了一套丰富而实用的 UI 组件库. 在这个练习Demo 中,按照 Ant Design 官网的教程示例,尝试使用 A ...

  6. 同时使用 Ant Design of React 中 Mention 和 Form

    使用场景,在一个列表中,点击每一行会弹出一个表单,通过修改表单数据并提交来修改这一行的数据,其中某个数据的填写需要通过Mention实现动态提示及自动补全的功能. 具体效果为: 遇到的问题: 1.希望 ...

  7. Ant Design Pro 脚手架+umiJS 实践总结

    一.简介 1.Ant Design Pro Ant Design Pro是一款搭建中后台管理控制台的脚手架 ,基于React,dva.js,Ant Design (1)其中dva主要是控制数据流向,是 ...

  8. Ant Design(ui框架)

    官方文档:https://ant.design/docs/react/introduce-cn 说明:Ant Design 是一个 ui框架,和 bootstrap 一样是ui框架.里面的组件很完善, ...

  9. 封装一个漂亮的ant design form标签组件

    在ant design 的form组件中 能用于提交的组件比较少,所以我在这写了一个可以单选.多选标签提交的组件,调用非常简单. 代码: import React,{Fragment} from 'r ...

随机推荐

  1. BestCoder Round #81 (div.2)

    HDU:5670~5764 A题: 是一个3进制计数: #include <bits/stdc++.h> using namespace std; ]; int calc(long lon ...

  2. Educational Codeforces Round 10 D. Nested Segments 【树状数组区间更新 + 离散化 + stl】

    任意门:http://codeforces.com/contest/652/problem/D D. Nested Segments time limit per test 2 seconds mem ...

  3. POJ 2704 Pascal's Travels 【DFS记忆化搜索】

    题目传送门:http://poj.org/problem?id=2704 Pascal's Travels Time Limit: 1000MS   Memory Limit: 65536K Tota ...

  4. System.Chare的成员

    实现效果: 知识运用: System.Char的静态方法 (判断一个给定的字符是否为数字 字母 标点符号或其他) 实现效果: static void CharFunctionality() { Con ...

  5. RabbitMQ .NET Client 实战实验

    由于公司业务需求,最近想上RabbitMQ,之前我研究了一段时间微软的MSMQ.开源队列有很多,各有优劣.就先拿RabbitMQ练练手吧.本篇着重代码部分,至于怎么安装,怎么配置不在赘述.而且代码是在 ...

  6. GreenPlum 与hadoop什么关系?(转)

    没关系. gp 可以处理大量数据, hadoop 可以处理海量. gp 只能处理湖量,或者河量. 无法处理海量. 作者:SallyLeo链接:https://www.zhihu.com/questio ...

  7. javascript dom 操作详解 js加强

    js加强操作实现代码. 1 .文档里的每个节点都有属性 nodeName . nodeValue . nodeType nodeName 文本节点的的节点名是 #text , nodeName 是只读 ...

  8. Ajax实现异步操作实例_针对JSON格式的请求数据

    最近写了一篇ajax异步操作XML格式的,今天就写关于json格式的. 一.简单了解Json 1. JSON有两种表示结构,对象和数组. 1.1 对象: { key1:value1, key2:val ...

  9. http://blog.csdn.net/hhhccckkk/article/details/9313999

    http://blog.csdn.net/hhhccckkk/article/details/9313999

  10. 轻量ORM-SqlRepoEx (四)INSERT、UPDATE、DELETE 语句

    *本文中所用类声明见上一篇博文<轻量ORM-SqlRepoEx (三)Select语句>中Customers类 一.增加记录 1.工厂一个实例仓储 var repository = Rep ...