前端图书管理小案例

主要实现功能如下：

① 请求并渲染图书列表的数据

② 添加图书

③ 删除图书

初始效果图：

成果图:

代码展示：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 引入 lib 目录下的 bootstrap 样式表 --><link rel="stylesheet" href="./lib/bootstrap-v4.6.0.css"><style>:root {font-size: 15px;}body {padding-top: 15px;}</style></head><body><!-- 栅格系统 --><div class="container-fluid"><!-- 栅格系统中的一行 --><div class="row"><!-- 左侧的表格，占了 8 列 --><div class="col-sm-8"><table class="table table-bordered table-striped table-dark table-hover text-center"><thead><!-- 表头行 --><tr><th scope="col">Id</th><th scope="col">书名</th><th scope="col">作者</th><th scope="col">出版社</th><th scope="col">操作</th></tr></thead><tbody><!-- 表格中的每一行 --><tr><th scope="row">xxx</th><td>xxx</td><td>xxx</td><td>xxx</td><td><button type="button" class="btn btn-link btn-sm">删除</button></td></tr></tbody></table></div><!-- 右侧的添加区域，占了 4 列 --><div class="col-sm-4"><!-- 添加图书的卡片 --><div class="card text-white bg-secondary sticky-top"><div class="card-header">添加新图书</div><form class="card-body bg-light" id="addForm"><!-- 书名 --><div class="input-group mb-3"><div class="input-group-prepend"><span class="input-group-text">书名</span></div><input type="text" class="form-control" placeholder="请输入图书名称" name="bookname"></div><!-- 作者 --><div class="input-group mb-3"><div class="input-group-prepend"><span class="input-group-text">作者</span></div><input type="text" class="form-control" placeholder="请输入作者名字" name="author"></div><!-- 出版社 --><div class="input-group mb-3"><div class="input-group-prepend"><span class="input-group-text">出版社</span></div><input type="text" class="form-control" placeholder="请输入出版社名称" name="publisher"></div><!-- 添加按钮 --><button class="btn btn-dark" type="submit">添加</button></form></div></div></div></div><!-- 引入 lib 目录下的 jQuery 和 axios --><script src="./lib/jquery-v3.6.0.js"></script><script src="./lib/axios.js"></script><script>$(function() {console.log('ok')})// 渲染页面 Sfunction initBookList() {// 获取图书列表axios.get('http://www.liulongbin.top:3006/api/getbooks').then(({data: res}) => {console.log(res.data);// 渲染数据// 循环数组// 定义保存渲染结果数组let arr = []for (let i = 0; i < res.data.length; i++) {let item = res.data[i]// 准备好的模板// 把每一个循环项中的数据填充到模板// 将结果保存arr.push(`<tr><th scope="row">${item.id}</th><td>${item.bookname}</td><td>${item.author}</td><td>${item.publisher}</td><td><button type="button" class="btn btn-link btn-sm" data-id="${item.id}">删除</button></td></tr>`)}// 等循环完毕后，将所有结果一口气渲染导表格中let tbody = document.querySelector('tbody')tbody.innerHTML = arr.join('')})}initBookList()// 渲染页面 E// 添加图书 Slet form = document.querySelector('form')form.addEventListener('submit', function(e) {// 阻止form跳转默认行为e.preventDefault()// 发送给后台axios.post('http://www.liulongbin.top:3006/api/addbook', $('#addForm').serialize()).then(({data}) => {if (data.code === 201) {// 成功// 重新渲染initBookList()// 清空// 调用form DOM对象的reset方法就可以清空表单内的所有输入form.reset()}// 不管成功还是失败提示用户console.log(data.msg);})})// 添加图书 E// 删除图书 Stbody.addEventListener('click',function(e){// console.log(e.target);axios({methods:'POST',url:'http://www.liulongbin.top:3009/api/delbook',params:{id:e.target.dataset.id}}).then((res)=>{// console.log(res);bookIntList()})})// 删除图书 E</script></body></html>

前端图书管理小案例相关推荐

JDBC实现图书管理小案例
文章目录项目文件结构项目运行效果项目详细代码项目文件下载相关案例案例一案例二案例三案例四案例五案例六案例七案例八项目文件结构项目运行效果项目详细代码 JDBCUtils ...
（附源码）Node.js图书管理小程序的开发毕业设计 250858
Node.js图书管理小程序的开发摘要大数据时代下,数据呈爆炸式地增长.为了迎合信息化时代的潮流和信息化安全的要求,利用互联网服务于其他行业,促进生产,已经是成为一种势不可挡的趋势.在图书馆管理 ...
oracle图书管理项目案例,C#+oracle做的图书管理系统
[实例简介] 学生时代用C#+Oracle做的管理系统,希望对学生有用 [实例截图] [核心代码] 图书管理系统 └── 图书管理系统 ├── 123课程设计报告.doc ├── oracle课程设计 ...
Linux:文件权限管理小案例1：警察和土匪游戏
第一步,第二步:创建组,创建用户操作如下: 注:因为已经存在jack,所以使用userdel删除jack. 注:在此处创建jack用户时要定义下密码,使用passwd 第三步:jack创建一个文件,自 ...
Java实现图书管理小练习(赌包辣条看完绝对会~)
Linux：文件权限管理小案例2：西游记师徒四人叛变记
第一步,第二步,第三步如下: 创建组,新建用户,修改密码命令指令分别是groupadd xx useradd xx passwd,不再赘述. 第四步:wk,bj放入yg. ts,ss放入sx,操作如下 ...
JavaSE小项目练习——图书管理小练习（超详细）
目录一.界面显示 1.管理员菜单操作 2.用户菜单操作二. 核心思想三. 具体的实现方法 1.Book包下面的书类和书架类 2.user包下面的用户类 3.Main方法,程序的入口 4.Oper ...
前端实战小案例--canvas实战之FlappyBird小游戏
前端实战小案例--canvas实战之FlappyBird小游戏想练习更多前端案例,请进个人主页,点击前端实战案例->传送门觉得不错的记得点个赞?支持一下我0.0!谢谢了! 不积跬步无以至千里 ...
vue案例-图书管理
1.学习vue时做的一个小案例,本身案例很简单,经过优化又加些比较常用的功能,比如在添加图书前,先判断编号是否存在,并提示给用户,并且编号文本框只能输入数字等等优化. 2.使用到数组数据,方法,监视, ...

前端图书管理小案例

主要实现功能如下：

① 请求并渲染图书列表的数据

② 添加图书

③ 删除图书

前端图书管理小案例相关推荐

最新文章

热门文章

前端 图书管理 小案例

主要实现功能如下：

① 请求并渲染图书列表的数据

② 添加图书

③ 删除图书

前端 图书管理 小案例相关推荐

最新文章

热门文章

前端图书管理小案例

前端图书管理小案例相关推荐