登录
- 在api.js 下面添加登录请求
// 登录 export const LoginApi = (params) => request.post('/login', params) 复制代码
- 在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) }) }; 复制代码
- 使用条件语句判断是否成功
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) } }) }; 复制代码
- 最终效果图
App布局
布局传送门
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; } 复制代码
实现效果图
- 导入logo图片
import logoImg from '../assets/logo.png' <img src={logoImg} alt="" className="logo" /> 复制代码
实现效果图
- 给logo图片设置间距
header { height: 70px; background-color: #fff; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; } 复制代码
实现效果图
- 底边框可以随着F12的操作框动态移动
App.jsx
<Layout id='app'> <header> <img src={logoImg} alt="" className="logo" /> </header> <Layout> 复制代码
base.less
#app { height: 100vh; } 复制代码
实现效果图
下拉菜单
- 将header抽出成为一个Header组件。
在components下面创建Header文件
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> 复制代码
- 下拉菜单
传送门（记得使用3.x的版本，不然没有Menu.Item）
复制代码
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> ) } 复制代码
效果展示
- 进行修改
添加阴影线
<Menu.Divider />
const menu = ( <Menu> <Menu.Item> 修改资料 </Menu.Item> <Menu.Divider /> <Menu.Item> 退出登录 </Menu.Item> </Menu> ); 复制代码
- 修改图标
传送门
import { CaretDownOutlined } from '@ant-design/icons'; <CaretDownOutlined /> 复制代码
效果展示
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> ) }
