简单商品管理器实现

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

<!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来安装最新的包

Correcting teacher：

PHPz

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

浅谈HTML开发基础

2021-12-22 17:30:06