search

博客列表 >js商品管理器案例、安装与删除node包、更新node包小结

js商品管理器案例、安装与删除node包、更新node包小结

cool442
cool442原创
2022年02月21日 19:54:18595浏览

1. 商品管理器

  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>商品管理器</title>
  8.     <link rel="stylesheet" href="defaul.css" />
  9.   </head>
  10.   <body>
  11.     <!-- 商品容器，使用js动态创建 -->
  12.     <div class="container"></div>
  13.     <!-- 调用商品数组 -->
  14.     <script src="goods.js"></script>
  15.     <script>
  16.       // 获取商品容器，为后面显示商品准备
  17.       const div = document.querySelector(".container");
  18.       // console.log(div);
  20.       // 加载时运行函数
  21.       window.onload = showGoods;
  22.       // 定义显示商品函数
  23.       function showGoods() {
  24.         // 遍历商品，逐个添加html标签，连接每个商品
  25.         // 用数组reduce方法，可以连接数组
  26.         // 连接html标签结果放在变量中
  27.         // 最后显示
  28.         let goodsHtml = "";
  29.         goodsArr.forEach((goods) => {
  30.           // 定义变量存放html字符串
  31.           goodsHtml += `
  32.             <div>
  33.               <img src="${goods.img}" />
  34.               <div>
  35.                 <button onclick="del(this.parentNode.parentNode)">删除</button>
  36.                 <button onclick="moveForward(this.parentNode.parentNode)">前移</button>
  37.                 <button onclick="moveBack(this.parentNode.parentNode)">后移</button>
  38.               </div>
  39.               <p>${goods.goodsName}</p>
  40.             </div>
  41.           `;
  42.           return goodsHtml;
  43.         });
  44.         // 用insertAdjacentHTML方法在商品容器开始标签后开始位置插入html字符串
  45.         div.insertAdjacentHTML("afterbegin", goodsHtml);
  46.       }
  48.       // 删除商品函数，传入参数：删除的元素
  49.       // this.parentNode.parentNode 当前按钮的父父级元素，即当前商品div
  50.       function del(ele) {
  51.         // 弹出对话框
  52.         return confirm("是否删除？") ? ele.remove() : false;
  53.       }
  55.       // 前移商品函数
  56.       function moveForward(ele) {
  57.         // 判断当前商品div前是否有兄弟商品div，没有就是到最前
  58.         // previousElementSibling  DOM属性，返回指定元素的前一个兄弟元素
  59.         const beforeDiv = ele.previousElementSibling;
  60.         if (beforeDiv === null) {
  61.           alert("已到最前位置！");
  62.           return false;
  63.         }
  64.         // 在前元素前插入当前元素，用before方法
  65.         beforeDiv.before(ele);
  66.       }
  68.       // 后移函数
  69.       function moveBack(ele) {
  70.         // 判断后一个商品div
  71.         const afterDiv = ele.nextElementSibling;
  72.         if (afterDiv === null) {
  73.           alert("已到最后位置！");
  74.           return false;
  75.         }
  76.         // 在下一个元素后插入当前元素
  77.         afterDiv.after(ele);
  78.       }
  79.     </script>
  80.   </body>
  81. </html>

css文件

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   border: none;
  5.   box-sizing: border-box;
  6. }
  7. html {
  8.   font-size: 10px;
  9. }
  10. body {
  11.   font-size: 1.6rem;
  12.   background-color: rgb(255, 255, 255);
  13. }
  14. .container {
  15.   display: flex;
  16.   /* 设置主轴方面：横向，换行 */
  17.   flex-flow: row wrap;
  18.   /* 平均对齐 */
  19.   place-content: space-evenly;
  20. }
  21. .container > div {
  22.   margin-bottom: 1.5rem;
  23.   padding: 1rem 1rem;
  24.   width: 20rem;
  25.   display: flex;
  26.   flex-flow: column nowrap;
  27.   border: none;
  28.   border-radius: 0.4rem;
  29. }
  30. .container > div:hover {
  31.   cursor: pointer;
  32.   border: 1px solid rgb(192, 192, 192);
  33.   box-shadow: 0 0 8px rgb(219, 219, 219);
  34. }
  35. .container > div button {
  36.   margin: 0.2rem 0;
  37.   padding: 0.2rem 0.5rem;
  38.   background-color: rgb(255, 255, 255);
  39.   border: 1px solid rgb(197, 197, 197);
  40. }
  41. .container > div button:hover {
  42.   color: white;
  43.   cursor: pointer;
  44.   background-color: lightseagreen;
  45.   border-color: lightseagreen;
  46. }

js文件，存放商品数组

  1. // 商品图片数组，存放图片链接
  2. const goodsArr = [
  3.   {
  4.     img: "https://img.alicdn.com/bao/uploaded/i1/1729128393/O1CN01X54gIz2Bs2rNqc5tf_!!0-item_pic.jpg_200x200q90.jpg_.webp",
  5.     goodsName: "心相印纸巾抽纸整箱大包家用实惠装卫生纸心心相印餐巾纸面巾纸抽",
  6.   },
  7.   {
  8.     img: "https://img.alicdn.com/bao/uploaded/i1/3704112085/O1CN01dPsHs31RGyT3PTgFk_!!3704112085.jpg_200x200q90.jpg_.webp",
  9.     goodsName: "懒人自热小火锅速食牛肉重庆便宜土豆粉自助麻辣烫网红酸辣螺蛳粉",
  10.   },
  11.   {
  12.     img: "https://img.alicdn.com/bao/uploaded/i3/3251539828/O1CN01laGcGv2MTHEOf3OIO_!!0-item_pic.jpg_200x200q90.jpg_.webp",
  13.     goodsName: "法式小碎花吊带连衣裙秋季新款2022年高级感初恋别致裙子两件套女",
  14.   },
  15.   {
  16.     img: "https://img.alicdn.com/bao/uploaded///gma.alicdn.com/bao/uploaded/i3/100813480/O1CN01O0y6Cv1bZt1HKbDs1_!!0-saturn_solar.jpg_200x200q90.jpg_.webp",
  17.     goodsName: "法式小碎花吊带连衣裙秋季新款2022年高级感初恋别致裙子两件套女",
  18.   },
  19.   {
  20.     img: "https://img.alicdn.com/bao/uploaded/i1/2281941483/O1CN010uCVUv1MpG3gL6m1A_!!2281941483.jpg_200x200q90.jpg_.webp",
  21.     goodsName: "设计师款岩板一体盆浴室柜现代简约卫生间洗",
  22.   },
  23.   {
  24.     img: "https://img.alicdn.com/bao/uploaded/i4/2201491213238/O1CN01qabYf51Zn3BCtiJbG_!!0-item_pic.jpg_200x200q90.jpg_.webp",
  25.     goodsName: "msho好用芋泥奶紫色可爱少女心顺发梳按摩梳气垫梳子气囊梳女便携",
  26.   },
  27.   {
  28.     img: "https://img.alicdn.com/bao/uploaded/i1/2074805607/O1CN01PhrwT31rI3SHQJuAm_!!0-item_pic.jpg_200x200q90.jpg_.webp",
  29.     goodsName: "秋篱慵懒风复古宽松加厚提花毛衣女港风chic古着感穿搭百搭外套",
  30.   },
  31.   {
  32.     img: "https://img.alicdn.com/bao/uploaded/i3/361670583/O1CN01hoZc3e1GB3dGnUjfi_!!361670583.jpg_200x200q90.jpg_.webp",
  33.     goodsName: "帽子男女春夏太阳帽防晒遮脸遮阳2021新款鸭舌帽韩版显脸小棒球帽",
  34.   },
  35.   {
  36.     img: "https://img.alicdn.com/bao/uploaded///gma.alicdn.com/bao/uploaded/i2/2204801904603/O1CN01kpiSBo1jsDeOndlta_!!2204801904603.jpg_200x200q90.jpg_.webp",
  37.     goodsName: "ins桌面收纳盒 护肤化妆品学生抽屉式梳妆台宿舍神器书桌上置物架",
  38.   },
  39.   {
  40.     img: "https://img.alicdn.com/bao/uploaded/i4/190522288/O1CN01LPkU5f1SlwtRPjJDg_!!190522288.jpg_200x200q90.jpg_.webp",
  41.     goodsName: "镀铝阴阳自立袋铝箔袋自封袋可站立食品干货",
  42.   },
  43.   {
  44.     img: "https://img.alicdn.com/bao/uploaded/i2/2208133542440/O1CN01rRyoaM1TtZ6zIzAcq_!!0-item_pic.jpg_200x200q90.jpg_.webp",
  45.     goodsName: "ins玻璃杯吸管牛奶早餐杯甜品杯可爱印花刻度杯子加盖勺女生礼物",
  46.   },
  47.   {
  48.     img: "https://img.alicdn.com/bao/uploaded/i1/2201457669027/O1CN019mqMwy2GYPsYVFKq2_!!2201457669027.jpg_200x200q90.jpg_.webp",
  49.     goodsName: "【U先试用】宜婴纸尿裤新生儿S超薄透气拉拉裤M婴儿干爽尿不湿",
  50.   },
  51.   {
  52.     img: "https://img.alicdn.com/bao/uploaded/i4/TB18cGBGXXXXXXNXVXXXXXXXXXX_!!0-item_pic.jpg_200x200q90.jpg_.webp",
  53.     goodsName: "十七不卖书丨ins韩国少女心手持心形樱桃镜便携随身镜补妆镜",
  54.   },
  55.   {
  56.     img: "https://img.alicdn.com/bao/uploaded///asearch.alicdn.com/bao/uploaded//i2/113073612/TB2ZU42c8smBKNjSZFsXXaXSVXa_!!113073612.jpg_200x200q90.jpg_.webp",
  57.     goodsName: "特卖~日本杂志款芬兰時尚單品白熊圖案托特包 单肩购物袋（染色）",
  58.   },
  59.   {
  60.     img: "https://img.alicdn.com/bao/uploaded/i3/2209428704265/O1CN01WjxJic1hNPw7bl6Fp_!!0-item_pic.jpg_200x200q90.jpg_.webp",
  61.     goodsName: "原味厚豆干无油零添加灞源豆腐干散装整箱代餐零食低素食卡脂饱腹",
  62.   },
  63. ];
  65. // 新上架的商品
  66. const newGoodsArr = [];

运行效果

Node.js 基础

1. 下载与安装

  1. 下载: https://nodejs.org/zh-cn/
  2. 参考镜像: http://nodejs.cn/

2. 安装与删除node包的流程以及常用指令

  • npm：node内置的包管理器，集成在node中
  • npm通过“package.json”配置文件管理当前项目依赖项

    常用指令：

    2.1 查询当前npm详细信息

    npm version

    2.2 生成package.json文件

  • 交互方式： npm init
  • 生成默认文件：npm init -y

    2.3 安装包

  • 安装时把包版本号写到parkage.json中

  • 包类型：
    — 生产依赖dependencies：发布时必须要有的。
    — 开发依赖devDependencies：有些包或模块在开发时用，发布后就不用了。比如辅助实时预览插件等，开发时方便查看，没有必要发布。

  • 安装包指令：
    npm install 包名称 简写 npm i 包名称

    • 参数：指定包的类型，默认是生产包
      • 生产依赖：--save 简写 -S
      • 安装依赖：--save-dev简写-D
    • 安装后，会自动创建node_modules目录，包会下载到目录中。
    • 并且会创建parkage-lock.json文件，锁定当前版本。
    • 再次安装时，会安装parkage-lock.json中指定的版本。

  • 删除包指令：
    npm uninstall 包名称 简写 npm uni 包名称

  • 全局参数：-g，在全局安装或删除

  • 版本号规则: 主版本.次版本.补丁版本,例如3.2.3

    • ^: 锁定“主版本”,更新到最新的“次版本和补丁版本”,“^3.3.3”会升到“3.5.x”,但不会到“4.0.x”。
    • ~: 锁定“次版本”,更新到最新的“补丁版本”，“~3.2.3”会升到“3.2.5”但不会到“3.3.x”。
    • *: 任意版本,即最新版本
    • a,b,c: 锁定到指定版本,禁止更新
  • 版本书写举例
    • 只接受补丁版本的更新:
    • 1.0
    • 1.0.x
    • ~1.0.4
  • 只接受小版本更新:默认补丁也接受
    • 1
    • 1.x
    • ^1.0.4
  • 可接受大版本更新,默认次版本补丁都接受
    • *

3. 更新node包的详细步骤、验证方法

  1. # 检查是否有可更新的包
  2. # 检查全部
  3. npm outdated
  4. # 检查指定包
  5. npm outdated lodash
  7. # 安装用来更新包的插件npm-check-updates,推荐安装到全局
  8. npm i -g npm-check-updates
  10. # 查看是否安装成功?
  11. npm list -g
  13. # 用更新插件来检查可更新的包的列表
  14. npm-check-updates
  15. # 该命令太长, 通常用 ncu 简化
  16. ncu
  18. # 更新所有包到最新版本
  19. ncu -u
  20. # 或仅更新指定的包也可以
  21. ncu -u lodash
  23. # 查看 package.json, 版本号已更新
  24. # 现在只是版本了版本号, 最新的包,还是下载安装到项目中
  25. # 即 "node_modules"中的包,还是老版本
  26. # 所以,还要用 npm install 安装一下
  28. npm install
  30. # 再次查看包版本,已更新到最新版本
  31. npm list
  33. # 打开package-lock.json,可以看到已锁定到最新版本
  34. # 更新成功,结束
上一条：Ubuntu21.10配置Docker CE 镜像下一条：PHP之面向对象以及PDO连接数据库
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多