今週はログインとページの追加・削除・修正・確認をメインに行い、ページ作成を通して初めて学んだajaxやsassの理解が深まりました。
次に、ページ内で出てきた問題点をまとめていきます。
文字列の連結とパラメータの受け渡し
エラーの理由:受信パラメータが純粋な数値ではない場合、パラメータは処理されなければブラウザによって変数に解析されます。その後、未定義と報告されます。
解決:
注:パラメータの受け渡しは、厳密に仮パラメータに対応します。仮パラメータにスペースが含まれている場合は、パラメータを渡すときにスペースを追加する必要があります。そうしないと、パラメータの受け渡しは成功しません。
変更された機能の実装
機能を修正する際、細かい部分があったためかなり時間がかかりました。
//使用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值跟着换
}
}
ここで紹介したのはページ作成時の課題のほんの一部ですが、課題を見つけて解決することは学習において不可欠です。