《CMS后台系统》项目实战 详细分解（四）

默海笑
234 阅读2分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第13天，点击查看活动详情。

登录

  • 在api.js 下面添加登录请求
// 登录
export const LoginApi = (params) => request.post('/login', params)

image.png

  • 在Login.js引入

在OnFinish里面调用

import {LoginApi} from '../request/api'

  const onFinish = (values) => {
    console.log('Success:',values);
    LoginApi({
      username:values.username,
      password:values.password
    }).then(res=>{
      console.log(res)
    })
  };

image.png

image.png

  • 使用条件语句判断是否成功
 if(res.errCode === 0) {

      }else {
        message.error(res.message)
      }
  • 存储数据 （不使用对象，方便存取）
 // 存储数据
        localStorage.setItem('avatar', res.data.avatar)
        localStorage.setItem('cms-token', res.data['cms-token'])
        localStorage.setItem('editable', res.data.editable)
        localStorage.setItem('player', res.data.player)
        localStorage.setItem('username', res.data.username)
  • 使用setTimeout()跳转页面
import {Link, useNavigate} from 'react-router-dom'

  const navigate = useNavigate()

// 跳转到根路径
        setTimeout(()=>{
          navigate('/')
        }, 1500)
  • 总代码（登录）
const onFinish = (values) => {
    console.log('Success:',values);
    LoginApi({
      username:values.username,
      password:values.password
    }).then(res=>{
      console.log(res)
      if(res.errCode===0){
        message.success(res.message)
        // 存储数据
        localStorage.setItem('avatar', res.data.avatar)
        localStorage.setItem('cms-token', res.data['cms-token'])
        localStorage.setItem('editable', res.data.editable)
        localStorage.setItem('player', res.data.player)
        localStorage.setItem('username', res.data.username)
        // 跳转到根路径
        setTimeout(()=>{
          navigate('/')
        }, 1500)
      }else{
        message.error(res.message)
      }
    })
  };

image.png

  • 最终效果图

image.png

App布局

布局传送门

ant.design/components/…

image.png

import { Layout } from 'antd';

const { Header, Footer, Sider, Content } = Layout;

<Layout>
    <Header>Header</Header>
        <Layout>
          <Sider>Sider</Sider>
          <Content>Content</Content>
        </Layout>
    <Footer>Footer</Footer>
</Layout>
  • 略微修改
import React from 'react';
import "./assets/base.less"
import { Outlet } from 'react-router-dom';
import { Layout } from 'antd';

const App = () => {
    
const {Sider, Content } = Layout;

    return (
        <Layout>
        <header>Header</header>
        <Layout>
          <Sider>Sider</Sider>
          <Content>
          <div>
            <Outlet/>   
          </div>
          </Content>
        </Layout>
        <footer>Footer</footer>
      </Layout>
    );
}

export default App;
  • 书写样式 base.less

设置header 和 footer

header {
    height: 70px;
    background-color: pink;
}

footer {
    height: 70px;
    background: #001529;
    color:#fff;
    text-align: center;
    line-height: 70px;
}

实现效果图

image.png

  • 导入logo图片
import logoImg from '../assets/logo.png'

 <img src={logoImg} alt="" className="logo" />

实现效果图

image.png

  • 给logo图片设置间距
header {
    height: 70px;
    background-color: #fff;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

实现效果图

image.png

  • 底边框可以随着F12的操作框动态移动

App.jsx

<Layout id='app'>
        <header>
            <img src={logoImg} alt="" className="logo" />
        </header>
 <Layout>

base.less

#app {
    height: 100vh;
}

实现效果图

image.png

下拉菜单

  • 将header抽出成为一个Header组件。

在components下面创建Header文件

image.png

Header组件

import React from 'react'
import logoImg from '../assets/logo.png'

export default function Header() {
  return (
    <div>
    <header>
        <img src={logoImg} alt="" className="logo" />
        <div className='right'>右侧</div>
    </header>
    </div>
  )
}

注意：引入图片的路径记得更改，因为是在components文件之外引入图片

  • 在App.js中引入Header组件
import Header from './components/Header'

<Layout id='app'>
    <Header/>
<Layout>

image.png

  • 下拉菜单

传送门（记得使用3.x的版本，不然没有Menu.Item）

3x.ant.design/components/…

image.png

复制代码

import { Menu, Dropdown } from 'antd';

 <Dropdown overlay={menu}>
                <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
                Hover me 
                </a>
</Dropdown>

const menu = (
        <Menu>
          <Menu.Item>
            <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
              1st menu item
            </a>
          </Menu.Item>
          <Menu.Item>
            <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
              2nd menu item
            </a>
          </Menu.Item>
          <Menu.Item>
            <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
              3rd menu item
            </a>
          </Menu.Item>
        </Menu>
      );

整体展示


import React from 'react'
import logoImg from '../assets/logo.png'
import { Menu, Dropdown } from 'antd';


export default function Header() {

    const menu = (
        <Menu>
          <Menu.Item>
            <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
              1st menu item
            </a>
          </Menu.Item>
          <Menu.Item>
            <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
              2nd menu item
            </a>
          </Menu.Item>
          <Menu.Item>
            <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
              3rd menu item
            </a>
          </Menu.Item>
        </Menu>
      );

  return (
    <div>
    <header>
        <img src={logoImg} alt="" className="logo" />
        <div className='right'>
            <Dropdown overlay={menu}>
                <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
                Hover me 
                </a>
          </Dropdown>
        </div>
    </header>
    </div>
  )
}

效果展示

image.png

  • 进行修改

添加阴影线

<Menu.Divider />

    const menu = (
        <Menu>
          <Menu.Item>
            修改资料
          </Menu.Item>
           <Menu.Divider />
          <Menu.Item>
            退出登录
          </Menu.Item>

        </Menu>
      );

image.png

  • 修改图标

传送门

3x.ant.design/components/…

image.png

import { CaretDownOutlined } from '@ant-design/icons';


<CaretDownOutlined />

效果展示

image.png

import React from 'react'
import logoImg from '../assets/logo.png'
import { Menu, Dropdown} from 'antd';
import { CaretDownOutlined } from '@ant-design/icons';

export default function Header() {

    const menu = (
        <Menu>
          <Menu.Item>
            修改资料
          </Menu.Item>
          <Menu.Divider />
          <Menu.Item>
            退出登录
          </Menu.Item>

        </Menu>
      );

  return (
    <div>
    <header>
        <img src={logoImg} alt="" className="logo" />
        <div className='right'>
            <Dropdown overlay={menu}>
                <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
                Hover me <CaretDownOutlined />
                </a>
          </Dropdown>
        </div>
    </header>
    </div>
  )
}
avatar
文章
阅读
粉丝