商品管理器实例

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

node 基础知识

1. 下载与安装

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

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. # 检查全部
  3. npm outdated
  4. # 检查指定包
  5. npm outdated lodash
  7. # 安装用来更新包的插件,推荐安装到全局
  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. # 更新成功,结束