商品管理器实例,node基础知识(包安装、删除与更新)

2022年01月14日 22:41:48阅读数:46博客 / 赵大叔 / 前端入门

商品管理器实例

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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. <style>
  9. * {
  10. margin: 0;
  11. padding: 0;
  12. box-sizing: border-box;
  13. }
  14. html {
  15. font-size: 10px;
  16. }
  17. body {
  18. font-size: 1.6rem;
  19. background-color: #f4f5cd;
  20. }
  21. ul {
  22. display: grid;
  23. grid-template-columns: repeat(4, 32rem);
  24. }
  25. li {
  26. list-style: none;
  27. width: 23rem;
  28. border: 1px solid violet;
  29. padding: 1rem 1rem 0;
  30. margin-top: 1rem;
  31. display: flex;
  32. flex-flow: column nowrap;
  33. }
  34. li > div {
  35. display: flex;
  36. }
  37. li:hover {
  38. background-color: lightcyan;
  39. cursor: pointer;
  40. box-shadow: 0 0 8px violet;
  41. border: none;
  42. }
  43. li img {
  44. width: 100%;
  45. height: 100%;
  46. }
  47. li button {
  48. background-color: violet;
  49. color: white;
  50. border: none;
  51. outline: none;
  52. margin: 0.2rem;
  53. border-radius: 0.3rem;
  54. padding: 2px 8px;
  55. cursor: pointer;
  56. flex: 1;
  57. }
  58. li button:hover {
  59. background-color: coral;
  60. }
  61. li .btns {
  62. height: 4rem;
  63. display: flex;
  64. place-content: space-around;
  65. place-items: center;
  66. }
  67. </style>
  68. </head>
  69. <body>
  70. <ul class="container">
  71. <!-- 这里放所有相片,全部使用js动态创建 -->
  72. </ul>
  73. </body>
  74. <script>
  75. // 图片数组
  76. const imgs = [
  77. "images/img_1.jpg",
  78. "images/img_2.jpg",
  79. "images/img_3.jpg",
  80. "images/img_4.jpg",
  81. "images/img_5.jpg",
  82. "images/img_6.jpg",
  83. "images/img_7.jpg",
  84. "images/img_8.jpg",
  85. ];
  86. // onload: 元素加载完成即执行
  87. window.onload = showImgs;
  88. const ul = document.querySelector(".container");
  89. // console.log(ul);
  90. function showImgs() {
  91. let htmlStr = imgs.reduce((acc, img) => {
  92. let tpl = `
  93. <li>
  94. <img src="${img}" />
  95. <div>
  96. <button onclick="del(this.parentNode.parentNode)">删除</button>
  97. <button onclick="prev(this.parentNode.parentNode)">向前</button>
  98. <button onclick="next(this.parentNode.parentNode)">向后</button>
  99. </div>
  100. </li>
  101. `;
  102. return acc + tpl;
  103. }, "");
  104. // console.log(htmlStr);
  105. ul.insertAdjacentHTML("afterBegin", htmlStr);
  106. // ul.insertAdjacentElement(插入的位置, 元素)
  107. // u.insertAdjacentHTML(插入的位置, html字符串)
  108. }
  109. // 删除
  110. function del(ele) {
  111. return confirm("是否删除?") ? ele.remove() : false;
  112. }
  113. // 向前
  114. function prev(ele) {
  115. if (ele.previousElementSibling === null) {
  116. alert("已到第一张");
  117. return false;
  118. }
  119. // 1. 拿到前一个
  120. let prevNode = ele.previousElementSibling;
  121. // 2. 将当前的元素插入到前一个元素的前面
  122. setTimeout(() => {
  123. prevNode.before(ele);
  124. }, 300);
  125. }
  126. // 向后
  127. function next(ele) {
  128. if (ele.nextElementSibling === null) {
  129. alert("已到最后一张");
  130. return false;
  131. }
  132. // 1. 拿到下一个
  133. let nextNode = ele.nextElementSibling;
  134. // 2. 将当前的元素插入到下一个元素的后面
  135. setTimeout(() => {
  136. nextNode.after(ele);
  137. }, 300);
  138. }
  139. </script>
  140. </html>

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 --yesnpm init -y(推荐)
  • package.json与包相关字段

    • dependencies: 生产依赖
    • devDependencies: 开发依赖
  • 2、安装包指令: npm install packagenpm i package

  • 3、删除包指令 npm uninstall packagenpm 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. # 检查全部
  3. npm outdated
  4. # 检查指定包
  5. npm outdated lodash
  6. # 安装用来更新包的插件,推荐安装到全局
  7. npm i -g npm-check-updates
  8. # 查看是否安装成功?
  9. npm list -g
  10. # 用更新插件来检查可更新的包的列表
  11. npm-check-updates
  12. # 该命令太长, 通常用 ncu 简化
  13. ncu
  14. # 更新所有包到最新版本
  15. ncu -u
  16. # 或仅更新指定的包也可以
  17. ncu -u lodash
  18. # 查看 package.json, 版本号已更新
  19. # 现在只是版本了版本号, 最新的包,还是下载安装到项目中
  20. # 即 "node_modules"中的包,还是老版本
  21. # 所以,还要用 npm install 安装一下
  22. npm install
  23. # 再次查看包版本,已更新到最新版本
  24. npm list
  25. # 打开package-lock.json,可以看到已锁定到最新版本
  26. # 更新成功,结束
批改状态:合格

老师批语:

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

全部评论

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

条评论
  • 博主信息
    赵大叔
    博文
    97
    粉丝
    3
    评论
    1
    访问量
    28850
    积分:0
    P豆:226.5