五、安装docker
a、windows安装：Windows10 Docker 安装教程-CSDN博客
b、mac安装：【云原生丶Docker】MacOS系统安装Docker【保姆级教程】_mac安装docker-CSDN博客
六、通过docker安装Onlyoffice
1、使用JWT验证
sudo docker run -i -t -d -p 8701:80 onlyoffice/documentserver
2、不使用JWT验证
sudo docker run -i -t -d -p 8701:80 --restart=always -e JWT_ENABLED=false onlyoffice/documentserver
可以以后面加上版本号：
sudo docker run -i -t -d -p 8701:80 --restart=always -e JWT_ENABLED=false onlyoffice/documentserver:7.1.1-e JWT_ENABLED=false：不使用JWT
sudo docker run -i -t -d -p 8701:80 --restart=always --name=onlyoffice_7.3.3 -e JWT_ENABLED=false onlyoffice/documentserver:7.3.3
从7.2版本起，默认使用了JWT功能，安装Onlyoffice时，可以通过不同的命令参数启动服务，默认不使用JWT验证！如果是第 1 次执行这个命令，会先去下载 Onlyoffice，比较慢，约等待 3~10 分钟，网络畅通一点的会快一些。如果是已经安装过则直接进行启动。待其安装完成：
安装完成后：
七、启动服务
1、等上述安装完成后执行命令 ，查看 Onlyoffice 容器 ID：
docker ps
2、执行以下命令进入容器，这里将获取到的 ID 替换为上个步骤你得到的自己的ID！
sudo docker exec -it ID /bin/bash
3、接着执行下面的这两个命令
# 启动所有的内置服务
supervisorctl restart all
# 退出容器
exit
命令输出如下：
4、最后访问 http://IP:8701/welcome 页面（网上其他人说IP 不能是 localhost 或 127.0.0.1，一定要用你自己本地真实 IP 来访问。但是我经过测试完全可以），看到下面的这个效果说明 Onlyoffice 启动成功。
此页面提供了在线文档新增、编辑等功能，你可以点击生成一个文档，后续开发测试功能时会用到。
八、在 Vue 中接入 Onlyoffice
1、子组件准备，在你的项目的合适目录下新建如下两个文件，将下方的代码复制粘贴进去到你对应的文件中。
index.vue页面代码：
<template> <div :class="s.view"> <div :id="id"></div> </div> </template> <script> import loadScript from './loadScript.js'; export default { name: 'DocumentEditor', props: { id: { type: String, default: '', }, documentServerUrl: { type: String, default: '', }, config: { type: Object, default: () => { }, }, document_fileType: { type: String, default: '', }, document_title: { type: String, default: '', }, documentType: { type: String, default: '', }, editorConfig_lang: { type: String, default: '', }, height: { type: String, default: '', }, type: { type: String, default: '', }, width: { type: String, default: '', }, events_onAppReady: { type: Function, default: () => { }, }, events_onDocumentStateChange: { type: Function, default: () => { }, }, events_onMetaChange: { type: Function, default: () => { }, }, events_onDocumentReady: { type: Function, default: () => { }, }, events_onInfo: { type: Function, default: () => { }, }, events_onWarning: { type: Function, default: () => { }, }, events_onError: { type: Function, default: () => { }, }, events_onRequestSharingSettings: { type: Function, default: () => { }, }, events_onRequestRename: { type: Function, default: () => { }, }, events_onMakeActionLink: { type: Function, default: () => { }, }, events_onRequestInsertImage: { type: Function, default: () => { }, }, events_onRequestSaveAs: { type: Function, default: () => { }, }, events_onRequestMailMergeRecipients: { type: Function, default: () => { }, }, events_onRequestCompareFile: { type: Function, default: () => { }, }, events_onRequestEditRights: { type: Function, default: () => { }, }, events_onRequestHistory: { type: Function, default: () => { }, }, events_onRequestHistoryClose: { type: Function, default: () => { }, }, events_onRequestHistoryData: { type: Function, default: () => { }, }, events_onRequestRestore: { type: Function, default: () => { }, }, }, data() { return {}; }, watch: { config: { handler() { this.onChangeProps(); }, deep: true, }, document_fileType() { this.onChangeProps(); }, document_title() { this.onChangeProps(); }, documentType() { this.onChangeProps(); }, editorConfig_lang() { this.onChangeProps(); }, height() { this.onChangeProps(); }, type() { this.onChangeProps(); }, width() { this.onChangeProps(); }, }, mounted() { let url = this.documentServerUrl; if (!url.endsWith('/')) { url += '/'; } const docApiUrl = `${url}web-apps/apps/api/documents/api.js`; loadScript(docApiUrl, 'onlyoffice-api-script') .then(() => this.onLoad()) .catch((err) => console.error(err)); }, beforeDestroy() { const id = this.id || ''; if (window?.DocEditor?.instances[id]) { window.DocEditor.instances[id].destroyEditor(); window.DocEditor.instances[id] = undefined; } }, methods: { onLoad() { try { const id = this.id || ''; if (!window.DocsAPI) throw new Error('DocsAPI is not defined'); if (window?.DocEditor?.instances[id]) { console.log('Skip loading. Instance already exists', id); return; } if (!window?.DocEditor?.instances) { window.DocEditor = { instances: {} }; } const initConfig = { document: { fileType: this.document_fileType, title: this.document_title, }, documentType: this.documentType, editorConfig: { lang: this.editorConfig_lang, }, events: { onAppReady: this.onAppReady, onDocumentStateChange: this.events_onDocumentStateChange, onMetaChange: this.events_onMetaChange, onDocumentReady: this.events_onDocumentReady, onInfo: this.events_onInfo, onWarning: this.events_onWarning, onError: this.events_onError, onRequestSharingSettings: this.events_onRequestSharingSettings, onRequestRename: this.events_onRequestRename, onMakeActionLink: this.events_onMakeActionLink, onRequestInsertImage: this.events_onRequestInsertImage, onRequestSaveAs: this.events_onRequestSaveAs, onRequestMailMergeRecipients: this.events_onRequestMailMergeRecipients, onRequestCompareFile: this.events_onRequestCompareFile, onRequestEditRights: this.events_onRequestEditRights, onRequestHistory: this.events_onRequestHistory, onRequestHistoryClose: this.events_onRequestHistoryClose, onRequestHistoryData: this.events_onRequestHistoryData, onRequestRestore: this.events_onRequestRestore, }, height: this.height, type: this.type, width: this.width, ...(this.config || {}), }; const editor = window.DocsAPI.DocEditor(id, initConfig); window.DocEditor.instances[id] = editor; } catch (err) { console.error(err); ### 最后 面试一面会问很多基础问题，而这些基础问题基本上在网上搜索，面试题都会很多很多。最好把准备一下常见的面试问题，毕竟面试也相当与一次考试，所以找工作面试的准备千万别偷懒。面试就跟考试一样的，时间长了不复习，现场表现肯定不会太好。表现的不好面试官不可能说，我猜他没发挥好，我录用他吧。 **96道前端面试题：** -  **常用算法面试题：** -  **前端基础面试题：** 内容主要包括**HTML，CSS，JavaScript，浏览器，性能优化** console.error(err); ### 最后 面试一面会问很多基础问题，而这些基础问题基本上在网上搜索，面试题都会很多很多。最好把准备一下常见的面试问题，毕竟面试也相当与一次考试，所以找工作面试的准备千万别偷懒。面试就跟考试一样的，时间长了不复习，现场表现肯定不会太好。表现的不好面试官不可能说，我猜他没发挥好，我录用他吧。 **96道前端面试题：** - [外链图片转存中...(img-VGRrHw5J-1718021750325)] **常用算法面试题：** - [外链图片转存中...(img-AvJqmHoq-1718021750326)] **前端基础面试题：** 内容主要包括**HTML，CSS，JavaScript，浏览器，性能优化** - 
