图书列表管理案例html,axios
时间: 2024-11-15 22:27:28 浏览: 4
图书列表管理案例通常涉及到HTML、CSS以及JavaScript库如Axios的使用。HTML用于构建页面结构,展示图书的基本信息,比如标题、作者、封面等。Axios是一个基于Promise的HTTP客户端,它可以在浏览器和Node.js环境中轻松发送HTTP请求。
在这个场景中,你可能会创建一个包含书籍列表的HTML表格,每个单元格显示一本书的信息,例如:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图书列表</title>
</head>
<body>
<table id="books-table">
<thead>
<tr>
<th>书名</th>
<th>作者</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- Axios获取数据后动态填充 -->
</tbody>
</table>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios.get('/api/books')
.then(response => {
response.data.forEach(book => {
const row = document.createElement('tr');
row.innerHTML = `<td>${book.title}</td><td>${book.author}</td><td><button onclick='deleteBook(${book.id})'>删除</button></td>`;
document.querySelector('#books-table tbody').appendChild(row);
});
})
.catch(error => console.error(error));
</script>
</body>
</html>
```
上述代码中,`axios.get('/api/books')`会发起一个GET请求到服务器获取所有图书信息。然后,我们在循环中生成表格行,并将书籍数据插入到表格中。当点击“删除”按钮时,会触发`deleteBook()`函数,但实际上这通常是AJAX的一个模拟,真正的删除操作通常会通过POST请求并携带ID进行服务器交互。
阅读全文