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

首页 > 博客列表 > 商品管理器实例，node基础知识（包安装、删除与更新）

博主信息

博文 119

粉丝 3

访问量 121294

专题推荐

更多>

商品管理器实例

<!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,可以看到已锁定到最新版本
# 更新成功,结束

批改老师：

PHPz

批改状态：合格

老师批语：

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

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

0条评论

作者最新博文

grid布局学习笔记

2020-04-15 03:09:38