20230619----重返学习-图片缩略图幻灯片-插件封装的步骤-NativeApp与WebApp

最新推荐文章于 2023-06-21 23:56:23 发布
最新推荐文章于 2023-06-21 23:56:23 发布
阅读量827 收藏
点赞数
分类专栏： 重返学习 ES6 原生js学习 文章标签： 学习 web app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/seetoyou/article/details/131297426
版权
重返学习 同时被 3 个专栏收录
126 篇文章 4 订阅
订阅专栏
原生js学习
45 篇文章 0 订阅
订阅专栏
ES6
8 篇文章 0 订阅
订阅专栏

day-094-ninety-four-20230619-图片缩略图幻灯片-插件封装的步骤-NativeApp与WebApp

图片缩略图幻灯片

总体思路

  1. 整理思路。

    • 所有的结构都包在一个盒子中。盒子里有两层内容：
      1. 盒子宽高由前端根据设计稿来定。
      2. 盒子宽高应具体到px，以便内部使用百分比进行布局。
      • 一层是封面，用于展示播放时长和视频主图。
      • 一层是进度图，用于展示进度条对应的视频缩略图。根据用户鼠标在盒子中横向距离与盒子宽度的比例，控制进度图的进度，之后进度图控制精灵图中显示的区域。
        1. 精灵图是一张组图，组图由多张小图组成，精灵图每次完整地对应一张小图。

  2. 先搭结构。

    <!-- 每一项。 -->
<div class="slide-box">
  <!-- 封面图 -->
  <div class="cover">
    <img src="./images/fengmian.jpg" alt="封面图" />
    <span class="time">03:48</span>
  </div>
  <!-- 进度层 -->
  <div class="progress">
    <div class="bar">
      <div class="all">
        <div class="already"></div>
      </div>
    </div>
  </div>
</div>

  3. 根据DOM结构来写样式。

  4. 使用js代码来写幻灯片的js逻辑代码。

常见的命名方式

  • 常见的命名方式：
    • kabab-case -> 连接符 slide-box
    • camelCase -> 小驼峰 slideBox
    • PascalCase -> 帕斯卡尔(大驼峰) SlideBox

幻灯片进度条

初版源码-未进行封装

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>幻灯片</title>
    <link rel="stylesheet" href="./css/reset.min.css" />
    <style>
      /* 禁止页面出现横向滚动条。 */
      html,
      body {
        overflow-x: hidden;
      }

      /* 开始设置盒子 */
      .slide-box {
        position: relative;
        box-sizing: border-box;
        margin: 20px auto;
        width: 200px;
        height: 100px;
        overflow: hidden;
      }

      /* 封面区域样式 */
      .slide-box .cover {
        position: relative;
        height: 100%;
        background: #eee;
        transition: opacity 0.3s;
      }
      .slide-box .cover img {
        display: block;
        height: 100%;
        width: 100%;
      }
      .slide-box .cover .time {
        position: absolute;
        right: 5px;
        bottom: 5px;
        z-index: 1;
        padding: 5px 10px;
        font-size: 12px;
        color: #fff;
        background-color: rgba(0, 0, 0, 0.6);
      }

      /* 进度区域样式 */
      .slide-box .progress {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #eee;
        opacity: 0;
        z-index: -1;
        transition: opacity 0.3s;
      }
      .slide-box:hover .progress {
        opacity: 1;
        z-index: 10;
      }
      .slide-box:hover .cover {
        opacity: 0;
      }
      /* .slide-box .progress {
        background: url("./images/225865760.png") no-repeat;

        //真实开发中，背景图大小是不固定的。
          //宽度：盒子宽 * 10 ; //10是协定好的，一般一行展示10个。不过也可以由服务器传递一个数字过来。
          //高度：Math.ceil(总图片数 / 10) * 盒子高 ; //总图片数是后端返回的。
        background-size: 2000px 550px;
        
        background-position: 0 0;//默认展示背景图中的第一张，但是后期需要根据鼠标在盒子中的位置，计算出应该展示那一张，并计算出对应的background-position值。
      } */
      .slide-box .progress .bar {
        position: absolute;
        top: 0;
        left: 0;
        box-sizing: border-box;
        padding: 5px 10px;
        width: 100%;
        background: #000;
      }
      .slide-box .progress .bar .all {
        position: relative;
        height: 4px;
        border-radius: 2px;
        background: rgba(255, 255, 255, 0.3);
        overflow: hidden;
      }
      .slide-box .progress .bar .already {
        position: absolute;
        top: 0;
        bottom: 0;
        height: 100%;
        border-radius: 2px;
        background: #fff;

        width: 0%; /* 播放进度，默认为0，后期根据鼠标的移动，动态计算进度。 */
      }
    </style>
  </head>
  <body>
    <!-- 每一项。 -->
    <div class="slide-box">
      <!-- 封面图 -->
      <div class="cover">
        <img src="./images/fengmian.jpg" alt="封面图" />
        <span class="time">03:48</span>
      </div>
      <!-- 进度层 -->
      <div class="progress">
        <div class="bar">
          <div class="all">
            <div class="already"></div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
<script>
  // 获取需要操作的元素。
  const slideBox = document.querySelector(".slide-box");
  const progressBox = slideBox.querySelector(".progress");
  const alreadyBox = progressBox.querySelector(".already");

  // 初始化数据和样式。
  let W = slideBox.offsetWidth; //盒子宽度。
  let H = slideBox.offsetHeight; //盒子高度。
  let C = 10; //进度条图片中每一行展示的数量。
  let T = 46; //进度条图片的总图片数量。
  let URL = "./images/225865760.png"; //背景图地址，从服务器获取的是绝对地址。
  progressBox.style.cssText = `
    background: url(${URL}) no-repeat;
    background-size: ${W * C}px ${Math.ceil(T / C) * H}px;
    background-position: 0 0;
  `;
  alreadyBox.style.width = "0%";

  //移动计算。
  const computed = function computed(ev) {
    // 前提是没有横向滚动条。
    console.log(`slideBox-->`, slideBox);

    let l = ev.clientX - slideBox.getBoundingClientRect().left; //鼠标距离盒子左侧的距离。
    let ratio = l / W; //计算鼠标距离盒子左边的百分比。
    ratio = ratio < 0 ? 0 : ratio > 1 ? 1 : ratio;
    // 控制进度条的样式。
    alreadyBox.style.width = `${ratio * 100}%`;
    // 控制背景图的样式。

    let N = Math.round(T * ratio);
    // console.log(`N-->`, N);
    N = N < 1 ? 1 : N > T ? T : N;//解决盒子开头移动时出现空白的情况。
    let x = N % C; //计算在第几列。
    x = x === 0 ? C : x;//解决在盒子中间移动时出现空白的情况。
    let y = Math.ceil(N / C); //计算在第几行。
    progressBox.style.backgroundPosition = `${-(x - 1) * W}px ${
      -(y - 1) * H
    }px`;
  };
  slideBox.addEventListener("mouseenter", computed); //初次进来盒子。
  slideBox.addEventListener("mousemove", computed); //在盒子内移动。
</script>

插件封装

  1. js插件封装的技巧

    1. 有一类插件，只需要导入js，然后基于特定的方法执行，可以快速创建出所需要的结构、样式、功能。
      • 这类插件，在其内部：
        • 会动态创建HTML结构。
        • 基于行内样式，把需要的样式都编写好。
        • 实现出对应的功能和逻辑。
      • 存在的一些问题：
        • 在插件内部，HTML/CSS/js代码都是混合在一起的，不方便维护。
        • 不方便使用者去修改元素的样式以及结构。
          • 基于上只能去修改插件的源码。
        • …
      • 此类插件适用于：结构和样式很少，或者没有结构或样式，以及后续几乎不会修改结构和样式的情况！
        • 比如说：
          • 回到顶部插件。
          • 局部滚动的插件。
            • IScroll.js。
          • …
    2. 大部分插件，都需要开发者按照插件的要求，编写出必须的基本结构和样式。样式可以导入插件提供的基础样式，然后再导入相应的js代码，执行特定的方法，实现出具体的功能！
      • 例如：
        • Swiper.js。
      • 这类插件是主流插件。
      • 这类插件，需要开发者使用的时候，按照要求去构建结构、样式等，所以我们需要编写一个详细的使用说明文档！

  2. 在封装插件的时候，我们一般都基于面向对象的方式来处理。

    • 在相同的页面中，我们的插件可能会执行很多次。为了保证每一次调用插件，相互之间不影响，我们采用OOP面向对象模式。

    • 插件本身是一个类，每一次使用都是创建这个类的一个实例，实例和实例之间是不影响的！对于一些通用的处理方法，实例和实例之间还可以共用！

    • 对插件样式的处理：

      <!DOCTYPE html>
<html>
  <body>
    <!-- 最基本功能的幻灯片。 -->
    <div class="zfslide-box" id="slide1">
      <div class="zfslide-cover">
        <img src="./images/fengmian.jpg" alt="封面图" />
      </div>
      <div class="zfslide-progress">
        <div class="zfslide-bar">
          <div class="zfslide-all">
            <div class="zfslide-already"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 无需进度条、需要封面时间的幻灯片。 -->
    <div class="zfslide-box" id="slide2">
      <div class="zfslide-cover">
        <img src="./images/fengmian.jpg" alt="封面图" />
        <span class="time">03:48</span>
      </div>
      <div class="zfslide-progress"></div>
    </div>
  </body>
</html>

      <style>
  /* 在插件样式的基础上，自己增加/调整新的样式。 */
  #slide1,
  #slide2 {
    margin: 20px auto;
  }
  #slide2 {
    width: 300px;
    height: 165px;
  }
</style>

      <style>
  /* 对新增的元素自己设置样式 */
  #slide2 .time {
    position: absolute;
    right: 5px;
    bottom: 5px;
    z-index: 1;
    padding: 5px 10px;
    font-size: 12px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.6);
  }
</style>

      <style>
  /* 修改插件内部元素的样式。 */
  .zfslide-progress .zfslide-all{
    background-color: rgba(255, 255, 255, 0.7);
  }
</style>

    • 对插件逻辑的处理：

      (function () {
  // 检测是否为纯粹对象
  const toString = Object.prototype.toString;
  const isPlainObject = function isPlainObject(obj) {
    // 先校验:如果基于 toString/call ，检测结果都不是 [object Object]，则一定不是纯粹对象
    if (toString.call(obj) !== "[object Object]") return false;
    let proto = Object.getPrototypeOf(obj);
    if (!proto) return true;
    let Ctor = "constructor" in obj && obj.constructor;
    return Ctor === Object;
  };

  class Slide {
    constructor(container, { back, total, column, progress }) {
      //获取需要的元素。
      this.container = container;
      this.progress = container.querySelector(".zfslide-progress");
      if (!this.progress) {
        throw new TypeError(`缺少幻灯片图层-样式式: zfslide-progress`);
      }
      // 动态创建进度条。
      if (progress&&!container.querySelector(".zfslide-already")) {
        let div = document.createElement("div");
        div.className = "zfslide-bar";
        div.innerHTML = `<div class="zfslide-all">
          <div class="zfslide-already"></div>
        </div>`;
        this.progress.appendChild(div)
      }

      this.already = container.querySelector(".zfslide-already");

      // 初始化样式和数据
      this.W = container.offsetWidth; //盒子宽度。
      this.H = container.offsetHeight; //盒子高度。
      this.column = +column; //进度条图片中每一行展示的数量。
      this.total = +total; //进度条图片的总图片数量。
      this.back = back; //背景图地址，从服务器获取的是绝对地址。
      this.init();

      // 事件绑定。-需要在绑定先，把computed中的this绑定为当前实例。
      container.addEventListener("mouseenter", this.computed.bind(this)); //初次进来盒子。
      container.addEventListener("mousemove", this.computed.bind(this)); //在盒子内移动。
    }
    // 处理化样式。
    init() {
      let { progress, already, back, W, column, total, H } = this;
      if (already) {
        already.style.width = "0%";
      }
      progress.style.cssText = `
        background: url(${back}) no-repeat;
        background-size: ${W * column}px ${Math.ceil(total / column) * H}px;
        background-position: 0 0;
      `;
    }
    // 鼠标在盒子中移动的计算。
    computed(ev) {
      let { container, already, progress, W, H, total, column } = this;
      // 前提是没有横向滚动条。
      console.log(`container-->`, container);
      // 计算鼠标距离盒子左边的百分比。
      let l = ev.clientX - container.getBoundingClientRect().left; //鼠标距离盒子左侧的距离。
      let ratio = l / W; //计算鼠标距离盒子左边的百分比。
      ratio = ratio < 0 ? 0 : ratio > 1 ? 1 : ratio;
      // 控制进度条的样式。
      if (already) {
        already.style.width = `${ratio * 100}%`;
      }

      // 计算出当前应该展示那一张。
      let N = Math.round(total * ratio); //当前要显示的第几张。
      // console.log(`N-->`, N);
      N = N < 1 ? 1 : N > total ? total : N; //解决盒子开头移动时出现空白的情况。

      // 计算出当前这一张图片在背景图中是第x列和第y行。
      let y = Math.ceil(N / column); //计算在第几行。
      let x = N % column; //计算在第几列。
      x = x === 0 ? column : x; //解决在盒子中间移动时出现空白的情况。

      //控制背景图的位置。
      progress.style.backgroundPosition = `${-(x - 1) * W}px ${-(y - 1) * H}px`;
    }
  }

  // 暴露API。
  const zfslide = function zfslide(selector, options) {
    //如果传递的是一个选择器：我们基于选择器获取相应的元素。
    if (typeof selector === "string") {
      selector = document.querySelector(selector);
    }
    // 确保容器的正确性
    if (!selector || selector?.nodeType !== 1) {
      throw new TypeError(`指定的容器不存在`);
    }
    //处理配置项。
    if (!isPlainObject(options)) {
      options = {};
    }
    options = Object.assign(
      {
        back: "", //背景图图片地址。
        total: 0, //背景图片图片总数。
        column: 10, //背景图每行数量有多少个。
        progress: true,
      },
      options
    );
    // 确保背景图图片地址和背景图每行数量是存在的。
    if (!options.back || options.total === 0) {
      throw new TypeError(`请先指定幻灯片背景图和背景图单行数量`);
    }
    return new Slide(selector, options);
  };

  if (typeof window !== "undefined") {
    window["zfslide"] = zfslide;
  }
  if (typeof module === "object" && typeof module.exports === "object") {
    module.exports = zfslide;
  }
})();

  3. 在html中使用插件。

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>测试幻灯片插件</title>
    <link rel="stylesheet" href="./css/image.slide.css" />
    <!-- <link rel="stylesheet" href="./css/zfslide.plugin.min.css"> -->
    <link rel="stylesheet" href="./css/reset.min.css" />
    <style>
      /* 在插件样式的基础上，自己增加/调整新的样式。 */
      #slide1,
      #slide2 {
        margin: 20px auto;
      }
      #slide2 {
        width: 300px;
        height: 165px;
      }

      /* 对新增的元素自己设置样式 */
      #slide2 .time {
        position: absolute;
        right: 5px;
        bottom: 5px;
        z-index: 1;
        padding: 5px 10px;
        font-size: 12px;
        color: #fff;
        background-color: rgba(0, 0, 0, 0.6);
      }

      /* 修改插件内部元素的样式。 */
      .zfslide-progress .zfslide-all {
        background-color: rgba(255, 255, 0, 0.4);
      }
    </style>
  </head>
  <body>
    <!-- 最基本功能的幻灯片。 -->
    <div class="zfslide-box" id="slide1">
      <div class="zfslide-cover">
        <img src="./images/fengmian.jpg" alt="封面图" />
      </div>
      <div class="zfslide-progress">
        <div class="zfslide-bar">
          <div class="zfslide-all">
            <div class="zfslide-already"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 无需进度条、需要封面时间的幻灯片。 -->
    <div class="zfslide-box" id="slide2">
      <div class="zfslide-cover">
        <img src="./images/fengmian.jpg" alt="封面图" />
        <span class="time">03:48</span>
      </div>
      <div class="zfslide-progress"></div>
    </div>

    <!-- 需进度条-但不实际写进度条的DOM骨架、需要封面时间的幻灯片。 -->
    <div class="zfslide-box" id="slide3">
      <div class="zfslide-cover">
        <img src="./images/fengmian.jpg" alt="封面图" />
        <span class="time">03:48</span>
      </div>
      <div class="zfslide-progress"></div>
    </div>
  </body>
</html>
<script src="./js/zfslide.plugin.js"></script>
<!-- <script src="./js/zfslide.plugin.min.js"></script> -->
<script>
  zfslide("#slide1", {
    back: "./images/225865760.png",
    total: 46,
  });
  zfslide("#slide2", {
    back: "./images/3x3.jpg",
    total: 9,
    column: 3,
    progress: false,
  });
  zfslide("#slide3", {
    back: "./images/3x3.jpg",
    total: 9,
    column: 3,
  });
</script>

插件封装的步骤

  1. 对完整功能的进行实现。
  2. 整理出那些需要进行改变。
  3. 用面向对象进行封装。
  4. 对传入的数据进行校验。
  5. 对功能改成面向对象的方式。
  6. 对css文件要进行压缩。
  7. 对js文件要进行压缩。
    • 要把ES6代码转成ES5代码，之后再对ES5代码进行压缩。
    1. 把ES6代码转成ES5代码。
    2. ，对ES5代码进行压缩。
  8. 使用时，使用的压缩后的css代码与js代码。

NativeApp与WebApp

NativeApp与WebApp的发展

  • NativeApp与WebApp

    • NativeApp：原生的App。
      • 技术栈：安卓开发（java-native）和IOS开发（object-c/swift）。
        • 和前端没多大关系。
      • 相关特点：
        • 直接安装和运行在手机操作系统中的。
          • 应用商店 --> 下载 --> 安装。
        • 优势：
          • 性能强。
          • 操作体验好。
          • 功能强大。
            • 可以直接调用手机各种软硬件，前提需要用户同意。
          • 支持离线缓存…
        • 弊端：
          • 不能跨平台。
            • 需要招聘两个开发团队，开发两套产品。
          • 开发的app需要上传到应用商店。
            • 有审核。
          • 很多内容需要用户自主更新才可以看到！
          • …
    • WebApp：H5页面。
      • 技术栈：前端开发相关的技术栈。
      • 相关特点：
        • 无需安装，直接在手机端的浏览器或webview中运行。
          • 浏览器 --> 输入网址/或扫码 --> 预览页面。
        • 优势：
          • 可以跨平台。
            • 只需要开发一套产品，安卓/IOS中的浏览器基本上都是webkit内核。
          • 无需上传应用商店。
            • 不需要审核。
          • 用户看到的永远都是最新的。
          • …
        • 弊端：
          • 性能和操作体验都差一些。
            • 只不过随着技术发展，H5的操作体验也起来越好了。
          • 无法直接调用手机的软硬件。
            • 如需调用这些功能，需要宿主环境的支持。
          • 离线缓存效果差。
          • …
    • 所以当代移动端App的开发，是把NativeApp和WebApp混合在一起来使用的！
      • 我们把这种方式称之为：Hybrid混合App开发！

  • 随着科技的发展，H5占据一款App的比例越来越高，Native比例在快速的降低，直到有的App，Native只需要搭建一个壳子，内部全部都是H5来写的…

  • 后来出现了一些前端框架，可以帮助我们快速构建出一个App应用的壳子。

    1. 也就是把我们写的H5套一层App的壳子。
    • PhoneGap。
    • Cordova。
    • …

  • 再后来经过逐步的完善，出现了移动端App开发的前端框架：

    • 主要框架类型：
      • RN（ReactNative），基于React语法。
      • uni-app，基于Vue语法。
      • flutter，基于dart语法。
      • …
    • 它们属于：基于js编写代码，最后框架会把我们写的代码，编译为IOS和安卓的代码，实现真正的NativeApp！

  • 目前开发App已经是过去式了。开发出来，也不容易推广。目前主流的模式是小程序！

    • 小程序全部是前端的活。和IOS/安卓没有半毛钱关系。
    • 小程序的原理：按照平台既定的语法和提供的组件，去实现小程序的相关页面、样式、功能，在小程序内部也可以调用平台提供的方法。最后把开发完毕的小程序，部署到指定的平台。
      1. 语法和平时前端开发类型，但是也有一些区别。
      2. 在小程序内部也可以调用平台提供的方法…
      • 目前有一些前端框架，只需要我们写一套代码，就可以生成多套小程序。
        • uni-app，Vue语法。
        • taro，React语法。
        • …

Hybrid混合App开发

  1. App本身的壳子由NativeApp来处理。
    • 实现手机软硬件的调取。
    • 一些追求极致体验的效果，也由NativeApp来完成。
    • NativeApp有一个webview框架，类似于浏览器的webkit内核。
    • …
  2. 目前，一些需要常规展示和操作的功能，基本上都交给H5开发。
    • 把H5页面嵌入到NativeApp的webview框架中。
      • 我们只需要把部署后的H5页面地址给原生开发，他们会帮着把H5嵌入到webview框架中。
    • …
  • H5和NativeApp的通信问题。

    • 方案一：jsBridge-主流模式，适用于IOS和安卓。

      1. 编写一个BridgeJS文件，文件中实现了调用NativeApp的方法。
      2. 在H5页面中，只需要导入这个文件，这样在window全局对象上，就拥有了调用NativeApp的方法，按照要求直接调用即可！
      • 核心：BridgeJS文件。
        • 有些这个是前端来写，有些是安卓和IOS已经帮着实现了。
      • 例如：在微信App（NativeApp）中渲染H5页面，我们需要在H5中，调用微信App的一些功能（比如分享、支付…）。

        1. 在H5页面中，导入微信写好的jsBridge文件。

        2. 基于wx.config(…)执行一些初始的配置。

          wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [] // 必填，需要使用的JS接口列表
});

        3. 基于wx对象上的方法，调用微信提供的api。

          wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
  wx.updateAppMessageShareData({ 
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: '', // 分享图标
    success: function () {
      // 设置成功
    }
  })
});

    • 方案二：URL劫持-适用于IOS。

      • 原理：因为H5是运行在NativeApp中的，所以H5中的任何操作，原生App都可以知道，例如页面跳转。

        location.href=`wx://xxx.cn/xxx`
//其中：`wx://`是伪协议，是我们和原生商量好的，只要我跳转这样的地址，原生就进行拦截！
//基于拦截，原生就知道了我们要请求的功能和传递的参数，然后帮我们调用其所实现的某个方法即可！

进阶参考

方朝端
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
基于Uni-app+Node.js音乐听歌系统的设计与实现
06-06
技术需求：前端采用Uni-app框架，框架语法为Vue + 小程序，基于组件、路由、状态管理、MVVM响应式数据等；后端采用Express + CSRF完成数据接口开发等。系统设计目标：可以方便的浏览音乐排行榜、搜索指定音乐；轻松...
web-app-template:与框架无关的Web应用程序模板
05-25
与框架无关的Web应用程序模板。 这个项目类似于只是React被删除了。 先决条件 安装 克隆存储库： git clone https://github.com/remarkablemark/web-app-template.git cd web-app-template 重命名项目： git grep...
docker部署（使用docker-compose）手把手教程
qq_38377190的博客
06-29 2万+
二、docker部署（使用docker-compose） docker-compose.yml 文件内容 2.1 安装docker（服务器：CentOS 7或更高版本） 2.2 安装docker 2.3 构建镜像供docker-compose使用 在服务器上单独新建文件夹名为ruoyi-admindockerfile文件如下 执行如下命令 这就构建出本地的镜像了。 依次再构建出ruoyi/ruoyi-xxl-job-admin和ruoyi/ruoyi-monitor-adm
UniApp项目中引入Vant-Weapp的终极指南：详解局部全局引入的最佳方法
weixin_57905352的博客
06-08 2万+
uniapp项目中引入vant-Weapp（局部全局都有 史上最详细的方法，亲测有效）
【愚公系列】2023年10月 Java教学课程 121-IDEA使用Tomcat
热门推荐
时光隧道
01-24 3万+
Tomcat 是由 Apache 开发的一个 Servlet 容器，实现了对Servlet 和 JSP 的支持，并提供了作为Web服务器的一些特有功能，如Tomcat管理和控制平台、安全域管理和Tomcat阀等。由于 Tomcat 本身也内含了一个 HTTP 服务器，它也可以被视作一个单独的 Web 服务器。但是，不能将 Tomcat 和 Apache HTTP 服务器混淆，ApacheHTTP 服务器是一个用 C 语言实现的 HTTP Web 服务器；
图文讲解uni-app支持PC宽屏
hbcui1984的专栏
10-22 7048
天下苦平台碎片化已久。 在移动互联网以前，开发者只需幸福的面对web。进入移动互联网时代，iOS、Android、H5以及各种小程序快应用层出不穷，开发者再也幸福不起来。 学习n个技术 开发n个版本 各版迭代混乱，无法拉齐，用户茫然、内部痛苦 开发测试成本n倍暴涨 结果就是工程师不停加班到头秃，但产品的需求仍然做不完、老板的预算一直压不下去，全都痛苦。 uni-app之前已经实现了手机端全覆盖，支持iOS、Android、H5、微信小程序、阿里小程序、百度小程序、字节跳动小程序、QQ小程序、快应用、36
idea2020解决webapp下没有WEB-INF
目标架构师
01-31 3378
idea2020解决webapp下没有WEB-INF
5-1 柱图开发简介.mp4
最新发布
04-11
组件方式开发 Web App全站\第05章 图表组件-柱状图组件开发
4-2 散点图原理分析.mp4
04-11
组件方式开发 Web App全站\第04章 图表组件-散点图组件开发
4-4 散点图开发(位置设置).mp4
04-11
组件方式开发 Web App全站\第04章 图表组件-散点图组件开发
20230620----重返学习-移动端事件处理-响应式
seetoyou的博客
06-20 2597
day-095-ninety-five-20230620-移动端事件处理-响应式 移动端事件处理 移动端的事件处理 移动端事件处理 PC端主要以：鼠标事件、键盘事件、资源加载事件、动画事件等事件为主。 其中click在PC端是点击事件！ 移动端主要以：手指事件（单手指和多手指）、资源加载事件、动画事件等为主。 其中，click在移动端是单击事件。 移动端事件问题 移动端事件的各个问题： 问题1：click事件在移动端存在300ms的延迟。 原因： click事件在移动端是单击
2022-04-26 跳出特定for循环，JavaScript中的label语法
seetoyou的博客
04-26 1862
原理 标记语句可以和 break 或 continue 语句一起使用。标记就是在一条语句前面加个可以引用的标识符 标签语句用于给语句加标签，语法如下： label: statement 下面是一个例子： start: for (let i = 0; i < count; i++) { console.log(i); } 在这个例子中，start是一个标签，可以在后面通过break或continue语句引用。标签语句的典型应用场景是嵌套循环。 label语句只在以下场景中使用： for 语句 d
20230621----重返学习-仿QQ音乐播放器-静态页面的免费部署-vue2
seetoyou的博客
06-21 1392
audio标签标签的属性各浏览器对不用音频格式的支持是不一样的可以在audio标签用内部使用source来指定可以使用的音频源。</audio标签对应的DOM元素对象的常见属性</</let;/*currentTime:存储了当前播放的时间「单位秒」duration:存储了总的时间ended:true/false 是否播放完毕paused:true/false 当前是否为暂停的volume:0~1 控制音量的 1最大音量 0静音play方法：控制音频播放pause方法：控制播放暂停。
20230614----重返学习-HTTP网络-辅助知识-前端性能优化
seetoyou的博客
06-14 1108
从输入URL地址到看到页面，中间都经历了啥第一步：URL地址解析。httphttpsHTTPSSLftp上传内容下载内容0~65535第二步：缓存检查Expireshttp/1.0http/1.1Expires具备在效期的缓存信息html页面强缓存webpack编译唯一hash值代码修改每次打包不同的文件html页面最新的文件强缓存服务器资源最新资源本地缓存协商缓存协商缓存强缓存强缓存协商缓存协商缓存的机制HTTP/1.0ETagHTTP/1.1ETag第三步：DNS解析DNS解析递归查询。
E4X已经被废弃,各浏览器基本上不再支持它;
seetoyou的博客
04-29 971
E4X是一种在ECMAScript标准的基础上加入的动态XML支持的程序语言扩展. 到2019年,目前主流浏览器已经不太支持它了,一些版本的Firefox浏览器或许还可以使用,但它已经在主流浏览器的主流版本中基本上不再受到支持了;也就是说E4X已被遗弃! Firefox1.5+支持它,但在Firefox 17默认网页中已被禁用,Firefox 20浏览器默认禁用,并已在Firefox 21删除...
删除node_modules文件夹cmd指令 - 20201015
seetoyou的博客
10-15 749
方法 方法一： 　rm -f /node_modules cmd原生命令。只要支持cmd就可以使用。 方法二： rmdir /s/q your_app_dir 原生node方法，redir为node删除文件夹及文件命令。 需要先安装node环境。 方法三： npm install rimraf -g rimraf node_modules 使用npm引入npm全局包，之后执行node命令。 需要先安装node环境，同时还需要用到node环境自带的包管理工具npm。 参考 删除 node_
2019年在浏览器用原生js写WebGL,绘制图形;
seetoyou的博客
04-18 676
因为JavaScript高级程序设计(第三版)中的运行书上15.3WebGL部分的代码时在chrome和firefox浏览器下报错,在后面我网上初步找了一圈,好像没人做出真正可以用的代码;所以我就自己重写了一下: 书上代码有些错误,错误原因应该是书出了太久,WebGL的规则已经有些改变了.并且,可能浏览器也有一些相关的规则改变了; 新的代码如下: <!DOCTYPE html> &lt...
2021-07-01 原生js获取文件数据
seetoyou的博客
07-01 589
原理 手动用js创建一个type为file的DOM元素。 在读取到数据后，清空手动创建的DOM元素。返回得到的Promise类型的文件数据files。 const getFilesPromise = async () => { let thePromise = new Promise((resolve, reject) => { let theElement = document.createElement("input"); theElement.type = "fil
cas-server-webapp-tomcat 引入
09-17
cas-server-webapp-tomcat是一个用于支持CAS（Central Authentication Service）单点登录的Web应用程序，它是基于Tomcat服务器引入的。 CAS是一种常见的单点登录协议，它允许用户在一次登录后可以访问多个不同应用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值