3.28layui添加商品功能和显示所有商品功能

1，添加商品功能

form表单添加商品名，价格，库存，选择店铺，选择分类，选择图片，上架按钮，商品介绍文本框，分别设置name值为name、price、number、shops、classify、putaway、introduce。

1.1选择图片功能

1，css样式设置

需要在选择图片那img图片外边加label标签，使得label标签的for属性和input的id属性值一致，这样点击图片时，才能触发input标签的file属性。然后把input标签隐藏掉可以只显示加号图片。

<div class="layui-form-item">
            <label class="layui-form-label">选择图片</label>
            <div class="layui-input-block" id="imgBox">
                <input type="file" title="商品展示图" id="goodsImg" multiple accept="image/*">
                <label for="goodsImg" id="imgLabel">
                    <img src="../add.png" alt="">
                </label>
            </div>

  #imgBox input{
            display: none;
        }

• multiple：设置选中多张图片，没有此属性只能选中一张。

• accept：设置接受上传的文件类型。

2，设置图片的点击事件

$("#goodsImg").change((e)=>{
                console.log(e.target.files)
                var files = Array.from(e.target.files)
                // 把图片动态展示出来
                for(var i = 0; i < files.length; i ++){
                    // 记录图片文件
                    imgs.push(files[i])
                    // 创建新的img, 添加到最后
                    $("#imgBox").append(`<img src="${URL.createObjectURL(files[i])}" alt="">`) 
                    // 限制最多选择6张图
                    if($("#imgBox>img").length >= 6){
                        layer.msg("最多选择6张图哦!")
                        // 隐藏添加的label
                        $("#imgLabel").hide()
                        // 结束循环, 不再添加添加
                        break;
                    }
                }
                // 图片添加完成后,把babel移动到最后
                $("#imgLabel").appendTo("#imgBox")  
            }) 

• URL.createObjectURL(files[i])

• $("#imgLabel").hide()：隐藏该标签

3，监听form表单提交，用jquery的ajax方法提交form表单的数据和图片

用ajax请求方式必须先把需要提交的数据和图片放在formData对象中，然后发送给服务器，服务器相应的接口接受数据和图片并存入到商品表中。

 form.on('submit(formDemo)', function(data) {
                // layer.msg(JSON.stringify(data.field));
                console.log(1, imgs, data.field)
                    // 保证上架putaway这个字段存在
                if (!data.field.putaway) data.field.putaway = "off"
                console.log(2, data.field)
​
                // 把表单中的数据和图片一起加入到formData对象中提交给服务器
                var formData = new FormData()
                    // 加入商品图
                imgs.forEach(img => {
                        formData.append("goodsImg", img)
                    })
                    // 加入表单数据
                for (const key in data.field) {
                    formData.append(key, data.field[key])
                }
​
                console.log("formData", formData) //打印看不到里边的数据 
​
                // 发起请求
                $.ajax({
                    url: "/addGoods",
                    type: "post",
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(data) {
                        layer.msg(data.msg)
                            // 重置表单
                            // $("#reset").click()  // 绑定点击事件
                        $("#reset")[0].click() // 触发点击事件
                            // 重置图片
                        $("#imgBox>img").remove();
                        $("#imgLabel").show()
                        imgs = []
                    }
                })
                return false;
            });

• $("#imgLabel").show()：显示该标签

4，服务器增加商品的接口

// 添加商品,array(key)表示通过key存储多个文件
app.post("/addGoods", goodsImgsave.array("goodsImg"), function(req, res) {
    // 商品上传时，表单数据在req.body中，文件信息在req.files中
    console.log("商品图上传完成", req.body, req.files);
    // 把商品图文件信息转化为图片名列表，存入数据库,map对象结构转换为数组
    req.body.imgs = req.files.map(function(item) {
            return item.filename
        })
        // 由于数据库定义imgs字段时，类型是字符串类型，所以需要把数组转码为字符串
    req.body.imgs = JSON.stringify(req.body.imgs)
    console.log(req.body);
    // 调用数据库存储
    MyDBAction(`insert into goods (name,price,number,shopName,className,putaway,introduce,imgs) values ("${req.body.name}","${req.body.price}",${req.body.number},"${req.body.shops}","${req.body.classify}","${req.body.putaway}","${req.body.introduce}",'${req.body.imgs}')`)
    res.json({ code: 1, msg: "商品添加完成" })
})

2，显示所有商品功能

 <style>
        td .layui-table-cell {
            height: 60px;
            line-height: 60px;
        }
        
        img {
            width: 60px;
            height: 60px;
        }
    </style>

<body>
    <table id="demo" lay-filter="test"></table>
    <script src="../layui/layui.js"></script>
    <script>
        layui.use(["table", "layer", "jquery"], function() {
            var table = layui.table;
            var layer = layui.layer;
            var $ = layui.jquery;
​
            // 动态创建表格
            table.render({
                elem: "#demo",
                url: "/goodList",
                cols: [
                    [{
                        title: "编号",
                        type: "numbers",
                        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: "#mySwitch"
                    }]
                ]
            })
        })
    </script>
    <!-- 商品图展示的模板 -->
    <script type="text/html" id="myImgs">
        {{# layui.each(JSON.parse(d.imgs), function(i, item){ }}
        <img src="../GoodsImgs/{{item}}" alt=""> {{# }); }}
    </script>
    <!-- 上架开关的模板 -->
    <script type="text/html" id="mySwitch">
        <!-- 使用三目运算在标签内部判断是否上架,以动态设置input的选中状态 -->
        <input type="checkbox" name="switch" {{d.putaway=="on" ? "checked" : ""}} lay-skin="switch" lay-text="ON|OFF">
    </script>
</body>