总结
前端资料汇总
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
-
框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。
-
算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯
-
在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。
-
要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！
)
}
5. 页面初始化-数据回显
（1）在model.ts文件里写如下代码。发送请求manage/ucenter/detail，请求参数query其实为空，并将请求返回的数据data.data赋值给editData存储在setStore里面
init: async (action, { dispatch }) => {
const { query } = getLocation()
const data = await dispatch({
type: ‘container/get’,
params: [‘manage/ucenter/detail’, query]
})
dispatch({
type: ‘container/setStore’,
params: [{ editData: data.data }]
})
},
（2）在page页的Container中添加初始化调用的函数
const init = useCallback(() => {
dispatch(‘container/init’)
}, [dispatch])
useEffect(() => {
init()
}, [dispatch, init])
（3）【数据回显】在page页面通过function Container({ dispatch, form, container: { editData } }: any) 将container中的editData拿到，因此可以放在表单里的initialValue。
<Form.Item label=“用户名”>
{getFieldDecorator(‘name’, {
initialValue: (editData && editData.name) || ‘’
})()}
</Form.Item>
至此就完成了页面初始化，可以看到数据显示了。
6. 保存功能的实现
（1）在model页面写update接口，接口为manage/ucenter/updateUserInfo，返回数据为a
update: async ({ params: [remoteValue] }, { dispatch }) => {
let a = await dispatch({
type: ‘container/post’,
params: [‘manage/ucenter/updateUserInfo’, remoteValue]
})
return a
}
（2）在保存按钮上添加点击事件onClick={onSave}并在page页面写onSave方法。其中fieldValue里面保存着form表单验证的数据对象，因此可以取到对应input的值。
const onSave = useCallback(() => {
const { validateFields } = form
validateFields((err: any, fieldValue: any) => {
if (err) return
let res = {
mobile: fieldValue.mobile,
email: fieldValue.email
}
dispatch({
type: ‘container/update’,
params: [res]
}).then((v: any) => {
console.log(v)
if (v.code === 200) {
message.success(‘保存成功’)
init()
} else {
message.error(v.message)
}
})
})
}, [dispatch, form, init])
至此可以实现保存功能。
7. 表单验证
Ant Design 表单中getFieldDecorator、getFieldValue、setFieldValue用法Ant Design 表单中getFieldDecorator、getFieldValue、setFieldValue用法 - 健人雄 - 博客园
getFieldDecorator是一个方法，这个方法接收两个参数，第一个是表单的字段对象，第二个是验证规则。这个方法本身返回一个方法，需要将需要获取值的标签包裹进去。
（1）验证手机号
<Form.Item label=“电话号码”>
{getFieldDecorator(‘mobile’, {
initialValue: (editData && editData.mobile) || ‘’,
rules: [
{ required: true, message: ‘电话号码不能为空’ },
{
pattern: /^((+)?86|((+)?86)?)0?1[3458]\d{9}$/,
message: ‘请输入正确的电话号码’
}
]
})()}
</Form.Item>
（2）验证邮箱
<Form.Item label=“邮箱地址”>
{getFieldDecorator(‘email’, {
initialValue: (editData && editData.email) || ‘’,
rules: [
{
pattern: /1+@[a-zA-Z0-9-]+(.[a-zA-Z0-9-]+)*.[a-zA-Z0-9]{2,6}$/,
// pattern: /2+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/,
// pattern: /3+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.]){1,2}[A-Za-z\d]{2,5}$/g,
message: ‘邮箱格式不正确’
},
{
max: 50,
message: ‘邮箱不得超过50字符’
},
{ required: true, message: ‘邮箱地址不能为空’ }
]
})()}
</Form.Item>
8. style样式
.commonForm{
margin-top: 20px;
:global{
.ant-input{
width:600px;
height:40px;
margin-left: 10px;
}
.ant-form.ant-form-inline{
display: flex !important
}
}
}
.search{
width: 120px;
height: 40px;
opacity: 1;
background: #2b7dff;
border-radius: 4px;
font-size: 14px;
font-weight: 400;
text-align: left;
color: #ffffff;
line-height: 21px;
text-align: center;
display: block;
margin-left:300px
}
9. 页面效果
10. 页面源码
// model.ts
import commonModel from ‘…/…/…/…/models/commonModel’
import { modelExtend } from ‘tyrael’
import { listMOM } from ‘…/…/…/…/common/dict’
import { getLocation } from ‘…/…/…/…/utils/tool’
const model: ModelExtend = modelExtend(commonModel, {
state: {
selectedRows: [],
listData: {},
productData: [],
editData: {},
detailData: {}
},
namespace: ‘container’,
effects: {
init: async (action, { dispatch }) => {
const { query } = getLocation()
const data = await dispatch({
type: ‘container/get’,
params: [‘manage/ucenter/detail’, query]
})
dispatch({
type: ‘container/setStore’,
params: [{ editData: data.data }]
})
},
update: async ({ params: [remoteValue] }, { dispatch }) => {
let a = await dispatch({
type: ‘container/post’,
params: [‘manage/ucenter/updateUserInfo’, remoteValue]
})
return a
}
},
reducers: {}
})
export default model
// page.tsx
import React, { useEffect, useCallback, useMemo, useState } from ‘react’
import { connect } from ‘react-redux’
import PageHeaderLayout from ‘…/…/…/…/components/PageHeaderLayout/index’
import { getLocation } from ‘…/…/…/…/utils/tool’
import styles from ‘./style.less’
import { Form, Input, Button, Card, Select, message } from ‘antd’
function Container({ dispatch, form, container: { editData } }: any) {
const { getFieldDecorator, validateFields, getFieldValue } = form
const { query } = getLocation()
const init = useCallback(() => {
dispatch(‘container/init’)
}, [dispatch])
useEffect(() => {
init()
最后
技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。
const { query } = getLocation()
const init = useCallback(() => {
dispatch(‘container/init’)
}, [dispatch])
useEffect(() => {
init()
最后
技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。
[外链图片转存中…(img-xu7y9spV-1715217391425)]
2587
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
