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

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
1
2
3
4
5
6
7
8
9
10
11

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, '我是传递的数据');
1
2
3
4
5
6
7
8
9
10
11

  }}
1

  this.ChaXunBtn()}
                icon={}
                style={{ float: 'right' }}
                size={"small"}
              >
                查询
              
1
2
3
4
5
6
7
8
9

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

1
2
3
4
六：表格数据后面加字符
 加百分号：
 render: (e, row) => {
 return row.monthRate ? row.monthRate+‘%’: ‘’
 },
 字段：monthRate
 加月：
 render: (e, row) => {
 return row.creditTerm ? row.creditTerm+‘月’: ‘’
 },
 字段：creditTerm
 是否代替0,1
 class外面的函数体：
 const dictionary = {
 “0”: “否”,
 “1”: “是”,
 };
 表单列的里面
 render: (value) => {
 return dictionary[value] || value;
 },


                    相关阅读:

                    
SpringBoot 06: springboot中使用redis                            

DCloud之Android原生工程配置                            

商业智能BI                            

兼容 信创鲲鹏/M1 arm64架构的kafka镜像                            

青翼科技基于VITA57.1的16路数据收发处理平台产品手册                            

第七章用Python实现对Excel文件中的数据进行md5加密                            

代码随想录算法训练营Day41 (day40 休息) | 动态规划(3/17) LeetCode 343. 整数拆分 96.不同的二叉搜索树                            

淘宝/天猫获得商品评论接口                            

Spring 从入门到精通 (十四) 切入点详解                            

Nginx安装                            

                    
                

                    原文地址：https://blog.csdn.net/m0_51725837/article/details/133989608
                

            

                

                    最新文章
                
                

                    
沪漂五周年了：我越来越迷茫了                            

Agentic Skill Routing 实战：别再把所有 Skill 塞进 AI Agent 上下文                            

MySQL-Seconds_behind_master的精度误差                            

[MAF预定义ChatClient中间件-03]CachingChatClient——利用缓存省钱省时间                            

AI的至暗历史：从万众期待到被政府撤资，AI的两次死亡徘徊                            

Agent OS ：五种驯服不确定性的范式                            

PortSwigger SQL注入LAB11                            

数据库即时编译JIT                            

[Begin]AI Learn Data Day 0                            

深度学习进阶（二十七）现代 LLM 的核心架构设计其二：SwiGLU                            

                    
                
            

            

                

                    热门文章
                
                

                    
十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧！！！                            

奉劝各位学弟学妹们，该打造你的技术影响力了！                            

五年了，我在 CSDN 的两个一百万。                            

Java俄罗斯方块，老程序员花了一个周末，连接中学年代！                            

面试官都震惊，你这网络基础可以啊！                            

你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法                            

心情不好的时候，用 Python 画棵樱花树送给自己吧                            

通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！                            

13 万字 C 语言从入门到精通保姆级教程2021 年版                            

10行代码集2000张美女图，Python爬虫120例，再上征途