在线同步编辑文档Luckysheet

一：下载源码

前台代码地址:https://github.com/mengshukeji/Luckysheet

后台代码地址:https://github.com/mengshukeji/LuckysheetServer

二：编译源码

2.1：编译前台代码，提前安装node环境

cd Luckysheet/

执行  npm install

不出意外的如下图,dist是打包后路径

 查看dist路径下，主文件index.html

2.2:编译后台代码，必要环境安装jdk,配置maven，有redis,mysql数据库。

直接修改配置文件，luckysheet 下的application.yml

# 配置server参数
server:
  port: 9004
  servlet:
    context-path: /luckysheet
spring:
  profiles:
    active: mysql
  application:
    name: web
  jackson:
    time-zone: GMT+8
    date-format: yyyy-MM-dd HH:mm:ss
  http:
    encoding:
      charset: UTF-8
      enabled: true
  mvc:
    view:
      prefix: /templates/
      suffix: .html


#redis通道名称
redis.channel: luckysheet.channel
#表格中块的大小，新增加时写入每一个sheet的第一个模块中
row_size: 500
col_size: 500
#使用服务器类型
servertype: tomcat



db:
  mysql:
    druid:
      url: jdbc:mysql://127.0.0.1:3306/luckysheetdb?useSSL=false&serverTimezone=UTC
      driverClassName: com.mysql.cj.jdbc.Driver
      username: root
      password: Jachs_123456
      # 初始化大小，最小，最大
      initial-size: 8
      min-idle: 1
      max-active: 20
      # 配置获取连接等待超时的时间
      max-wait: 60000
      # 配置间隔多久才进行一次检测，检测需要关闭的空闲连接，单位是毫秒
      time-between-eviction-runsMillis: 60000
      # 配置一个连接在池中最小生存的时间，单位是毫秒
      min-evictable-idle-timeMillis: 300000
      validation-query: select 1
      test-while-idle: true
      test-on-borrow: false
      test-on-return: false
      # 打开PSCache，并且指定每个连接上PSCache的大小
      pool-prepared-statements: true
      max-open-prepared-statements: 20
      # 配置监控统计拦截的filters，去掉后监控界面sql无法统计，'wall'用于防火墙
      max-pool-prepared-statement-per-connection-size: 20
      filters: stat,wall
      # 通过connectProperties属性来打开mergeSql功能；慢SQL记录
      connection-properties: druid.stat.mergeSql=true;druid.stat.slowSqlMillis=5000
      use-global-data-source-stat: true

配置主要参数：

server.port,项目端口务必和前台index.html接口地址对上

配置好数据库和redis信息，后台代码写的乱的很mysql都没写完还整个mongo,postgre数据库支持。

建库脚本

CREATE DATABASE luckysheetdb；


CREATE TABLE `luckysheet` (
  `id` bigint(30) NOT NULL,
  `block_id` varchar(200) NOT NULL,
  `row_col` varchar(50) DEFAULT NULL,
  `index` varchar(200) NOT NULL,
  `list_id` varchar(200) NOT NULL,
  `status` int(1) DEFAULT NULL,
  `json_data` json DEFAULT NULL,
  `order` int(3) DEFAULT NULL,
  `is_delete` int(1) DEFAULT NULL,
  PRIMARY KEY (`id`),
  KEY `lib` (`list_id`,`index`,`block_id`),
  KEY ```order``` (`order`),
  KEY ```status``` (`status`),
  KEY ```is_delete``` (`is_delete`)
) ENGINE=InnoDB DEFAULT CHARSET=armscii8

INSERT INTO luckysheet VALUES (139400313311449087, 'fblock', '', '1', '1079500#-8803#7c45f52b7d01486d88bc53cb17dcd2c3', 1, '{"row":84,"name":"Sheet1","chart":[],"color":"","index":"1","order":0,"column":60,"config":{},"status":0,"celldata":[],"ch_width":4748,"rowsplit":[],"rh_height":1790,"scrollTop":0,"scrollLeft":0,"visibledatarow":[],"visibledatacolumn":[],"jfgird_select_save":[],"jfgrid_selection_range":{}}', 0, 0);
INSERT INTO luckysheet VALUES (139400313311449088, 'fblock', '', '2', '1079500#-8803#7c45f52b7d01486d88bc53cb17dcd2c3', 0, '{"row":84,"name":"Sheet2","chart":[],"color":"","index":"2","order":1,"column":60,"config":{},"status":0,"celldata":[],"ch_width":4748,"rowsplit":[],"rh_height":1790,"scrollTop":0,"scrollLeft":0,"visibledatarow":[],"visibledatacolumn":[],"jfgird_select_save":[],"jfgrid_selection_range":{}}', 1, 0);
INSERT INTO luckysheet VALUES (139400313311449089, 'fblock', '', '3', '1079500#-8803#7c45f52b7d01486d88bc53cb17dcd2c3', 0, '{"row":84,"name":"Sheet3","chart":[],"color":"","index":"3","order":2,"column":60,"config":{},"status":0,"celldata":[],"ch_width":4748,"rowsplit":[],"rh_height":1790,"scrollTop":0,"scrollLeft":0,"visibledatarow":[],"visibledatacolumn":[],"jfgird_select_save":[],"jfgrid_selection_range":{}}', 2, 0);

　　

三：启动项目

前台：可以直接运行,npm run dev ,打开浏览器http://localhost:3000/。只是在线编辑功能,可以把dist集成到boot项目中

同时需要修改pom文件，原项目打包把resources下其他文件过滤掉了需要注释如下图。

ok集成前台代码完成，启动后台boot项目，访问http://127.0.0.1:9004/luckysheet/index.html

  前台功能强大，几乎涵盖在线文档必须全部功能，后台代码略显不足。没导出功能，前台传入后台为一个大JSON数据格式。需要解析用POI自己转