initialValue: query.status || ‘’
})(
状态{feedbackStatus.map((v: any) => (
{v.value}
))}
)}
</Form.Item>
查询
<Button
className={styles.reset}
style={{ marginLeft: 10 }}
onClick={handleFormReset}
icon=“undo”
重置
)
}, [form, handleFormReset, handleSearch, time1, time2])
return (
)
})
可以看到,在页面将search设置成组件,并在后面掉哦组件。至此已达到页面效果,但是还没有数据
4.初始化页面 - 列表数据显示
在page页面的主函数中写init函数
const init = useCallback(() => {
dispatch(‘feedback/init’)
}, [dispatch])
useEffect(() => {
init()
}, [init])
在model页面中写详细的接口调用信息
init: async (action, { dispatch }) => {
const { query } = getLocation()
const data = await dispatch({
type: ‘feedback/post’,
params: [‘manage/feedback/page’, { …query }]
})
dispatch({
type: ‘feedback/setStore’,
params: [{ listData: listMOM1(data) }]
})
},
其中我们使用到了ListMOM1组件来帮助页面数据回显,其主要功能是,添加页面的数据编号和实现分页功能,详细的封装代码后附。
其中type: ‘feedback/setStore’,表示把数据存储在缓存中,可以通过组件传递数据,因此在StandardTable中需要绑定data={listData},从而实现数据初始化显示。
// list数据处理中间件
export const listMOM1 = (resData: any) => {
const {
content,
// total,
totalCount,
currPage: currPage = 1,
pageSize: pageSize = 40,
data,
list
} = resData
const list1 = content || data || list
//添加序号
if (list) {
list.forEach((element: any, index: number) => {
element._id = index + 1 + (currPage - 1) * pageSize
element._symbol = element._id
})
}
//分页
const pagination = {
total: totalCount,
pageSize: Number(pageSize) || 40,
current: Number(currPage)
}
return {
list,
pagination: totalCount && { …listData.pagination, …pagination }
}
}
5.列表数据按需渲染render
可以看到后台返回的数据如下,
但是,(1)【标题和内容】数据过长,我们需要将其展示前5个字符后省略号(比如这样就。。。).(2)对于【日期】数据只需要显示到具体某天,不需要时分秒,(3)对于【状态】数据显示为0,1但是前端也需要整理为‘未回答’‘已回答’
(1)数据截取缩略显示,hover后显示全部—使用Tooltip组件
{
title: ‘反馈内容’,
dataIndex: ‘content’,
render: (text: any, record: any, index: any) => {
if (record.content.length <= 5) {
return record.content
} else {
return (
{record.content.substring(0, 5) + ‘…’}
)
}
}
},
(2)日期截取同理
{
title: ‘提交时间’,
dataIndex: ‘createdTime’,
render: (text: any, record: any, index: any) => {
return record.createdTime.substring(0, 10)
}
},
(3)对于接口返回的0,1,2状态数值数据需要分情况渲染
{
title: ‘状态’,
dataIndex: ‘status’,
render: (value: any) => (
<>
{value == 0 && 未回答}
{value == 1 && 已回答}
</>
)
},
6. 查询功能实现
const handleSearch = useCallback(() => {
validateFields((err: any, data: any) => {
// pushPath({
// query: data
// })
// init()
const res = { …data }
if (data.username !== undefined) {
res.username = data.username.replace(/\s*/g, ‘’)
}
res.pageNum = 1
dispatch({
type: ‘feedback/search’,
params: [res]
})
})
}, [dispatch, validateFields])
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录大纲截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且后续会持续更新
如果你觉得这些内容对你有帮助,可以添加V获取:vip1024c (备注前端)
最后
javascript是前端必要掌握的真正算得上是编程语言的语言,学会灵活运用javascript,将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识,而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的,直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后,发现暂时没有提升的空间,我们可以暂时放一放。继续下面的学习,javascript贯穿我们前端工作中,在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解,关键是灵活运用。
一个人可以走的很快,但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎扫码加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
好基础知识,而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的,直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后,发现暂时没有提升的空间,我们可以暂时放一放。继续下面的学习,javascript贯穿我们前端工作中,在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解,关键是灵活运用。
[外链图片转存中…(img-hbo1UqyT-1712463180325)]
[外链图片转存中…(img-ZbF1Ccnu-1712463180325)]
一个人可以走的很快,但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎扫码加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
[外链图片转存中…(img-Z3XFOtAT-1712463180325)]