简单商品管理器实现

下列代码实现了简单商品管理器,商品的添加,移动,删除,替换等基本功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* ! 12列栅格布局组件 */
    .row {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 0.5em;
    }
    .row > * {
        background-color: lightcyan;
        border: 1px solid #000;
        box-sizing: border-box;
        margin: 0.5em 0;
    }
    .col-md-1 {
        grid-column: span 1;
    }
    .col-md-2 {
        grid-column: span 2;
    }
    .col-md-3 {
        grid-column: span 3;
    }
    .col-md-4 {
        grid-column: span 4;
    }
    .col-md-5 {
        grid-column: span 5;
    }
        .col-md-6 {
        grid-column: span 6;
    }
    .col-md-7 {
         grid-column: span 7;
    }
    .col-md-8 {
        grid-column: span 8;
    }
    .col-md-9 {
        grid-column: span 9;
    }
    .col-md-10 {
        grid-column: span 10;
    }
    .col-md-11 {
         grid-column: span 11;
    }
    .col-md-12 {
        grid-column: span 12;
    }
    .header {
        background-color: skyblue;
        height: 3em;
        display: flex;
        align-items: center;
    }
    img{
        width: 5em;
        height: 5em;
    }
    .addcommodity{
        background-color: skyblue;
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 200px;
        left: 600px;
        border: 1px solid #000;
        gap: 0.5em;
    }
    .repcommodity{
        background-color: skyblue;
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 200px;
        left: 600px;
        border: 1px solid #000;
        gap: 0.5em;
    }
    h1{
        align-self: center;
    }
    button{
        height: 3em;
    }
    .show {
        display: block;
    }
    .hide {
        display: none;
    }
</style>
<body>
    <div class="commodity header">
            <button onclick="addcommodity2()">增加商品</button>
    </div>
    <div class="row container">
    </div>
    <div class="addcommodity hide" >
        <h1>添加商品</h1>
        <div class="" style="display: flex;">
            <label for="comname">商品名称</label>
            <input type="text" name="comname" id="comname" class="comname" placeholder="请输入商品名称">
        </div>
        <div class="" style="display: flex;">
            <label for="comnimg">图标路径</label>
            <input type="text" name="comimg" id="comname" class="comimg" placeholder="请输入商品图标路径">
        </div>
        <div class="add" style="align-self: center;">
            <button onclick="addcom(this.parentNode.parentNode)">添加</button>
            <button onclick="cancle(this.parentNode.parentNode)">取消</button>
        </div>
    </div>
    <div class="repcommodity hide" >
        <h1>替换商品</h1>
        <div class="" style="display: flex;">
            <label for="comname2">商品名称</label>
            <input type="text" name="comname2" id="comname2" class="comname2" placeholder="请输入商品名称">
        </div>
        <div class="" style="display: flex;">
            <label for="comnimg2">图标路径</label>
            <input type="text" name="comimg2" id="comname2" class="comimg2" placeholder="请输入商品图标路径">
        </div>
        <div class="rep" style="align-self: center;">
            <button onclick="repcom(this.parentNode.parentNode)">添加</button>
            <button onclick="cancle(this.parentNode.parentNode)">取消</button>
        </div>
    </div>
    <script>
        let nowreplace
        function repcom(ele)
        {
            let comname=document.querySelector(".comname2");
                let comimg=document.querySelector(".comimg2");
                console.log(comname.value);
                console.log(comimg.value);
                if (comname.value.length==0)
                {
                    alert("商品名称不能为空");
                    return false;
                }
                if (comimg.value.value==0)
                {
                    alert("商品图标不能为空");
                    return false;
                }
                let result=`
            <div>
                <img src=${comimg.value} />
                <div> 
                    <button onclick="del(this.parentNode.parentNode)">删除</button>
                    <button onclick="replacecom(this.parentNode.parentNode)">替换</button>
                    <button onclick="next(this.parentNode.parentNode)">向后</button>
                    <button onclick="prev(this.parentNode.parentNode)">向前</button>
                </div>
            </div>
            `
            nowreplace.insertAdjacentHTML("beforebegin",result);
            nowreplace.remove();
            let addcom=document.querySelector(".repcommodity");
            addcom.classList.remove("show");
            addcom.classList.add("hide");
        }
        function replacecom(ele)
        {
            nowreplace=ele;
            console.log("执行函数");
            let addcom=document.querySelector(".repcommodity");
            console.log(addcom);
            addcom.classList.remove("hide");
            addcom.classList.add("show");
        }
        function cancle(ele){
            ele.classList.remove("show");
            ele.classList.add("hide");
        }
        function addcom(ele){
                let comname=document.querySelector(".comname");
                let comimg=document.querySelector(".comimg");
                console.log(comname.value);
                console.log(comimg.value);
                if (comname.value.length==0)
                {
                    alert("商品名称不能为空");
                    return false;
                }
                if (comimg.value.value==0)
                {
                    alert("商品图标不能为空");
                    return false;
                }
                let result=`
            <div>
                <img src=${comimg.value} />
                <div> 
                    <button onclick="del(this.parentNode.parentNode)">删除</button>
                    <button onclick="replacecom(this.parentNode.parentNode)">替换</button>
                    <button onclick="next(this.parentNode.parentNode)">向后</button>
                    <button onclick="prev(this.parentNode.parentNode)">向前</button>
                </div>
            </div>
            `
            let container=document.querySelector(".container");
            container.insertAdjacentHTML("beforeend",result);
            let addcom=document.querySelector(".addcommodity");
            addcom.classList.remove("show");
            addcom.classList.add("hide");
        }
        function addcommodity2(){
            console.log("执行函数");
            let addcom=document.querySelector(".addcommodity");
            console.log(addcom);
            addcom.classList.remove("hide");
            addcom.classList.add("show");
        }
        const mycommodity=[
        "commodity/commodity1.jpeg",
            "commodity/commodity2.jpeg",
            "commodity/commodity3.jpeg",
            "commodity/commodity4.jpeg",
            "commodity/commodity5.jpeg",
            "commodity/commodity6.jpeg",
            "commodity/commodity7.jpeg",
            "commodity/commodity8.jpeg",
            "commodity/commodity9.jpeg",
            "commodity/commodity10.jpeg",
        ];
        let container=document.querySelector(".container");
        htmlstr=mycommodity.reduce((acc,imgs)=>{
            let result=`
            <div>
                <img src=${imgs} />
                <div> 
                    <button onclick="del(this.parentNode.parentNode)">删除</button>
                    <button onclick="replacecom(this.parentNode.parentNode)">替换</button>
                    <button onclick="next(this.parentNode.parentNode)">向后</button>
                    <button onclick="prev(this.parentNode.parentNode)">向前</button>
                </div>
            </div>
            `
            return acc+result;
        },"");
        console.log(htmlstr);
        container.insertAdjacentHTML("afterBegin",htmlstr);
        function addcommodity()
        {
        }
        function del(ele){
            return confirm("是否删除") ? ele.remove():false;
        }
        function next(ele)
        {
            let nextele=ele.nextElementSibling;
            if (nextele==null)
            {
                alert("已经是最后一张了");
                return false 
            }
            nextele.after(ele);
        }
        function prev(ele)
        {
            let prevnode=ele.previousElementSibling;
            if (prevnode==null)
            {
                alert("已经是第一张了");
                return false;
            }
            prevnode.before(ele);
        }
    </script>
</body>
</html>

node包的删除与安装

npm使用npc install packname来安装指定包,使用参数--save或-S指定改包为生产依赖,使用参数--save-dev或-D来指定该包为开发依赖
包会自动下载到node_modules目录中,如果目录不存在会自动创建
并会创建或更新package-lock.json文件,锁定当前版本
当再次安装时,会直接安装package-lock.json中的指定的版本
npm使用 npm uninstall package 或 npm uni package来卸载已经安装的包

node包的更新

npc更新包主要有以下步骤

1.使用npm outdated packname命令来查看是否有可更新的包
2.使用npm i -g npm-check-updates来安装更新包需要使用的插件
3.使用npm list -g来查看包是否更新成功
4.使用npm-check-updates查看用更新插件来检查可更新的包的列表
5.使用ncu -u packname来更新最新的包在packjson中的版本号
6.最后使用npm install来安装最新的包

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

浅谈HTML开发基础

2021-12-22 17:30:06