search

博客列表 >javascript简单商品管理器实现,node包的删除,安装与更新

javascript简单商品管理器实现,node包的删除,安装与更新

moon
moon原创
2022年01月16日 05:40:11444浏览

简单商品管理器实现

  • 下列代码实现了简单商品管理器,商品的添加,移动,删除,替换等基本功能
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <style>
  10.     /* ! 12列栅格布局组件 */
  11.     .row {
  12.         display: grid;
  13.         grid-template-columns: repeat(12, 1fr);
  14.         gap: 0.5em;
  15.     }
  16.     .row > * {
  17.         background-color: lightcyan;
  18.         border: 1px solid #000;
  19.         box-sizing: border-box;
  20.         margin: 0.5em 0;
  21.     }
  22.     .col-md-1 {
  23.         grid-column: span 1;
  24.     }
  25.     .col-md-2 {
  26.         grid-column: span 2;
  27.     }
  28.     .col-md-3 {
  29.         grid-column: span 3;
  30.     }
  31.     .col-md-4 {
  32.         grid-column: span 4;
  33.     }
  34.     .col-md-5 {
  35.         grid-column: span 5;
  36.     }
  37.         .col-md-6 {
  38.         grid-column: span 6;
  39.     }
  40.     .col-md-7 {
  41.          grid-column: span 7;
  42.     }
  43.     .col-md-8 {
  44.         grid-column: span 8;
  45.     }
  46.     .col-md-9 {
  47.         grid-column: span 9;
  48.     }
  49.     .col-md-10 {
  50.         grid-column: span 10;
  51.     }
  52.     .col-md-11 {
  53.          grid-column: span 11;
  54.     }
  55.     .col-md-12 {
  56.         grid-column: span 12;
  57.     }
  59.     .header {
  60.         background-color: skyblue;
  61.         height: 3em;
  62.         display: flex;
  63.         align-items: center;
  66.     }
  68.     img{
  69.         width: 5em;
  70.         height: 5em;
  71.     }
  72.     .addcommodity{
  73.         background-color: skyblue;
  74.         display: flex;
  75.         flex-direction: column;
  76.         position: fixed;
  77.         top: 200px;
  78.         left: 600px;
  79.         border: 1px solid #000;
  80.         gap: 0.5em;
  81.     }
  82.     .repcommodity{
  83.         background-color: skyblue;
  84.         display: flex;
  85.         flex-direction: column;
  86.         position: fixed;
  87.         top: 200px;
  88.         left: 600px;
  89.         border: 1px solid #000;
  90.         gap: 0.5em;
  91.     }
  93.     h1{
  94.         align-self: center;
  95.     }
  96.     button{
  97.         height: 3em;
  98.     }
  100.     .show {
  101.         display: block;
  102.     }
  104.     .hide {
  105.         display: none;
  106.     }
  107. </style>
  109. <body>
  110.     <div class="commodity header">
  112.             <button onclick="addcommodity2()">增加商品</button>
  115.     </div>
  116.     <div class="row container">
  118.     </div>
  120.     <div class="addcommodity hide" >
  121.         <h1>添加商品</h1>
  122.         <div class="" style="display: flex;">
  123.             <label for="comname">商品名称</label>
  124.             <input type="text" name="comname" id="comname" class="comname" placeholder="请输入商品名称">
  126.         </div>
  127.         <div class="" style="display: flex;">
  128.             <label for="comnimg">图标路径</label>
  129.             <input type="text" name="comimg" id="comname" class="comimg" placeholder="请输入商品图标路径">
  132.         </div>
  133.         <div class="add" style="align-self: center;">
  134.             <button onclick="addcom(this.parentNode.parentNode)">添加</button>
  135.             <button onclick="cancle(this.parentNode.parentNode)">取消</button>
  136.         </div>
  138.     </div>
  140.     <div class="repcommodity hide" >
  141.         <h1>替换商品</h1>
  142.         <div class="" style="display: flex;">
  143.             <label for="comname2">商品名称</label>
  144.             <input type="text" name="comname2" id="comname2" class="comname2" placeholder="请输入商品名称">
  146.         </div>
  147.         <div class="" style="display: flex;">
  148.             <label for="comnimg2">图标路径</label>
  149.             <input type="text" name="comimg2" id="comname2" class="comimg2" placeholder="请输入商品图标路径">
  152.         </div>
  153.         <div class="rep" style="align-self: center;">
  154.             <button onclick="repcom(this.parentNode.parentNode)">添加</button>
  155.             <button onclick="cancle(this.parentNode.parentNode)">取消</button>
  156.         </div>
  158.     </div>
  162.     <script>
  163.         let nowreplace
  164.         function repcom(ele)
  165.         {
  166.             let comname=document.querySelector(".comname2");
  167.                 let comimg=document.querySelector(".comimg2");
  170.                 console.log(comname.value);
  171.                 console.log(comimg.value);
  173.                 if (comname.value.length==0)
  174.                 {
  175.                     alert("商品名称不能为空");
  176.                     return false;
  177.                 }
  178.                 if (comimg.value.value==0)
  179.                 {
  180.                     alert("商品图标不能为空");
  181.                     return false;
  182.                 }
  183.                 let result=`
  184.             <div>
  185.                 <img src=${comimg.value} />
  186.                 <div> 
  187.                     <button onclick="del(this.parentNode.parentNode)">删除</button>
  188.                     <button onclick="replacecom(this.parentNode.parentNode)">替换</button>
  189.                     <button onclick="next(this.parentNode.parentNode)">向后</button>
  190.                     <button onclick="prev(this.parentNode.parentNode)">向前</button>
  191.                 </div>
  192.             </div>
  193.             `
  194.             nowreplace.insertAdjacentHTML("beforebegin",result);
  195.             nowreplace.remove();
  196.             let addcom=document.querySelector(".repcommodity");
  197.             addcom.classList.remove("show");
  198.             addcom.classList.add("hide");
  199.         }
  200.         function replacecom(ele)
  201.         {
  202.             nowreplace=ele;
  203.             console.log("执行函数");
  204.             let addcom=document.querySelector(".repcommodity");
  205.             console.log(addcom);
  206.             addcom.classList.remove("hide");
  207.             addcom.classList.add("show");
  208.         }
  209.         function cancle(ele){
  211.             ele.classList.remove("show");
  212.             ele.classList.add("hide");
  213.         }
  214.         function addcom(ele){
  215.                 let comname=document.querySelector(".comname");
  216.                 let comimg=document.querySelector(".comimg");
  219.                 console.log(comname.value);
  220.                 console.log(comimg.value);
  222.                 if (comname.value.length==0)
  223.                 {
  224.                     alert("商品名称不能为空");
  225.                     return false;
  226.                 }
  227.                 if (comimg.value.value==0)
  228.                 {
  229.                     alert("商品图标不能为空");
  230.                     return false;
  231.                 }
  232.                 let result=`
  233.             <div>
  234.                 <img src=${comimg.value} />
  235.                 <div> 
  236.                     <button onclick="del(this.parentNode.parentNode)">删除</button>
  237.                     <button onclick="replacecom(this.parentNode.parentNode)">替换</button>
  238.                     <button onclick="next(this.parentNode.parentNode)">向后</button>
  239.                     <button onclick="prev(this.parentNode.parentNode)">向前</button>
  240.                 </div>
  241.             </div>
  242.             `
  243.             let container=document.querySelector(".container");
  244.             container.insertAdjacentHTML("beforeend",result);
  246.             let addcom=document.querySelector(".addcommodity");
  247.             addcom.classList.remove("show");
  248.             addcom.classList.add("hide");
  249.         }
  251.         function addcommodity2(){
  252.             console.log("执行函数");
  253.             let addcom=document.querySelector(".addcommodity");
  254.             console.log(addcom);
  255.             addcom.classList.remove("hide");
  256.             addcom.classList.add("show");
  260.         }
  261.         const mycommodity=[
  262.         "commodity/commodity1.jpeg",
  263.             "commodity/commodity2.jpeg",
  264.             "commodity/commodity3.jpeg",
  265.             "commodity/commodity4.jpeg",
  266.             "commodity/commodity5.jpeg",
  267.             "commodity/commodity6.jpeg",
  268.             "commodity/commodity7.jpeg",
  269.             "commodity/commodity8.jpeg",
  270.             "commodity/commodity9.jpeg",
  271.             "commodity/commodity10.jpeg",
  272.         ];
  274.         let container=document.querySelector(".container");
  275.         htmlstr=mycommodity.reduce((acc,imgs)=>{
  276.             let result=`
  277.             <div>
  278.                 <img src=${imgs} />
  279.                 <div> 
  280.                     <button onclick="del(this.parentNode.parentNode)">删除</button>
  281.                     <button onclick="replacecom(this.parentNode.parentNode)">替换</button>
  282.                     <button onclick="next(this.parentNode.parentNode)">向后</button>
  283.                     <button onclick="prev(this.parentNode.parentNode)">向前</button>
  284.                 </div>
  285.             </div>
  286.             `
  287.             return acc+result;
  288.         },"");
  289.         console.log(htmlstr);
  290.         container.insertAdjacentHTML("afterBegin",htmlstr);
  292.         function addcommodity()
  293.         {
  295.         }
  296.         function del(ele){
  297.             return confirm("是否删除") ? ele.remove():false;
  298.         }
  300.         function next(ele)
  301.         {
  302.             let nextele=ele.nextElementSibling;
  303.             if (nextele==null)
  304.             {
  305.                 alert("已经是最后一张了");
  306.                 return false 
  307.             }
  308.             nextele.after(ele);
  310.         }
  311.         function prev(ele)
  312.         {
  313.             let prevnode=ele.previousElementSibling;
  314.             if (prevnode==null)
  315.             {
  316.                 alert("已经是第一张了");
  317.                 return false;
  318.             }
  320.             prevnode.before(ele);
  321.         }
  322.     </script>
  324. </body>
  325. </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来安装最新的包
上一条：node.js中的querystring模块,fs模块与vm虚拟机模块下一条：Node 模块
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多