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

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

Blogger Information

Blog 119

fans 3

comment 1

visits 94612

Special Recommendation

More>

Related recommendations

商品管理器实例

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>响应式的商品管理器</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      html {
        font-size: 10px;
      }
      body {
        font-size: 1.6rem;
        background-color: #f4f5cd;
      }
      ul {
        display: grid;
        grid-template-columns: repeat(4, 32rem);
      }
      li {
        list-style: none;
        width: 23rem;
        border: 1px solid violet;
        padding: 1rem 1rem 0;
        margin-top: 1rem;
        display: flex;
        flex-flow: column nowrap;
      }
      li > div {
        display: flex;
      }
      li:hover {
        background-color: lightcyan;
        cursor: pointer;
        box-shadow: 0 0 8px violet;
        border: none;
      }
      li img {
        width: 100%;
        height: 100%;
      }
      li button {
        background-color: violet;
        color: white;
        border: none;
        outline: none;
        margin: 0.2rem;
        border-radius: 0.3rem;
        padding: 2px 8px;
        cursor: pointer;
        flex: 1;
      }
      li button:hover {
        background-color: coral;
      }
      li .btns {
        height: 4rem;
        display: flex;
        place-content: space-around;
        place-items: center;
      }
    </style>
  </head>
  <body>
    <ul class="container">
      <!-- 这里放所有相片，全部使用js动态创建 -->
    </ul>
  </body>
  <script>
    // 图片数组
    const 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",
    ];
    // onload: 元素加载完成即执行
    window.onload = showImgs;
    const ul = document.querySelector(".container");
    // console.log(ul);
    function showImgs() {
      let htmlStr = imgs.reduce((acc, img) => {
        let tpl = `
              <li>
                  <img src="${img}" />
                  <div>
                      <button onclick="del(this.parentNode.parentNode)">删除</button>
                      <button onclick="prev(this.parentNode.parentNode)">向前</button>
                      <button onclick="next(this.parentNode.parentNode)">向后</button>
                  </div>
              </li>
              `;
        return acc + tpl;
      }, "");
      // console.log(htmlStr);
      ul.insertAdjacentHTML("afterBegin", htmlStr);
      // ul.insertAdjacentElement(插入的位置, 元素)
      // u.insertAdjacentHTML(插入的位置, html字符串)
    }
    // 删除
    function del(ele) {
      return confirm("是否删除?") ? ele.remove() : false;
    }
    // 向前
    function prev(ele) {
      if (ele.previousElementSibling === null) {
        alert("已到第一张");
        return false;
      }
      // 1. 拿到前一个
      let prevNode = ele.previousElementSibling;
      // 2. 将当前的元素插入到前一个元素的前面
      setTimeout(() => {
        prevNode.before(ele);
      }, 300);
    }
    // 向后
    function next(ele) {
      if (ele.nextElementSibling === null) {
        alert("已到最后一张");
        return false;
      }
      // 1. 拿到下一个
      let nextNode = ele.nextElementSibling;
      // 2. 将当前的元素插入到下一个元素的后面
      setTimeout(() => {
        nextNode.after(ele);
      }, 300);
    }
  </script>
</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中的指定的版本

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

更新包的详细步骤

# 检查是否有可更新的包
# 检查全部
npm outdated
# 检查指定包
npm outdated lodash
# 安装用来更新包的插件,推荐安装到全局
npm i -g npm-check-updates
# 查看是否安装成功?
npm list -g
# 用更新插件来检查可更新的包的列表
npm-check-updates
# 该命令太长, 通常用 ncu 简化
ncu
# 更新所有包到最新版本
ncu -u
# 或仅更新指定的包也可以
ncu -u lodash
# 查看 package.json, 版本号已更新
# 现在只是版本了版本号, 最新的包,还是下载安装到项目中
# 即 "node_modules"中的包,还是老版本
# 所以,还要用 npm install 安装一下
npm install
# 再次查看包版本,已更新到最新版本
npm list
# 打开package-lock.json,可以看到已锁定到最新版本
# 更新成功,结束

Correcting teacher：

PHPz

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

grid布局学习笔记

2020-04-15 03:09:38