前端在项目中添加自己的功能页面

1.src—>mock–>sideMenue:边表(sidemenue)的子功能的添加：左边功能框中的显示
在相应的父功能添加子功能
id号不能和他人的一样，casecode:就是路由名字 title：中文名称
2.前后端接口(后端程序员给),定义好接口名称
src—>moudles—>api:新建文件夹名称：和路由差不多，除开头为小写，路由是开头是大写。里面创建文件index.js，里面配置接口，并且定义好接口名称
3.配置功能界面
src—>moudles–>pages:里面新建文件夹和api里面一个名字，在里面新建index.jsx
一：导入接口：import { SetData } from ‘@apply/api/customerNanager’;
二：导入各种框架
三：回显(当后端回传的是数组不是jason格式的时候)
class CreditLedger extends Component {
state = {
TabColumns: this.TabCreate(),
fetchParams: {},
arr:[]
}
TabCreate() {
…各种列名关键字
}

componentDidMount(){
this.tableDate()
}
tableDate =async()=>{
let res=await TabData({})
if(res.code==200)
{
this.setState({
arr:res.data

}
)
}
}

render() {
const {
fetchParams,
arr,
TabColumns
} = this.state
return (
…
);
}
}

export default CreditLedger;
四：查询条件

TimeBtn = (e, v) => {console.log(e, v, '我是值');this.setState({InpVal: v})}ChaXunBtn =async () => {let {InpVal} = this.state

let data = {startDate: InpVal[0],endDate: InpVal[1]
}
let res =await getData(data)
if(res.code==200){
this.setState({arr:res.data})
// console.log(data, '我是传递的数据');

  }}

 <Buttontype="primary"               onClick={() => this.ChaXunBtn()}icon={<SearchOutlined />}style={{ float: 'right' }}size={"small"}>查询</Button>

五：没有分页，显示全部数据，，，回显数组形式

<Tableheight={'auto'}//显示全部数据dataSource={arr} //回显数组形式</Table>