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-dom

npm i aixos
//安装组件库
npm i antd

npm 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" />
        <Menu
          theme="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>
        <Header
          style={{
            padding: 0,
            background: colorBgContainer,
          }}
        >
          <Button
            type="text"
            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            onClick={() => setCollapsed(!collapsed)}
            style={{
              fontSize: '16px',
              width: 64,
              height: 64,
            }}
          />
        </Header>
        <Content
          style={{
            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>
        <Form
          name="basic"
          form={form}
          labelCol={{
            span: 4,
          }}
          wrapperCol={{
            span: 18,
          }}
          style={{
            maxWidth: 600,
          }}
          initialValues={{
            remember: true,
          }}
          onFinish={onFinish}
          autoComplete="off"
        >
          <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: 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;
    }
  }
}