绪论
首先先说明一下，笔者是个前端菜鸟，本文只是用于平时的代码记录，大佬勿喷，当然要是有大佬能指点出文章的不足，我将不胜感激！
项目背景与问题
这次是跟着网课做的一个Ajax的一个图书管理系统的一个小案例。主要的内容就是：利用Ajax访问接口，然后将数据展示在系统中。其中主要碰到的问题有两个问题。
- 图书查阅系统 ：由于是跟着网课做的，然后那个老师想展示的就是基础性的的东西，对代码的复杂度考虑也不是很深，主要也是我闲的，就想着能不能给那个部分的代码稍微优化一下。具体的代码的话，我会在后面有对比
- 处理未创建节点的事件绑定问题 ：在图书管理系统中，因为会插入一段一段的数据，其中包括了一个删除标签，
问题的介绍与处理
问题一
- 问题来源 ：系统中具体书籍的查询分为四种方法：ID、 书名、作者、出版社。在查询书籍时，主要的流程是：首先判断有无筛选条件，如果有就根据所填写的筛选条件的内容进行判断，如果没有筛选内容就展示全部的书籍。这样就产生了一个问题，如果用户在输入时，输入了一个或者多个筛选条件，如果按照简单的if条件语句，当然可以直接筛选出来。但是，以本次的系统来说，筛选条件有4个，意味着如果我们用if筛选的话，可能性会有24种，那如果是六个或者更多的筛选条件呢，这个问题就很难处理了。
- 问题处理 ：在这个情况的处理时，首先先遍历出查询模块下所有的input输入框，再建立一个新的字典，将html文本中对应的 ID 以及输入框中的内容，以一个键值对的方式存储进字典中。以下是实现过程：
// 查询图书模块
const Search = document.querySelector("#btnSearch")
Search.addEventListener("click", function () {
const inpdataDict = {}
// 将数据存入列表
inpValue = document.querySelectorAll('input')
inpValue.forEach(function (item) {
if (item.value != "") {
inpdataDict[item.id] = item.value
}
});
apiGet(inpdataDict)
})
// 接口绑定
function apiGet(data) {
$.get(getUrl, data, function (res) {
if (res.status != 200) {
return alert("获取失败")
}
var rows = []
// 获取表格头属性
const tagThead = document.querySelector("#tb")
for (let i = 0; i < res.data.length; i++) {
rows.push(`<tr>
<td>${res.data[i].id}</td>
<td>${res.data[i].bookname}</td>
<td>${res.data[i].author}</td>
<td>${res.data[i].publisher}</td>
<td><a href="#">删除</a></td>
</tr>`)
}
res.data.length == 0 ? alert("未查询到相关书籍") : $('#tb').empty().append(rows)
})
}
其中的apiGet(data) 函数是我们提前封装好了的函数，为了在Ajax传参的时候更方便使用，就像我们上面的例子中，将inpdataDict字典直接传入，就可以不用每次都填写参数，同时也解决了我们不知道用户所输入的值是哪个的问题。
3. 字典的使用：由于笔者是个小菜鸡，同时也把这个博客当记事本用的，温故而知新，我就在这里再复习一下字典的最基础的使用。下面的内容的原文链接：https://blog.csdn.net/ganyingxie123456/article/details/78163154
var dic = {c:4, a:2, d:3, b:1}; // 定义一个字典
console.log("输出最初的字典元素: ");
for(var key in dic){
console.log("key: " + key + " ,value: " + dic[key]);
}
console.log("字典元素按key值排序: ");
var res = Object.keys(dic).sort();
for(var key in res){
console.log("key: " + res[key] + " ,value: " + dic[res[key]]);
}
console.log("字典元素按value值排序: ");
var res2 = Object.keys(dic).sort(function(a,b){ return dic[a]-dic[b]; });
for(var key in res2){
console.log("key: " + res2[key] + " ,value: " + dic[res2[key]]);
}
问题二
其实问题二是一个很基础的一个问题，具体问题也在上面提到了，在这里就不赘述了。但是居然我遇到这种问题还会去查之前的笔记！所以一定要记录下来！这里贴一个链接，方便下次再复习的时候能找到：
作者：ZFE
链接：https://juejin.cn/post/7005558885947965454
来源：稀土掘金
全部源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./bootstrap.css" />
<script src="../素材/lib/jquery.js"></script>
</head>
<body style="padding: 15px;">
<!-- 添加图书的Panel面板 -->
<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">id</div>
<input type="text" class="form-control" id="id" placeholder="请输入书名">
</div>
<div class="input-group">
<div class="input-group-addon">书名</div>
<input type="text" class="form-control" id="bookname" placeholder="请输入书名">
</div>
<div class="input-group">
<div class="input-group-addon">作者</div>
<input type="text" class="form-control" id="author" placeholder="请输入作者">
</div>
<div class="input-group">
<div class="input-group-addon">出版社</div>
<input type="text" class="form-control" id="publisher" placeholder="请输入出版社">
</div>
<button id="btnAdd" class="btn btn-primary">添加</button>
<button id="btnSearch" 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>
<th>操作</th>
</tr>
</thead>
<tbody id="tb">
</tbody>
</table>
<script>
// 接口开关
let apiFlag = 1
// 获取图书接口url
const getUrl = "http://www.liulongbin.top:3006/api/getbooks"
//增加图书接口url
const PostUrl = "http://www.liulongbin.top:3006/api/addbook"
// 查询图书模块
const Search = document.querySelector("#btnSearch")
Search.addEventListener("click", function () {
const inpdataDict = {}
// 将数据存入列表
inpValue = document.querySelectorAll('input')
inpValue.forEach(function (item) {
if (item.value != "") {
inpdataDict[item.id] = item.value
}
});
apiGet(inpdataDict)
})
// 删除图书模块
const tb = document.querySelector("#tb")
tb.addEventListener("click", function (e) {
if (e.target.tagName == "A") {
e.target.parentNode.parentNode.remove()
}
})
// 添加图书模块
const Add = document.querySelector("#btnAdd")
Add.addEventListener("click", function () {
const inpdataDict = {}
// 将数据存入列表
inpValue = document.querySelectorAll('input')
inpValue.forEach(function (item) {
if (item.value != "") {
inpdataDict[item.id] = item.value
}
})
if (Object.keys(inpdataDict).length != inpValue.length) {
return alert("请输入完整筛选条件")
}
apiPost(inpdataDict)
})
// 接口绑定
function apiGet(data) {
$.get(getUrl, data, function (res) {
if (res.status != 200) {
return alert("获取失败")
}
var rows = []
// 获取表格头属性
const tagThead = document.querySelector("#tb")
for (let i = 0; i < res.data.length; i++) {
rows.push(`<tr>
<td>${res.data[i].id}</td>
<td>${res.data[i].bookname}</td>
<td>${res.data[i].author}</td>
<td>${res.data[i].publisher}</td>
<td><a href="#">删除</a></td>
</tr>`)
}
res.data.length == 0 ? alert("未查询到相关书籍") : $('#tb').empty().append(rows)
})
}
function apiPost(data) {
$.post(PostUrl, data, function (res) {
console.log(res)
if (res.status != 201) {
return alert(res.msg)
}
var rows = []
// 获取表格头属性
const tagThead = document.querySelector("#tb")
rows.push(`<tr>
<td>${data["id"]}</td>
<td>${data["bookname"]}</td>
<td>${data["author"]}</td>
<td>${data["publisher"]}</td>
<td><a href="#">删除</a></td>
</tr>`)
console.log(data)
console.log(rows)
$('#tb').prepend(rows)
})
}
</script>
</body>
</html>
``
810
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
