1，layui table模块自带的分页功能实现
前提：js中引入table模块并加载，用table.render()渲染表格
1.1设置table.render()中的page字段为true，开启分页功能。设置limit字段值，后端数据的mysql查询条件也需要加上limit字段查询。但是不设置count数据总数，分页功能此时不能实现，只是有个css样式显示。
table.render({
elem: "#demo",
url: "/goodList",
cols: [
[{
title: "编号",
type: "numbers",
fixed: "left"
}, {
title: "id",
field: "id",
fixed: "left"
}, {
title: "商品名",
field: "name",
align: 'center',
width: 100,
fixed: 'left'
}, {
title: "价格",
field: "price",
align: 'center',
width: 90,
sort: true,
edit: "text"
}, {
title: "库存",
field: "number",
align: 'center',
width: 90,
sort: true,
edit: "text"
}, {
title: "店铺名",
field: "shopName",
align: 'center',
width: 150
}, {
title: "分类",
field: 'className',
align: 'center',
width: 80
}, {
title: "商品图",
align: 'center',
width: 300,
templet: "#myImgs"
}, {
title: "商品详情",
field: 'introduce',
align: 'center',
minWidth: 150
}, {
title: "编辑",
align: 'center',
width: 80,
fixed: "right",
toolbar: "#myEdit",
minWidth: 60
}, {
title: "删除",
align: 'center',
width: 80,
fixed: "right",
toolbar: "#myDel",
minWidth: 60
}, {
title: "上架",
align: 'center',
width: 80,
fixed: "right",
toolbar: "#mySwitch"
}]
],
page: true, //开启分页功能
limit: 5, //每一页的数据个数
limits: [1, 2, 3, 4, 5, 6],
})
-
limit：一页显示几条数据
-
limits：总的按几条查询
1.2 写后端商品检索的接口
table默认的请求方式为get，所以写get方式的接口。按照id值降序排列，并且依次查询5条数据，这些都是sql的查询条件。后端数据必须响应给浏览器code=0，count(数据总数)，表示操作成功，才能实现分页查询功能。
app.get("/search", function(req, res) {
var page = req.query.page || 1; //分页的页码值从1开始
var limit = req.query.limit || 10; //每一页数据个数
var nameKey = req.query.nameKey; //商品名，默认通配符*
var shopKey = req.query.shopKey;
var classKey = req.query.classKey;
// 分页查询，先条件查询，再按ID倒叙排列，最后分页查询
var count = 0;
MyDBAction(`select * from goods where name like "%${nameKey}%" and shopName like "%${shopKey}%" and className like "%${classKey}%" order by id DESC limit ${(page-1)*limit},${limit}`, function(data) {
MyDBAction(`select count(*) as count from goods where name like "%${nameKey}%" and shopName like "%${shopKey}%" and className like "%${classKey}%"`, function(data1) {
console.log(data1[count].count);
count = data1[count].count;
res.json({
code: 0,
data: data,
count: count
})
})
})
})
2，编辑当前管理员信息，提交头像，更改图片的src属性，更改登录用户名
2.1 设置好表单样式
<form class="layui-form layui-col-xs8 layui-col-sm6 layui-col-md4" lay-filter="binge"> <input type="text" name="id"> <div class="layui-form-item"> <label class="layui-form-label">头像</label> <div class="layui-input-block" id="imgBox"> <a href="javascript:;"><img src="" alt="" id="head"></a> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">用户名</label> <div class="layui-input-block"> <input type="text" name="name" required lay-verify="required" placeholder="请输入商品名称" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">密码</label> <div class="layui-input-block"> <input type="text" name="pas" required lay-verify="required" placeholder="请输入商品价格" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">年龄</label> <div class="layui-input-block"> <input type="number" name="age" required lay-verify="required" placeholder="请输入商品库存" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">性别</label> <div class="layui-input-block"> <input type="radio" name="sex" value="男" title="男"> <input type="radio" name="sex" value="女" title="女" checked> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="formDemo">修改</button> </div> </div> </form>
2.2 请求当前用户的信息，展示到表单中
连接数据库，根据会话存储的用户名传入到接口中，并返回该用户名的信息，显示到表单中
2.2.1 前端传入用户名参数
用get方式把会话存储的用户名传入服务器，并且获取服务器搜索的数据，给表单赋值显示到表单中，这其中就涉及到form模块表单赋值操作。
layui.use(['jquery', 'layer', 'form'], function() {
var $ = layui.jquery,
layer = layui.layer,
form = layui.form;
$.get("/MyAdmin", {
username: sessionStorage.getItem("name")
}, function(data) {
console.log(data.msg); //是个数组
var admin = data.msg[0];
// 表单的取值和赋值，需要用到form.val(filter,object),所以form表单必须要有lay-filter属性
form.val("binge", {
id: admin.id,
name: admin.username,
pas: admin.password,
age: admin.age,
sex: admin.sex
})
// 显示头像
$("#head").attr("src", `../HeadImg/${admin.username}.jpg`)
$("#head").error(function() {
$("#head").attr("src", `../HeadImg/head_default.jpg`)
});
})
$(`[name="id"]`).css("display", "none");
})
2.2.2 form表单赋值操作
把数据库的数据显示到表单中，利用表单赋值操作实现。前提：form表单有lay-filter属性值。
使用form.val(filter,object)实现表单的取值和赋值，object中的属性名跟form表单中的name所有值对应，name:value
该表单只能获取用户名、密码、年龄、性别，而id获取不到，需要在form表单中添加一个input标签来获取id值，并利用form.val动态显示到表单的输入框中。在监听表单提交的时候再隐藏掉该获取id的input输入框。
$.get("/MyAdmin", {
username: sessionStorage.getItem("name")
}, function(data) {
console.log(data.msg); //是个数组
var admin = data.msg[0];
// 表单的取值和赋值，需要用到form.val(filter,object),所以form表单必须要有lay-filter属性
form.val("binge", {
id: admin.id,
name: admin.username,
pas: admin.password,
age: admin.age,
sex: admin.sex
})
// 显示头像
$("#head").attr("src", `../HeadImg/${admin.username}.jpg`)
$("#head").error(function() {
$("#head").attr("src", `../HeadImg/head_default.jpg`)
});
})
显示当前用户名的头像：
-
给图片设置一个点击事件，触发导航栏的上传头像按钮的点击,实现管理员点击头像跳转到上传头像呢个html页面
<a οnclick="setHeadImg()" href="javascript:;"><img src="" alt="" id="head"></a>
<script>
// 触发导航栏的上传头像按钮的点击,实现管理员点击头像跳转到上传头像呢个html页面
function setHeadImg() {
window.parent.document.getElementById("uploadBth").click();
}
</script>
-
在请求中修改用户名之后，需要修改对应图片的重命名，如果有这个用户名命名的图片就重命名该用户名修改之后的用户名，如果没有就显示默认的图片
// 显示头像
$("#head").attr("src", `../HeadImg/${admin.username}.jpg`)
$("#head").error(function() {
$("#head").attr("src", `../HeadImg/head_default.jpg`)
});
2.2.3 监听表单提交
监听表单中的数据，然后把表单的数据提交到数据库中。
更新该用户名的用户信息的接口：
把表单中的数据全部传入服务器，其中包括用户名，先按照用户名查找该用户信息，然后再更新该用户的信息。
app.post("/editMyAdmin", function(req, res) {
// 读取修改前的用户名
MyDBAction(`select username from users where id=${req.body.id}`, function(data) {
var oldName = data[0].username;
MyDBAction(`update users set username="${req.body.name}",age=${req.body.age},sex="${req.body.sex}",password="${req.body.pas}" where id=${req.body.id}`)
// 判断用户名是否修改,如果用户名更新了，那么头像名也要对应更新
var userImgPath = "./public/HeadImg/" + oldName + ".jpg"; //用户头像路径，可能存在
if (oldName != req.body.name && fs.existsSync(userImgPath)) {
fs.rename(userImgPath, "./public/HeadImg/" + req.body.name + ".jpg", function(err) {
if (err) console.log(err.message);
})
}
})
// 修改数据库
res.json({ code: 1, msg: "操作成功" })
})
改变文件的名字，需要用到fs模块的rename方法
-
oldName：记录没修改之前的用户名
-
userImgPath：没修改之前的用户头像路径
-
修改头像之后，也要修改会话存储的用户名和cookie值，并且更新登录的用户名
2.2.4 请求接口
// 查询当前管理员
app.get("/MyAdmin", function(req, res) {
MyDBAction(`select * from users where username="${req.query.username}"`, function(data) {
res.json({
code: 1,
msg: data
})
})
});
845
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
