React+Redux+Ant Design+TypeScript 电子商务实战-客户端应用 04 首页产品展示、搜索、筛选和产品详情

2024-08-23 01:18
文章标签 javascript 实战 筛选 react 应用 搜索 ant design 展示 客户端 redux 产品 04 typescript frontend 首页 详情 电子商务

本文主要是介绍React+Redux+Ant Design+TypeScript 电子商务实战-客户端应用 04 首页产品展示、搜索、筛选和产品详情，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

构建首页布局

搜索布局

// src\components\core\Search.tsx
import { Button, Col, Divider, Form, Input, Row, Select } from 'antd'
import ProductItem from './ProductItem'const Search = () => {return (<><Formlayout="inline"initialValues={{category: ''}}><Input.Group compact><Form.Item name="category"><Select><Select.Option value="">所有分类</Select.Option></Select></Form.Item><Form.Item name="search"><Input placeholder="请输入搜索关键字" /></Form.Item><Form.Item><Button htmlType="submit">搜索</Button></Form.Item></Input.Group></Form><Divider /><Row gutter={[16, 16]}><Col span="6"><ProductItem /></Col></Row></>)
}export default Search

搜索结果展示的产品组件

// src\components\core\ProductItem.tsx
import { Button, Card, Col, Row, Typography } from 'antd'
import { Link } from 'react-router-dom'const { Title, Paragraph } = Typographyconst ProductItem = () => {return (<Cardcover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}actions={[<Button type="link"><Link to="">查看详情</Link></Button>,<Button type="link"><Link to="">加入购物车</Link></Button>]}><Title level={5}>产品标题</Title><Paragraph ellipsis={{ rows: 2 }}>产品描述</Paragraph><Row><Col span="12">销量</Col><Col span="12" style={{ textAlign: 'right' }}>价格</Col></Row><Row><Col span="12">上架时间</Col><Col span="12" style={{ textAlign: 'right' }}>所属分类</Col></Row></Card>)
}export default ProductItem

首页布局

// src\components\core\Home.tsx
import { Col, Row, Typography } from 'antd'
import Layout from './Layout'
import ProductItem from './ProductItem'
import Search from './Search'const { Title } = Typographyconst Home = () => {return (<Layout title="RM商城" subTitle="优享品质 惊喜价格">{/* 搜索列表 */}<Search />{/* 最新上架列表 */}<Title level={5}>最新上架</Title><Row gutter={[16, 16]}><Col span="6"><ProductItem /></Col></Row>{/* 最受欢迎列表 */}<Title level={5}>最受欢迎</Title><Row gutter={[16, 16]}><Col span="6"><ProductItem /></Col></Row></Layout>)
}export default Home

实现获取产品列表

定义相关 action

// src\store\models\product.ts
import { Category } from './category'export interface Product {_id: stringname: stringprice: numberdescription: stringcategory: Categoryquantity: numbersold: numberphoto: FormDatashipping: booleancreatedAt: string
}
import { Product } from '../models/product'// src\store\actions\product.action.ts
export const GET_PRODUCT = 'GET_PRODUCT'
export const GET_PRODUCT_SUCCESS = 'GET_PRODUCT_SUCCESS'// {
//   "sortBy": "_id",
//   "order": "desc",
//   "limit": 10,
//   "skip": 0,
//   "search": "JavaScript",
//   "filters": {
//       "category": ["610a3d79458ef7766805473d"],
//       "price": [50, 100]
//   }
// }export interface GetProductAction {type: typeof GET_PRODUCTsortBy: stringorder: stringlimit: numberskip: numbersearch: stringfilters: {[param: string]: any[]}
}export interface GetProductSuccessAction {type: typeof GET_PRODUCT_SUCCESSsortBy: stringpayload: Product[]
}export const getProduct = (sortBy: string = 'createdAt',order: string = 'asc',limit: number = 4,skip: number = 0,search: string = '',filters: {[param: string]: any[]} = {}
): GetProductAction => ({type: GET_PRODUCT,sortBy,order,limit,skip,search,filters
})export const getProductSuccess = (payload: Product[], sortBy: string): GetProductSuccessAction => ({type: GET_PRODUCT_SUCCESS,payload,sortBy
})// action 的联合类型
export type ProductUnionType = GetProductAction | GetProductSuccessAction

定义 reducer

// src\store\reducers\product.reducer.ts
import { GET_PRODUCT, GET_PRODUCT_SUCCESS, ProductUnionType } from '../actions/product.action'
import { Product } from '../models/product'export interface ProductState {// 最新上架列表(上架时间)createdAt: {loaded: booleansuccess: booleanproducts: Product[]}// 最受欢迎列表(销量)sold: {loaded: booleansuccess: booleanproducts: Product[]}
}const initialState = {createdAt: {loaded: false,success: false,products: []},sold: {loaded: false,success: false,products: []}
}export default function productReducer(state = initialState, action: ProductUnionType) {switch (action.type) {case GET_PRODUCT:return {...state,[action.sortBy]: {// 避免每次查询时都清空...state[action.sortBy === 'createdAt' ? 'createdAt' : 'sold'],loaded: false,success: false}}case GET_PRODUCT_SUCCESS:return {...state,[action.sortBy]: {loaded: true,success: true,products: action.payload}}default:return state}
}
// src\store\reducers\index.ts
import { connectRouter, RouterState } from 'connected-react-router'
import { History } from 'history'
import { combineReducers } from 'redux'
import authReducer, { AuthState } from './auth.reducer'
import categoryReducer, { CategoryState } from './category.reducer'
import productReducer, { ProductState } from './product.reducer'
// import testReducer from './test.reducer'// 定义一个包含 router 的 store 类型接口 供外部使用
export interface AppState {router: RouterStateauth: AuthStatecategory: CategoryStateproduct: ProductState
}const createRootReducer = (history: History) =>combineReducers({// test: testReducer,router: connectRouter(history),auth: authReducer,category: categoryReducer,product: productReducer})export default createRootReducer

定义 saga

// src\store\sagas\product.saga.ts
import axios, { AxiosResponse } from 'axios'
import { put, takeEvery } from 'redux-saga/effects'
import { API } from '../../config'
import { GetProductAction, getProductSuccess, GET_PRODUCT } from '../actions/product.action'
import { Product } from '../models/product'function* handleGetProduct({ sortBy, order, limit, skip, search, filters }: GetProductAction) {const response: AxiosResponse = yield axios.post<Product[]>(`${API}/products`, {sortBy,order,limit,skip,search,filters})yield put(getProductSuccess(response.data, sortBy))
}export default function* productSaga() {yield takeEvery(GET_PRODUCT, handleGetProduct)
}
// src\store\sagas\index.ts
import { all } from 'redux-saga/effects'
import authSaga from './auth.saga'
import categorySage from './category.sage'
import productSaga from './product.saga'export default function* rootSaga() {yield all([authSaga(), categorySage(), productSaga()])
}

首页产品列表数据展示

// src\components\core\Home.tsx
import { useEffect } from 'react'
import { Col, Row, Typography } from 'antd'
import { useDispatch, useSelector } from 'react-redux'
import Layout from './Layout'
import ProductItem from './ProductItem'
import Search from './Search'
import { getProduct } from '../../store/actions/product.action'
import { AppState } from '../../store/reducers'
import { ProductState } from '../../store/reducers/product.reducer'const { Title } = Typographyconst Home = () => {const dispatch = useDispatch()const { createdAt, sold } = useSelector<AppState, ProductState>(state => state.product)useEffect(() => {dispatch(getProduct('createdAt', 'desc', 4))dispatch(getProduct('sold', 'desc', 4))}, [])return (<Layout title="RM商城" subTitle="优享品质 惊喜价格">{/* 搜索列表 */}<Search />{/* 最新上架列表 */}<Title level={5}>最新上架</Title><Row gutter={[16, 16]}>{createdAt.products.map(item => (<Col span="6" key={item._id}><ProductItem product={item} /></Col>))}</Row>{/* 最受欢迎列表 */}<Title level={5} style={{marginTop: '20px'}}>最受欢迎</Title><Row gutter={[16, 16]}>{sold.products.map(item => (<Col span="6" key={item._id}><ProductItem product={item} /></Col>))}</Row></Layout>)
}export default Home
// src\components\core\ProductItem.tsx
import { Button, Card, Col, Image, Row, Typography } from 'antd'
import moment from 'moment'
import { Link } from 'react-router-dom'
import { FC } from 'react'
import { API } from '../../config'
import { Product } from '../../store/models/product'const { Title, Paragraph } = Typographyinterface Props {product: Product
}const ProductItem: FC<Props> = ({ product }) => {return (<Cardcover={<Image src={`${API}/product/photo/${product._id}`} alt={product.name} preview={false} />}actions={[<Button type="link"><Link to="">查看详情</Link></Button>,<Button type="link"><Link to="">加入购物车</Link></Button>]}><Title level={5}>{product.name}</Title><Paragraph ellipsis={{ rows: 2 }}>{product.description}</Paragraph><Row><Col span="12">销量：{product.sold}</Col><Col span="12" style={{ textAlign: 'right' }}>价格：￥{product.price}</Col></Row><Row><Col span="12">上架时间：{moment(product.createdAt).format('YYYY-MM-DD')}</Col><Col span="12" style={{ textAlign: 'right' }}>所属分类：{product.category.name}</Col></Row></Card>)
}export default ProductItem

Search 组件中的 ProductItem 还没有添加 product 属性，为了页面正常显示，先注释掉 Search 组件中的 ProductItem 组件。

实现搜索功能

获取分类列表

// src\components\core\Search.tsx
import { Button, Col, Divider, Form, Input, Row, Select } from 'antd'
import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { getCategory } from '../../store/actions/category.action'
import { AppState } from '../../store/reducers'
import { CategoryState } from '../../store/reducers/category.reducer'
import ProductItem from './ProductItem'const Search = () => {const dispatch = useDispatch()// 获取 state 中的分类列表const { category } = useSelector<AppState, CategoryState>(state => state.category)useEffect(() => {// 页面首次加载时获取分类列表dispatch(getCategory())}, [])return (<><Formlayout="inline"initialValues={{category: ''}}><Input.Group compact><Form.Item name="category"><Select><Select.Option value="">所有分类</Select.Option>{category.result.map(item => (<Select.Option value={item._id} key={item._id}>{item.name}</Select.Option>))}</Select></Form.Item><Form.Item name="search"><Input placeholder="请输入搜索关键字" /></Form.Item><Form.Item><Button htmlType="submit">搜索</Button></Form.Item></Input.Group></Form><Divider /><Row gutter={[16, 16]}><Col span="6">{/* <ProductItem /> */}</Col></Row></>)
}export default Search

实现搜索

// src\components\core\Search.tsx
import { Button, Col, Divider, Form, Input, message, Row, Select } from 'antd'
import axios from 'axios'
import { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { API } from '../../config'
import { getCategory } from '../../store/actions/category.action'
import { Product } from '../../store/models/product'
import { AppState } from '../../store/reducers'
import { CategoryState } from '../../store/reducers/category.reducer'
import ProductItem from './ProductItem'const Search = () => {const dispatch = useDispatch()// 获取 state 中的分类列表const { category } = useSelector<AppState, CategoryState>(state => state.category)useEffect(() => {// 页面首次加载时获取分类列表dispatch(getCategory())}, [])// 搜索结果const [products, setProducts] = useState<Product[]>([])const onFinish = async (value: { category: string; search: string }) => {try {const response = await axios.post<Product[]>(`${API}/products`, {sortBy: 'createdAt',order: 'desc',limit: 10,skip: 0,search: value.search,filters: value.category? {category: [value.category]}: {}})setProducts(response.data)} catch (error) {message.error('搜索产品失败')}}return (<><Formlayout="inline"initialValues={{category: ''}}onFinish={onFinish}><Input.Group compact><Form.Item name="category"><Select><Select.Option value="">所有分类</Select.Option>{category.result.map(item => (<Select.Option value={item._id} key={item._id}>{item.name}</Select.Option>))}</Select></Form.Item><Form.Item name="search"><Input placeholder="请输入搜索关键字" /></Form.Item><Form.Item><Button htmlType="submit">搜索</Button></Form.Item></Input.Group></Form><Divider /><Row gutter={[16, 16]}>{products.map(item => (<Col span="6" key={item._id}><ProductItem product={item} /></Col>))}</Row></>)
}export default Search

构建商城页面布局

左侧按照分类筛选组件

// src\components\core\CategoryFilter.tsx
import { Checkbox, List, Typography } from 'antd'const { Title } = Typographyconst CategoryFilter = () => {const categories = [{name: '化妆品'}, {name: '书籍'}]return (<><Title level={4}>按照分类筛选</Title><Checkbox.Group onChange={onChange} style={{ width: '100%' }}><ListdataSource={categories}renderItem={item => (<List.Item><Checkbox>{item.name}</Checkbox></List.Item>)}/></Checkbox.Group></>)
}export default CategoryFilter

左侧按照价格筛选组件

// src\components\core\PriceFilter.tsx
import { List, Radio, Typography } from 'antd'const { Title } = Typographyconst PriceFilter = () => {const prices = [{ price: '0 - 50' }, { price: '50 - 100' }]return (<><Title level={4}>按照价格筛选</Title><Radio.Group><ListdataSource={prices}renderItem={item => (<List.Item><Radio>{item.price}</Radio></List.Item>)}/></Radio.Group></>)
}export default PriceFilter

商城页面左侧筛选条件布局

// src\components\core\Shop.tsx
import { Col, Row, Space } from 'antd'
import CategoryFilter from './CategoryFilter'
import Layout from './Layout'
import PriceFilter from './PriceFilter'const Shop = () => {const filterDOM = () => (<Space size="middle" direction="vertical"><CategoryFilter /><PriceFilter /></Space>)return (<Layout title="RM商城" subTitle="挑选你喜欢的商品把"><Row><Col span="4">{filterDOM()}</Col><Col span="20">right</Col></Row></Layout>)
}export default Shop

收集用户筛选条件

收集分类

// src\components\core\CategoryFilter.tsx
import { Checkbox, List, Typography } from 'antd'
import { CheckboxValueType } from 'antd/lib/checkbox/Group'
import { FC, useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { getCategory } from '../../store/actions/category.action'
import { AppState } from '../../store/reducers'
import { CategoryState } from '../../store/reducers/category.reducer'const { Title } = Typographyinterface Props {handleFilter: (arg: string[]) => void
}const CategoryFilter: FC<Props> = ({ handleFilter }) => {const dispatch = useDispatch()const category = useSelector<AppState, CategoryState>(state => state.category)useEffect(() => {dispatch(getCategory())}, [])const onChange = (checkedValue: CheckboxValueType[]) => {handleFilter(checkedValue as string[])}return (<><Title level={4}>按照分类筛选</Title><Checkbox.Group onChange={onChange} style={{ width: '100%' }}><ListdataSource={category.category.result}renderItem={item => (<List.Item><Checkbox value={item._id}>{item.name}</Checkbox></List.Item>)}/></Checkbox.Group></>)
}export default CategoryFilter
// src\components\core\Shop.tsx
import { Col, Row, Space } from 'antd'
import { useEffect, useState } from 'react'
import CategoryFilter from './CategoryFilter'
import Layout from './Layout'
import PriceFilter from './PriceFilter'const Shop = () => {const [myFilters, setMyFilters] = useState<{category: string[]price: number[]}>({ category: [], price: [] })useEffect(() => {console.log(myFilters)}, [myFilters])const filterDOM = () => (<Space size="middle" direction="vertical"><CategoryFilterhandleFilter={(filters: string[]) => {setMyFilters({ ...myFilters, category: filters })}}/><PriceFilter /></Space>)return (<Layout title="RM商城" subTitle="挑选你喜欢的商品把"><Row><Col span="4">{filterDOM()}</Col><Col span="20">right</Col></Row></Layout>)
}export default Shop

收集价格

定义筛选条件：

// src\store\models\product.ts
import { Category } from './category'export interface Product {_id: stringname: stringprice: numberdescription: stringcategory: Categoryquantity: numbersold: numberphoto: FormDatashipping: booleancreatedAt: string
}export interface Price {id: numbername: stringarray: [number?, number?]
}
// src\helpers\price.ts
import { Price } from '../store/models/product'const prices: Price[] = [{id: 0,name: '不限制价格',array: []},{id: 1,name: '1 - 50',array: [1, 50]},{id: 2,name: '51 - 100',array: [51, 100]},{id: 3,name: '101 - 150',array: [101, 150]},{id: 4,name: '151 - 200',array: [151, 200]},{id: 5,name: '201 - 500',array: [201, 500]}
]export default prices

修改组件：

// src\components\core\PriceFilter.tsx
import { List, Radio, RadioChangeEvent, Typography } from 'antd'
import { FC } from 'react'
import prices from '../../helpers/price'const { Title } = Typographyinterface Props {handleFilter: (arg: number[]) => void
}const PriceFilter: FC<Props> = ({ handleFilter }) => {const onChange = (event: RadioChangeEvent) => {handleFilter(event.target.value)}return (<><Title level={4}>按照价格筛选</Title><Radio.Group onChange={onChange}><ListdataSource={prices}renderItem={item => (<List.Item><Radio value={item.array}>{item.name}</Radio></List.Item>)}/></Radio.Group></>)
}export default PriceFilter
// src\components\core\Shop.tsx
import { Col, Row, Space } from 'antd'
import { useEffect, useState } from 'react'
import CategoryFilter from './CategoryFilter'
import Layout from './Layout'
import PriceFilter from './PriceFilter'const Shop = () => {const [myFilters, setMyFilters] = useState<{category: string[]price: number[]}>({ category: [], price: [] })useEffect(() => {console.log(myFilters)}, [myFilters])const filterDOM = () => (<Space size="middle" direction="vertical"><CategoryFilterhandleFilter={(filters: string[]) => {setMyFilters({ ...myFilters, category: filters })}}/><PriceFilterhandleFilter={(filters: number[]) => {setMyFilters({ ...myFilters, price: filters })}}/></Space>)return (<Layout title="RM商城" subTitle="挑选你喜欢的商品把"><Row><Col span="4">{filterDOM()}</Col><Col span="20">right</Col></Row></Layout>)
}export default Shop

产品筛选

// src\components\core\Shop.tsx
import { Col, message, Row, Space } from 'antd'
import axios from 'axios'
import { useEffect, useState } from 'react'
import { API } from '../../config'
import { Product } from '../../store/models/product'
import CategoryFilter from './CategoryFilter'
import Layout from './Layout'
import PriceFilter from './PriceFilter'
import ProductItem from './ProductItem'const Shop = () => {const [myFilters, setMyFilters] = useState<{category: string[]price: number[]}>({ category: [], price: [] })const [products, setProducts] = useState<Product[]>([])useEffect(() => {async function filterProduct() {try {const response = await axios.post<Product[]>(`${API}/products`, {sortBy: 'createdAt',order: 'desc',limit: 4,skip: 0,search: '',filters: myFilters})setProducts(response.data)} catch (error) {message.error(error.response.data.errors[0])}}filterProduct()}, [myFilters])// 右侧产品列表const productDOM = () => (<Row gutter={[16, 16]}>{products.map(item => (<Col span="6" key={item._id}><ProductItem product={item} /></Col>))}</Row>)// 左侧筛选条件const filterDOM = () => (<Space size="middle" direction="vertical"><CategoryFilterhandleFilter={(filters: string[]) => {setMyFilters({ ...myFilters, category: filters })}}/><PriceFilterhandleFilter={(filters: number[]) => {setMyFilters({ ...myFilters, price: filters })}}/></Space>)return (<Layout title="RM商城" subTitle="挑选你喜欢的商品把"><Row><Col span="4">{filterDOM()}</Col><Col span="20">{productDOM()}</Col></Row></Layout>)
}export default Shop

加载更多数据

// src\components\core\Shop.tsx
import { Button, Col, Empty, message, Row, Space } from 'antd'
import axios from 'axios'
import { useEffect, useState } from 'react'
import { API } from '../../config'
import { Product } from '../../store/models/product'
import CategoryFilter from './CategoryFilter'
import Layout from './Layout'
import PriceFilter from './PriceFilter'
import ProductItem from './ProductItem'const Shop = () => {const [myFilters, setMyFilters] = useState<{category: string[]price: number[]}>({ category: [], price: [] })// 筛选结果const [products, setProducts] = useState<Product[]>([])// 查询跳过条数const [skip, setSkip] = useState<number>(0)// 是否还有更多数据const [isNoData, setIsNoData] = useState<boolean>(false)// 筛选条件变化 重置skipuseEffect(() => {setSkip(0)}, [myFilters])useEffect(() => {async function filterProduct() {try {const response = await axios.post<Product[]>(`${API}/products`, {sortBy: 'createdAt',order: 'desc',limit: 4,skip,search: '',filters: myFilters})if (skip === 0) {// 重新筛选 清空数据setProducts(response.data)} else {// 加载更多 追加数据setProducts([...products, ...response.data])}setIsNoData(response.data.length === 0)} catch (error) {message.error(error.response.data.errors[0])}}filterProduct()}, [myFilters, skip])// 右侧产品列表const productDOM = () => (<Row gutter={[16, 16]}>{products.map(item => (<Col span="6" key={item._id}><ProductItem product={item} /></Col>))}</Row>)// 加载更多按钮const loadMoreButton = () => {return (!isNoData && (<Row style={{ margin: '20px 0' }} justify="center"><Button onClick={loadMore}>加载更多</Button></Row>))}// 没有更多提示const noData = () => {return (isNoData && (<Row style={{ margin: '20px 0' }} justify="center"><Empty description="暂无数据" image={Empty.PRESENTED_IMAGE_SIMPLE} /></Row>))}// 加载更多数据const loadMore = () => {setSkip(skip + 4)}// 左侧筛选条件const filterDOM = () => (<Space size="middle" direction="vertical"><CategoryFilterhandleFilter={(filters: string[]) => {setMyFilters({ ...myFilters, category: filters })}}/><PriceFilterhandleFilter={(filters: number[]) => {setMyFilters({ ...myFilters, price: filters })}}/></Space>)return (<Layout title="RM商城" subTitle="挑选你喜欢的商品把"><Row><Col span="4">{filterDOM()}</Col><Col span="20">{productDOM()}{loadMoreButton()}{noData()}</Col></Row></Layout>)
}export default Shop

构建产品详情组件布局

// src\components\core\Product.tsx
import { Col, Row } from 'antd'
import Layout from './Layout'const Product = () => {return (<Layout title="产品名称" subTitle="产品描述"><Row gutter={36}><Col span="18">{/* 当前产品信息 */}</Col><Col span="6">{/* 与其相关的产品 */}</Col></Row></Layout>)
}export default Product

添加路由：

// src\Routes.tsx
import { HashRouter, Route, Switch } from 'react-router-dom'
import AddCategory from './components/admin/AddCategory'
import AddProduct from './components/admin/AddProduct'
import AdminDashboard from './components/admin/AdminDashboard'
import AdminRoute from './components/admin/AdminRoute'
import Dashboard from './components/admin/Dashboard'
import PrivateRoute from './components/admin/PrivateRoute'
import Home from './components/core/Home'
import Product from './components/core/Product'
import Shop from './components/core/Shop'
import Signin from './components/core/Signin'
import Signup from './components/core/Signup'const Routes = () => {return (<HashRouter><Switch><Route path="/" component={Home} exact /><Route path="/shop" component={Shop} /><Route path="/signin" component={Signin} /><Route path="/signup" component={Signup} /><PrivateRoute path="/user/dashboard" component={Dashboard} /><AdminRoute path="/admin/dashboard" component={AdminDashboard} /><AdminRoute path="/create/category" component={AddCategory} /><AdminRoute path="/create/product" component={AddProduct} /><Route path="/product/:productId" component={Product} /></Switch></HashRouter>)
}export default Routes

添加跳转链接：

// src\components\core\ProductItem.tsx<Link to={`/product/${product._id}`}>查看详情</Link>

根据产品ID获取产品详情

// src\components\core\Product.tsx
import { Col, message, Row } from 'antd'
import axios from 'axios'
import { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'
import { API } from '../../config'
import { Product as ProductModel } from '../../store/models/product'
import Layout from './Layout'const Product = () => {// 获取路由上的 productIdconst { productId } = useParams<{ productId: string }>()const [product, setProduct] = useState<ProductModel>({_id: '',name: '',price: 0,description: '',category: {_id: '',name: ''},quantity: 0,sold: 0,photo: new FormData(),shipping: false,createdAt: ''})useEffect(() => {async function getProductById() {try {const response = await axios.get(`${API}/product/${productId}`)setProduct(response.data)} catch (error) {message.error(error.response.data.errors[0])}}getProductById()}, [])return (<Layout title="产品名称" subTitle="产品描述"><Row gutter={36}><Col span="18">{/* 当前产品信息 */}</Col><Col span="6">{/* 与其相关的产品 */}</Col></Row></Layout>)
}export default Product

展示产品详情

修改组件

// src\components\core\Product.tsx
import { Col, message, Row } from 'antd'
import axios from 'axios'
import { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'
import { API } from '../../config'
import { Product as ProductModel } from '../../store/models/product'
import Layout from './Layout'
import ProductItem from './ProductItem'const Product = () => {// 获取路由上的 productIdconst { productId } = useParams<{ productId: string }>()const [product, setProduct] = useState<ProductModel>({_id: '',name: '',price: 0,description: '',category: {_id: '',name: ''},quantity: 0,sold: 0,photo: new FormData(),shipping: false,createdAt: ''})useEffect(() => {async function getProductById() {try {const response = await axios.get(`${API}/product/${productId}`)setProduct(response.data)} catch (error) {message.error(error.response.data.errors[0])}}getProductById()}, [])return (<Layout title={product.name} subTitle={product.description}><Row gutter={36}><Col span="18" className="productDetail">{/* 当前产品信息 */}<ProductItem product={product} showViewBtn={false} showCartBtn={false} /></Col><Col span="6">{/* 与其相关的产品 */}</Col></Row></Layout>)
}export default Product

添加样式

/* src\style.css */.../* 产品详情页面封面样式 */
.productDetail .ant-image-img {width: auto;max-width: 100%;
}

控制 ProductItem 按钮展示

// src\components\core\ProductItem.tsx
import { Button, Card, Col, Image, Row, Typography } from 'antd'
import moment from 'moment'
import { Link } from 'react-router-dom'
import { FC } from 'react'
import { API } from '../../config'
import { Product } from '../../store/models/product'const { Title, Paragraph } = Typographyinterface Props {product: ProductshowViewBtn?: booleanshowCartBtn?: boolean
}const ProductItem: FC<Props> = ({ product, showViewBtn = true, showCartBtn = true }) => {const showButtons = () => {const buttonArray = []if (showViewBtn) {buttonArray.push(<Button type="link"><Link to={`/product/${product._id}`}>查看详情</Link></Button>)}if (showCartBtn) {buttonArray.push(<Button type="link"><Link to="">加入购物车</Link></Button>)}return buttonArray}return (<Cardcover={<Image src={`${API}/product/photo/${product._id}`} alt={product.name} preview={false} />}actions={showButtons()}><Title level={5}>{product.name}</Title><Paragraph ellipsis={{ rows: 2 }}>{product.description}</Paragraph><Row><Col span="12">销量：{product.sold}</Col><Col span="12" style={{ textAlign: 'right' }}>价格：￥{product.price}</Col></Row><Row><Col span="12">上架时间：{moment(product.createdAt).format('YYYY-MM-DD')}</Col><Col span="12" style={{ textAlign: 'right' }}>所属分类：{product.category.name}</Col></Row></Card>)
}export default ProductItem

展示相关产品

// src\components\core\Product.tsx
import { Col, message, Row, Space } from 'antd'
import axios from 'axios'
import { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'
import { API } from '../../config'
import { Product as ProductModel } from '../../store/models/product'
import Layout from './Layout'
import ProductItem from './ProductItem'const Product = () => {// 获取路由上的 productIdconst { productId } = useParams<{ productId: string }>()// 产品详情const [product, setProduct] = useState<ProductModel>({_id: '',name: '',price: 0,description: '',category: {_id: '',name: ''},quantity: 0,sold: 0,photo: new FormData(),shipping: false,createdAt: ''})// 相关产品const [relatedProducts, setRelatedProducts] = useState<ProductModel[]>([])useEffect(() => {// 获取产品详情async function getProductById() {try {const response = await axios.get(`${API}/product/${productId}`)setProduct(response.data)} catch (error) {message.error(error.response.data.errors[0])}}// 获取相关产品async function getRelatedProducts() {try {const response = await axios.get(`${API}/products/related/${productId}`)setRelatedProducts(response.data)} catch (error) {message.error(error.response.data.errors[0])}}getProductById()getRelatedProducts()}, [])return (<Layout title={product.name} subTitle={product.description}><Row gutter={36}><Col span="18" className="productDetail">{/* 当前产品信息 */}<ProductItem product={product} showViewBtn={false} showCartBtn={false} /></Col><Col span="6">{/* 与其相关的产品 */}<Space direction="vertical">{relatedProducts.map(item => (<ProductItem product={item} />))}</Space></Col></Row></Layout>)
}export default Product

这篇关于React+Redux+Ant Design+TypeScript 电子商务实战-客户端应用 04 首页产品展示、搜索、筛选和产品详情的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1097937。

相关文章

CSS弹性布局常用设置方式

CSS弹性布局常用设置方式

《CSS弹性布局常用设置方式》文章总结了CSS布局与样式的常用属性和技巧,包括视口单位、弹性盒子布局、浮动元素、背景和边框样式、文本和阴影效果、溢出隐藏、定位以及背景渐变等,通过这些技巧,可以实现复杂... 一、单位元素vm 1vm 为视口的1%vh 视口高的1%vmin 参照长边vmax 参照长边re
阅读更多...
CSS3中使用flex和grid实现等高元素布局的示例代码

CSS3中使用flex和grid实现等高元素布局的示例代码

《CSS3中使用flex和grid实现等高元素布局的示例代码》：本文主要介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法，通过简单的两列实现、每行放置3列以及全部代码的展示，展示了这两种布局方式的实现细节和效果，详细内容请阅读本文，希望能对你有所帮助... 过往的实现方法是使用浮动加
阅读更多...
css渐变色背景|＜gradient示例详解

css渐变色背景|＜gradient示例详解

《css渐变色背景|＜gradient示例详解》CSS渐变是一种从一种颜色平滑过渡到另一种颜色的效果,可以作为元素的背景,它包括线性渐变、径向渐变和锥形渐变，本文介绍css渐变色背景|＜gradien... 使用渐变色作为背景可以直接将渐China编程变色用作元素的背景，可以看做是一种特殊的背景图片。（是作为背
阅读更多...
在Java中使用ModelMapper简化Shapefile属性转JavaBean实战过程

在Java中使用ModelMapper简化Shapefile属性转JavaBean实战过程

《在Java中使用ModelMapper简化Shapefile属性转JavaBean实战过程》本文介绍了在Java中使用ModelMapper库简化Shapefile属性转JavaBean的过程,对比... 目录前言一、原始的处理办法1、使用Set方法来转换2、使用构造方法转换二、基于ModelMapper
阅读更多...
Java实战之自助进行多张图片合成拼接

Java实战之自助进行多张图片合成拼接

《Java实战之自助进行多张图片合成拼接》在当今数字化时代,图像处理技术在各个领域都发挥着至关重要的作用,本文为大家详细介绍了如何使用Java实现多张图片合成拼接,需要的可以了解下... 目录前言一、图片合成需求描述二、图片合成设计与实现1、编程语言2、基础数据准备3、图片合成流程4、图片合成实现三、总结前
阅读更多...
使用Java实现获取客户端IP地址

使用Java实现获取客户端IP地址

《使用Java实现获取客户端IP地址》这篇文章主要为大家详细介绍了如何使用Java实现获取客户端IP地址,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 首先是获取 IP，直接上代码import org.springframework.web.context.request.Requ
阅读更多...
CSS自定义浏览器滚动条样式完整代码

CSS自定义浏览器滚动条样式完整代码

《CSS自定义浏览器滚动条样式完整代码》：本文主要介绍了如何使用CSS自定义浏览器滚动条的样式，包括隐藏滚动条的角落、设置滚动条的基本样式、轨道样式和滑块样式，并提供了完整的CSS代码示例，通过这些技巧，你可以为你的网站添加个性化的滚动条样式，从而提升用户体验，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...
css实现图片旋转功能

css实现图片旋转功能

《css实现图片旋转功能》：本文主要介绍了四种CSS变换效果：图片旋转90度、水平翻转、垂直翻转，并附带了相应的代码示例，详细内容请阅读本文，希望能对你有所帮助... 一 css实现图片旋转90度.icon{ -moz-transform:rotate(-90deg); -webkit-transfo
阅读更多...
nginx-rtmp-module构建流媒体直播服务器实战指南

nginx-rtmp-module构建流媒体直播服务器实战指南

《nginx-rtmp-module构建流媒体直播服务器实战指南》本文主要介绍了nginx-rtmp-module构建流媒体直播服务器实战指南,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有... 目录1. RTMP协议介绍与应用RTMP协议的原理RTMP协议的应用RTMP与现代流媒体技术的关系2
阅读更多...
vue基于ElementUI动态设置表格高度的3种方法

vue基于ElementUI动态设置表格高度的3种方法

《vue基于ElementUI动态设置表格高度的3种方法》ElementUI+vue动态设置表格高度的几种方法,抛砖引玉,还有其它方法动态设置表格高度,大家可以开动脑筋... 方法一、css + js的形式这个方法需要在表格外层设置一个div，原理是将表格的高度设置成外层div的高度，所以外层的div需要
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2