这节，我们来写管理端的这两个页面：

很明显，它们是和这几个管理页面平级的，点击用户图标的时候打开：

所以，我们在它平级添加个路由：

{
    path: "/user",
    element: <ModifyMenu></ModifyMenu>,
    children: [
      {
        path: 'info_modify',
        element: <InfoModify/>
      },
      {
        path: 'password_modify',
        element: <PasswordModify/>
      },
    ]
},

然后创建这几个对应的组件：

src/pages/ModifyMenu/ModifyMenu.stx

import { Outlet } from "react-router-dom";
import { Menu as AntdMenu, MenuProps } from 'antd';
import './menu.css';

const items: MenuProps['items'] = [
    {
        key: '1',
        label: "信息修改"
    },
    {
        key: '2',
        label: "密码修改"
    }
];

export function ModifyMenu() {
    return <div id="menu-container">
        <div className="menu-area">
            <AntdMenu
                defaultSelectedKeys={['1']}
                items={items}
            />
        </div>
        <div className="content-area">
            <Outlet></Outlet>
        </div>
    </div>
}

用到的 menu.css：

#menu-container {
    display: flex;
    flex-direction: row;
}
#menu-container .menu-area {
    width: 200px;
}

然后是

src/pages/InfoModify/InfoModify.tsx

export function InfoModify() {
    return <div>InfoModify</div>
}

src/pages/PasswordModify/PasswordModify.tsx

export function PasswordModify() {
    return <div>PasswordModify</div>
}

在 index.tsx 引入，然后跑一下：

没啥问题。

但是现在点击菜单是没反应的，我们给它加上 click 事件。

const handleMenuItemClick: MenuClickEventHandler = (info) => {
    if(info.key === '1') {
        router.navigate('/user/info_modify')
    } else {
        router.navigate('/user/password_modify')
    }
}

这里用到的 router 要在 index.tsx 里导出：

测试下：

点击菜单可以切换路由了。

但现在有个问题，页面一刷新，选中的菜单项就变了：

我们需要根据当前路由来决定选中哪个：

这里用到了 react-router 的 useLocation 的 hook 来拿到当前地址：

location.pathname === '/user/info_modify' ? ['1'] : ['2']

这样，刷新之后选中的菜单项也是对的：

改下 Index 组件，添加两个链接：

<div className="header">
    <Link to="/" className="sys_name">
        <h1>会议室预定系统-后台管理</h1>
    </Link>
    <Link to="/user/info_modify">
        <UserOutlined className="icon"/>
    </Link>
</div>

并且添加它的样式：

#index-container .sys_name {
    text-decoration: none;
    color: #000;
}

这样就可以方便跳转对应的路由了：

然后，我们来实现信息修改页面：

之前用户端修改信息页面也是类似的，我们直接拿过来就行：

import { Button, Form, Input, message } from 'antd';
import { useForm } from 'antd/es/form/Form';
import { useCallback, useEffect, useState } from 'react';
import './info_modify.css';
import { useNavigate } from 'react-router-dom';
import { HeadPicUpload } from './HeadPicUpload';

export interface UserInfo {
    username: string;
    headPic: string;
    nickName: string;
    email: string;
    captcha: string;
}

const layout1 = {
    labelCol: { span: 6 },
    wrapperCol: { span: 18 }
}

export function InfoModify() {
    const [form] = useForm();
    const navigate = useNavigate();

    const onFinish = useCallback(async (values: UserInfo) => {

    }, []);

    const sendCaptcha = useCallback(async function () {
        
    }, []);

    useEffect(() => {
        async function query() {
            
        }
        query();
    }, []);

    return <div id="updateInfo-container">
        <Form
            form={form}
            {...layout1}
            onFinish={onFinish}
            colon={false}
            autoComplete="off"
        >
            <Form.Item
                label="头像"
                name="headPic"
                rules={[
                    { required: true, message: '请输入头像!' },
                ]}
                shouldUpdate
            >
                <HeadPicUpload></HeadPicUpload>
            </Form.Item>

            <Form.Item
                label="昵称"
                name="nickName"
                rules={[
                    { required: true, message: '请输入昵称!' },
                ]}
            >
                <Input />
            </Form.Item>

            <Form.Item
                label="邮箱"
                name="email"
                rules={[
                    { required: true, message: '请输入邮箱!' },
                    { type: "email", message: '请输入合法邮箱地址!'}
                ]}
            >
                <Input disabled/>
            </Form.Item>

            <div className='captcha-wrapper'>
                <Form.Item
                    label="验证码"
                    name="captcha"
                    rules={[{ required: true, message: '请输入验证码!' }]}
                >
                    <Input />
                </Form.Item>
                <Button type="primary" onClick={sendCaptcha}>发送验证码</Button>
            </div>

            <Form.Item
                {...layout1}
                label=" "
            >
                <Button className='btn' type="primary" htmlType="submit">
                    修改
                </Button>
            </Form.Item>
        </Form>
    </div>   
}

css 部分如下：

#updateInfo-container {
    width: 400px;
    margin: 50px auto 0 auto;
    text-align: center;
}
#updateInfo-container .btn {
    width: 100%;
}
#updateInfo-container .captcha-wrapper {
    display: flex;
    justify-content: flex-end;
}

用到的 HeadPicUpload 组件如下：

import { InboxOutlined } from "@ant-design/icons";
import { message } from "antd";
import Dragger, { DraggerProps } from "antd/es/upload/Dragger";

interface HeadPicUploadProps {
    value?: string;
    onChange?: Function
}

let onChange: Function;

const props: DraggerProps = {
    name: 'file',
    action: 'http://localhost:3005/user/upload',
    onChange(info) {
        const { status } = info.file;
        if (status === 'done') {
            onChange(info.file.response.data);
            message.success(`${info.file.name} 文件上传成功`);
        } else if (status === 'error') {
            message.error(`${info.file.name} 文件上传失败`);
        }
    }
};

const dragger = <Dragger {...props}>
    <p className="ant-upload-drag-icon">
        <InboxOutlined />
    </p>
    <p className="ant-upload-text">点击或拖拽文件到这个区域来上传</p>
</Dragger>

export function HeadPicUpload(props: HeadPicUploadProps) {

    onChange = props.onChange!

    return props?.value ? <div>
        <img src={'http://localhost:3005/' + props.value} alt="头像" width="100" height="100"/>
        {dragger}
    </div>: <div>
        {dragger}
    </div>
}

这些都是我们前面写过一遍的。

渲染出来是这样的：

上传功能也是可用的：

然后我们还要加上回显接口、发送验证码接口、更新接口。

在 interfaces.tsx 加上这三个接口：

export async function getUserInfo() {
    return await axiosInstance.get('/user/info');
}

export async function updateInfo(data: UserInfo) {
    return await axiosInstance.post('/user/admin/update', data);
}

export async function updateUserInfoCaptcha() {
    return await axiosInstance.get('/user/update/captcha');
}

然后先调用下回显接口：

async function query() {
    const res = await getUserInfo();

    const { data } = res.data;

    if(res.status === 201 || res.status === 200) {

        form.setFieldValue('headPic', data.headPic);
        form.setFieldValue('nickName', data.nickName);
        form.setFieldValue('email', data.email);
    }
}

可以看到，正确回显了数据。

然后是发送验证码接口：

const sendCaptcha = useCallback(async function () {
    const res = await updateUserInfoCaptcha();
    if(res.status === 201 || res.status === 200) {
        message.success(res.data.data);
    } else {
        message.error('系统繁忙，请稍后再试');
    }
}, []);

不过现在的邮箱地址不是真实的，我们手动去数据库里改一下：

改完点击 apply。

然后需要重新登录一遍，因为现在后端会直接从 jwt 里取邮箱地址，重新登录才会更新。

邮箱收到了验证码：

然后加上更新用户信息的接口：

const onFinish = useCallback(async (values: UserInfo) => {
    const res = await updateInfo(values);

    if(res.status === 201 || res.status === 200) {
        const { message: msg, data} = res.data;
        if(msg === 'success') {
            message.success('用户信息更新成功');
        } else {
            message.error(data);
        }
    } else {
        message.error('系统繁忙，请稍后再试');
    }
}, []);

上传头像，点击发送验证码，填入收到的验证码，点击修改：

修改成功后，刷新页面，可以看到依然是修改后的数据，就代表修改成功了：

接下来是密码修改页面：

代码如下：

import { Button, Form, Input, message } from 'antd';
import { useForm } from 'antd/es/form/Form';
import './password_modify.css';
import { useCallback } from 'react';
import { Link, useNavigate } from 'react-router-dom';

export interface UpdatePassword {
    email: string;
    captcha: string;
    password: string;
    confirmPassword: string;
}

const layout1 = {
    labelCol: { span: 6 },
    wrapperCol: { span: 18 }
}

const layout2 = {
    labelCol: { span: 0 },
    wrapperCol: { span: 24 }
}

export function PasswordModify() {
    const [form] = useForm();
    const navigate = useNavigate();

    const onFinish = useCallback(async (values: UpdatePassword) => {

    }, []);

    const sendCaptcha = useCallback(async function () {

    }, []);

    return <div id="updatePassword-container">
        <Form
            form={form}
            {...layout1}
            onFinish={onFinish}
            colon={false}
            autoComplete="off"
        >
            <Form.Item
                label="密码"
                name="password"
                rules={[{ required: true, message: '请输入密码!' }]}
            >
                <Input.Password />
            </Form.Item>

            <Form.Item
                label="确认密码"
                name="confirmPassword"
                rules={[{ required: true, message: '请输入确认密码!' }]}
            >
                <Input.Password />
            </Form.Item>
            <Form.Item
                label="邮箱"
                name="email"
                rules={[
                    { required: true, message: '请输入邮箱!' },
                    { type: "email", message: '请输入合法邮箱地址!'}
                ]}
            >
                <Input />
            </Form.Item>

            <div className='captcha-wrapper'>
                <Form.Item
                    label="验证码"
                    name="captcha"
                    rules={[{ required: true, message: '请输入验证码!' }]}
                >
                    <Input />
                </Form.Item>
                <Button type="primary" onClick={sendCaptcha}>发送验证码</Button>
            </div>

            <Form.Item
                {...layout1}
                label=" "
            >
                <Button className='btn' type="primary" htmlType="submit">
                    修改密码
                </Button>
            </Form.Item>
        </Form>
    </div>   
}

用到的 password_modify.css：

#updatePassword-container {
    width: 400px;
    margin: 40px auto;
    text-align: center;
}
#updatePassword-container .btn {
    width: 100%;
}
#updatePassword-container .captcha-wrapper {
    display: flex;
    justify-content: flex-end;
}

渲染出来是这样的：

然后在 interfaces.ts 加上用到的发送验证码、修改密码这两个接口：

export async function updatePasswordCaptcha(email: string) {
    return await axiosInstance.get('/user/update_password/captcha', {
        params: {
            address: email
        }
    });
}

export async function updatePassword(data: UpdatePassword) {
    return await axiosInstance.post('/user/admin/update_password', data);
}

然后先在页面调用下回显接口：

useEffect(() => {
    async function query() {
        const res = await getUserInfo();

        const { data } = res.data;

        if(res.status === 201 || res.status === 200) {  
            form.setFieldValue('username', data.username);              
            form.setFieldValue('email', data.email);
        }
    }
    query();
}, []);

并把邮箱 Input 设置为 disabled

这样邮箱地址就会回显，并且只读：

然后调用发送验证码接口：

const sendCaptcha = useCallback(async function () {
    const address = form.getFieldValue('email');
    if(!address) {
        return message.error('邮箱地址为空');
    }

    const res = await updatePasswordCaptcha(address);
    if(res.status === 201 || res.status === 200) {
        message.success(res.data.data);
    } else {
        message.error('系统繁忙，请稍后再试');
    }
}, []);

点击发送验证码：

邮箱收到了对应的验证码：

然后加上修改密码接口：

const onFinish = useCallback(async (values: UpdatePassword) => {
    if(values.password !== values.confirmPassword) {
        return message.error('两次密码不一致');
    }

    const res = await updatePassword({
        ...values,
        username: form.getFieldValue('username')
    });

    const { message: msg, data} = res.data;

    if(res.status === 201 || res.status === 200) {
        message.success('密码修改成功');
    } else {
        message.error(data || '系统繁忙，请稍后再试');
    }
}, []);

提示密码修改成功：

我们可以去登录页面，用老密码试试：

再用新密码试试：

这样，管理端的用户相关的页面就完成了。

案例代码上传了小册仓库。

总结

这节我们实现了管理端的用户信息修改和密码修改的页面。

首先添加了一个和管理页面平级的二级路由，然后添加了两个组件。

这两个页面都是表单，涉及到回显数据、发送验证码、上传文件、更新接口。

这也是管理系统的常见功能。

下节开始，我们就开始写会议室管理的功能了。