搜索到
373
篇与
的结果
-
-
react+antd实现登录退出功能 本文实现react+antd框架实现登录记录token功能和退出功能一、登录功能：1、 页面代码部分import React from 'react' import { Form, Input, Button, Image, message } from 'antd'; import { UserOutlined, LockOutlined, BarcodeOutlined } from '@ant-design/icons'; function Login(props) { return ( <div className="login-box"> <div className="login-min"> <div className="avatar_box"> <img src="https://www.tpxhm.com/fdetail/logo192.png" alt="" /> </div> <Form name="normal_login" className="login-form" onFinish={onFinish}> <Form.Item name="username" rules={[{ required: true, message: '请输入账号' }]} className="username" > <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="账号" size="large"/> </Form.Item> <Form.Item name="password" rules={[{ required: true, message: '请输入密码' }]} > <Input prefix={<LockOutlined className="site-form-item-icon" />} type="password" placeholder="密码" size="large" /> </Form.Item> <Form.Item> <Button type="primary" htmlType="submit" className="login-form-button" size="large">登录</Button> </Form.Item> </Form> </div> </div> ) } export default Login2、 页面逻辑代码部分import React from 'react' import { Form, Input, Button, Image, message } from 'antd'; import { UserOutlined, LockOutlined, BarcodeOutlined } from '@ant-design/icons'; import { setToken } from '../../utils/auth' import { loginApi } from '../../utils/service'; function Login(props) { const onFinish = (values) => { // console.log('Success:', values); loginApi({ username: values.username, password: values.password, }).then(res=>{ console.log(res) if(res.code===0){ // console.log(res.data.token) setToken(res.data.token) props.history.push('/admin/wecome') message.success(res.msg) }else{ message.error(res.msg) } }).catch(err=>{ message.error('服务器故障') }) }; } export default Login3、 axios请求接口部分封装，详见这篇文章：react封装axios请求接口最终效果：二、退出功能1、编写退出方法：清除token并跳转至登录页面 const Logout = () => { clearToken(); props.history.push('/login') message.success('退出成功') };2、放置退出按钮<div className="admin"> <span>admin</span> <span onClick={Logout}><PoweroffOutlined /></span> </div>
-
Ant Design框架分页汉化 Ant Design分页，默认是英文，看着很不习惯，我们可以进行汉化，antd本身带有中文语言包，当我们引入antd，就可以进行汉化了，事实上antd为了进行国际化，本身就有多个语言包汉化方法1、引入语言包// 在需要用到的 组件文件中引入中文语言包 import zhCN from 'antd/es/locale/zh_CN'; // 引入国际化配置 import { ConfigProvider,Table } from 'antd';2、使用<ConfigProvider locale={ zhCN }> </ConfigProvider>包裹着表格import React, {useEffect, useState} from 'react' import { Breadcrumb, Card, Table, Button, Popconfirm, Space, ConfigProvider } from 'antd'; import { articleListApi } from '../../utils/service'; // 在需要用到的 组件文件中引入中文语言包 import zhCN from 'antd/es/locale/zh_CN'; function Article(props) { return ( <div> <ConfigProvider locale={ zhCN }> <Table columns={columns} bordered dataSource={dataSource} pagination={{ total:total, pageSize:10, showSizeChanger: true, showQuickJumper: true, pageSizeOptions:[10, 20, 50, 100], defaultPageSize:10, onChange:loadData, showTotal: total => `共${total}条记录 ` }}></Table> </ConfigProvider> </div> ) } export default Article
-
-
react+adtd实现表格数据分页 效果展示1、 表格代码：<Table columns={columns} bordered dataSource={dataSource} pagination={{ total:total, showQuickJumper: true, pageSizeOptions:[10, 20, 50, 100], pageSize:10, onChange:loadData, showTotal: total => `共${total}条记录 ` }}> </Table>2、 定义表格列const columns = [ { title: '序号', key: 'id', width: 80, align: 'center', render: (txt, record, index) =>index + 1 }, { title: '标题', dataIndex: 'title' }, { title: '图片', render: (txt, record, index) =>{ return ( <div> <Image src={txt.img} width="40px" height="20px"></Image> </div> ) } }, { title: '分类', dataIndex: 'article_cate' }, { title: '时间', dataIndex: 'created_at' }, { title: '操作', render: (txt, record, index) =>{ return ( <div> <Button type="primary" size="small">编辑</Button> <Popconfirm title="确定要删除此项？" onCancel={()=>console.log('用户取消删除')} onConfirm={()=> console.log("用户确认删除") // 此处调用api接口 }> <Button type="danger" size="small">删除</Button> </Popconfirm> </div> ) } } ]3、 获取数据useEffect(()=>{ articleListApi({pagesize:10}).then(res=>{ console.log(res) setDataSource(res.data.data) setTotal(res.data.total) }) },[])详细demo，共大家参考import React, {useEffect, useState} from 'react' import { Breadcrumb, Card, Table, Button, Popconfirm, Space, Image, ConfigProvider } from 'antd'; import { articleListApi } from '../../utils/service'; // 在需要用到的 组件文件中引入中文语言包 import zhCN from 'antd/es/locale/zh_CN'; function Article(props) { const [dataSource, setDataSource] = useState([]) const [total, setTotal] = useState(0) const [pagesize, setPagesize] = useState(10) useEffect(()=>{ articleListApi({pagesize:10}).then(res=>{ console.log(res) setDataSource(res.data.data) setTotal(res.data.total) }) },[]) const loadData = (pagenum=>{ articleListApi({pagesize:pagesize, pagenum:pagenum}).then(res=>{ setDataSource(res.data.data) setTotal(res.data.total) }) }) const columns = [ { title: '序号', key: 'id', width: 80, align: 'center', render: (txt, record, index) =>index + 1 }, { title: '标题', dataIndex: 'title' }, { title: '图片', render: (txt, record, index) =>{ return ( <div> <Image src={txt.img} width="40px" height="20px"></Image> </div> ) } }, { title: '分类', dataIndex: 'article_cate' }, { title: '时间', dataIndex: 'created_at' }, { title: '操作', render: (txt, record, index) =>{ return ( <div> <Button type="primary" size="small">编辑</Button> <Popconfirm title="确定要删除此项？" onCancel={()=>console.log('用户取消删除')} onConfirm={()=> console.log("用户确认删除") // 此处调用api接口 }> <Button type="danger" size="small">删除</Button> </Popconfirm> </div> ) } } ] return ( <div> <Breadcrumb style={{ margin: '16px 0' }}> <Breadcrumb.Item>主页</Breadcrumb.Item> <Breadcrumb.Item>文章管理</Breadcrumb.Item> </Breadcrumb> <Card bordered={false}> <Space align="center" style={{ marginBottom: 16 }}> <Button type="primary" size="middle" onClick={()=>props.history.push("/admin/wecome")}>添加文章</Button> </Space> <ConfigProvider locale={ zhCN }> <Table columns={columns} bordered dataSource={dataSource} pagination={{ total:total, showQuickJumper: true, pageSizeOptions:[10, 20, 50, 100], pageSize:10, onChange:loadData, showTotal: total => `共${total}条记录 ` }}></Table> </ConfigProvider> </Card> </div> ) } export default Article
