[JavaScript知识库]APP管理平台--前端篇，app详情（六）

在首页有个操作栏，用于下载，查看详情，或者其他。这里就做了下载和详情

回看下首页这里的代码如何写的。

    const appColums = [
        {
            title: '名字',
            dataIndex: 'name',
            key: 'name'
        },
        {
            title: '版本',
            dataIndex: 'appVersion',
            key: 'appVersion'
        },
        {
            title: '业务线条',
            dataIndex: 'business',
            key: 'business'
        },
        {
            title: '操作',
            dataIndex: 'id',
            key: 'op',
            width: 400,
            render: (text, record) => {
                let id = record.id;
                return (
                    <div>
                    //生成两个btn，一个跳转到详情，一个以link的形式存在用于下载
                        <Button onClick={() =>
                            navigate('/detail/' + id)
                        } type='link'>详情</Button>
                        <Button type='link' href={record.downloadUrl}>下载</Button>
                    </div>
                )
            }
        }
    ];

携带的参数是id，将id放到了detail后面，就成为了/detail/:id的形式，于是路由这样写。

<Route path="detail/:id" element={<Detail />} />

参数在上一篇上传就讲过，获取url里的query数据通过useSearchParams获取，那这里的数据呢？
由于在router里是:id的形式存在，于是将id解析成了参数传递到后面的页面，那么在Detail页面中获取参数即可。

import { useNavigate, useParams } from 'react-router-dom';
const { id } = useParams();

这样就拿到了id
全量代码：

import React, { useState, useEffect } from 'react';
import "./detail.css";
import cookie from 'js-cookie';
import { useNavigate, useParams } from 'react-router-dom';
import { Button, message, Descriptions } from 'antd';
const userId = cookie.get("userId")
export default function Detail () {
    const navigate = useNavigate();
    const [canEdit, setCanEdit] = useState(false);//判断是否是属于自己的app，可编辑
    const [appInfo, setAppInfo] = useState({});//app信息，请求后显示详情
    const { id } = useParams();//获取参数
    //定义接口
    const getDetail = (id) => {
        fetch("/api/app/detail/" + id)
            .then(response => response.json())
            .then(json => {
                if (json.result === 0) {
                    setAppInfo(json.detail)
                    if (json.detail.userId === userId) {
                        setCanEdit(true)
                    }
                } else {
                    message.error(json.resultNote)
                }
            })
            .catch(e => console.log(e))
    };
    useEffect(() => {
    	//获取数据
        getDetail(id);
    }, []);
    //定义编辑按钮
    const cancelBtn = canEdit ? <Button onClick={() => navigate('/upload?id=' + id)} type='primary' className='edit-btn'>编辑</Button> : <div />
    return (
        <div>
            <Descriptions title="App Info" className='describe-info' bordered>
                <Descriptions.Item label="名字">{appInfo.name}</Descriptions.Item>
                <Descriptions.Item label="包名">{appInfo.packageName}</Descriptions.Item>
                <Descriptions.Item label="更新时间">{appInfo.updateTime}</Descriptions.Item>
                <Descriptions.Item label="当前版本">{appInfo.appVersion}</Descriptions.Item>
                <Descriptions.Item label="更新描述">{appInfo.updateNote}</Descriptions.Item>
                <Descriptions.Item label="下载地址"><Button href={appInfo.downloadUrl} type='link'>下载</Button></Descriptions.Item>
                <Descriptions.Item label="联系">{appInfo.contact}</Descriptions.Item>
                <Descriptions.Item label="描述" span={2}>{appInfo.describe}</Descriptions.Item>
                <Descriptions.Item label="业务线条" span={3}>{appInfo.business}</Descriptions.Item>
                <Descriptions.Item label="logo" span={3}><img src={appInfo ? appInfo.logoUrl : ""} style={{ width: '8rem', height: '8rem' }} alt="logo" /></Descriptions.Item>
            </Descriptions>
            {cancelBtn}
        </div>
    )
}

@import '~antd/dist/antd.css';
.describe-info{
    margin: 20px;
}
.edit-btn{
    margin: 20px;
}

APP管理平台–前端篇，上传（五）

如果可以编辑，那就可以跳转到Uplaod页面带入传递过去id查询数据。
目前系统不能解析ipa文件，所以当前只支持apk文件，整体也是基于安卓相关设计的，后续应该会加上ipa相关信息