示例总览
启动后台:
技术栈:React、Antd、Axios等
跨域处理setupProxy.js:
const {
createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function (app) {
app.use(
createProxyMiddleware("/api", {
target: "http://127.0.0.1:9000",
changeOrigin: true,
ws: true,
pathRewrite: {
"^/api": "" }
})
);
};
Antd UI组件库自带按需导入,我们安装整个Antd,后期项目中用到哪些组件,最后打包的时候只打包用到的。
使用Antd UI组件库
index.jsx:
import React from 'react';
import ReactDOM from 'react-dom/client';
import Task from './views/Task';
/* 使用ANTD组件库 */
import {
ConfigProvider } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import './index.less';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<ConfigProvider locale={
zhCN}>
<Task />
</ConfigProvider>
);
开发代码
头部、标签部分结构样式
Task.jsx:
import React from "react";
import './Task.less';
import {
Button, Tag } from 'antd'
class Task extends React.Component {
render() {
return <div className="task-box">
{
/* 头部 */}
<div className="header">
<h2 className="title">TASK OA 任务管理系统</h2>
<Button type="primary">新增任务</Button>
</div>
{
/* 标签 */}
<div className="tag-box">
<Tag color="#1677ff">全部</Tag>
<Tag>已完成</Tag>
<Tag>未完成</Tag>
</div>
{
/* 表格 */}
{
/* 对话框 & 表单 */}
</div>;
}
}
export default Task;
Task.less:
.task-box {
box-sizing: border-box;
margin: 0 auto;
width: 800px;
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 10px;
border-bottom: 1px solid #DDD;
.title {
font-size: 20px;
line-height: 50px;
}
}
.tag-box {
margin: 15px 0;
.ant-tag {
padding-inline: 15px;
margin-inline-end: 15px;
font-size: 14px;
line-height: 30px;
border-radius: 0;
cursor: pointer;
}
}
}
index.less里设置下全局样式:
@import './assets/reset.min.css';
/* 全局样式 */
.ant-btn {
border-radius: 0;
}
效果
表格部分结构样式
表格Table组件:
let {
tableData, tableLoading } = this.state
...
{
/* 表格 */}
<Table dataSource={
tableData} columns={
this.columns} loading={
tableLoading} pagination={
false} rowKey="id"></Table>
根据API接口文档设置表格列数据:
/* 表格列的数据 */
columns = [
{
title: '编号',
dataIndex: 'id',
align: 'center',
width: '8%',
},
{
title: '任务描述',
dataIndex: 'task',
ellipsis: true,
width: '50%',
},
{
title: '状态',
dataIndex: 'state',
align: 'center',
width: '10%',
render