zdppy_docserver结合zdpvue_client开发前后端分离的文档管理系统

创建前端应用

pnpm create vite

安装依赖

pnpm add @onlyoffice/document-editor-vue

基本使用

这里有三个非常关键的URL地址:

  • 文档服务地址:http://192.168.101.5:8080
  • 文档地址:http://192.168.101.5:18889/test.docx
  • 回调地址:http://192.168.101.5:18889/doc/callback

其中,文档地址和回调地址,是我们使用 zdppy_api 开发的后端接口。文档服务地址,就是Docker启动的docserver容器的地址。

修改 src/App.vue:

<script>
import { defineComponent } from 'vue';
import { DocumentEditor } from "@onlyoffice/document-editor-vue";export default defineComponent({name: 'ExampleComponent',components: {DocumentEditor},data() {return {config: {document: {fileType: "docx",key: "Khirz6zTPdfd7",title: "Example Document Title.docx",url: "http://192.168.101.5:18889/test.docx"},documentType: "word",editorConfig: {callbackUrl: "http://192.168.101.5:18889/doc/callback",},height: '700px',width: '100%'}}},methods: {onDocumentReady() {console.log("Document is loaded");},onLoadComponentError (errorCode, errorDescription) {switch(errorCode) {case -1: // Unknown error loading componentconsole.log(errorDescription);break;case -2: // Error load DocsAPI from http://documentserver/console.log(errorDescription);break;case -3: // DocsAPI is not definedconsole.log(errorDescription);break;}}},
});
</script><template><DocumentEditorid="docEditor"documentServerUrl="http://192.168.101.5:8080":config="config":events_onDocumentReady="onDocumentReady":onLoadComponentError="onLoadComponentError"/>
</template>

改造成vue3的setup语法

原始代码

<script>
import { defineComponent } from 'vue';
import { DocumentEditor } from "@onlyoffice/document-editor-vue";export default defineComponent({name: 'ExampleComponent',components: {DocumentEditor},data() {return {config: {document: {fileType: "docx",key: "Khirz6zTPdfd7",title: "Example Document Title.docx",url: "http://192.168.101.5:18889/test.docx"},documentType: "word",editorConfig: {callbackUrl: "http://192.168.101.5:18889/doc/callback",},height: '700px',width: '100%'}}},methods: {onDocumentReady() {console.log("Document is loaded");},onLoadComponentError (errorCode, errorDescription) {switch(errorCode) {case -1: // Unknown error loading componentconsole.log(errorDescription);break;case -2: // Error load DocsAPI from http://documentserver/console.log(errorDescription);break;case -3: // DocsAPI is not definedconsole.log(errorDescription);break;}}},
});
</script><template><DocumentEditorid="docEditor"documentServerUrl="http://192.168.101.5:8080":config="config":events_onDocumentReady="onDocumentReady":onLoadComponentError="onLoadComponentError"/>
</template>

第一步:引入组件

import { DocumentEditor } from "@onlyoffice/document-editor-vue";

第二步:实现config配置信息对象

const config = {document: {fileType: "docx",key: "Khirz6zTPdfd7",title: "Example Document Title.docx",url: "http://192.168.101.5:18889/test.docx"},documentType: "word",editorConfig: {callbackUrl: "http://192.168.101.5:18889/doc/callback",},height: '700px',width: '100%'
}

第三步:文档准备好时的回调事件

const onDocumentReady = () => {console.log("Document is loaded");
}

第四步:文档发生错误时的回调事件

const onLoadComponentError = (errorCode, errorDescription) => {switch(errorCode) {case -1: // Unknown error loading componentconsole.log(errorDescription);break;case -2: // Error load DocsAPI from http://documentserver/console.log(errorDescription);break;case -3: // DocsAPI is not definedconsole.log(errorDescription);break;}
}

改造后的代码

<script setup>
import {DocumentEditor} from "@onlyoffice/document-editor-vue";const config = {document: {fileType: "docx",key: "Khirz6zTPdfd7",title: "Example Document Title.docx",url: "http://192.168.101.5:18889/test.docx"},documentType: "word",editorConfig: {callbackUrl: "http://192.168.101.5:18889/doc/callback",},height: '700px',width: '100%'
}const onDocumentReady = () => {console.log("Document is loaded");
}
const onLoadComponentError = (errorCode, errorDescription) => {switch (errorCode) {case -1: // Unknown error loading componentconsole.log(errorDescription);break;case -2: // Error load DocsAPI from http://documentserver/console.log(errorDescription);break;case -3: // DocsAPI is not definedconsole.log(errorDescription);break;}
}
</script><template><DocumentEditorid="docEditor"documentServerUrl="http://192.168.101.5:8080":config="config":events_onDocumentReady="onDocumentReady":onLoadComponentError="onLoadComponentError"/>
</template>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AI与音乐:创新之光还是毁灭之剑?

AI与音乐&#xff1a;创新之光还是毁灭之剑&#xff1f; 在数字时代的浪潮中&#xff0c;人工智能&#xff08;AI&#xff09;技术正以前所未有的速度渗透到音乐领域&#xff0c;引发了广泛的讨论和争议。本文将探讨AI与音乐之间的关系&#xff0c;分析它是否带来了音乐创新的…

用Rancher2.8.5部署K8s集群

参考&#xff1a;通过Rancher 2.7.5部署企业生产级K8s集群 新K8s集群的环境信息 Rancher1台&#xff0c;K8s集群6台&#xff08;1台rancher&#xff0c;3台master&#xff0c;4台node&#xff09;。 Name|lmage Name|IP Address|Flavor|Comment project-root-dev-rancher|Ro…

Stable Diffusion 3 如何下载安装使用及性能优化

Stable Diffusion 3 Stable Diffusion 3&#xff08;SD3&#xff09;&#xff0c;Stability AI最新推出的Stable Diffusion模型系列&#xff0c;现在可以在Hugging Face Hub上使用&#xff0c;并且可以与Diffusers一起使用。 今天发布的模型是Stable Diffusion 3 Medium&…

万字详解ANSI SQL语法及其扩展

ANSI SQL 与扩展SQL详解 一、ANSI SQL语法 ANSI SQL&#xff08;American National Standards Institute Structured Query Language&#xff09;&#xff0c;即美国国家标准学会结构化查询语言&#xff0c;是一种标准化的数据库查询语言。它用于管理和操作关系数据库中的数据…

【数学】Leetcode 66. 加一【简单】

加一 给定一个由 整数 组成的 非空 数组所表示的非负整数&#xff0c;在该数的基础上加一。 最高位数字存放在数组的首位&#xff0c; 数组中每个元素只存储单个数字。 你可以假设除了整数 0 之外&#xff0c;这个整数不会以零开头。 示例 1&#xff1a; 输入&#xff1a;…

在Krpano中点击热点放大图片并交互

在全景项目中&#xff0c;经常会遇到这样的功能&#xff1a;点击场景中的某个热点&#xff0c;能够进行图片放大&#xff0c;同时还可以对图片进行交互操作&#xff0c;比如放大图片、拖动图片等&#xff0c;本章节内容讲述如何在Krpano库中调用js代码实现图片的放大和交互。具…

MySQL入门学习-连接查询.RIGHT JOIN

Rights Join 是 MySQL 中的一种连接查询类型&#xff0c;用于根据右表中的匹配条件&#xff0c;将左表中的数据与右表中的数据进行连接。 一、与其他连接查询相比&#xff0c;Rights Join 具有以下特点&#xff1a; 1. 连接方向&#xff1a; Rights Join 以右表为主表&#x…

django 身份验证与鉴权

目录 用户模型建立账号密码登录手机号登录验证码双后端鉴权JWT 介绍 用户模型建立 在django中自带auth_user表,字段名有id, password,username&#xff0c;is_superuer,is_activate , email &#xff0c;is_staff&#xff08;用于标识某个用户是否可以登录到 Django 的管理界面…

【Sa-Token|2】Sa-Token在微服务中的使用

在微服务架构中&#xff0c;使用 Sa-Token 进行分布式认证和权限管理需要考虑到各个服务之间的通信和 Token 的共享。以下是一个详细的教程&#xff0c;介绍如何在微服务中使用 Sa-Token。 1. 微服务架构介绍 假设有以下几个微服务&#xff1a; AuthService: 负责用户认证和 …

Python-日志模块

目录 一、日志级别 二、日志配置 1、日志基本配置 2、日志配置字典&#xff08;知道咋么改就可以&#xff09; 3、日志的使用 一、日志级别 import logginglogging.debug(调试日志) logging.info(消息日志) logging.warning(警告日志) logging.error(错误日志) logging.cr…

Java自增自减运算符

Java中的自增自减运算符分为两种&#xff1a; 自增运算符“ ”&#xff0c;作用是执行加法运算的变量值1 自减运算符“ -- ”&#xff0c;作用是执行加法运算的变量值-1 注意事项&#xff1a; “ ”和“ -- ”既可以放在变量的前面&#xff0c;也可以放在变量的后面。 自增自…

Linux驱动开发笔记(十三)Sysfs文件系统

文章目录 前言一、Sysfs1.1 Sysfs的引入1.2 Sysfs的目录结构1.2 Sysfs的目录详解1.2.1 devices1.2.2 bus1.2.3 class1.2.4 devices、bus、class目录之间的关系1.2.5 其他子目录 二、Sysfs使用2.1 核心数据结构2.2 相关函数2.2.1 kobject_create_and_add2.2.2 kobject_put()2.2.…

大模型自然语言生成自动驾驶可编辑仿真场景(其一 共十篇)

第一篇&#xff1a;LLM greater scene summarize 第二篇&#xff1a;LLM simulation Test effect 第三篇&#xff1a;LLM simulation driving scenario flow work 第四篇&#xff1a;LLM Algorithm flow description 第五篇&#xff1a;Configure the environment and back…

每天一个项目管理概念之PDCA

在项目管理中&#xff0c;PDCA&#xff08;计划-执行-检查-行动&#xff09;循环是一种广泛采用的质量管理工具&#xff0c;它帮助组织确保项目能够高效、有序地进行&#xff0c;并持续优化流程。本文将深入探讨PDCA循环的四个阶段&#xff0c;以及如何将其应用于项目管理中&am…

一键转换PDL至HTML,轻松驾驭文档格式,高效办公新纪元从此开启!

在信息爆炸的时代&#xff0c;文档格式繁多&#xff0c;如何高效处理这些文档成为了每个职场人士关注的焦点。现在&#xff0c;我们为您带来一款革命性的工具——一键转换PDL至HTML&#xff0c;让您轻松驾驭文档格式&#xff0c;开启高效办公新纪元&#xff01; 首先&#xff0…

八-工具包3-pandas数据清洗及相关性

数据清洗概述 数据清洗是对一些没有用的、不合理的数据进行处理的过程。 很多数据集存在数据缺失、数据格式错误、错误数据或重复数据的情况,如果要使数据分析更加准确,就需要对这些没有用的数据进行处理。 样本数据: from io import StringIO import pandas as pdcsv_d…

动手学深度学习(Pytorch版)代码实践 -卷积神经网络-14模型构造

14模型构造 import torch from torch import nn from torch.nn import functional as F#通过实例化nn.Sequential来构建我们的模型&#xff0c; 层的执行顺序是作为参数传递的 net1 nn.Sequential(nn.Linear(20, 256), nn.ReLU(), nn.Linear(256,10)) """ nn.…

不同@Transactional方法调用同一个synchronized方法引发的生成重复序号问题

背景&#xff1a; Transactional( propagation Propagation.REQUIRED ) 方法 A内调用synchronized方法 这种默认传播方式使得子函数也加入当前事务&#xff0c; synchronized方法结束之后&#xff0c; Transactional 方法A 执行结束之前, synchronized方法对数据库表所作变…

Electron快速入门(三):在(二)的基础上修改了一个文件夹做了个备忘录

Lingering Memories 诗绪萦怀 修改index.html <!--index.html--> <!DOCTYPE html> <html lang="zh-CN"><head><meta charset="UTF-8"><!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP --><meta http…

opencv-python(十一)

图像加法 import numpy as np import cv2 img cv2.imread(jk.jpg) res cv2.add(img, img) cv2.imshow(Mypicture1,img) cv2.imshow(MyPicture2,res)cv2.waitKey(0) cv2.destroyAllWindows() res cv2.add(src1, src2, dstNone, maskNone, dtypeNone) src1&#xff1a;第一幅…