【一】从零搭建react-新 实现登录页

1.

npm install yarn 

npx create-react-app react-test

cd react-test

yarn add axios react-router-dom less less-loader

2.

生成webpack.config.js

yarn eject


可能会报错  

image.png


删掉.git文件夹再试


添加less支持

image.png


下面的配置照抄sass的 修改一下名称

image.png


3.新建项目目录

image.png


4.router.js 内容。 routes 是react-router-dom v6的写法 v5是switch ,还有一点 v6是element v5是component,v6是useNavigate,v5是useHistory

import React from 'react'
import { HashRouter, Routes, Route } from 'react-router-dom'
import Login from 'pages/login/login'
import AppPage from 'pages/app/app'


function RouterDom() {
    return (
        <HashRouter>
            <Routes>
                <Route exact path="/" element={<Login/>} />
                <Route path="/app" element={<AppPage/>} />
            </Routes>
        </HashRouter>
    );
}
export default RouterDom


src目录


app.css 内容

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary, a
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  height: 100%;
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}


app.js 内容

import './App.css';
import RouterDom from './router'

function App() {
  return (
      <div className="App" style={{ height: '100vh' }}>
        <RouterDom />
      </div>
  );
}
export default App


5.pages目录

image.png


6.引入antd,完成登录页

yarn add antd


login.js

import React, { useState } from 'react'
import { Input, Button, Row, Col, Card, message } from 'antd';
import { EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons';
import { useNavigate } from "react-router-dom";
import RequestTools from 'utils/request.js'
import './login.less'

const _req = new RequestTools()

function Login() {
    const [username, setUsername] = useState('')
    const [password, setPassword] = useState('')
    let navigate = useNavigate();
    //提交
    const submit = () => {
        let params = { username, password }
        _req.axiosPost(params, 'doUserLogin').then(res => {
            if (res.code === 0) {
                message.success(res.data.msg)
                navigate('/app/home')
            }
        })
    }
    //input值发生改变
    const oninputchange = (e) => {
        let name = e.target.name
        let value = e.target.value
        switch (name) {
            case 'username':
                setUsername(value)
                break;
            case 'password':
                setPassword(value)
                break;
            default:
                break;
        }
    }
    return (
        <div className="login">
            <div className="login-form">
                <Card title="欢迎登录" style={{ width: '100%' }}>
                    <Row gutter={[24, 24]} justify={'center'}>
                        <Col span={24}>
                            <Input
                                onChange={(e) => oninputchange(e)}
                                name="username"
                                placeholder="用户名"
                            />
                        </Col>
                    </Row>
                    <Row gutter={[24, 24]} justify={'center'}>
                        <Col span={24}>
                            <Input.Password
                                onChange={(e) => oninputchange(e)}
                                name="password"
                                placeholder="密码"
                                iconRender={visible => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)}
                            />
                        </Col>
                    </Row>
                    <Row gutter={[24, 24]} justify={'center'}>
                        <Col span={24}>
                            <Button
                                type="primary"
                                className="login-form-btn"
                                onClick={() => { submit() }}
                            >
                                登录
                            </Button>
                        </Col>
                    </Row>
                </Card>
            </div>
        </div >
    )
}
export default Login


login.less

.login{
    height: 100%;
    width: 100%;
    min-height: 100vh;
    position: relative;
    background-image: url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    .login-form{
        width: 25%;
        min-width: 400px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        .login-form-btn{
            width: 100%;
        }
        .ant-row{
            margin-bottom: 24px;
        }
    }
}


image.png

request.js

import server from './server.js';
import url from 'api/api.js';
//工具类
export default class RequestTools {
    /*
    * data 接口传参数据
    * urlStr 接口地址名称
    * post请求
    */
    axiosPost = (data, urlStr) => {
        return server({
            url: url[urlStr],
            method: 'post',
            dataType: "json",
            data: data,
        })
    }
}


server.js

import axios from 'axios'
import qs from 'qs'
import { message } from 'antd'

// 默认域名
// axios.defaults.baseURL = 'http://localhost:8080';
// 配置请求头
axios.defaults.headers["Content-Type"] = 'application/x-www-form-urlencoded'
// 超时请求
axios.defaults.timeout = 300000;
//让ajax携带cookie
axios.defaults.withCredentials = true;

//开始请求设置,发起拦截处理
axios.interceptors.request.use(
    config => {
        //RequestPayload格式转FormData
        config.headers['content-type'] = 'application/x-www-form-urlencoded'
        config.data = qs.stringify(config.data)
        return config
    },
    err => {
        return err
    }
)
// 响应拦截器
axios.interceptors.response.use(
    response => {
        //数据请求成功
        if (response.data.code === 0 ) {
            return response.data
        }
        //没有登录状态,强制登录
        else if (response.data.code === 10) {
            window.location.href = "#/"
            return response.data
        }
        //数据请求失败
        else {
            message.error(response.data.desc)
            return response
        }
    },
    error => {
        return Promise.reject(error)
    }
)


export default axios


api.js

const HISTORY = `/api`

const URL = {
    doUserLogin: `${HISTORY}/login/doSignIn`, //平台端登录
}
export default URL


运行一下

yarn start

报错  找不到login

修改一下webpack的自动加载配置,增加三行映射

image.png


 再次运行  可以看到页面显示了,但是样式不对

yarn add babel-plugin-import


然后打开package.json

增加几行配置

image.png


再次运行正常

打赏

看恩吧
网站不承担任何有关评论的责任
  • 最新评论
  • 总共条评论
取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦