React18+Redux+antd 项目实战 JS

React18+Redux+antd 项目实战 js

Ant Design插件官网
Axios官网 (可配置请求拦截器和响应拦截器)
JavaScript官网
Echarts官网

一、项目前期准备

1.创建新项目 hotel-manager

npx create-react-app hotel-manager

2.安装依赖

//安装路由
npm i react-router-domnpm i aixos
//安装组件库
npm i antdnpm i sass

3.删除没必要的文件，最后新建文件夹成这样
在这里插入图片描述
4.修改里面的文件代码
（1）修改index.css

* {margin: 0;padding: 0;list-style: none;text-decoration: none;outline: none;
}body {margin: 0;font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen','Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}

（2）修改App.js

import { BrowserRouter, Route, Routes } from 'react-router-dom';
// 导入页面组件
import Layout from './views/Layout/Layout';
import Login from './views/Login/Login';function App() {return (<BrowserRouter><Routes><Route path='/' element={<Login />} /><Route path='/Layout' element={<Layout />} /></Routes></BrowserRouter>);
}export default App;

（3）清空App.css
（4）修改index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import 'antd/dist/reset.css'
import App from './App';const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

二、开始项目编写
(1)新建Layout.js

import React, { useState } from 'react';
import {MenuFoldOutlined,MenuUnfoldOutlined,UploadOutlined,UserOutlined,VideoCameraOutlined,
} from '@ant-design/icons';
import { Button, Layout, Menu, theme } from 'antd';
import './Layout.scss'const { Header, Sider, Content } = Layout;
export default function () {const [collapsed, setCollapsed] = useState(false);const {token: { colorBgContainer, borderRadiusLG },} = theme.useToken();return (<Layout className='layout'><Sider trigger={null} collapsible collapsed={collapsed}><div className="demo-logo-vertical" /><Menutheme="dark"mode="inline"defaultSelectedKeys={['1']}items={[{key: '1',icon: <UserOutlined />,label: 'nav 1',},{key: '2',icon: <VideoCameraOutlined />,label: 'nav 2',},{key: '3',icon: <UploadOutlined />,label: 'nav 3',},]}/></Sider><Layout><Headerstyle={{padding: 0,background: colorBgContainer,}}><Buttontype="text"icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}onClick={() => setCollapsed(!collapsed)}style={{fontSize: '16px',width: 64,height: 64,}}/></Header><Contentstyle={{margin: '24px 16px',padding: 24,minHeight: 240,background: colorBgContainer,borderRadius: borderRadiusLG,}}>Content</Content></Layout></Layout>)
}

(2)新建Layout.scss

.layout {width: 100vw;height: 100vh;
}

(3)新建Login.js

import React, { useState } from "react";
import './Login.scss'
import { Button, Form, Input, message } from 'antd';
import MyNotification from "../../components/MyNotification/MyNotification";
import { useNavigate } from "react-router-dom";export default function Login() {//导航let navigate = useNavigate()// 通知框状态消息提示let [notiMsg, setNotiMsg] = useState({ type: '', description: '' })// 表单成功提交方法const onFinish = (values) => {console.log('Success:', values);setNotiMsg({ type: 'success', description: message })//跳转到首页navigate('/layout')};let [form] = Form.useForm()const onReset = () => {form.resetFields();};return (<div className="login"><div className="content"><h2>后台管理系统</h2><Formname="basic"form={form}labelCol={{span: 4,}}wrapperCol={{span: 18,}}style={{maxWidth: 600,}}initialValues={{remember: true,}}onFinish={onFinish}autoComplete="off"><Form.Itemlabel="账号"name="username"rules={[{required: true,message: '请输入账号!',},]}><Input /></Form.Item><Form.Itemlabel="密码"name="password"rules={[{required: true,message: '请输入密码!',},]}><Input.Password /></Form.Item><Form.ItemwrapperCol={{offset: 4,span: 16,}}><Button type="primary" htmlType="submit">登录</Button><Button style={{ marginLeft: '10px' }} onClick={onReset}>取消</Button></Form.Item></Form><MyNotification notiMsg={notiMsg} /></div></div>)
}

(4)新建Login.scss

.login {width: 100vw;height: 100vh;background-color: rgb(141, 160, 202);display: flex;justify-content: center;align-items: center;.content {width: 500px;height: 230px;border: 1px solid white;padding-top: 20px;h2 {text-align: center;}}
}