使用ant-design-pro实现简单的登录页

相关代码: react-demo-02

创建登录页

框架模板自带的登录模板较为复杂,而且不符合我们的登录需求,所以我们需要自行创建登录页.
创建src/pages/Login/index.tsx

import React from 'react';
// 使用函数组件创建   虽然采用了typescript语法 ,但可以先像 js一样写代码.
const Login  = ()=>{
  return (
    <div>
      hellow, login !
    </div>
  )
}

export default Login;

修改路由文件 config/routes.ts

{
    path: '/',
    component: '../layouts/BlankLayout',
    routes: [
      {
        path: '/user',
        component: '../layouts/UserLayout',
        routes: [
          {
            name: 'login',
            path: '/user/login',
            //===>  这里使用刚才创建的组件替换默认登录组件.  /index.tsx 可以省略不写
            component: './Login',
          },
        ],
      },

修改layouts/UserLayout.tsx 组件显示信息

import { GithubOutlined } from '@ant-design/icons';
...
<div className={styles.container}>
        <div className={styles.lang}>
          <SelectLang />
        </div>
        <div className={styles.content}>
          <div className={styles.top}>
            <div className={styles.header}>
              <Link to="/">
                <img alt="logo" className={styles.logo} src={logo} />
                <span className={styles.title}>乐居商城</span>
              </Link>
            </div>
            <div className={styles.desc}>
              /* 国际化配置映射 */
              <FormattedMessage id="pages.layouts.userLayout.title" defaultMessage="默认信息" />
            </div>
          </div>
          {children}
        </div>
                /* 自定义底部
            # https://procomponents.ant.design/components/layout/#footer
        */
        <DefaultFooter
          copyright={`${new Date().getFullYear()} 不凡学院`}
          links={[
            {
              key: 'Ant Design Pro',
              title: 'Ant Design Pro',
              href: 'https://pro.ant.design',
              blankTarget: true,
            },
            {
              key: 'github',
              title: <GithubOutlined />,
              href: 'https://gitee.com/bufanxy/react-learn-demos',
              blankTarget: true,
            },
            {
              key: 'Ant Design',
              title: 'Ant Design',
              href: 'https://ant.design',
              blankTarget: true,
            },
          ]}
        />
</div>

访问 http://localhost:8000/user/login

创建表单

可以参考 ant design 文档,创建表单组件. 修改 src/pages/Login/index.tsx
样式这里采用的是 less ,跟 sass 一样是css预编译器. 通过模块化引入,可以直接在 jsx 中调用. 注意: 在jsx中对属性采用驼峰命名,区别于普通html规范.

import React from 'react';
import { Form, Input, Button } from 'antd';
import styles from './index.less';

const Login  = ()=>{
  // 提交表单且数据验证成功后回调事件
  const onFinish = v=>{
    console.log('v',v);
  }
  // 提交表单且数据验证失败后回调事件
  const onFinishFailed = v=>{
    console.log('ev',v);
  }

  return (
    <Form
      className={styles.main}
      labelCol = {
   
   {span: 8}}
      wrapperCol = {
   
   {span: 16}}
      onFinish= {onFinish}
      onFinishFailed = {onFinishFailed}
    >
      <Form.Item
        label="用户名"
        name="username"
        rules={[
          {required: true ,message: '用户名不能为空!'}
        ]}
      >
        <Input/>
      </Form.Item>
      <Form.Item
        label="密码"
        name="password"
        rules={[
          {required: true, message: '密码不能为空!'}
        ]}
      >
        <Input.Password/>
      </Form.Item>
      <Form.Item 
        wrapperCol={
          {
            offset: 8,
            span: 16
          }
        }
      >
        <Button type="primary" htmlType="submit">登录</Button>
      </Form.Item>
    </Form>
  )
}

export default Login;

// ./index.less
 .main{
    width: 400px;
    margin: 100px auto;
    }

使用 ant design 我们方便的实现了登录页的布局,如何调用接口? 不要着急,这里和vue项目有比较大的差别.我们需要先了解项目的逻辑分层.