layui分页功能实现、管理员模块

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})})
});