实现图书管理的添加和搜索功能

首先我们创建一个项目
yarn create @umijs/umi-app或者是npm create @umijs/umi-app
然后我们需要在pages文件夹中创建一个Home文件夹，里面创建两个文件home.tsx和index.less
然后我们需要在src当中创建一个static文件夹，和pages同级用来存储图片信息

我们的案例当中需要用到antd-mobile，我们需要知道umi当中的antd-mobile是2.x版本的，而如果你使用的不是2.x版本的，那么你需要重新下载你需要的antd-mobile版本
然后我们接下来就是需要在home.tsx文件中编写

import React, { useState } from 'react'
import { NavBar, Space, Button, Grid, Toast, SearchBar } from 'antd-mobile/es'
import './index.less'
import { useHistory } from 'umi';
import img1 from '@/static/1.jpg'
import img2 from '@/static/2.jpg'
import img3 from '@/static/3.jpg'
import img4 from '@/static/4.jpg'
import img5 from '@/static/5.jpg'
import img6 from '@/static/6.jpg'
import img7 from '@/static/7.jpg'
import img8 from '@/static/8.jpg'


export default function Home() {
    const history = useHistory();
    const [value, setvalue] = useState('');
    const [state, setstate] = useState([
        {
            id: 1,
            img: img1,
            name: '红楼梦',
            check: false
        },
        {
            id: 2,
            img: img2,
            name: '西游记',
            check: false
        },
        {
            id: 3,
            img: img3,
            name: '水浒传',
            check: false
        },
        {
            id: 4,
            img: img4,
            name: '三国演义',
            check: false
        },
        {
            id: 5,
            img: img5,
            name: '笑面人',
            check: false
        },
        {
            id: 6,
            img: img6,
            name: '油画',
            check: false
        },
        {
            id: 7,
            img: img7,
            name: '郭记',
            check: false
        },
        {
            id: 8,
            img: img8,
            name: '呼啸山庄',
            check: false
        },
    ])
    const right = (
        <div style={{ fontSize: 24 }}>
            <Space style={{ '--gap': '16px' }}>
                <Button onClick={() => {
                    history.push('/book')
                }} color={'success'} fill='none'>
                    我的书架
                </Button>
            </Space>
        </div>
    )
    const onbookshelf = (item) => {
        let books = JSON.parse(localStorage.getItem('bookshelf'));
        if (books) {
            let sta = books.some(i => {
                return i.name === item.name
            })
            if (sta) {
                Toast.show({
                    icon: 'success',
                    content: '加入失败,图书已存在',
                })
            } else {
                books.push(item)
                localStorage.setItem('bookshelf', JSON.stringify(books));
                Toast.show({
                    icon: 'success',
                    content: '加入成功',
                })
            }
        } else {
            localStorage.setItem('bookshelf', JSON.stringify([item]));
            Toast.show({
                icon: 'success',
                content: '加入成功',
            })
        }
    }
    return (
        <div>
            <NavBar style={{ 'backgroundColor': 'blue' }} right={right} backArrow={false}>
                图书商城
            </NavBar>
            <SearchBar onChange={(val) => { setvalue(val) }} placeholder='请输入内容' />
            <Grid columns={2} gap={8}>
                {value ?
                    state.filter(user => user.name === value).map((item, index) => {
                        return (
                            <Grid.Item key={index} className='grid-demo'>
                                <img src={item.img} alt="" />
                                <div className='gridxia'>
                                    <span className='gridname'>{item.name}</span>
                                    <span className='gridbutton'>
                                        <Button size='small'
                                            shape='rounded'
                                            color='primary'
                                            onClick={() => {
                                                onbookshelf(item)
                                            }}
                                        >
                                            +
                                        </Button>
                                    </span>
                                </div>
                            </Grid.Item>
                        )
                    })
                    :

                    state.map((item, index) => {
                        return (
                            <Grid.Item key={index} className='grid-demo'>
                                <img src={item.img} alt="" />
                                <div className='gridxia'>
                                    <span className='gridname'>{item.name}</span>
                                    <span className='gridbutton'>
                                        <Button size='small'
                                            shape='rounded'
                                            color='primary'
                                            onClick={() => {
                                                onbookshelf(item)
                                            }}
                                        >
                                            +
                                        </Button>
                                    </span>
                                </div>
                            </Grid.Item>
                        )
                    })

                }
            </Grid>
        </div>
    )
}

然后我们需要在index.less文件中对整体页面进行布局

.grid-demo {
    img {
        width: 100%;
        height: 220px;
    }
    .gridxia {
        .gridbutton {
            float: right;
        }
    }
}