React+Redux+AntDesign+TypeScript电子商务实战客户端应用06普通用户dashboard页面

// src\components\admin\Dashboard.tsx
import { Col, Descriptions, List, Menu, message, Row, Typography } from &＃39;antd&＃39;
import { Link } from &＃39;react-router-dom&＃39;
import Layout from &＃39;../core/Layout&＃39;
import { ShoppingCartOutlined, UserOutlined } from &＃39;&＃64;ant-design/icons&＃39;
import { isAuth } from &＃39;../../helpers/auth&＃39;
import { Jwt } from &＃39;../../store/models/auth&＃39;
import { useEffect, useState } from &＃39;react&＃39;
import axios from &＃39;axios&＃39;
import { API } from &＃39;../../config&＃39;
import { Order, OrderProduct } from &＃39;../../store/models/order&＃39;const { Title } &＃61; Typographyconst Dashboard &＃61; () &＃61;> {const {token,user: { name, email, _id: userId }} &＃61; isAuth() as Jwtconst links &＃61; () &＃61;> (<><Title level&＃61;{5}>用户导航</Title><Menu style&＃61;{{ borderRight: 0 }}><Menu.Item><ShoppingCartOutlined style&＃61;{{ marginRight: &＃39;5px&＃39; }} /><Link to&＃61;"/cart">购物车</Link></Menu.Item><Menu.Item><UserOutlined style&＃61;{{ marginRight: &＃39;5px&＃39; }} /><Link to&＃61;"/user/profile">资料更新</Link></Menu.Item></Menu></>)const info &＃61; () &＃61;> (<Descriptions title&＃61;"用户信息" bordered><Descriptions.Item label&＃61;"昵称">{name}</Descriptions.Item><Descriptions.Item label&＃61;"邮箱">{email}</Descriptions.Item><Descriptions.Item label&＃61;"角色">普通用户</Descriptions.Item></Descriptions>)const [orders, setOrders] &＃61; useState([])async function getOrders() {try {const response &＃61; await axios.get(&＃96;${API}/user/orders/${userId}&＃96;, {headers: {Authorization: &＃96;Bearer ${token}&＃96;}})setOrders(response.data)} catch (error) {message.error(error.response.data.errors[0])}}useEffect(() &＃61;> {getOrders()}, [])const historyOrder &＃61; () &＃61;> (<><Title level&＃61;{5} style&＃61;{{ marginTop: &＃39;20px&＃39; }}>购买历史</Title><ListdataSource&＃61;{orders}renderItem&＃61;{(item: Order) &＃61;> (<List.Item><Col span&＃61;"18">{item.products.map(({ snapshot }: OrderProduct) &＃61;> snapshot.name).join(&＃39;、&＃39;)}</Col><Col span&＃61;"6">{item.amount}</Col></List.Item>)}/></>)return (<Layout title&＃61;"用户 dashboard" subTitle&＃61;""><Row><Col span&＃61;"4">{links()}</Col><Col span&＃61;"20">{info()}{historyOrder()}</Col></Row></Layout>)
}export default Dashboard
资料更新页面

页面布局

// src\components\admin\Profile.tsx
import { Button, Form, Input } from &＃39;antd&＃39;
import Layout from &＃39;../core/Layout&＃39;const Profile &＃61; () &＃61;> {return (<Layout title&＃61;"资料更新" subTitle&＃61;""><Form><Form.Item name&＃61;"email" label&＃61;"邮箱"><Input disabled /></Form.Item><Form.Item name&＃61;"name" label&＃61;"昵称"><Input /></Form.Item><Form.Item name&＃61;"password" label&＃61;"密码"><Input.Password /></Form.Item><Form.Item><Button type&＃61;"primary" htmlType&＃61;"submit">修改</Button></Form.Item></Form></Layout>)
}export default Profile

路由配置

// src\Routes.tsx
import Profile from &＃39;./components/admin/Profile&＃39;<PrivateRoute path&＃61;"/user/profile" component&＃61;{Profile} />


修改方法

// src\helpers\auth.ts
import { message } from &＃39;antd&＃39;
import axios from &＃39;axios&＃39;
import { API } from &＃39;../config&＃39;
import { SignupPayload } from &＃39;../store/actions/auth.action&＃39;
import { Jwt } from &＃39;../store/models/auth&＃39;// 是否登录
export function isAuth(): boolean | Jwt {const jwt &＃61; localStorage.getItem(&＃39;jwt&＃39;)if (jwt) {return JSON.parse(jwt)}return false
}// 修改
export function update(value: SignupPayload) {const auth &＃61; isAuth() as Jwtaxios.put(&＃96;${API}/user/${auth.user._id}&＃96;, value, {headers: {Authorization: &＃96;Bearer ${auth.token}&＃96;}}).then(({ data }) &＃61;> {auth.user.email &＃61; data.emailauth.user.name &＃61; data.namelocalStorage.setItem(&＃39;jwt&＃39;, JSON.stringify(auth))message.success(&＃39;修改成功&＃39;)}).catch(error &＃61;> {message.error(error.response.data.errors[0])})
}

修改操作

// src\components\admin\Profile.tsx
import { Button, Form, Input } from &＃39;antd&＃39;
import { isAuth, update } from &＃39;../../helpers/auth&＃39;
import { SignupPayload } from &＃39;../../store/actions/auth.action&＃39;
import { Jwt } from &＃39;../../store/models/auth&＃39;
import Layout from &＃39;../core/Layout&＃39;const Profile &＃61; () &＃61;> {const {user: { name, email }} &＃61; isAuth() as Jwtconst onFinish &＃61; (value: SignupPayload) &＃61;> {update(value)}return (<Layout title&＃61;"资料更新" subTitle&＃61;""><Form onFinish&＃61;{onFinish} initialValues&＃61;{{ name, email }}><Form.Item name&＃61;"email" label&＃61;"邮箱"><Input disabled /></Form.Item><Form.Item name&＃61;"name" label&＃61;"昵称"><Input /></Form.Item><Form.Item name&＃61;"password" label&＃61;"密码"><Input.Password /></Form.Item><Form.Item><Button type&＃61;"primary" htmlType&＃61;"submit">修改</Button></Form.Item></Form></Layout>)
}export default Profile