最后
资料过多,篇幅有限
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。
然后修改mall/index.tsx
import React, { useEffect } from ‘react’;
import { getHeroList } from ‘…/…/services/heros’
import { connect, Dispatch } from ‘umi’
const HeroMall = (props: any) => {
console.log(props)
useEffect(() => {
let { dispatch } = props
dispatch({
type: ‘heros/fetchHeroList’,
})
}, [])
// fetch(‘/api/herolist’).then(res=>{
// //console.log(res)
// return res.json()
// }).then(res=>{
// console.log(res)
// })
// fetch(‘/api/heros’).then(res=>{
// //console.log(res)
// return res.json()
// }).then(res=>{
// console.log(res)
// })
// getHeroList().then((res)=>{
// console.log(res)
// })
return (
<>
mall新页面
</>
);
}
export default connect(({ heros }: any) => ({ heros }))(HeroMall)
这里注意规范的import和export
另外connect的两个括号第一个放(返回值为(对象)的函数)形如({ heros }: any) => ({ heros })
,不然取不到state,第二个放组件
import React, { useEffect } from ‘react’;
// import { getHeroList } from ‘…/…/services/heros’
import { connect, Dispatch } from ‘umi’
const HeroMall = (props: any) => {
console.log(props)
useEffect(() => {
let { dispatch } = props
dispatch({
type: ‘heros/fetchHeroList’,
})
}, [])
// fetch(‘/api/herolist’).then(res=>{
// //console.log(res)
// return res.json()
// }).then(res=>{
// console.log(res)
// })
// fetch(‘/api/heros’).then(res=>{
// //console.log(res)
// return res.json()
// }).then(res=>{
// console.log(res)
// })
// getHeroList().then((res)=>{
// console.log(res)
// })
let { heros } = props
let herolist = heros && heros.herolist && heros.herolist.herolist
console.log(herolist)
return (
<>
mall--王者荣耀英雄
{herolist&&herolist.map((item:any,index:number)=>{
return(
- {item.cname}{'->'}{item.title}
)
})}
</>
);
}
export default connect(({ heros }: any) => ({ heros }))(HeroMall)
之后引入个Table做好看一点
import React, { useEffect } from ‘react’;
// import { getHeroList } from ‘…/…/services/heros’
import { connect, Dispatch } from ‘umi’
import { Table, Tag } from ‘antd’;
const HeroMall = (props: any) => {
console.log(props)
useEffect(() => {
let { dispatch } = props
dispatch({
type: ‘heros/fetchHeroList’,
})//触发model中的effect,带上命名空间
}, [])
// fetch(‘/api/herolist’).then(res=>{
// //console.log(res)
// return res.json()
// }).then(res=>{
// console.log(res)
// })
// fetch(‘/api/heros’).then(res=>{
// //console.log(res)
// return res.json()
// }).then(res=>{
// console.log(res)
// })
// getHeroList().then((res)=>{
// console.log(res)
// })
let { heros } = props
let herolist = heros && heros.herolist && heros.herolist.herolist
console.log(herolist)
// ename: 105
// cname: “廉颇”
// title: “正义爆轰”
// new_type: 0
// hero_type: 3
// skin_name: “正义爆轰|地狱岩魂”
const columns = [
{
title: ‘Id’,
dataIndex: ‘ename’,
key: ‘ename’,
render: text => {text},
},
{
title: ‘英雄’,
dataIndex: ‘cname’,
key: ‘cname’,
},
{
title: ‘皮肤’,
dataIndex: ‘title’,
key: ‘title’,
},
{
title: ‘Tags’,
key: ‘skin_name’,
dataIndex: ‘skin_name’,
render: (tags:string) => (
<>
{tags&&tags.split(‘|’).map(tag => {
let color = tag.length > 3 ? ‘geekblue’ : ‘green’;
return (
{tag}
);
})}
</>
),
},
];
return (
<>
mall--王者荣耀英雄
{/*
{herolist && herolist.map((item: any, index: number) => {
return (
- {item.cname}{'->'}{item.title}
)
})}
*/}</>
);
}
export default connect(({ heros }: any) => ({ heros }))(HeroMall)
页面内数据管理
在页面文件夹下面使用_mock.ts、model.ts、services.ts就可以了 建立方法和全局一样,路径要自己配置
import React, { useEffect } from ‘react’; // import { getHeroList } from ‘…/…/services/heros’
import { connect, Dispatch } from ‘umi’;
import { Table, Tag } from ‘antd’;
import HeroTableSearch from ‘./HeroTableSearch’;
const HeroMall = (props: any) => {
console.log(props);
useEffect(() => {
let { dispatch } = props;
dispatch({
type: ‘mall/fetchHeroList’,
}); //触发model中的effect,带上命名空间
}, []); // fetch(‘/api/herolist’).then(res=>{
// //console.log(res)
// return res.json()
// }).then(res=>{
// console.log(res)
// })
// fetch(‘/api/heros’).then(res=>{
// //console.log(res)
// return res.json()
// }).then(res=>{
// console.log(res)
// })
// getHeroList().then((res)=>{
// console.log(res)
// })
let { mall } = props;
let herolist = mall && mall.herolist && mall.herolist.herolist;
console.log(herolist); // ename: 105
// cname: “廉颇”
// title: “正义爆轰”
// new_type: 0
// hero_type: 3
// skin_name: “正义爆轰|地狱岩魂”
const columns = [
{
title: ‘Id’,
dataIndex: ‘ename’,
key: ‘ename’,
render: text => {text},
},
{
title: ‘英雄’,
dataIndex: ‘cname’,
key: ‘cname’,
},
{
title: ‘皮肤’,
dataIndex: ‘title’,
key: ‘title’,
},
{
title: ‘Tags’,
key: ‘skin_name’,
dataIndex: ‘skin_name’,
render: (tags: string) => (
<>
{tags &&
tags.split(‘|’).map(tag => {
let color = tag.length > 3 ? ‘geekblue’ : ‘green’;
return (
{tag}
);
})}
</>
),
},
];
return (
<>
mall--王者荣耀英雄
{/*
{herolist && herolist.map((item: any, index: number) => {
return (
- {item.cname}{'->'}{item.title}
)
})}
*/}</>
);
};
export default connect(({ mall }: any) => ({
mall,
}))(HeroMall);
顺便修改connect
加个搜索功能
用umi的控制加个高级搜索
表单组件代码修改
import styles from “./index.less”;
import React, { useState } from “react”;
import { Form, Row, Col, Input, Button } from “antd”;
import { DownOutlined, UpOutlined } from “@ant-design/icons”;
const AdvancedSearchForm = () => {
const [form] = Form.useForm();
const getFields = () => {
const children = [];
children.push(
(
<Form.Item
name=“hero”
label=‘英雄’
rules={[{
required:true,
message:‘Input something!’
}
]}
</Form.Item>
)
)
children.push(
(
<Form.Item
name=“skin”
label=‘皮肤’
rules={[{
required:true,
message:‘Input something!’
}
]}
</Form.Item>
)
)
return children;
};
const onFinish = (values:any) => {
console.log("Received values of form: ", values);
};
return (
form={form}
name=“advanced_search”
className=“ant-advanced-search-form”
onFinish={onFinish}
{getFields()}
Search
<Button
style={{ marginLeft: 8 }}
onClick={() => {
form.resetFields();
}}
Clear
);
};
export default () => (
{/*
Search Result List*/});
把搜索功能完善
组件
import styles from “./index.less”;
import React, { useState } from “react”;
import { Form, Row, Col, Input, Button } from “antd”;
import { connect, Dispatch } from ‘umi’;
// import {getHeroListBySearch} from ‘…/service’
const AdvancedSearchForm = (props:any) => {
const [form] = Form.useForm();
const getFields = () => {
const children = [];
children.push(
(
<Form.Item
name=“hero”
label=‘英雄’
// rules={[{
// required:true,
// message:‘Input something!’
// }
//]}
</Form.Item>
)
)
children.push(
(
<Form.Item
name=“skin”
label=‘皮肤’
// rules={[{
// required:true,
// message:‘Input something!’
// }
// ]}
</Form.Item>
)
)
return children;
};
const onFinish = async(values:any) => {
console.log("Received values of form: ", values);
props.dispatch({
type: ‘mall/getHeroListBySearch’,
payload:values,
})
};
return (
form={form}
name=“advanced_search”
className=“ant-advanced-search-form”
onFinish={onFinish}
{getFields()}
Search
<Button
style={{ marginLeft: 8 }}
onClick={() => {
form.resetFields();
}}
Clear
);
};
export default connect((mall:any)=>({mall}))((props:any) =>(
{/*
Search Result List*/} ));
模型
import {Effect,Reducer} from ‘umi’
import{getHeroList,getHeroListBySearch}from ‘./service’
const HerosModel:any={
//命名空间
namespace:‘mall’,
//状态
state:{
herolist:[],
},
effects:{
*fetchHeroList(_,{call,put}:any){
const res= yield call(getHeroList)
//console.log(res)
yield put({
type:‘saveHerolist’,
payload:res
})
},
*getHeroListBySearch({payload}:any,{call,put}:any){
const res= yield call(getHeroListBySearch,payload)
//console.log(res)
yield put({
type:‘saveHerolist’,
payload:res
})
}
,
},
reducers:{
saveHerolist(state:any,action:any){
return{
…state,
herolist:action.payload
}
}
}
}
export default HerosModel
请求
import request from ‘@/utils/request’;
export async function getHeroList() {
return request(‘/api/herosx’, {
method: ‘GET’,
})
}
export async function getHeroListBySearch(params:string) {
return request(‘/api/getHeroListBySearch’, {
method: ‘POST’,
data:params,
})
}
最后
面试题千万不要死记,一定要自己理解,用自己的方式表达出来,在这里预祝各位成功拿下自己心仪的offer。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】roList)
//console.log(res)
yield put({
type:‘saveHerolist’,
payload:res
})
},
*getHeroListBySearch({payload}:any,{call,put}:any){
const res= yield call(getHeroListBySearch,payload)
//console.log(res)
yield put({
type:‘saveHerolist’,
payload:res
})
}
,
},
reducers:{
saveHerolist(state:any,action:any){
return{
…state,
herolist:action.payload
}
}
}
}
export default HerosModel
请求
import request from ‘@/utils/request’;
export async function getHeroList() {
return request(‘/api/herosx’, {
method: ‘GET’,
})
}
export async function getHeroListBySearch(params:string) {
return request(‘/api/getHeroListBySearch’, {
method: ‘POST’,
data:params,
})
}
最后
面试题千万不要死记,一定要自己理解,用自己的方式表达出来,在这里预祝各位成功拿下自己心仪的offer。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】[外链图片转存中…(img-5DhercjC-1715339442191)]
[外链图片转存中…(img-2aATKlf7-1715339442192)]
[外链图片转存中…(img-DHFDcaCx-1715339442193)]
[外链图片转存中…(img-1pBgB4Fo-1715339442193)]