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

程序员文章站 2022-03-27 09:06:39

...

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

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

示例代码：


<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>网络相册管理器实现案例</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    body {
        display: grid;
    }

    .box {
        display: grid;
        grid-template-columns: 33.33vw 33.33vw 33.33vw;
        place-items: center;
    }

    li {
        list-style: none;
    }

    button {
        width: 60px;
        outline: green 1px solid;
        border: 0px;
        background-color: #fff;
        margin-bottom: 4px;
        cursor: pointer;
    }

    button:hover {
        background-color: orange;
        color: #fff;
    }

    li div {
        display: flex;
        clear: none;
        width: 200px;
        place-content: center;
    }

    img {
        width: 200px;
        height: 200px;
    }
</style>

<body>
    <div class="box">
        <!-- js代码部分 -->
    </div>
</body>
<script>
    let imgs = [
        "images/img_1.jpg",
        "images/img_2.jpg",
        "images/img_3.jpg",
        "images/img_4.jpg",
        "images/img_5.jpg",
        "images/img_6.jpg",
        "images/img_7.jpg",
        "images/img_8.jpg",
    ];
    div = document.querySelector(".box");
    console.log(div);
    // window.onload元素加载完成即立即执行
    window.onload = img;
    /////组装html处理图片
    function img() {
        let htmlstr = imgs.reduce(function(acc, img) {
            let tpl = `
          <li>
                      <img src="${img}" />
                      <div>
                          <button onclick="del(this.parentNode.parentNode)">删除</button>
                          <button onclick="next(this.parentNode.parentNode)">向后</button>
                          <button onclick="prev(this.parentNode.parentNode)">向前</button>
                      </div>
                  </li>
          `;
            return acc + tpl;
        }, "");
        ("");
        console.log(htmlstr);
        // 元素.insertAdjacentHTML("插入位置",插入的html字符串);
        div.insertAdjacentHTML("afterBegin", htmlstr);
        //元素.insertAdjacentElement("插入的位置",元素)
    }
    /////删除某个图片
    function del(ele) {
        //判断是否是最后一张图片
        //如果最前面一张ele.previousElementSibling拿到的元素是空，说明是最前面一张了，就提示用户最后一张了
        if (ele.previousElementSibling === null) {
            alert("已经到最前面一张了");
            return false;
        }
        //  confirm提示是否删除，类似alert，但是alert是个弹出，无取消的回调工作
        return confirm("是否删除") ? ele.remove() : false;
    }

    function prev(ele) {
        //向前
        // 先声明一个变量，是当前位置的前一个元素，
        let prevNode = ele.previousElementSibling;
        // 将当前元素插入到前一个元素的位置后面
        // prevNode.before(ele);
        // 使用定时器给图片一个延迟操作
        setTimeout(() => {
            prevNode.before(ele);
        }, 300);
    }

    function next(ele) {
        //向后
        // 拿到当前元素的后面一个元素ele.nextElementSibling;
        let nextNode = ele.nextElementSibling;
        //将当前元素插入到后面一个元素的位置后面
        //netNode.after(ele);
        //使用定时器给图片做一个延迟操作
        setTimeout(() => {
            prevNode.after(ele);
        }, 300);
    }
</script>

</html>

node.js基础操作


# Node.js 基础

## 1. 下载与安装

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

```shell
# node版本号
node --version
node -v;
# npm版本号
npm --version
npm -v;

# 查看当前路径
pwd

# 进入目录
cd path # path用具体路径名称代替

# 清屏
clear

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

2. 命令行交互式


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

3. 执行 js 文件

demo1.js


let a = 1;
let b = 2;
console.log(`${a} + ${b} = ${a + b}`);

// console.log()控制台输出,类似还有:
// console.info(): 与console.log()功能类似
// console.dir(): 对象信息
// console.warn(): 警告信息
// console.error(): 出错信息
// console.trace(): 当前跟踪栈信息
// console.time(f),console.timeEnd(f)统计执行时间

执行


# node js文件名
node demo1.js
> 1 + 2 = 3

# node 默认执行的就是js文件,所以扩展名可省略
node demo1
> 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(推荐)

版本号规则: 主版本.次版本.补丁版本,例如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 全局更新

查看全局项目包地址



npm root
# 不加参数就是当前项目地址 里面的模块目录

npm root --glocal/ npm root -g
# 当前全局模块安装的位置

# 删除全局模块
npm uninstall package -g

#更新完成

6. 更新包


# 检查是否有可更新的包
# 检查全部
npm outdated
# 检查指定包
npm outdated lodash

# 安装用来更新包的插件,推荐安装到全局
npm i -g npm-check-updates

# 查看本地的包
npm list
# 查看是否安装成功?
npm list -g

# 用更新插件来检查可更新的包的列表
# 如果不更新 就可能是权限问题，可以以管理员权限运行
npm-check-updates
# 该命令太长, 通常用 ncu 简化
ncu

# 更新所包更新
npm-check-updates -u
 #下面是简化
# 更新所有包到最新版本
ncu -u
# 或仅更新指定的包也可以
ncu -u lodash

# 查看 package.json, 版本号已更新
# 现在只是版本了版本号, 最新的包,还是下载安装到项目中
# 即 "node_modules"中的包,还是老版本
# 所以,还要用 npm install 安装一下

#不指定就默认更新所有
npm install
#更新某一个就指定包名
npm i lodash


# 再次查看包版本,已更新到最新版本
npm list

# 打开package-lock.json,可以看到已锁定到最新版本
# 更新成功,结束


商品管理 太差了，凑出来的，本来想map循环，没写出来
```php
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>商品管理器</title>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>商品名</th>
                <th>商品库存</th>
                <th>商品今日销售</th>
                <th>上下架</th>
            </tr>
        </thead>
        <tbody>
            <!-- <tr>
                <td>花生</td>
                <td>50</td>
                <td>120</td>
                <td><button>下架花生</button></td>
            </tr>
            <tr>
                <td>玉米</td>
                <td>200</td>
                <td>58</td>
                <td><button>下架玉米</button></td>
            </tr>
            <tr>
                <td>苹果</td>
                <td>180</td>
                <td>26</td>
                <td><button>下架苹果</button></td>
            </tr> -->
        </tbody>
        <tfoot></tfoot>
    </table>
    <button onclick="on(this)">一键上架</button>
</body>
<script>
    let commodity = {
        hua: {
            name: "花生",
            stock: "50",
            today: "120",
        },
        yumi: {
            name: "玉米",
            stock: "200",
            today: "50",
        },
        ap: {
            name: "苹果",
            stock: "180",
            today: "26",
        },
    };
    console.log(commodity);

    // window.onload(on(ele));

    function on(ele) {
        const ab = document.querySelector("tbody");
        // console.log(ab);
        let html = `
             <tr class="tr1" >
                <td>${commodity.hua.name}</td>
                <td>${commodity.hua.stock}</td>
                <td>${commodity.hua.today}</td>
                <td><button onclick="on1(this)" >下架花生</button></td>
            </tr>
            <tr class ="tr2">
                <td>${commodity.yumi.name}</td>
                <td>${commodity.yumi.stock}</td>
                <td>${commodity.yumi.today}</td>
                <td><button onclick="on2(this)">下架玉米</button></td>
            </tr>
            <tr  class ="tr3">
                <td>${commodity.ap.name}</td>
                <td>${commodity.ap.stock}</td>
                <td>${commodity.ap.today}</td>
                <td><button onclick="on3(this)">下架苹果</button></td>
            </tr>

        `;
        ab.insertAdjacentHTML("afterBegin", html);
    }

    function on1(ele) {
        ele.parentNode.parentNode.remove();
    }

    function on2(ele) {
        ele.parentNode.parentNode.remove();
    }

    function on3(ele) {
        ele.parentNode.parentNode.remove();
    }
</script>

</html>

上一篇： PHP如何动态修改配置文件

下一篇： json转js与js转json以及练习了ajax-xhr/fetch异步通讯以及模块常识，其中Promise状态及Promise中的Fetch API部分暂时还没进行示例学习操作