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
可能会报错
删掉.git文件夹再试
添加less支持
下面的配置照抄sass的 修改一下名称
3.新建项目目录
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目录
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; } } }
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的自动加载配置,增加三行映射
再次运行 可以看到页面显示了,但是样式不对
yarn add babel-plugin-import
然后打开package.json
增加几行配置
再次运行正常
本文为看恩吧原创文章,转载无需和我联系,但请注明来自knsay.com