OnlyOffice 结合 Vue

1.官网资料

官网中文地址
官网api地址

2.Docker部署OnlyOffice

下载docker, 不会用docker请自行查资料

  1. 拉去镜像
    docker pull onlyoffice/documentserver
    
  2. 启动容器
    # 8085 端口映射 到 容器的 80端口
    # 指定文件代理映射路径
    docker run -i -t -d -p 8085:80 --restart=always 
    	-v /app/onlyoffice/DocumentServer/logs:/var/log/onlyoffice  
    	-v /app/onlyoffice/DocumentServer/data:/var/www/onlyoffice/Data  
    	-v /app/onlyoffice/DocumentServer/lib:/var/lib/onlyoffice 
    	-v /app/onlyoffice/DocumentServer/db:/var/lib/postgresql  onlyoffice/documentserver
    	
    
  3. 启动容器后, 稍等片刻访问,会成功会出现以下页面.OnlyOffice 结合 Vue_第1张图片

3. index.html

在vue的项目index.html引入对应服务的js, 服务器ip不要用127.0.0.1 跟 localhost


4.demo.vue








5.后端Controller回调函数


/**
 * OnlyOffice-Controller
 */
@RequestMapping("/api/onlyOffice")
@RestController
@Slf4j
public class OnlyOfficeController {

    @PostMapping("/save/{fileId}")
    public ResponseEntity save(@RequestBody Map param, @PathVariable String fileId) {
        log.info("method[save] fileId:{}", fileId);
        log.info("method[save] param:{}", JsonUtils.toJson(param));
        //文档主键
        Long id = MapUtil.getLong(param, "key");
        log.info("method[save] id:{}", id);
        //操作状态 1:编辑  2:准备保存  3: 保存错误  4:文档关闭没有修改  6: 正在编辑文档,但保存了当前文档状态 7:强制保存文档时发生错误
        Integer status = MapUtil.getInteger(param, "status", -1);
        if (status == 2) {
            //当前在操作用户id
            List usersId = MapUtil.getValueAsList(param, "users");
            log.info("method[save] usersId:{}", usersId.toString());
        }
        if (status == 6) {
            //TODO 可以利用websocket 推送到页面 产生提示语  
            
            log.info("method[save] 正在编辑文档,但保存了当前文档状态. url:{}", MapUtil.getString(param, "url"));
            Map result = new HashMap(1);
            result.put("error", "0");
            result.put("msg", "操作成功");
            return ResponseEntity.ok(result);
        }
        Map result = new HashMap(1);
        result.put("error", "0");
        return ResponseEntity.ok(result);
    }

}

你可能感兴趣的:(vue,Java,vue.js,前端,javascript)