欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

商品管理器实例，node基础知识（包安装、删除与更新）

程序员文章站 2022-03-27 08:28:38
...

商品管理器实例

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    3. 

  3.   <head>
    4. 

  4.     <meta charset="UTF-8" />
    5. 

  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6. 

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7. 

  7.     <title>响应式的商品管理器</title>
    8. 

  8.     <style>
    9. 

  9.       * {
    10. 

  10.         margin: 0;
    11. 

  11.         padding: 0;
    12. 

  12.         box-sizing: border-box;
    13. 

  13.       }
    14. 

    15. 

  15.       html {
    16. 

  16.         font-size: 10px;
    17. 

  17.       }
    18. 

    19. 

  19.       body {
    20. 

  20.         font-size: 1.6rem;
    21. 

  21.         background-color: #f4f5cd;
    22. 

  22.       }
    23. 

    24. 

  24.       ul {
    25. 

  25.         display: grid;
    26. 

  26.         grid-template-columns: repeat(4, 32rem);
    27. 

  27.       }
    28. 

    29. 

  29.       li {
    30. 

  30.         list-style: none;
    31. 

  31.         width: 23rem;
    32. 

  32.         border: 1px solid violet;
    33. 

  33.         padding: 1rem 1rem 0;
    34. 

  34.         margin-top: 1rem;
    35. 

    36. 

  36.         display: flex;
    37. 

  37.         flex-flow: column nowrap;
    38. 

  38.       }
    39. 

  39.       li > div {
    40. 

  40.         display: flex;
    41. 

  41.       }
    42. 

    43. 

  43.       li:hover {
    44. 

  44.         background-color: lightcyan;
    45. 

  45.         cursor: pointer;
    46. 

  46.         box-shadow: 0 0 8px violet;
    47. 

  47.         border: none;
    48. 

  48.       }
    49. 

    50. 

  50.       li img {
    51. 

  51.         width: 100%;
    52. 

  52.         height: 100%;
    53. 

  53.       }
    54. 

    55. 

  55.       li button {
    56. 

  56.         background-color: violet;
    57. 

  57.         color: white;
    58. 

  58.         border: none;
    59. 

  59.         outline: none;
    60. 

  60.         margin: 0.2rem;
    61. 

  61.         border-radius: 0.3rem;
    62. 

  62.         padding: 2px 8px;
    63. 

  63.         cursor: pointer;
    64. 

  64.         flex: 1;
    65. 

  65.       }
    66. 

    67. 

  67.       li button:hover {
    68. 

  68.         background-color: coral;
    69. 

  69.       }
    70. 

    71. 

  71.       li .btns {
    72. 

  72.         height: 4rem;
    73. 

  73.         display: flex;
    74. 

  74.         place-content: space-around;
    75. 

  75.         place-items: center;
    76. 

  76.       }
    77. 

  77.     </style>
    78. 

  78.   </head>
    79. 

    80. 

  80.   <body>
    81. 

  81.     <ul class="container">
    82. 

  82.       <!-- 这里放所有相片，全部使用js动态创建 -->
    83. 

  83.     </ul>
    84. 

  84.   </body>
    85. 

  85.   <script>
    86. 

  86.     // 图片数组
    87. 

  87.     const imgs = [
    88. 

  88.       "images/img_1.jpg",
    89. 

  89.       "images/img_2.jpg",
    90. 

  90.       "images/img_3.jpg",
    91. 

  91.       "images/img_4.jpg",
    92. 

  92.       "images/img_5.jpg",
    93. 

  93.       "images/img_6.jpg",
    94. 

  94.       "images/img_7.jpg",
    95. 

  95.       "images/img_8.jpg",
    96. 

  96.     ];
    97. 

    98. 

  98.     // onload: 元素加载完成即执行
    99. 

  99.     window.onload = showImgs;
    100. 

    101. 

  101.     const ul = document.querySelector(".container");
    102. 

  102.     // console.log(ul);
    103. 

    104. 

  104.     function showImgs() {
    105. 

  105.       let htmlStr = imgs.reduce((acc, img) => {
    106. 

  106.         let tpl = `
    107. 

  107.               <li>
    108. 

  108.                   <img src="${img}" />
    109. 

  109.                   <div>
    110. 

  110.                       <button onclick="del(this.parentNode.parentNode)">删除</button>
    111. 

  111.                       <button onclick="prev(this.parentNode.parentNode)">向前</button>
    112. 

  112.                       <button onclick="next(this.parentNode.parentNode)">向后</button>
    113. 

  113.                   </div>
    114. 

  114.               </li>
    115. 

  115.               `;
    116. 

  116.         return acc + tpl;
    117. 

  117.       }, "");
    118. 

  118.       // console.log(htmlStr);
    119. 

  119.       ul.insertAdjacentHTML("afterBegin", htmlStr);
    120. 

    121. 

  121.       // ul.insertAdjacentElement(插入的位置, 元素)
    122. 

  122.       // u.insertAdjacentHTML(插入的位置, html字符串)
    123. 

  123.     }
    124. 

    125. 

  125.     // 删除
    126. 

  126.     function del(ele) {
    127. 

  127.       return confirm("是否删除?") ? ele.remove() : false;
    128. 

  128.     }
    129. 

    130. 

  130.     // 向前
    131. 

  131.     function prev(ele) {
    132. 

  132.       if (ele.previousElementSibling === null) {
    133. 

  133.         alert("已到第一张");
    134. 

  134.         return false;
    135. 

  135.       }
    136. 

  136.       // 1. 拿到前一个
    137. 

  137.       let prevNode = ele.previousElementSibling;
    138. 

  138.       // 2. 将当前的元素插入到前一个元素的前面
    139. 

  139.       setTimeout(() => {
    140. 

  140.         prevNode.before(ele);
    141. 

  141.       }, 300);
    142. 

  142.     }
    143. 

    144. 

  144.     // 向后
    145. 

  145.     function next(ele) {
    146. 

  146.       if (ele.nextElementSibling === null) {
    147. 

  147.         alert("已到最后一张");
    148. 

  148.         return false;
    149. 

  149.       }
    150. 

  150.       // 1. 拿到下一个
    151. 

  151.       let nextNode = ele.nextElementSibling;
    152. 

  152.       // 2. 将当前的元素插入到下一个元素的后面
    153. 

  153.       setTimeout(() => {
    154. 

  154.         nextNode.after(ele);
    155. 

  155.       }, 300);
    156. 

  156.     }
    157. 

  157.   </script>
    158. 

  158. </html>
    159.

node 基础知识

1. 下载与安装

2. 常用指令

  • npm 包管理器
  • node 参数规律: 全称用”—“, 简化用 “-“
  • 两种执行方式：命令行交互式，执行 js 文件
STT 指令 说明
1 node —version/node -v 查看 node 版本号
2 npm —version/npm -v 查看 npm 版本号
3 pwd 查看当前路径
4 cd path 进入目录，path 用具体路径名称代替
5 clear 清屏

3.node 包的安装与删除

  • npm:包管理器, 通过package.json配置文件管理当前项目依赖项

  • 1、生成package.json

    • 交互式(问答)创建: npm init
    • 创建默认: npm init --yes 或 npm init -y(推荐)

  • package.json与包相关字段

    • dependencies: 生产依赖
    • devDependencies: 开发依赖

  • 2、安装包指令: npm install package 或 npm i package

  • 3、删除包指令 npm uninstall package 或 npm uni package

  • 4、参数:

    • 生产依赖: --save或-S
    • 开发依赖: --save-dev或-D

  • 包会自动下载到node_modules目录中,如果目录不存在会自动创建

  • 并会创建或更新package-lock.json文件,锁定当前版本
  • 当再次安装时,会直接安装package-lock.json中的指定的版本

<!-- ^4.17.21: 4: 主版本 17: 次版本 21: 补丁/修复 -->

  • 版本号规则: 主版本.次版本.补丁版本,例如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
  • 可接受大版本更新,默认次版本补丁都接受
    • *

更新包的详细步骤

    

  1. # 检查是否有可更新的包
    2. 

  2. # 检查全部
    3. 

  3. npm outdated
    4. 

  4. # 检查指定包
    5. 

  5. npm outdated lodash
    6. 

    7. 

  7. # 安装用来更新包的插件,推荐安装到全局
    8. 

  8. npm i -g npm-check-updates
    9. 

    10. 

  10. # 查看是否安装成功?
    11. 

  11. npm list -g
    12. 

    13. 

  13. # 用更新插件来检查可更新的包的列表
    14. 

  14. npm-check-updates
    15. 

  15. # 该命令太长, 通常用 ncu 简化
    16. 

  16. ncu
    17. 

    18. 

  18. # 更新所有包到最新版本
    19. 

  19. ncu -u
    20. 

  20. # 或仅更新指定的包也可以
    21. 

  21. ncu -u lodash
    22. 

    23. 

  23. # 查看 package.json, 版本号已更新
    24. 

  24. # 现在只是版本了版本号, 最新的包,还是下载安装到项目中
    25. 

  25. # 即 "node_modules"中的包,还是老版本
    26. 

  26. # 所以,还要用 npm install 安装一下
    27. 

    28. 

  28. npm install
    29. 

    30. 

  30. # 再次查看包版本,已更新到最新版本
    31. 

  31. npm list
    32. 

    33. 

  33. # 打开package-lock.json,可以看到已锁定到最新版本
    34. 

  34. # 更新成功,结束
    35.

上一篇： 在微信小程序里使用watch和computed的方法

下一篇： 利用vstruct解析二进制数据

推荐阅读