五、安装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，浏览器，性能优化**
- 
