图书管理
目标
通过ajax连接后台，进行后台图书数据的增删，然后将图书数据显示到页面上。
渲染UI结构
所需要到的库
- 用到的css库 bootstrap.css
- 用到的javascript库jquery.js
- 用到的vscode 插件 Bootstrap 3 Snippets
别忘了导入相关库，使用bootstrap库创建ui界面。
<body style="padding: 50px;"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">添加新图书</h3> </div> <div class="panel-body form-inline"> <div class="input-group"> <div class="input-group-addon">书名</div> <input type="text" class="form-control" id="iptBookname" placeholder="请输入书名"> </div> <div class="input-group"> <div class="input-group-addon">作者</div> <input type="text" class="form-control" id="iptAuthor" placeholder="请输入书名"> </div> <div class="input-group"> <div class="input-group-addon">出版社</div> <input type="text" class="form-control" id="iptPublisher" placeholder="请输入书名"> </div> <button id="btnAdd" class="btn btn-primary">添加</button> </div> </div> <table class="table table-bordered table-hover"> <thead> <tr> <th>id</th> <th>书名</th> <th>作者</th> <th>出版社</th> </tr> </thead> <tbody> <tr> <td></td> </tr> </tbody> </table> </body>
编辑
获取原始图书数据
文档
请求的根路径
图书列表
- 接口URL： /api/getbooks
- 调用方式： GET
- 参数格式：
| 参数名称 | 参数类型 | 是否必选 | 参数说明 |
| id | Number | 否 | 图书Id |
| bookname | String | 否 | 图书名称 |
| author | String | 否 | 作者 |
| publisher | String | 否 | 出版社 |
- 响应格式：
| 数据名称 | 数据类型 | 说明 |
| status | Number | 200 成功；500 失败； |
| msg | String | 对 status 字段的详细说明 |
| data | Array | 图书列表 |
| +id | Number | 图书Id |
| +bookname | String | 图书名称 |
| +author | String | 作者 |
| +publisher | String | 出版社 |
代码
获取接口内的图书数据。
function a() { $.get('http://www.liulongbin.top:3006/api/getbooks', function (res) { if (res.status !== 200) { return console.log(获取数据失败); } console.log(res); }) } a()
编辑
原始数据的添加
将获取到的初始数据全部添加到表格中。
let rows = []; $.each(res.data, function (i, item) { rows.push(`<tr><td>${item.id} </td><td> ${item.bookname}</td><td> ${item.author}</td><td>${item.publisher} </td><td><a href='javascript:;' class='del'>删除</a></td></tr>`) }) $('#tb').empty().append(rows) })
编辑
删除图书功能
文档
删除图书
- 接口URL： /api/delbook
- 调用方式： GET
- 参数格式：
| 参数名称 | 参数类型 | 是否必选 | 参数说明 |
| id | Number | 是 | 图书Id |
- 响应格式：
| 数据名称 | 数据类型 | 说明 |
| status | Number | 200 删除成功；500 未指定要删除的图书Id；501 执行Sql报错；502 要删除的图书不存在； |
| msg | String | 对 status 字段的详细说明 |
代码
需要在 a标签里添加一个data-id自定义属性，
删除后台服务器中的图书数据，并重新调用获取数据进行显示。
data-id=${item.id}
$('tbody').on('click', '.del', function () { let id = $(this).data('id'); console.log(id); $.get('http://www.liulongbin.top:3006/api/delbook', { id: id }, function (res) { console.log(res); if (res.status !== 200) { return alert('删除失败'); } a() }) })
添加图书功能
文档
添加图书
- 接口URL： /api/addbook
- 调用方式： POST
- 参数格式：
| 参数名称 | 参数类型 | 是否必选 | 参数说明 |
| bookname | String | 是 | 图书名称 |
| author | String | 是 | 作者 |
| publisher | String | 是 | 出版社 |
- 响应格式：
| 数据名称 | 数据类型 | 说明 |
| status | Number | 201 添加成功；500 添加失败； |
| msg | String | 对 status 字段的详细说明 |
代码
添加后台服务器中的图书数据，并重新调用获取数据进行显示。
$('#btnAdd').on('click', function () { //获取填写内容 不能为空 let bookname = $('#iptBookname').val().trim(); let author = $('#iptAuthor').val().trim(); let publisher = $('#iptPublisher').val().trim(); if (bookname.length <= 0 || author.length <= 0 || publisher.length <= 0) { return alert('请填写完整图书信息') } $.ajax( { type: 'post', url: 'http://www.liulongbin.top:3006/api/addbook', data: { bookname: bookname, author: author, publisher: publisher }, success: function (res) { if (res.status !== 201) { return alert('添加失败'); } a() $('#iptBookname').val(''); $('#iptAuthor').val(''); $('#iptPublisher').val(''); } } ) a() })
编辑
