moveable 一个可实现前端海报编辑器的 js 库

目录

  • 缘由-胡扯
  • 本文实验环境
  • 通用流程
  • 1.基础移动
    • 1.1 基础代码
      • 1.1.1 data-* 解释
    • 1.2 操作元素创建
    • 1.3 css 修饰
    • 1.4 cdn 引入
    • 1.5 js 实现元素可移动
    • 1.6 图片拖拽
    • 2.缩放
    • 3.旋转
    • 4.裁剪

懒得改文案了，海报编辑器换方案了，如果后面用别的再更。

缘由-胡扯

导火索：睡不着，现在是 25/1/25 快早上了

在这段时间突然有了一个新项目，该项目与前端通过 img 素材编辑一个海报有相同的需求点，又或者说该需求是弱于海报编辑的。

最开始，我是打算直接通过 js 直接实现对应的功能，但是总有一些小bug，刚好公司的前端推给我了 moveable，瞟了一眼后，发现需求完美符合，moveable 可实现前端对单个、多个元素的拖拽、组合、编辑、缩放、旋转、拉扯等操作，甚至于有一种“杀鸡焉用牛刀之感”。

但随着项目的迭代，未来的需求不可得知，但用发展的眼光看待这个项目的话，直接实现一个海报编辑器是最优的选择。

接下来我把我总结的 moveable 编写为教程，包括海报编辑器的制作写在该文之中，计划上下两篇，毕竟一篇使用基础，另一篇就是编辑器的制作。

想必，各位也不想在二次开发的时候看不懂 moveable 的实现逻辑吧，能平滑过渡就平滑过渡吧，大家的脑子都不想承载过多的计算，张飞：俺也一样。

本文实验环境

系统：Windows
前端：html
框架：无
js：其实我不是前端，就当是原生吧，因为笔者并不熟悉标准
编辑器：vs code
参考示例：https://daybrush.com/moveable/storybook/index.html
GitHub：https://github.com/daybrush/moveable
apidoc：https://daybrush.com/moveable/release/latest/doc/

通用流程

首先在此通过 vs 编写一个基础的 html （快捷键感叹号会自动弹出，选择单感叹号即可）：
在这里插入图片描述
此时选择之后将会创建一个基础的 html 基础代码（如果没有的就直接复制吧）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

1.基础移动

1.1 基础代码

我们首先实现 moveable 对元素的基础移动。

要实现 moveable 的基础移动需要创建一个 div 为其根容器，此时我们在 body 元素下创建一个 div ，并给与样式修饰 class="root"，此处的样式修饰并不是必须项，在此只是为了更好的进行演示，当然，在 storybook 上给与的官方示例也是如此。

此时在基础的 html 元素中的 body 下，创建一个 div 为根节点，代码如下：

<div class="root"></div>

那么此时根节点有了，接下来就需要创建 moveable 的容器。你听的没错，这是一个比较通用的概念，实现某个特殊的元素时，使用一个容器作为存储是一个非常常见的方式。

此时在根节点下，创建一个 div 为容器：

<div class="root">
    <div class="container" data-croffle-ref="element$0"></div>
</div>

在以上的 html 代码中，样式修饰为 class="container" 则是容器的元素节点，但可能你对这个节点的疑问在 data-croffle-ref="element$0"，如果没疑问就更好了，在此给一些不理解这个元素属性的读者做一下解释。

1.1.1 data-* 解释

在以上代码中 data-croffle-ref 为 html5 引入的一种机制，这个机制简单的来说是让开发者在不影响本身元素的语义的情况下，为当前元素增加新的元数据，又或者说开发者自定义了当前元素的属性。

一般 data-* 自定义元数据可以与 document.querySelector 搭配，准确的找到对应的元数据，接下来在编写 js 代码时将会解释这一部分。

在这里，读者可以理解为此时定义了一个 moveable 的容器，并且自定义了一个属性 croffle-ref，但由于自定义属性的编写方式为带前缀 data-，即编写为 data-croffle-ref="element$0"，其中 element$0 为这个自定义属性的值。

1.2 操作元素创建

当创建完操作元素的容器后，接下来创建用于控制的元素，则创建一个拖动、缩放、选择等操作的元素。

毕竟我们的目标就是添加不同的图片到当前编辑器，并对这些图片进行拖拽、旋转、缩放等操作。

此时在容器下添加一个 div 用于存放对应的操作元素，此时 body 下的html 代码如下：

<div class="root">
    <div class="container" data-croffle-ref="element$0">
        <div class="target" data-croffle-ref="targetRef">Target</div>
    </div>
</div>

以上代码中，样式修饰为 class="target" 的 div 元素则为我们的操作元素，并且这个元素由于 moveable 的机制，给与了 data-croffle-ref="targetRef" 的自定义属性，并且这个 div 的内容为 Target 文本。

1.3 css 修饰

其实也不需要修饰，但是没有样式的话可能读者会觉得很奇怪，读者可以将 css 删除查看效果，最后发现还是加上 css 的为好（示例摘抄于 storybook 但做了精简和增加了便于文章讲解的额外内容）。

css 直接复制在 head 上即可，在此处已经给与了 style 标签：

<style>
.root {
    position: relative;
}

.container {
    position: relative;
    margin-top: 50px;
}

.target {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 150px;
    left: 100px;
    line-height: 100px;
    text-align: center;
    background: #ee8;
    color: #333;
    font-weight: bold;
    border: 1px solid #333;
    box-sizing: border-box;
}
</style>

以上标签中，给与了 root 根元素与容器 root 的定位方式为相对定位，接着给与了操作元素 target 的样式为一个黄色的矩形框。

css 的话我不做多的解释，其实这是布局设计问题，咱们若不是前端就直接看详细的功能实现即可，若是前端页不用说对吧，如果不懂的直接复制即可，毕竟这是个样式，没有设计到特效动效制作。

接下来 cdn 引入后会给出这一部分的代码：

1.4 cdn 引入

以下是 moveable 的 cdn：

<script src="https://cdnjs.cloudflare.com/ajax/libs/moveable/0.53.0/moveable.min.js"
        integrity="sha512-gFIuV9WCEJeWYkY1ZdJXugypot9ooEtwJf6U8In5JR6z5ZvV1xAvAQe9mQ7IYBXiF9ICXyiCeqgCJzqf64wh7A=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>

如果 cdn 引入有问题，可以在 https://cdnjs.com/libraries/moveable 查看。

此处我也给予 moveable.min.js 的下载地址：TODO

此时的代码（除 js 外应该是这样）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>csdn 1_bit moveable how to use</title>
    <style>
        .root {
            position: relative;
        }

        .container {
            position: relative;
            margin-top: 50px;
        }

        .target {
            position: absolute;
            width: 100px;
            height: 100px;
            top: 150px;
            left: 100px;
            line-height: 100px;
            text-align: center;
            background: #ee8;
            color: #333;
            font-weight: bold;
            border: 1px solid #333;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div class="root">
        <div class="container" data-croffle-ref="element$0">
            <div class="target" data-croffle-ref="targetRef">Target</div>
        </div>
    </div>
</body>

</html>

1.5 js 实现元素可移动

在 moveable 中，若想让一个元素可移动其实很简单，在此我先列出代码：

const element$0 = document.querySelector(`[data-croffle-ref="element$0"]`);
const targetRef = document.querySelector(`[data-croffle-ref="targetRef"]`);

const moveable$0 = new Moveable(
	element$0, 
	{
	    target: targetRef,
	    draggable: true,
	    throttleDrag: 1,
	    edgeDraggable: false,
	    startDragRotate: 0,
	    throttleDragRotate: 0
	}
);

moveable$0.on("drag", e => {
    e.target.style.transform = e.transform;
});

首先我们看最开始的两行，这两行都是通过 document.querySelector 寻找元素，其中一个元素是[data-croffle-ref="element$0"] 为容器元素，另一个为 [data-croffle-ref="targetRef"] 为操作元素。

容器元素与操作元素的获取这两者是必不可少的，通过确定这俩者从而进行控制。

之前也说过 document.querySelector 与自定义元素搭配即可精确找到元素，在此列出代码后不再赘述了。

在找到元素后，直接 new 一个 Moveable，其中第一个参数传入的是在 html 中定义的 element$0；第二个参数则是操作参数，则你需要如何操作这个元素。

第二个参数为一个字典，在字典中指定了操作的元素 target 为 targetRef，当前全部 key 键的解释如下：

  • target 操作的目标元素
  • draggable 目标元素是否可拖动
  • throttleDrag 拖动的延时毫秒数，设置为 0 则表示实时更新
  • edgeDraggable 表示目标的边缘是否可拖动
  • startDragRotate 当鼠标旋转多少后才使元素进行转动
  • throttleDragRotate 旋转的延时毫秒数，设置为 0 则表示实时更新

你可能在思考，当前操作只是移动目标元素，并没有进行旋转等操作，为什么会有这些参数。

其实当前示例时摘抄于 storybook 之上，在此列出为方便 查看 storybook 演示的读者作为解释，当前示例并不需要那么多的参数，只需要传入如下字典即可实现拖拽操作：

{
    target: targetRef,//目标元素
    draggable: true//是否可拖拽
}

那么最后的代码：

moveable$0.on("drag", e => {
    e.target.style.transform = e.transform;
});

则表示为 Moveable 实例的 drag 事件添加一个事件监听器，当目标元素被拖动时，会触发这个事件监听器；其中代码为 e.target.style.transform = e.transform; 则表示事件对象 e 包含了拖动操作的相关信息，其中 e.transform 是拖动后的变换样式，将 e.transform 的值赋给目标元素的 style.transform 属性，更新目标元素的位置。

此时当前拖拽的所有代码如下（省略了 style 样式，直接复制在 1.3 中的 css 即可）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>csdn 1_bit moveable how to use</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moveable/0.53.0/moveable.min.js"
        integrity="sha512-gFIuV9WCEJeWYkY1ZdJXugypot9ooEtwJf6U8In5JR6z5ZvV1xAvAQe9mQ7IYBXiF9ICXyiCeqgCJzqf64wh7A=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>

<body>
    <div class="root">
        <div class="container" data-croffle-ref="element$0">
            <div class="target" data-croffle-ref="targetRef">Target</div>
        </div>
    </div>
    <script>
        const element$0 = document.querySelector(`[data-croffle-ref="element$0"]`);
        const targetRef = document.querySelector(`[data-croffle-ref="targetRef"]`);
        const moveable$0 = new Moveable(element$0, {
            target: targetRef,
            draggable: true
        });

        moveable$0.on("drag", e => {
            e.target.style.transform = e.transform;
        });
    </script>
</body>

</html>

此时效果如下：
请添加图片描述
你可能会想，如果咱们可是使用的是图片，并不是文字，不要担心，图片他来了。

1.6 图片拖拽

此时在 html 中，操作元素是通过一个容器进行包裹的，既然是容器，那么是包裹整个操作元素的，那么此时我们只需要将操作元素下添加一个图片即可。

例如在操作元素下添加一个 img 标签：

<div class="target" data-croffle-ref="targetRef">
    <img src="1.jpg" alt="" style="width: 100px;height: 100px;">
</div>

此时我给与了这个 img 的样式修饰 style="width: 100px;height: 100px;"，此时的样式修饰是为了满足操作元素的大小，否则将会超出（虽然不会影响当前的功能，但美观上接收不了，之后将会用更加“优雅”的方式解决这个问题）。

图片各位自己放到自己的路径下即可，在此不在赘述，此时的结果如下：
请添加图片描述

2.缩放

注意：以下 html 代码与 第 1 小点 相同
使用 moveable 还可以对添加的图片进行缩放，只需要 new 一个Moveable 时传入不同的参数即可：

const moveable$0 = new Moveable(element$0, {
    target: targetRef,
    scalable: true,// 启用缩放功能，设置为 true 表示允许对目标元素进行缩放操作
    keepRatio: false,// 将 keepRatio 变量的值赋给配置对象的 keepRatio 属性，控制缩放时是否保持宽高比
    renderDirections: renderDirections
});

其中参数定义如下：

  • scalable 启用缩放功能，设置为 true 表示允许对目标元素进行缩放操作
  • keepRatio 控制缩放时是否保持宽高比
  • false为不保持 renderDirections 控制显示缩放的控制点

其中 scalable 与 keepRatio 都比较好理解，只有 renderDirections 较为陌生。

renderDirections 是一个 list，这个list 存储了要显示控制点的内容，例如这个 renderDirections 的代码为 const renderDirections = ["n", "s"]; 则表示在北部和南部有一个控制点，即如下图所示：

在这里插入图片描述
此时具体 js 代码部分如下：

const renderDirections = ["n", "s"];
const element$0 = document.querySelector(`[data-croffle-ref="element$0"]`);
const targetRef = document.querySelector(`[data-croffle-ref="targetRef"]`);
const moveable$0 = new Moveable(element$0, {
    target: targetRef,
    scalable: true,// 启用缩放功能，设置为 true 表示允许对目标元素进行缩放操作
    keepRatio: false,// 控制缩放时是否保持宽高比
    renderDirections: renderDirections
});


moveable$0.on("scale", e => {
    e.target.style.transform = e.drag.transform;
});

其中代码：

moveable$0.on("scale", e => {
    e.target.style.transform = e.drag.transform;
});

为表示监听 scale 缩放事件，通过 e.drag.transform 得到最新的样式信息给予到目标元素即可改变以及重新绘制。

此时还可以更改 renderDirections 为 const renderDirections = ["nw","n","ne","w","e","sw","s","se"];，其中 nw 表示东南、ne 表示西南、以此类推运行代码后展现如下：
在这里插入图片描述
其展示效果如下：
请添加图片描述
若将 keepRatio: false,// 控制缩放时是否保持宽高比 改成 true，效果如下：

请添加图片描述

3.旋转

设定目标是否可进行旋转也只是需要 new 一个 moveable 时传入的参数即可：

const moveable$0 = new Moveable(element$0, {
    target: targetRef,
    rotatable: true,
    rotationPosition: rotationPosition
});

参数说明如下：

  • rotatable 控制目标元素是否可旋转 true 为允许
  • rotationPosition 指定旋转控制点的位置

以上代码中 rotationPosition 设置为字符串类型的 val 为 “top” 即可，即：const rotationPosition = "top";

之后为 moveable$0 设置 rotate 事件监听：

moveable$0.on("rotate", e => {
    e.target.style.transform = e.drag.transform;
});

那么即可设置目标元素的响应。

完整的 js 代码如下：

const rotationPosition = "top";
const element$0 = document.querySelector(`[data-croffle-ref="element$0"]`);
const targetRef = document.querySelector(`[data-croffle-ref="targetRef"]`);
const moveable$0 = new Moveable(element$0, {
    target: targetRef,
    rotatable: true,// 控制目标元素是否可旋转
    rotationPosition: rotationPosition// 指定旋转控制点的位置
});
moveable$0.on("rotate", e => {
    e.target.style.transform = e.drag.transform;
});

此时的 html 代码并不需要修改，此时页面所展示的内容如下：

在这里插入图片描述
此时的控制点在顶部，若设置 rotationPosition 为 bottom const rotationPosition = "bottom"; 时页面展示效果如下：

在这里插入图片描述
此时的操作效果如下：
请添加图片描述

4.裁剪

在 moveable 中，一般情况下，只需要在 new moveable 时传入不同的参数即可对操作目标开启不同的操作，最后再为其添加对应操作的事件响应，即可完成对开启的操作完成监听。

以下是一个完成裁剪功能的 moveable 代码：

const moveable$0 = new Moveable(element$0, {
    target: targetRef,
    draggable: true,
    clippable: true,
    clipTargetBounds: false,
});

以下为各个新增参数的解释：

  • draggable 控制目标元素是否可拖动
  • clippable 控制目标元素是否可裁剪
  • clipRelative 控制裁剪区域的定位方式
  • clipTargetBounds 控制裁剪区域是否受目标元素边界限制

此时读者可能发现，以上再 new moveable 时允许目标可拖动以及目标可剪切，那我该怎么样监听两个事件呢？其实很简单，只需要使用 on 监听两个事件即可，即：

moveable$0.on("drag", e => {
    e.target.style.transform = e.transform;
});
moveable$0.on("clip", e => {
    e.target.style.clipPath = e.clipStyle;
});

再 drag 时给与 e.transform 到 e.target.style.transform 的 transform 即可，再 clip 时给与 e.clipStyle 到 e.target.style.clipPath 即可。

接下来我们继续回到参数之中，其中 clipTargetBounds 表示在裁剪时会不会超出区域了还可以裁剪，当设置为 true 时不允许过边界（蓝框裁剪），结果如下：

请添加图片描述
如果设置为 false则允许过边界，效果如下（也演示了拖拽效果）：
请添加图片描述
此时完整的js 代码如下（html 不需要进行修改）：

const element$0 = document.querySelector(`[data-croffle-ref="element$0"]`);
const targetRef = document.querySelector(`[data-croffle-ref="targetRef"]`);

const moveable$0 = new Moveable(element$0, {
    target: targetRef,
    draggable: true,
    clippable: true,
    clipTargetBounds: false,
});

moveable$0.on("drag", e => {
    e.target.style.transform = e.transform;
});

moveable$0.on("clip", e => {
    e.target.style.clipPath = e.clipStyle;
});

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/970274.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

滑动窗口算法篇：连续子区间与子串问题

滑动窗口算法篇：连续子区间与子串问题

1.滑动窗口原理 那么一谈到子区间的问题&#xff0c;我们可能会想到我们可以用我们的前缀和来应用子区间问题&#xff0c;但是这里对于子区间乃至子串问题&#xff0c;我们也可以尝试往滑动窗口的思路方向去进行一个尝试&#xff0c;那么说那么半天&#xff0c;滑动窗口是什么…
阅读更多...
resultType，jdbcType，parameterType区别

resultType，jdbcType，parameterType区别

1. resultType 用途&#xff1a; 用于定义 SQL 查询结果的返回类型。 直接将查询结果映射到指定的 Java 类型&#xff08;基本类型、POJO 或 Map&#xff09;。 特点&#xff1a; 要求数据库字段名与 Java 对象的属性名完全一致&#xff08;或通过别名匹配&#xff09;。 …
阅读更多...
数字化转型导师坚鹏：AI大模型DEEPSEEK使用方法及案例

数字化转型导师坚鹏：AI大模型DEEPSEEK使用方法及案例

AI大模型DEEPSEEK使用方法及案例 ——提升职场人士工作效率 打造数字化转型新利器 课程背景&#xff1a; 很多企业和员工存在以下问题&#xff1a; 不知道DEEPSEEK的发展现状及价值&#xff1f;不知道DEEPSEEK提示词设计方法论&#xff1f;不知道DEEPSEEK的针对性使用案例&…
阅读更多...
Spring Boot项目接收前端参数的11种方式

Spring Boot项目接收前端参数的11种方式

大家好&#xff0c;我是。在前后端项目交互中&#xff0c;前端传递的数据可以通过HTTP请求发送到后端&#xff0c; 后端在Spring Boot中如何接收各种复杂的前端数据呢&#xff1f;这篇文章总结了11种在Spring Boot中接收前端数据的方式。 1 搭建项目 1.通过Spring Initializr…
阅读更多...
Deesek：新一代数据处理与分析框架实战指南

Deesek：新一代数据处理与分析框架实战指南

Deesek&#xff1a;新一代数据处理与分析框架实战指南 引言 在大数据时代&#xff0c;高效处理和分析海量数据是企业和开发者面临的核心挑战。传统工具如Pandas、Spark等虽功能强大&#xff0c;但在实时性、易用性或性能上仍有提升空间。Deesek&#xff08;假设名称&#xff…
阅读更多...
算法笔记 02 —— 入门模拟

算法笔记 02 —— 入门模拟

本系列为胡凡编著的算法笔记当中代码部分的精简版整理&#xff0c;笔者也在同时准备Leetcode刷题和实习面试&#xff0c;希望为有一定编码和数据结构基础的同学提供一份系统型的参考&#xff0c;以方便遗忘时的算法查阅、期末复习总览以及C学习参照。 目录 01 简单模拟 Ⅰ害…
阅读更多...
Node.js技术原理分析系列——Node.js调试能力分析

Node.js技术原理分析系列——Node.js调试能力分析

本文由体验技术团队屈金雄原创。 Node.js 是一个开源的、跨平台的 JavaScript 运行时环境&#xff0c;它允许开发者在服务器端运行 JavaScript 代码。Node.js 是基于 Chrome V8引擎构建的&#xff0c;专为高性能、高并发的网络应用而设计&#xff0c;广泛应用于构建服务器端应…
阅读更多...
LLaMA-Factory DeepSeek-R1 模型 微调基础教程

LLaMA-Factory DeepSeek-R1 模型 微调基础教程

LLaMA-Factory 模型 微调基础教程 LLaMA-FactoryLLaMA-Factory 下载 AnacondaAnaconda 环境创建软硬件依赖 详情LLaMA-Factory 依赖安装CUDA 安装量化 BitsAndBytes 安装可视化微调启动 数据集准备所需工具下载使用教程所需数据合并数据集预处理 DeepSeek-R1 可视化微调数据集处…
阅读更多...
Spring Boot实战：拦截器

Spring Boot实战：拦截器

一.拦截器快速入门 1.1了解拦截器 什么是拦截器&#xff1a; 概念 &#xff1a;拦截器是Spring框架提供的核功能之, 主要来拦截的请求, 在指定法前后, 根据业务需要执预先设定的代码。 也就是说, 允许开发员提前预定义些逻辑, 在的请求响应前后执. 也可以在请求前阻其执. …
阅读更多...
LabVIEW 用户界面设计基础原则

LabVIEW 用户界面设计基础原则

在设计LabVIEW VI的用户界面时&#xff0c;前面板的外观和布局至关重要。良好的设计不仅提升用户体验&#xff0c;还能提升界面的易用性和可操作性。以下是设计用户界面时的一些关键要点&#xff1a; 1. 前面板设计原则 交互性&#xff1a;组合相关的输入控件和显示控件&#x…
阅读更多...
qt-C++笔记之QGraphicsScene和 QGraphicsView中setScene、通过scene得到view、通过view得scene

qt-C++笔记之QGraphicsScene和 QGraphicsView中setScene、通过scene得到view、通过view得scene

qt-C++笔记之QGraphicsScene和 QGraphicsView中setScene、通过scene得到view、通过view得scene code review! 文章目录 qt-C++笔记之QGraphicsScene和 QGraphicsView中setScene、通过scene得到view、通过view得scene1.`setScene` 方法2.通过 `scene` 获取它的视图 (`views()`)…
阅读更多...
CI/CD部署打包方法

CI/CD部署打包方法

项目目前部署方式&#xff1a; 各地区服务器打包同一个runner&#xff08;需要互相排队&#xff0c;不并发&#xff09;各地区客户端可以并发打包&#xff0c;同个地区客户端打多个包需要排队 部署方法 下载gitlab-runner&#xff1a; https://docs.gitlab.com/runner/insta…
阅读更多...
【含文档+源码】基于Web的在线课堂测试课程考评系统的开发与实现

【含文档+源码】基于Web的在线课堂测试课程考评系统的开发与实现

项目介绍 本课程演示的是一款 基于Web的在线课堂测试课程考评系统的开发与实现&#xff0c;主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的 Java 学习者。 1.包含&#xff1a;项目源码、项目文档、数据库脚本、软件工具等所有资料 2.带你从零开始部署运行本套…
阅读更多...
【vscode】VScode Remote SSH配置

【vscode】VScode Remote SSH配置

VScode使用remote ssh 到服务器上的Docker容器中 1. 配置远程服务器docker容器的端口映射&#xff0c;例如将服务器的2222端口映射到container的22端口(默认) 1.1 在容器系统的sshd_config文件中配置参数 #配置文件 vim /etc/ssh/sshd_config #打开端口号 Port 221.2 建立容…
阅读更多...
2月第九讲“探秘Transformer系列”

2月第九讲“探秘Transformer系列”

0.1 流程 使用Transformer来进行文本生成其实就是用模型来预测下一个词&#xff0c;完整流程包括多个阶段&#xff0c;如分词、向量化、计算注意力和采样&#xff0c;具体运作流程如下&#xff1a; 分词&#xff08;tokenize&#xff09;。把用户的输入文本&#xff08;此处假…
阅读更多...
crewai框架(0.83.0)添加知识源

crewai框架(0.83.0)添加知识源

官方的文档如下 https://docs.crewai.com/concepts/knowledge但是不知道为什么&#xff0c;可能是版本的问题&#xff08;我用的是0.86.0&#xff09;&#xff0c;参考官方文档的配置我会报错&#xff0c;并且也导入不了数据库&#xff0c;也可能用的不是官方API。本文以常用的…
阅读更多...
deepseek + embeding模型搭建本地知识库

deepseek + embeding模型搭建本地知识库

上一篇文章讲了ollamadeepseek模型的本地化部署&#xff0c;具体能部署哪一款取决于你的土豪程度&#xff1a; 今天的目标是本地安装部署embeding模型&#xff0c;实现LLMembeding模型的rag知识库的本地化部署&#xff0c;包括&#xff1a; embeding模型的本地化部署anyhingL…
阅读更多...
2、树莓派5第一次开机三种方式：使用外设 / 使用网线 / 使用wifi

2、树莓派5第一次开机三种方式：使用外设 / 使用网线 / 使用wifi

本文整理了树莓派第一次开机方式&#xff0c;供大家参考 方式一&#xff1a;连接鼠标、键盘、显示器外设开机 树莓派自带USB接口及HDMI接口&#xff0c;因此可以通过USB连接鼠标键盘&#xff0c;HDMI接入显示器&#xff0c;再进行电源供电&#xff0c;就可以完成第一次开机 …
阅读更多...
案例-02.部门管理-查询

案例-02.部门管理-查询

一.查询部门-需求 二.查询部门-思路 API接口文档 三.代码实现 1.controller层&#xff1a;负责与前端进行交互&#xff0c;接收前端所发来的请求 注&#xff1a;Slf4j用于记录日志使用&#xff0c;可以省略private static Logger log LoggerFactory.getLogger(DeptControlle…
阅读更多...
小程序包体积优化指南：静态资源条件编译与分包编译技巧

小程序包体积优化指南：静态资源条件编译与分包编译技巧

在开发小程序时&#xff0c;可能大家都遇到过包体积超限的情况&#xff0c;这对多平台支持、用户体验和加载速度带来不少困扰。UniApp 提供了一些强大的功能&#xff0c;比如静态资源的条件编译和分包编译&#xff0c;这些功能可以帮助我们减少小程序的包体积&#xff0c;提高加…
阅读更多...
最新文章

Copyright @ 2022~2023