UMI学习-4 登录页面提交数据简单实现

全国肺炎，过节期间没地方去在家学习antd。

一、感觉antd pro项目太庞大了，可以学习下结构和代码风格，但不适合新手直接学习测试语法用，将从一个空白项目开始创建

1、打开umi管理后台，创建一个新项目

 

 

 

 2、umi会自动安装各种依赖项，进行项目创建

 

 3、项目结构如下，将仿照antd做一个登录页面

 

二、实现登录页面

创建了不包含antd演示的jgdemo项目，以后改使用vscode编辑代码,创建user,login目录

 

 

 2、点击start可以直接启动项目

 

 

 3、安装antd组件

 

 

 4、antd官网

https://ant.design/docs/react/introduce-cn

蚂蚁金服的技术网站，在老家破网打开速度特别慢！

修改index.tsx代码如下

 

 

 运行效果如下

 

 

 

5、为了省事，直接在index上做登录了，增加两个input输入框,最终tsx代码如下

import React from 'react';
import styles from './index.css';
import { Button,Input } from 'antd';
export default function() {
  return (
    

      

        

        
用户名:
        

        
        

        
密码:
        

        
      
      登录
    
  );
}

注意不能直接写style="width:200px",margin后面要加双引号

运行效果如下

 6、网上一般的写法是使用组件，index.tsx代码继续完善，

我自己摸索的实现方法如下，后期复杂重用性高的还是要封装成专门的组件。

import React from 'react';
import styles from './index.css';
import { Button,Input } from 'antd';
export const LOGIN = {
  login:function(){
    var userName = (document.getElementById('userName') as HTMLInputElement)?.value;
    var passWord = (document.getElementById('passWord') as HTMLInputElement)?.value;
    const postData ={
      userName:userName,
      passWord:passWord
    };
    fetch('http://127.0.0.1:8080/login',{
            // post提交
            method:"POST",
            headers:{
                "Content-type":"application/json"
            },
            body:JSON.stringify(postData)//把提交的内容转字符串
        })
        .then(res =>res.json())
        .then(data =>{
            console.log(data)
        })
  }
};
export default function() {
  return (
    

      

        

        

        
用户名:
        

        
        

        
密码:
        

        
        
      
      (LOGIN.login())}>登录
    
  );
}

这样，点击登录按钮即可post数据到服务端后台