python+vue3+onlyoffice在线文档系统实战20240723笔记,项目界面设计和初步开发

经过之前的学习,已经能够正常打开文档了。

在这里插入图片描述

目前为止,我们的代码能够实现:

  • 打开文档
  • 编辑文档
  • 手动保存
  • 自动保存

虽然功能依然比较少,但是我们已经基本实现了文档管理最核心的功能,而且我们有个非常大的优势,就是支持多人同时在线协同编辑。

现在我们要开发项目,我们得做基本的项目架构设计。技术架构就不用设计了,但是我们的页面需要规划。交互也需要规划。

我们要做的到底是一个什么样的项目?

我们的基本方向是模仿腾讯文档:https://docs.qq.com/desktop/?_t=1721740429613&u=a54febc2d1484b1db8fe368f479f21ac

这个是首页:
在这里插入图片描述

首页的结构分析大致如下:
在这里插入图片描述

当我们点击新建的时候,会弹出一个下拉菜单。但是这个菜单比较大,内容很多。
在这里插入图片描述

当我们点击文档的时候,会弹出一个对话框:
在这里插入图片描述

模板这个事儿本身并不复杂,但是我们第一个版本的目标是内部使用,所以我们可以不打开对话框,而是直接新建一个空白的文档,并跳转到文档编辑页面。

我们第一个版本的大目标是先实现Word文档的管理,所以其他的功能可以暂时不考虑。

上面首页的布局我们是要重点的参考的,其他的就可以从简,我们直接跳转到onlyoffice的编辑页面即可。

当我们新建了文档,并选择了保存以后,我们回到首页,应该能够在一个表格中,看到我最近创建或者更新的文档列表。
在这里插入图片描述
关于表格的交互我们可以简单点,通过一些按钮去控制,比如删除按钮,编辑按钮,复制按钮等等。

接下来就开始准备开发吧。

先安装antd组件库:

pnpm i ant-design-vue
pnpm i @ant-design/icons-vue

接着添加一个布局页面:
在这里插入图片描述

完整代码如下:

<script setup>
import {ref} from 'vue';
import {Layout, LayoutHeader, Menu,MenuItem, LayoutSider, SubMenu,Breadcrumb, BreadcrumbItem, LayoutContent,
} from "ant-design-vue"
import {UserOutlined, LaptopOutlined, NotificationOutlined,
} from "@ant-design/icons-vue"const selectedKeys1 = ref(['2']);
const selectedKeys2 = ref(['1']);
const openKeys = ref(['sub1']);
</script><template><Layout><LayoutHeader class="header"><div class="logo"/><Menuv-model:selectedKeys="selectedKeys1"theme="dark"mode="horizontal":style="{ lineHeight: '64px' }"><MenuItem key="1">nav 1</MenuItem><MenuItem key="2">nav 2</MenuItem

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

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

相关文章

抽奖大转盘uni-push使用websocket协议实现uniapp+uniCloud实时推送在线互动抽奖项目打包H5微信小程序_咸虾米

嗨&#xff0c;大家好&#xff0c;我是爱搞知识的咸虾米&#xff0c;今天给大家带来的这们课程是使用uni-push实时推送&#xff0c;完成的在线互动抽奖综合项目。 常规的页面只有在手动刷新的时候&#xff0c;才能获取到服务端最新的数据&#xff0c;而websocket可以实现长连…

OpenJudge | 放苹果

总时间限制: 1000ms 内存限制: 65536kB 描述 把M个同样的苹果放在N个同样的盘子里&#xff0c;允许有的盘子空着不放&#xff0c;问共有多少种不同的分法&#xff1f;&#xff08;用K表示&#xff09;5&#xff0c;1&#xff0c;1和1&#xff0c;5&#xff0c;1 是同一种分法…

里程计在激光雷达slam中的作用

在tf树中的父坐标系和子坐标系中间的odom 机器人在平直走廊中由于缺少参照物的变化&#xff0c;无法估计自己的位移&#xff1b;可以通过轮子转动的圈数和一 圈的位移来计算距离&#xff0c;这种通过电机转速计算机器人位移的方法就是常用的电机里程计&#xff1b;里程计不 是…

简单高效的在线拾色器工具 - 为您的设计工作提供便利

你是否曾在寻找完美颜色时感到困扰&#xff1f;现在&#xff0c;有了这个简单而强大的在线拾色器工具&#xff0c;选择理想的颜色变得轻而易举&#xff01; 网址&#xff1a; https://potatoh5games.fun/tools/#ColorPickr 这款拾色器工具具有以下特点&#xff1a; 用户友好…

golang 文件

golang 文件 概念 文件是计算机系统中用于存储和管理的 数据集合&#xff0c;具有唯一的名称&#xff0c;存在于存储介质上&#xff0c;包含创建、修改等属性&#xff0c;通过文件系统进行组织&#xff0c;用户可进行读取、写入等操作 文件流 文件输入流&#xff08;InputS…

Linux进程控制——进程等待

文章目录 进程等待进程等待的必要性进程等待的方法status参数option参数 进程等待 进程等待的过程其实是父进程等待子进程死亡的过程 进程等待的必要性 如果子进程退出&#xff0c;父进程不进行处理&#xff0c;子进程会变成僵尸进程&#xff0c;有内存泄漏的风险 僵尸进程…

Adobe Acrobat Pro DC for Mac:PDF处理软件

Adobe Acrobat Pro DC for Mac是一款专为Mac用户设计的PDF处理软件&#xff0c;它凭借出色的功能和卓越的性能&#xff0c;成为了处理PDF文件的理想选择。 首先&#xff0c;Acrobat Pro DC for Mac支持全方位的PDF编辑。用户可以对PDF文档进行文本编辑、图像处理、表格制作等操…

Paddlenlp测试

1、环境安装 使用华为云euleros操作系统&#xff0c;python版本3.9.5&#xff0c;CPU无GPU服务器&#xff1a; &#xff08;1&#xff09;pip3 install setuptools_scm -i http://mirrors.aliyun.com/pypi/simple/ --trusted-host mirrors.aliyun.com &#xff08;2&#xf…

机器学习算法与Python实战 | 两行代码即可应用 40 个机器学习模型--lazypredict 库!

本文来源公众号“机器学习算法与Python实战”&#xff0c;仅用于学术分享&#xff0c;侵权删&#xff0c;干货满满。 原文链接&#xff1a;两行代码即可应用 40 个机器学习模型 今天和大家一起学习使用 lazypredict 库&#xff0c;我们可以用一行代码在我们的数据集上实现许多…

雪花算法及MP实现方式

根据当前项目推进的情况&#xff0c;我们会发现用户注册时&#xff0c;从来没有考虑主键生成的问题。为什么呢&#xff1f;因为咱们的数据表现在都是通过数据库自增长方式获取主键id的。不过&#xff0c;这个主键自增长的方案好不好呢&#xff1f;我们一起来了解一下程序发展的…

SNP过滤

SNP过滤 文章目录 SNP过滤前言一. 利用Perl脚本get_vcf_stats.pl统计位点信息二. 利用R脚本149toTZC.2allele.filtered.R画图并获得过滤后的位点位置信息三. 用vcftools保留过滤后的位点四、get_vcf_stats.pl 脚本存放处 总结 SNP过滤 所属目录&#xff1a;紫菜创建时间&#…

如何查找下载安装安卓APK历史版本?

在安卓设备上&#xff0c;有时候我们可能希望安装某个软件的旧版本&#xff0c;可能是因为新版本不兼容、功能改变不符合需求或是其他原因。 安卓系统并不像iOS那样提供直观的历史版本下载界面。 不过&#xff0c;通过一些第三方市场和网站&#xff0c;我们仍然可以找到并安装…

docker环境下的verdaccio设置权限并配置域名.md

权限配置 一个管理员叫admin,可以读也可以发布一个普通用户叫qiuye,只可以读,不可以发布添加账号就自行创建添加即可,只需要更改config文件的配置项即可 packages:*/*: access: admin qiuyepublish: admin unpublish: admin **:access: admin qiuyepublish: admin unpublish…

Linux——CPU占不上去的解决办法

一、将调节器升至performance&#xff1a; 1.1 查看当前的调节器&#xff1a; cat /sys/devices/system/cpu/cpu0/cpufreq/scaling_governor如果不是 performance &#xff0c;则进入root账户 1.2 进入root账户 先进入管理员账户输入命令&#xff1a; su root如果没有roo…

【小程序爬虫入门实战】使用Python爬取易题库

文章目录 1. 写在前面2. 抓包分析 【&#x1f3e0;作者主页】&#xff1a;吴秋霖 【&#x1f4bc;作者介绍】&#xff1a;擅长爬虫与JS加密逆向分析&#xff01;Python领域优质创作者、CSDN博客专家、阿里云博客专家、华为云享专家。一路走来长期坚守并致力于Python与爬虫领域研…

iPhone 在 App Store 中推出的 PC 模拟器 UTM SE

PC 模拟器是什么&#xff1f;PC 模拟器是一种软件工具&#xff0c;它模拟不同硬件或操作系统环境&#xff0c;使得用户可以在一台 PC 上运行其他平台的应用程序或操作系统。通过 PC 模拟器&#xff0c;用户可以在 Windows 电脑上体验 Android 应用、在 Mac 电脑上运行 Windows …

科普文:详解 JuiceFS 读性能:预读、预取、缓存、FUSE 和对象存储

在高性能计算场景中&#xff0c;往往采用全闪存架构和内核态并行文件系统&#xff0c;以满足性能要求。随着数据规模的增加和分布式系统集群规模的增加&#xff0c;全闪存的高成本和内核客户端的运维复杂性成为主要挑战。 JuiceFS&#xff0c;是一款全用户态的云原生分布式文件…

SQL优化相关

文章目录 SQL优化1. 数据插入2. 主键优化页分裂页合并索引设计原则 3. order by 优化4. group by 优化5. limit优化6. count优化7. update 优化 SQL优化 1. 数据插入 当我们需要插入多条数据时候&#xff0c;建议使用批量插入&#xff0c;因为每次插入数据都会执行一条SQL&am…

【Linux】多线程4——线程同步/条件变量

1.Linux线程同步 1.1.同步概念与线程饥饿问题 先来理解同步的概念 什么是线程同步 在一般情况下&#xff0c;创建一个线程是不能提高程序的执行效率的&#xff0c;所以要创建多个线程。但是多个线程同时运行的时候可能调用线程函数&#xff0c;在多个线程同时对同一个内存地…

centos stream 9安装 Kubernetes v1.30 集群

1、版本说明&#xff1a; 系统版本&#xff1a;centos stream 9 Kubernetes版本&#xff1a;最新版(v1.30) docker版本&#xff1a;27.1.1 节点主机名ip主节点k8s-master172.31.0.10节点1k8s-node1172.31.0.11节点2k8s-node2172.31.0.12 2、首先&#xff0c;使用Vagrant和Virt…