Skip to content

Use MySQL Tutorial for Beginners

Jump to bottom
mengshukeji edited this page Apr 21, 2022 · 1 revision
  1. preinstall mysql (mysql version >= 8 ) and redis,redis set password 123456,mysql set password 12345678
  2. init mysql

create database

CREATE DATABASE luckysheetdb

create table

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 data

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);
  1. we recommend IntelliJ IDEA, click menu - Run - Edit Configuration, check JDK version, choose java 8 (same as jdk 1.8),and choose luckysheet to run,we will start app at luckysheet/src/main/java/com/xc/luckysheet/WebApplication.java

if you need multiple jdk versions,use jenv,tutorial: https://www.jenv.be/

  1. right maven panel, Profiles choose mysql
  2. change luckysheet/src/main/resources/application-mysql.yml 
logging:
  config: classpath:logback-spring.xml

# 日志是否打印sql
showSql: true


spring:
  redis:
    host: 127.0.0.1
    port: 6379
    password: 123456
    timeout: 10000ms
    lettuce:
      pool:
        max-active: 8
        max-wait: -1ms
        max-idle: 8
        min-idle: 0
    database: 0

db:
  mysql:
    druid:
      url: jdbc:mysql://127.0.0.1:3306/luckysheetdb?useSSL=false
      driverClassName: com.mysql.cj.jdbc.Driver
      username: root
      password: 12345678
      # 初始化大小，最小，最大
      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

  1. run luckysheet/src/main/java/com/xc/luckysheet/WebApplication.java

  2. front save as html, start a web server

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/css/pluginsCss.css' />
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/plugins.css' />
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/css/luckysheet.css' />
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/assets/iconfont/iconfont.css' />
    <script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/js/plugin.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/luckysheet.umd.js"></script>
    
    <title>Luckysheet</title>
</head>
<body>
    <div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;"></div>
    <!-- demo feature, non-production use -->
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/demoData/demoFeature.js"></script>
    <script>
        $(function () {

            var lang = luckysheetDemoUtil.language() === 'zh' ? 'zh' : 'en';
            var isShare = luckysheetDemoUtil.getRequest().share; //Add the '?share' parameter to the url, open the collaborative editing mode
            var options = null;

            options = {
                    container: "luckysheet",
                    lang: lang,
                    allowUpdate:true,
                    updateImageUrl: 'http://127.0.0.1:9004' + "/luckysheet/api/updateImg",
                    updateUrl: "ws://"+ '127.0.0.1:9004'+"/luckysheet/websocket/luckysheet",
                    "gridKey": "1079500#-8803#7c45f52b7d01486d88bc53cb17dcd2c3",
                    loadUrl: 'http://127.0.0.1:9004' + "/luckysheet/api/load",
                    loadSheetUrl: 'http://127.0.0.1:9004' + "/luckysheet/api/loadsheet"
                }

            luckysheet.create(options);

        })
    </script>
</body>
</html>
  1. we find CORS,then disable it use Google Chrome Extension Allow CORS: Access-Control-Allow-Origin
Clone this wiki locally