ASCII码 ASCII码

响应式网络相册及node.js常规模块下载更新基础操作

发布于：2022-01-13 10:56:09  栏目：技术文档

响应式网络图片示例当前使用到的代码示例：

代码 示例 说明
insertAdjacentHTML 元素.insertAdjacentHTML(“插入位置”,插入的html字符串); 主要用于某个位置插入html操作（位置说明请看https://www.php.cn/blog/detail/32044.html）
insertAdjacentElement 元素.insertAdjacentElement(“插入的位置”,元素) 某个位置插入元素操作，同样有位置
previousElementSibling ele.previousElementSibling，（这个要看下面的代码，首先要拿到节点的前兄弟元素） 某一个节点的前一个兄弟的语法糖previousElementSibling
nextElementSibling ele.nextElementSibling，（拿到节点的后一个元素） 某一个节点的后一个兄弟的语法糖
after 节点后插入
before 节点前插入

示例代码：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>网络相册管理器实现案例</title>
  8. </head>
  9. <style>
  10.     * {
  11.         padding: 0;
  12.         margin: 0;
  13.         box-sizing: border-box;
  14.     }
  16.     body {
  17.         display: grid;
  18.     }
  20.     .box {
  21.         display: grid;
  22.         grid-template-columns: 33.33vw 33.33vw 33.33vw;
  23.         place-items: center;
  24.     }
  26.     li {
  27.         list-style: none;
  28.     }
  30.     button {
  31.         width: 60px;
  32.         outline: green 1px solid;
  33.         border: 0px;
  34.         background-color: #fff;
  35.         margin-bottom: 4px;
  36.         cursor: pointer;
  37.     }
  39.     button:hover {
  40.         background-color: orange;
  41.         color: #fff;
  42.     }
  44.     li div {
  45.         display: flex;
  46.         clear: none;
  47.         width: 200px;
  48.         place-content: center;
  49.     }
  51.     img {
  52.         width: 200px;
  53.         height: 200px;
  54.     }
  55. </style>
  57. <body>
  58.     <div class="box">
  59.         <!-- js代码部分 -->
  60.     </div>
  61. </body>
  62. <script>
  63.     let imgs = [
  64.         "images/img_1.jpg",
  65.         "images/img_2.jpg",
  66.         "images/img_3.jpg",
  67.         "images/img_4.jpg",
  68.         "images/img_5.jpg",
  69.         "images/img_6.jpg",
  70.         "images/img_7.jpg",
  71.         "images/img_8.jpg",
  72.     ];
  73.     div = document.querySelector(".box");
  74.     console.log(div);
  75.     // window.onload元素加载完成即立即执行
  76.     window.onload = img;
  77.     /////组装html处理图片
  78.     function img() {
  79.         let htmlstr = imgs.reduce(function(acc, img) {
  80.             let tpl = `
  81.           <li>
  82.                       <img src="${img}" />
  83.                       <div>
  84.                           <button onclick="del(this.parentNode.parentNode)">删除</button>
  85.                           <button onclick="next(this.parentNode.parentNode)">向后</button>
  86.                           <button onclick="prev(this.parentNode.parentNode)">向前</button>
  87.                       </div>
  88.                   </li>
  89.           `;
  90.             return acc + tpl;
  91.         }, "");
  92.         ("");
  93.         console.log(htmlstr);
  94.         // 元素.insertAdjacentHTML("插入位置",插入的html字符串);
  95.         div.insertAdjacentHTML("afterBegin", htmlstr);
  96.         //元素.insertAdjacentElement("插入的位置",元素)
  97.     }
  98.     /////删除某个图片
  99.     function del(ele) {
  100.         //判断是否是最后一张图片
  101.         //如果最前面一张ele.previousElementSibling拿到的元素是空，说明是最前面一张了，就提示用户最后一张了
  102.         if (ele.previousElementSibling === null) {
  103.             alert("已经到最前面一张了");
  104.             return false;
  105.         }
  106.         //  confirm提示是否删除，类似alert，但是alert是个弹出，无取消的回调工作
  107.         return confirm("是否删除") ? ele.remove() : false;
  108.     }
  110.     function prev(ele) {
  111.         //向前
  112.         // 先声明一个变量，是当前位置的前一个元素，
  113.         let prevNode = ele.previousElementSibling;
  114.         // 将当前元素插入到前一个元素的位置后面
  115.         // prevNode.before(ele);
  116.         // 使用定时器给图片一个延迟操作
  117.         setTimeout(() => {
  118.             prevNode.before(ele);
  119.         }, 300);
  120.     }
  122.     function next(ele) {
  123.         //向后
  124.         // 拿到当前元素的后面一个元素ele.nextElementSibling;
  125.         let nextNode = ele.nextElementSibling;
  126.         //将当前元素插入到后面一个元素的位置后面
  127.         //netNode.after(ele);
  128.         //使用定时器给图片做一个延迟操作
  129.         setTimeout(() => {
  130.             prevNode.after(ele);
  131.         }, 300);
  132.     }
  133. </script>
  135. </html>

node.js基础操作

  1. # Node.js 基础
  3. ## 1. 下载与安装
  5. 1. 下载: <https://nodejs.org/zh-cn/>
  6. 2. 参考镜像: <http://nodejs.cn/>
  8. ```shell
  9. # node版本号
  10. node --version
  11. node -v;
  12. # npm版本号
  13. npm --version
  14. npm -v;
  16. # 查看当前路径
  17. pwd
  19. # 进入目录
  20. cd path # path用具体路径名称代替
  22. # 清屏
  23. clear

node 参数规律: 全称用”—“, 简化用 “-“

2. 命令行交互式

  1. node
  2. > let a = 1;
  3. > let b = 2;
  4. > console.log(`${a} + ${b} = ${a+b}`);
  5. > process.exit() # 退出命令行
  6. > .exit # process.exit()简化
  7. #使用简体的时候，不要加()

3. 执行 js 文件

  • demo1.js
  1. let a = 1;
  2. let b = 2;
  3. console.log(`${a} + ${b} = ${a + b}`);
  5. // console.log()控制台输出,类似还有:
  6. // console.info(): 与console.log()功能类似
  7. // console.dir(): 对象信息
  8. // console.warn(): 警告信息
  9. // console.error(): 出错信息
  10. // console.trace(): 当前跟踪栈信息
  11. // console.time(f),console.timeEnd(f)统计执行时间
  • 执行
  1. # node js文件名
  2. node demo1.js
  3. > 1 + 2 = 3
  5. # node 默认执行的就是js文件,所以扩展名可省略
  6. node demo1
  7. > 1 + 2 = 3

4. npm

  • npm: node 内置的”包”管理器,与 node 发行版本一起提供
  • npm version: 查询当前npm更详细的描述信息

NPM 是通过package.json配置文件管理当前项目依赖项

package.json

{“name”: “0111”, //现在是目录所在的名字，也就是项目的名字，包名“version”: “1.0.0”,//版本，“description”: “”,//最好给描述一个东西，如果不给，后面会总是给警告“main”: “demo.js”,//默认的 node.js 文件的名“dependencies”: {“lodash”: “^4.17.21”},“devDependencies”: {},“scripts”: {“test”: “echo \”Error: no test specified\” && exit 1”},“keywords”: [],“author”: “”,“license”: “ISC”“private”:true //如果是 true 就是声明为私有}

  • 生成package.json

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

<!-- ^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
  • 可接受大版本更新,默认次版本补丁都接受
    • *

5. 安装与删除包

  • package.json与包相关字段

    • dependencies: 生产依赖 如果下载 默认就是生产依赖 当然就是-S
    • devDependencies: 开发依赖 配合下面的开发依赖 -D

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

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

  • 安装指定版本指定 npm i package@3.*

  • 参数:

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

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

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

5.1 全局更新

查看全局项目包地址

  2. npm root
  3. # 不加参数就是当前项目地址 里面的模块目录
  5. npm root --glocal/ npm root -g
  6. # 当前全局模块安装的位置
  8. # 删除全局模块
  9. npm uninstall package -g
  11. #更新完成

6. 更新包

  1. # 检查是否有可更新的包
  2. # 检查全部
  3. npm outdated
  4. # 检查指定包
  5. npm outdated lodash
  7. # 安装用来更新包的插件,推荐安装到全局
  8. npm i -g npm-check-updates
  10. # 查看本地的包
  11. npm list
  12. # 查看是否安装成功?
  13. npm list -g
  15. # 用更新插件来检查可更新的包的列表
  16. # 如果不更新 就可能是权限问题，可以以管理员权限运行
  17. npm-check-updates
  18. # 该命令太长, 通常用 ncu 简化
  19. ncu
  21. # 更新所包更新
  22. npm-check-updates -u
  23.  #下面是简化
  24. # 更新所有包到最新版本
  25. ncu -u
  26. # 或仅更新指定的包也可以
  27. ncu -u lodash
  29. # 查看 package.json, 版本号已更新
  30. # 现在只是版本了版本号, 最新的包,还是下载安装到项目中
  31. # 即 "node_modules"中的包,还是老版本
  32. # 所以,还要用 npm install 安装一下
  34. #不指定就默认更新所有
  35. npm install
  36. #更新某一个就指定包名
  37. npm i lodash
  40. # 再次查看包版本,已更新到最新版本
  41. npm list
  43. # 打开package-lock.json,可以看到已锁定到最新版本
  44. # 更新成功,结束
  1. 商品管理 太差了，凑出来的，本来想map循环，没写出来
  2. ```php
  3. <!DOCTYPE html>
  4. <html lang="zh-CN">
  6. <head>
  7.     <meta charset="UTF-8" />
  8.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  9.     <title>商品管理器</title>
  10. </head>
  12. <body>
  13.     <table>
  14.         <thead>
  15.             <tr>
  16.                 <th>商品名</th>
  17.                 <th>商品库存</th>
  18.                 <th>商品今日销售</th>
  19.                 <th>上下架</th>
  20.             </tr>
  21.         </thead>
  22.         <tbody>
  23.             <!-- <tr>
  24.                 <td>花生</td>
  25.                 <td>50</td>
  26.                 <td>120</td>
  27.                 <td><button>下架花生</button></td>
  28.             </tr>
  29.             <tr>
  30.                 <td>玉米</td>
  31.                 <td>200</td>
  32.                 <td>58</td>
  33.                 <td><button>下架玉米</button></td>
  34.             </tr>
  35.             <tr>
  36.                 <td>苹果</td>
  37.                 <td>180</td>
  38.                 <td>26</td>
  39.                 <td><button>下架苹果</button></td>
  40.             </tr> -->
  41.         </tbody>
  42.         <tfoot></tfoot>
  43.     </table>
  44.     <button onclick="on(this)">一键上架</button>
  45. </body>
  46. <script>
  47.     let commodity = {
  48.         hua: {
  49.             name: "花生",
  50.             stock: "50",
  51.             today: "120",
  52.         },
  53.         yumi: {
  54.             name: "玉米",
  55.             stock: "200",
  56.             today: "50",
  57.         },
  58.         ap: {
  59.             name: "苹果",
  60.             stock: "180",
  61.             today: "26",
  62.         },
  63.     };
  64.     console.log(commodity);
  66.     // window.onload(on(ele));
  68.     function on(ele) {
  69.         const ab = document.querySelector("tbody");
  70.         // console.log(ab);
  71.         let html = `
  72.              <tr class="tr1" >
  73.                 <td>${commodity.hua.name}</td>
  74.                 <td>${commodity.hua.stock}</td>
  75.                 <td>${commodity.hua.today}</td>
  76.                 <td><button onclick="on1(this)" >下架花生</button></td>
  77.             </tr>
  78.             <tr class ="tr2">
  79.                 <td>${commodity.yumi.name}</td>
  80.                 <td>${commodity.yumi.stock}</td>
  81.                 <td>${commodity.yumi.today}</td>
  82.                 <td><button onclick="on2(this)">下架玉米</button></td>
  83.             </tr>
  84.             <tr  class ="tr3">
  85.                 <td>${commodity.ap.name}</td>
  86.                 <td>${commodity.ap.stock}</td>
  87.                 <td>${commodity.ap.today}</td>
  88.                 <td><button onclick="on3(this)">下架苹果</button></td>
  89.             </tr>
  91.         `;
  92.         ab.insertAdjacentHTML("afterBegin", html);
  93.     }
  95.     function on1(ele) {
  96.         ele.parentNode.parentNode.remove();
  97.     }
  99.     function on2(ele) {
  100.         ele.parentNode.parentNode.remove();
  101.     }
  103.     function on3(ele) {
  104.         ele.parentNode.parentNode.remove();
  105.     }
  106. </script>
  108. </html>
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行