这周主要是做登录和增删改查的页面，通过做页面对最初学习的ajax，sass有了进一步的认识
接下来对页面中出现过的问题做一下汇总
字符串拼接传参
错误原因：如果传入的参数不是纯数字的字符，那么对参数不进行处理会被浏览器解析为变量。然后就会报not defined。
解决方案：
注意：传参是和形参严格对应，形参中有空格，传参也需要加空格，否则传参传不成功
修改功能的实现
在做修改功能时，因为一些小细节，做了挺长时间
//使用a标签，并绑定单击事件，点击的时候触发修改函数
"<a class='mod' href='javascript:void(0)' onclick=
'Modify(\"" + res[i].name + "\",
\"" + res[i].price + "\",
\"" + res[i].desc + "\",
\"" + res[i].typename + "\",
\"" + res[i].typeid + "\",
\"" + res[i]._id + "\")'
>修改</a>"
//注意传参时的传入形式，加\" "\ 避免解析不成功//修改菜单
var mod = document.querySelector(".mod")//获取a标签
var modData = document.querySelector(".modData")//获取修改弹窗
//获取HTML中表单的id
var name1 = document.querySelector("#name")
var price1 = document.querySelector("#price")
var desc1 = document.querySelector("#desc")
var typename1 = document.querySelector("#typename")
var typeid1 = document.querySelector("#typeid")
var _id1 = document.querySelector("#_id")
function Modify(name, price, desc, typename, typeid, _id) {
//点击修改时，传参并让修改弹窗显示
modData.style.display = "block";
// 两个名字一样,就可能认为是一个变量
//避免出现name.value=name的情况
//将菜品原本的信息传入
name1.value = name,
price1.value = price,
desc1.value = desc,
typename1.value = typename,
typeid1.value = typeid,
_id1.value = _id
}
//弹窗中的修改点击时，实现修改数据，并且弹窗消失
function confirmModBtn() {
$.ajax({
type: "post",
url: "http://118.195.129.130:3000/food/update",
data: {
name: name1.value,
price: price1.value,
desc: desc1.value,
typename: typename1.value,
typeid: typeid1.value,
_id: _id1.value,
},
success: function (data) {
getDataPage(1, 5)
console.log("修改成功")
},
error: function (err) {
console.log("操作失败！")
}
});
modData.style.display = "none";//弹窗消失
}//为取消按钮绑定一个使弹窗隐藏的函数
function cancelBtn() {
modData.style.display = "none";
} <!-- 页面中修改数据的弹窗 -->
<div class="modData">
菜名: <input type="text" placeholder="name" id="name" value=""><br>
价格: <input type="text" placeholder="price" id="price" value=""><br>
描述: <input type="text" placeholder="desc" id="desc" value=""><br>
分类: <input type="text" placeholder="typename" id="typename" value=""><br>
属性: <input type="text" placeholder="0:面,1:米,2:饮品,3:水果" id="typeid" value=""><br>
<input type="text" id="_id" value=""><br>
<div class="btn">
<button onclick="confirmModBtn()">修改</button>
<button id="cancel" onclick="cancelBtn()">取消</button>
</div>
</div> //修改弹窗的样式
.modData{
width: 400px;
height: 350px;
z-index: 9999999999;
background-color: white;
position: absolute;
/* 向右、向下移动父盒子的一半 （偏移量） */
left: 50%;
top: 50%;
/* translate若使用百分比，是相对于自身的比例的位移 */
transform: translate(-50%, -50%);
outline: none;
border-radius: 5px;
padding: 20px 50px;
display: none;
input {
border: none;
outline: none;
border-radius: 2px;
border: 1px solid rgb(148, 139, 139);
width: 300px;
height: 30px;
margin-top: 20px;
text-indent: 10px;
}
#_id{
display: none;
}
.btn {
width:320px;
height: 50px;
position: absolute;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 30px;
left: 90px;
button {
width: 100px;
height: 50px;
background-color: rgb(0, 117, 255);
border: none;
outline: none;
border-radius: 2px;
color: white;
cursor: pointer;
}
}
}
增删改查功能实现时，思路基本一样，特别注意获取，传参，函数调用的顺序等细节。
底部按钮
做的时候也花了较多精力
<!-- 表格底部的换页按钮 -->
<div class="pageBtn">
<span class="shuoMing">共<i id="sumpages">X</i>页 5条/页</span>
<div class="changePage">
<div class="twoBtn" id="leftBtn">
<img src="./img/left.png" alt="" id="leftStop">
</div>
<input type="button" class="page" value="1" id="inOne">
<div class="twoBtn" id="rightBtn">
<img src="./img/right.png" alt="" id="rightStop">
</div>
</div>
<div class="change-input">
到 <input type="text" value="1" id="in"> 页
<button onclick="goPage()">go</button>
</div>
</div>//查询菜品总数
var len;
//获取HTML中的sumpages
let sumpages = document.getElementById("sumpages");
function totalNum() {
$.ajax({
type: "get",
url: "http://118.195.129.130:3000/food/allpage",
dataparams: {
},
success: function (data) {
//len即页面中所有数据的个数
len = data.pages;
//向页面中显示 Math.ceil(len / 5)，除与5，向上取整，即为总页数
sumpages.innerHTML = Math.ceil(len / 5);
},
error: function (err) {
console.log("操作失败！")
}
});
}
//在这儿调用显示共多少页的函数，保证页面显示时，页数就能显示出来
totalNum()
//获取HTML中第X页和左右按钮中间按钮的表单，
//要使用表单中属性value
let input = document.getElementById('in')
let inputOne = document.getElementById('inOne')
document.getElementById("leftBtn").onclick = function () {
let num = Number(input.value)
num--
if (num < 1) {
//当页数为1时，鼠标光标显示禁用
leftBtn.style.cursor = "no-drop";
}
else {
getDataPage(num, 5)
input.value = num
inputOne.value = num
}
}
document.getElementById("rightBtn").onclick = function () {
//当页数为最大时，鼠标光标显示禁用
let num = Number(input.value)
num++
if (num > Math.ceil(len / 5)) {
rightBtn.style.cursor = "no-drop";
}
else {
getDataPage(num, 5)
input.value = num
inputOne.value = num//换页时，value值跟着换
}
}这里只罗列了做页面时的部分问题，发现问题解决问题是学习中必不可少的。