vue-quill-editor和vue-ueditor-wrap富文本编辑器应用

news2024/11/15 5:39:20

目录

一、vue-quill-editor

1.1、界面展示

1.2、代码介绍

1.2.1、安装

1.2.2、配置

1.2.3、代码应用

1.2.4、提取内容

二、vue-ueditor-wrap

2.1、界面展示

2.2、代码介绍

2.2.1、安装

2.2.2、配置

2.2.3、代码应用

一、vue-quill-editor

1.1、界面展示

文本输出：

<h1>字体大小测试</h1><ol><li><span class="ql-size-14px">14px测试</span></li><li><span class="ql-size-16px">16px测试</span></li><li><span class="ql-size-18px">18px测试</span></li><li><span class="ql-size-20px">20px测试</span></li><li><span class="ql-size-26px">26px测试</span></li><li><span class="ql-size-28px">28px测试</span></li></ol><p><span class="ql-size-28px"><span class="ql-cursor"> </span></span><img src="http://xxx.com/var/2024/0321/d62a0ccc-c436-4a29-9818-566bd2ce43ac.png"></p>

1.2、代码介绍

1.2.1、安装

cnpm install vue-quill-editor

cnpm install quill

1.2.2、配置

写在vue界面的<script>标签之后，export default{...}之前

import { quillEditor } from "vue-quill-editor";
import Quill from "quill";
import "quill/dist/quill.core.css"; // import styles
import "quill/dist/quill.snow.css"; // for snow theme
import "quill/dist/quill.bubble.css"; // for bubble theme
import { addQuillTitle } from "../../../utils/qulEditor.js";
import "./quillEditor.css";
// 设置字体
const fontFamily = [
  "SimSun",
  "SimHei",
  "Microsoft-YaHei",
  "KaiTi",
  "FangSong",
  "Arial",
  "Times-New-Roman",
  "sans-serif",
];
var Font = Quill.import("formats/font");
Font.whitelist = fontFamily;
Quill.register(Font, true);
// 设置字体大小
const fontSize = [
  "14px",
  "16px",
  "18px",
  "20px",
  "22px",
  "26px",
  "28px",
  "30px",
];
var Size = Quill.import("formats/size");
Size.whitelist = fontSize;
Quill.register(Size, true);

quillEditor.css内的样式

其中的 content: "14PX";原本是小写px，如果项目里有px To rem插件，建议手动改为大写字母，防止头部出现rem的字号下拉栏。

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimHei"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimHei"]::before {
    content: "黑体";
    font-family: "SimHei";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Microsoft-YaHei"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Microsoft-YaHei"]::before {
    content: "微软雅黑";
    font-family: "Microsoft YaHei";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="KaiTi"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="KaiTi"]::before {
    content: "楷体";
    font-family: "KaiTi";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="FangSong"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="FangSong"]::before {
    content: "仿宋";
    font-family: "FangSong";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Arial"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Arial"]::before {
    content: "Arial";
    font-family: "Arial";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Times-New-Roman"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Times-New-Roman"]::before {
    content: "Times New Roman";
    font-family: "Times New Roman";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="sans-serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="sans-serif"]::before {
    content: "sans-serif";
    font-family: "sans-serif";
}

.ql-font-SimSun {
    font-family: "SimSun";
}

.ql-font-SimHei {
    font-family: "SimHei";
}

.ql-font-Microsoft-YaHei {
    font-family: "Microsoft YaHei";
}

.ql-font-KaiTi {
    font-family: "KaiTi";
}

.ql-font-FangSong {
    font-family: "FangSong";
}

.ql-font-Arial {
    font-family: "Arial";
}

.ql-font-Times-New-Roman {
    font-family: "Times New Roman";
}

.ql-font-sans-serif {
    font-family: "sans-serif";
}

/* 字号设置 */
/* 默认字号 */
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: "14px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
    content: "14PX";
    font-size: 14px;
}

.ql-size-14px {
    font-size: 14px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
    content: "16PX";
    font-size: 16px;
}

.ql-size-16px {
    font-size: 16px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
    content: "18PX";
    font-size: 18px;
}

.ql-size-18px {
    font-size: 18px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
    content: "20PX";
    font-size: 20px;
}

.ql-size-20px {
    font-size: 20px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22px"]::before {
    content: "22PX";
    font-size: 22px;
}

.ql-size-22px {
    font-size: 22px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="26px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="26px"]::before {
    content: "26PX";
    font-size: 26px;
}

.ql-size-26px {
    font-size: 26px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28px"]::before {
    content: "28PX";
    font-size: 28px;
}

.ql-size-28px {
    font-size: 28px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="30px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="30px"]::before {
    content: "30PX";
    font-size: 30px;
}

.ql-size-30px {
    font-size: 30px;
}

qulEditor.js内的代码

// 给控件加名字
const titleConfig = {
    'ql-bold': '加粗',
    'ql-color': '字体颜色',
    'ql-font': '字体',
    'ql-code': '插入代码',
    'ql-italic': '斜体',
    'ql-link': '添加链接',
    'ql-background': '背景颜色',
    'ql-size': '字体大小',
    'ql-strike': '删除线',
    'ql-script': '上标/下标',
    'ql-underline': '下划线',
    'ql-blockquote': '引用',
    'ql-header': '标题',
    'ql-indent': '缩进',
    'ql-list': '列表',
    'ql-align': '文本对齐',
    'ql-direction': '文本方向',
    'ql-code-block': '代码块',
    'ql-formula': '公式',
    'ql-image': '图片',
    'ql-video': '视频',
    'ql-clean': '清除字体样式'
};
export function addQuillTitle() {
    const oToolBar = document.querySelector('.ql-toolbar'),
        aButton = oToolBar.querySelectorAll('button'),
        aSelect = oToolBar.querySelectorAll('select'),
        aSpan = oToolBar.querySelectorAll('span');
    aButton.forEach((item) => {
        if (item.className === 'ql-script') {
            item.value === 'sub' ? item.title = '下标' : item.title = '上标';
        } else if (item.className === 'ql-indent') {
            item.value === '+1' ? item.title = '向右缩进' : item.title = '向左缩进';
        } else if (item.className === 'ql-list') {
            item.value === 'ordered' ? item.title = '有序列表' : item.title = '无序列表'
        } else if (item.className === 'ql-header') {
            item.value === '1' ? item.title = '标题H1' : item.title = '标题H2';
        } else {
            item.title = titleConfig[item.classList[0]];
        }
    });
    aSelect.forEach((item) => {
        if (item.className != 'ql-color' && item.className != 'ql-background') {
            item.parentNode.title = titleConfig[item.classList[0]];
        }
    });
    aSpan.forEach((item) => {
        if (item.classList[0] === 'ql-color') {
            item.title = titleConfig[item.classList[0]];
        } else if (item.classList[0] === 'ql-background') {
            item.title = titleConfig[item.classList[0]];
        }
    });
}

1.2.3、代码应用

<template></template>内部

    <div class="edit_center">
      <!-- npm install vue-quill-editor -->
      <el-upload
        class="imgUpload"
        :action="'/api/upload/common'"
        :file-list="fileList"
        :on-success="uploadSuccessEdit"
        :show-file-list="false"
        :auto-upload="true"
        :headers="headers"
        :data="{ retainOriginalFileName: false }"
      >
      </el-upload>
      <quillEditor
        ref="quillEditor"
        v-model="defaultMsg"
        class="editor"
        :options="editorOptions"
        @change="onEditorChange($event)"
      />
    </div>

export default{...}内部

  components: {quillEditor},
  data() {
    return {
      fileList: [],
      headers: { "X-Access-Token": sessionStorage.getItem("edb-token") },
      content: "",
      defaultMsg: "",
      editorOptions: {
        theme: "snow",
        placeholder: "请输入正文（标题请用<H1>进行标记）",
        modules: {
          toolbar: {
            container: [
              ["bold", "italic", "underline", "strike"], // 加粗，斜体，下划线，删除线
              ["blockquote", "code-block"], // 引用，代码块
              [{ header: 1 }, { header: 2 }], // 几级标题
              [{ list: "ordered" }, { list: "bullet" }], // 有序列表，无序列表
              [{ script: "sub" }, { script: "super" }], // 下角标，上角标
              [{ indent: "-1" }, { indent: "+1" }], // 缩进
              [{ direction: "rtl" }], // 文字输入方向
              [{ size: fontSize }], // 修改这里为 fontSize 变量，确保正确显示字体大小选项
              [{ font: fontFamily }], // 字体
              [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
              [{ color: [] }, { background: [] }], // 颜色选择
              [{ align: [] }], // 居中
              ["clean"], // 清除样式,
              ["image"], // 上传图片、上传视频
            ],
            // 自定义处理插入图片 转为elementui的upload组件点击上传事件
            handlers: {
              image: function (val) {
                if (val) {
                  document.querySelector(".imgUpload input").click();
                } else {
                  this.quill.format("image", false);
                }
              },
            },
          },
        },
      },
    };
  },
  mounted() {
    addQuillTitle(); //鼠标划过添加提示
    // 获取编辑器的工具栏元素
    const toolbar = document.querySelector(".ql-toolbar");
    // 监听滚动事件
    window.addEventListener("scroll", function () {
      if (window.scrollY > 100) {
        // 当滚动超过一定距离时
        toolbar.style.position = "fixed"; // 固定工具栏
        toolbar.style.top = "0";
      } else {
        toolbar.style.position = "static"; // 恢复工具栏原始位置
      }
    });
  },
  methods: {
    //上传图片成功事件
    uploadSuccessEdit(res, file) {
      const quill = this.$refs.quillEditor.quill;
      if (res.code == 200) {
        const length = quill.getSelection().index;
        let prefix = sessionStorage.getItem("img_prefix");
        quill.insertEmbed(length, "image", `${prefix}${res.data.path}`);
        quill.setSelection(length + 1);
      } else {
        this.$message.error("插入图片失败");
      }
    },
    // 内容改变事件
    onEditorChange({ quill, html, text }) {
      console.log("html", html,"字数统计",text.length);
      this.defaultMsg = html; // 更新内容
    },
}

<style></style>内容

.edit_box {
  height: 90vh;
  background: white;
  padding: 0 20px;
  border-radius: 10px;
  .edit_center {
    padding-top: 10px;
    height: 630px;
    overflow: auto;
    /deep/ .quill-editor {
      height: 100% !important;
      overflow: auto !important;
    }
  }
}

1.2.4、提取内容

     // 创建一个新的div元素
      let div = document.createElement("div");
      div.innerHTML = this.defaultMsg;
      // 提取标题和内容（必须有一级标题才可以发布)
      let noticeTitle = div.querySelector("h1").textContent;
      // let h1Element = div.querySelector("h1");
      // h1Element.remove(); // 移除 h1 元素
      let noticeContent = div.innerHTML; // 获取移除 h1 后的 HTML 内容
      let params = {
        noticeTitle: noticeTitle,
        noticeContent: noticeContent,
      };

二、vue-ueditor-wrap

2.1、界面展示

2.2、代码介绍

2.2.1、安装

cnpm install vue-ueditor-wrap

2.2.2、配置

去git上下载文件夹或者网上搜索相关下载地址，下载好之后文件夹里面大概就是这些文件！

2.2.3、代码应用

<template></template>标签内

  <vue-ueditor-wrap
    ref="ueditorWrap"
    v-model="msg"
    :config="myConfig"
  ></vue-ueditor-wrap>

<script></script>标签后，export default {...}之前

import VueUeditorWrap from "vue-ueditor-wrap"; // ES6 Module
import "../../../static/ueditor/ueditor.config.js";
import "../../../static/ueditor/ueditor.all.js";
import "../../../static/ueditor/kityformula-plugin/addKityFormulaDialog.js";
import "../../../static/ueditor/kityformula-plugin/getKfContent.js";
import "../../../static/ueditor/kityformula-plugin/defaultFilterFix.js";

export default {...}内部

  components: {
    VueUeditorWrap,
  },
  props: {
    defaultMsg: String, //默认值
    selfToolbars: Array, //传入工具栏
  },
  data() {
    return {
      msg: this.defaultMsg,
      myConfig: {
        // 编辑器不自动被内容撑高
        // autoHeightEnabled: true,
        // 初始容器宽度
        initialFrameWidth: "100%",
        focus: true,
        // allowDivTransToP: false,
        // retainOnlyLabelPasted: true,//粘贴只保留标签，去除标签所有属性
        // pasteplain: true,//是否默认为纯文本粘贴。false为不使用纯文本粘贴，true为使用纯文本粘贴
        // 上传文件接口
        serverUrl: "/api/upload/common", //外网
        // serverUrl: "//192.168.142.251:8000/web/ueditor/server", //线上
        // serverUrl: "//192.168.1.27:8000/web/ueditor/server",
        // UEditor 资源文件的存放路径
        UEDITOR_HOME_URL: "/static/ueditor/",
        initialFrameHeight: 500, // 设置编辑器的初始高度，单位为像素
        toolbars: [
          [
            "undo",
            "redo",
            "|",
            "bold",
            "italic",
            "underline",
            "fontborder",
            "strikethrough",
            "superscript",
            "subscript",
            "autotypeset",
            "blockquote",
            "pasteplain",
            "|",
            "forecolor",
            "backcolor",
            "insertorderedlist",
            "insertunorderedlist",
            "selectall",
            "cleardoc",
            "|",
            "rowspacingtop",
            "rowspacingbottom",
            "lineheight",
            "|",
            "customstyle",
            "paragraph",
            "fontfamily",
            "fontsize",
            "|",
            "directionalityltr",
            "directionalityrtl",
            "indent",
            "|",
            "justifyleft",
            "justifycenter",
            "justifyright",
            "justifyjustify",
            "|",
            "touppercase",
            "tolowercase",
            "|",
            "imagenone",
            "imageleft",
            "imageright",
            "imagecenter",
            "|",
            "simpleupload",
            // "insertcode",//代码语言
            "pagebreak",
            "|",
            "horizontal",
            "date",
            "time",
            "|",
            "inserttable",
            "deletetable",
            "insertparagraphbeforetable",
            "insertrow",
            "deleterow",
            "insertcol",
            "deletecol",
            "mergecells",
            "mergeright",
            "mergedown",
            "splittocells",
            "splittorows",
            "splittocols",
          ],
        ],
        textarea: "请输入内容...", // 设置默认提示语
        editorInstance: null,
      },
    };
  },
  methods: {
    clearEvent() {
      document.removeEventListener("click", function (e) {
        flag = false;
      });
    },
  },
  watch: {
    msg(newVal, val) {
      this.$emit("ueditorChange", newVal);
    },
  },

上面是组件，用的时候进行引用

 你    <ueditor
        ref="ueditor"
        :defaultMsg="defaultMsg"
        @ueditorBlur="ueditorBlur"
        @ueditorChange="ueditorChange"
      ></ueditor>

el-dialog出现时vue-ueditor-wrap覆盖了el-dialog

    <el-dialog :visible="dialogVisible" @close="handleCloseDialog" :z-index="1000">
      <!-- el-dialog 内容 -->
    </el-dialog>

    <div class="ueditor-wrap" style="z-index: 999;">
      <!-- ueditor 富文本编辑器 -->
    </div>

备注：

  上传的图片一般都会上传到项目的服务器端，使用返回的http地址，否则在直接获取的html内容中src的值会出现很长的base64，不利于内容的保存！上传就看自己项目有没有封装好的组件直接使用就可以，上传地址自己找后端要就可以了！

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

极简自建web视频会议，私有云，rtmp/rtsp/webrtc一键参会直播会议互动方案

极简自建web视频会议，私有云，rtmp/rtsp/webrtc一键参会直播会议互动方案

随着视频互动深入工作日常&#xff0c;很多客户需要自建一个会议&#xff0c;监控的交互平台&#xff0c;目前外面不管是开源还是非开源的平台&#xff0c;都是极为复杂&#xff0c;一般linux安装库关联部署复杂&#xff0c;非技术人员根本没办法使用&#xff0c;不方便集成部署…
阅读更多...
C#基于SMTP的邮件发送

C#基于SMTP的邮件发送

准备工作 注册邮箱 首先我们需要注册一个作为发送邮件的邮箱&#xff0c;这一步可以直接进入网易邮箱官网进行注册&#xff0c; 注册地址&#xff1a;https://mail.163.com/ 这里我们可以选择【快速注册】和【普通注册】&#xff0c;如图1-1所示&#xff0c;这里我选择的普…
阅读更多...
vue3初步学习

vue3初步学习

vue3初步学习 vue模版 练习代码如下 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>实验4</ti…
阅读更多...
BAAI 北京智源研究院

BAAI 北京智源研究院

文章目录 关于 BAAI产品悟道大模型FlagOpen 大模型技术天演 生物智能九鼎 智算平台 关于 BAAI BAAI : Beijing Academy of Artificial Intelligence 北京智源研究院 官网&#xff1a;https://www.baai.ac.cnhf : https://huggingface.co/BAAI百度百科 https://baike.baidu.co…
阅读更多...
翻看去年录的幼儿园选择的视频，我被打脸了，真疼

翻看去年录的幼儿园选择的视频，我被打脸了，真疼

去年 7 月份发了一个幼儿园选择的视频&#xff0c;如今回头看&#xff0c;我被打脸了&#xff0c;真疼呀 去年的选择 省流版&#xff1a;当时我列了三种选择&#xff1a; 普惠公立幼儿园普惠私立或民办有政府补贴的幼儿园私立幼儿园 以下讨论是基于我个人情况&#xff0c;在北京…
阅读更多...
使用POI以OLE对象的形式向excel中插入附件（pdf为例）

使用POI以OLE对象的形式向excel中插入附件（pdf为例）

前言&#xff1a; 最近在使用easyExcel操作excel文件时&#xff0c;一直想找到一个方法可以往excel中填充附件&#xff0c;但是目前只发现POI可以插入附件&#xff0c;于是将方法记录如下&#xff1a; 实现&#xff1a; 这个方法主要是使用 Apache POI 的 HSSFWorkbook 类来…
阅读更多...
算法公式汇总

算法公式汇总

文章目录 三角函数定义式诱导公式平方关系两角和与差的三角函数积化和差公式和差化积公式倍角公式半角公式万能公式其他公式反三角函数恒等式 三角函数定义式 三角函数 定义式 余切&#xff1a; c o t A 1 t a n A \text { 余切&#xff1a;} \ cotA \frac{1}{tanA} 余切&a…
阅读更多...
javaWeb项目-高校社团活动管理平台功能介绍

javaWeb项目-高校社团活动管理平台功能介绍

开发工具&#xff1a;IDEA 、Eclipse 编程语言: Java 数据库: MySQL5.7 框架&#xff1a;ssm、Springboot 前端&#xff1a;Vue、ElementUI 关键技术&#xff1a;springboot、SSM、vue、MYSQL、MAVEN 数据库工具&#xff1a;Navicat、SQLyog 大学生社团活动平台&#xff1b;Ja…
阅读更多...
第十一届蓝桥杯大赛第二场省赛试题 CC++ 研究生组-子串分值和

第十一届蓝桥杯大赛第二场省赛试题 CC++ 研究生组-子串分值和

solution1&#xff08;通过40%&#xff09; 依次求子串并统计出现过的字母个数 #include<iostream> #include<string> #include<set> using namespace std; int main(){string s, subs;cin >> s;int len s.size(), ans 0;for(int j 1; j < len…
阅读更多...
AI开源概览及工具使用

AI开源概览及工具使用

一、前言 随着ChatGPT热度的攀升&#xff0c;越来越多的公司也相继推出了自己的AI大模型&#xff0c;如文心一言、通义千问等。各大应用也开始内置AI玩法&#xff0c;如抖音的AI特效&#xff1b; 关联资源&#xff1a;代码 GitHub、相关论文、项目Demo、产品文档、Grok Ai、gr…
阅读更多...
国内git最新版本下载链接2.44

国内git最新版本下载链接2.44

git官网地址:Git - Downloading Package (git-scm.com) 蓝奏云: ​​​​​​gGit-2.44.0-64-bit.exe - 蓝奏云 git仓库地址:git/git: Git Source Code Mirror - This is a publish-only repository but pull requests can be turned into patches to the mailing list via …
阅读更多...
机器学习：智能时代的核心引擎

机器学习：智能时代的核心引擎

目录 一、什么是机器学习 二、监督学习 三、无监督学习 四、半监督学习 五、强化学习 一、什么是机器学习 机器学习是人工智能的一个分支&#xff0c;它主要基于计算机科学&#xff0c;旨在使计算机系统能够自动地从经验和数据中进行学习并改进&#xff0c;而无需进行明确…
阅读更多...
LeetCode刷题【树状数组、并查集、二叉树】

LeetCode刷题【树状数组、并查集、二叉树】

目录 树状数组307. 区域和检索 - 数组可修改406. 根据身高重建队列673. 最长递增子序列的个数1409. 查询带键的排列 并查集128. 最长连续序列130. 被围绕的区域 二叉树94. 二叉树的中序遍历104. 二叉树的最大深度101. 对称二叉树543. 二叉树的直径108. 将有序数组转换为二叉搜索…
阅读更多...
JavaSE：类与对象

JavaSE：类与对象

目录 一、前言 二、类与对象的介绍 1.类的定义格式 三、类的实例化 1.类的实例化介绍 2.成员初始化 3.类中方法的实现 四、封装 1.private实现封装 2.getter和setter方法 五、构造方法的使用 1.构造方法的介绍 2.构造方法的特性 六、this引用 1.this的介绍 2.th…
阅读更多...
基于SpringBoot+MyBatis框架的智慧生活商城系统的设计与实现（源码+LW+部署+讲解）

基于SpringBoot+MyBatis框架的智慧生活商城系统的设计与实现（源码+LW+部署+讲解）

目录 前言 需求分析 可行性分析 技术实现 后端框架&#xff1a;Spring Boot 持久层框架&#xff1a;MyBatis 前端框架&#xff1a;Vue.js 数据库&#xff1a;MySQL 功能介绍 前台功能拓展 商品详情单管理 个人中心 秒杀活动 推荐系统 评论与评分系统 后台功能拓…
阅读更多...
【源码】I.MX6ULL移植OpenCV

【源码】I.MX6ULL移植OpenCV

编译完成的源码&#xff1a; git clone https://gitee.com/wangyoujie11/atkboard_-linux_-driver.git 1.下载源码放在自己的opecv源码目录下 2.QTOpenCV工程代码放置的位置 3.更改.pro工程文件的opencv地址 4.使用命令行编译 前提是自己环境中已经配置好arm-qt的交叉编译…
阅读更多...
【Langchain-Chatchat】部署ChatGLM3-6B-32K教程

【Langchain-Chatchat】部署ChatGLM3-6B-32K教程

介绍 Langchain-Chatchat这个框架可以帮助我们更容易的部署大语言模型&#xff0c;之前也写过ChatGLM传统的部署教程&#xff0c;有兴趣的可以参考 【ChatGLM3】第三代大语言模型多GPU部署指南【ChatGLM2-6B】从0到1部署GPU版本 借助Langchain-Chatchat框架&#xff0c;可以…
阅读更多...
从产品组装和维护/维修的角度来看，基于增强现实的指导：关于挑战和机遇的最新综述

从产品组装和维护/维修的角度来看，基于增强现实的指导：关于挑战和机遇的最新综述

作者&#xff1a; 1. M. Eswaran 2. Anil Kumar Gulivindala 3. M.V.A.Raju Bahubalendruni 关于本文 •分析了增强现实在装配和维护/维修中的作用。 •讨论了AR辅助制造系统的软件和硬件元素。 •讨论了AR跟踪和配准技术面临的挑战。 •讨论了AR辅助制造系统的未来…
阅读更多...
二分查找法总结

二分查找法总结

目录 1、思路讲解&#xff08;LC704&#xff09;2、代码思路讲解&#xff08;循环不变量&#xff09;&#xff08;1&#xff09; 左闭右闭&#xff08;2&#xff09;左闭右开&#xff08;3&#xff09;总结&#xff1a;左开右闭和左闭右开&#xff08;4&#xff09;复杂度分析 …
阅读更多...
力扣刷题31-33（力扣 0024/0070/0053）

力扣刷题31-33（力扣 0024/0070/0053）

今日题目&#xff1a; 24. 两两交换链表中的节点 题目&#xff1a;给你一个链表&#xff0c;两两交换其中相邻的节点&#xff0c;并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题&#xff08;即&#xff0c;只能进行节点交换&#xff09; 思路&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023