后端接口
router.get('/book/list', async (req, res) => {
let data
if (!req.query.search) {
data = await bookModel.find()
} else {
data = await bookModel.find({ title: req.query.search })
}
res.send({
code: 200,
data: data
})
})
前端
import React, { useEffect, useState } from 'react'
import { Input, Toast } from 'antd-mobile'
import axios from '../../server/request'
import { useNavigate } from 'react-router-dom'
export default function Index() {
const [inputValue, setInputValue] = useState("")
const [data, setData] = useState([])
useEffect(() => {
getbooklist(inputValue)
}, [])
function getbooklist(value) {
axios.get('/book/list?search=' + value).then(res => {
console.log(res.data)
setData(res.data)
})
}
function onInputChange(value) {
setInputValue(value)
getbooklist(value)
}
return (
<div className='index'>
<div className="search">
<Input placeholder='请输入书名搜索' onChange={onInputChange} />
</div>
<div className="book">
{
data.map((item, index) => {
console.log(item, 'teim')
return (
<div className='books' key={index}>
<img src={require('./images/' + item.img)} alt="" />
<span>{item.desc}</span>
<div className="add">
<h4>{item.title}</h4>
<button>+</button>
</div>
</div>
)
})
}
</div>
</div>
)
}