关于前端:如何开发一款基于-vitevue3-的在线表格系统下

在上篇内容中咱们为大家分享了具体介绍Vue3和Vite的相干内容。在本篇中咱们将从我的项目实战登程带大家理解Vite+Vue3 的在线表格零碎的构建。
应用Vite初始化Vue3我的项目
在这里须要留神：依据官网文档阐明，应用Vite须要node版本在12以上，请在创立我的项目前查看node版本

初始化我的项目命令：

 $ npm init vite-app <project-name>  // （project-name 为我的项目名）创立vite我的项目脚手架包
 $ cd <project-name>  //进入我的项目目录
 $ npm install  //装置我的项目所需依赖
 $ npm run dev  //启动我的项目

做个示例：搭建一个名为 myVue3 的我的项目。
执行命令：npm intit vite-app myVue3

能够看到，在Practice文件夹中曾经搭建好了一个我的项目。我的项目构造如下：

执行命令：cd myVue3 进入我的项目目录
执行命令：npm install 装置相干模块。

我的项目构造如下：模块已下载胜利。

最初执行命令：npm run dev 启动这个我的项目

进入地址，当咱们看到这个页面时，阐明我的项目曾经胜利启动了。

铺垫都筹备好了，话不多说咱们正式开始。

我的项目实战

理解了Vue3和Vite后，接下来咱们用一个理论我的项目体验一下。
思路：
应用SpreadJS和组件化表格编辑器做一个简略的在线Excel填报零碎。
其中A页面应用编辑器进行模板设计并保留。
B页面应用SpreadJS导入模板并进行填报上传。
实现机制为SpreadJS的数据绑定性能，大家能够先通过下方链接理解其作用
https://demo.grapecity.com.cn…

次要代码如下：
先来装置须要的模块

"dependencies": {
    "vue": "^3.0.4",
    "@grapecity/spread-sheets-designer-vue": "15.1.0",
    "@grapecity/spread-sheets-designer": "15.1.0",
    "@grapecity/spread-sheets-designer-resources-cn": "15.1.0",
    "@grapecity/spread-sheets": "15.1.0",
    "@grapecity/spread-sheets-resources-zh": "15.1.0",
    "@grapecity/spread-excelio": "15.1.0",
    "@grapecity/spread-sheets-barcode": "15.1.0",
    "@grapecity/spread-sheets-charts": "15.1.0",
    "@grapecity/spread-sheets-languagepackages": "15.1.0",
    "@grapecity/spread-sheets-print": "15.1.0",
    "@grapecity/spread-sheets-pdf": "15.1.0",
    "@grapecity/spread-sheets-shapes": "15.1.0",
    "@grapecity/spread-sheets-tablesheet": "15.1.0",
    "@grapecity/spread-sheets-pivot-addon": "15.1.0",
    "@grapecity/spread-sheets-vue": "15.1.0",
    "@types/file-saver": "^2.0.1",
    "vue-router": "^4.0.0-rc.5"
  }

运行命令 npm install 来装置所有依赖我的项目。
接下来咱们来配置路由。
1、在src文件夹下新建文件。

router/index.js

2、进行路由的配置

import { createRouter, createWebHistory } from "vue-router";

const routes = [
  {
    path: "/",
    name: "Designer",
    component: () => import("../views/Designer.vue"),
  },
  {
    path: "/spreadSheet",
    name: "SpreadSheet",
    component: () => import("../views/SpreadSheet.vue"),
  }
];

export const router = createRouter({
  history: createWebHistory(),
  routes:routes
});

3、在main.js引入

import { createApp } from 'vue'
import { router } from './router/index'
import App from './App.vue'
import './index.css'

const app = createApp(App)
app.use(router);
app.mount('#app')

4、批改App.vue

<template>
  <div id="app">
    <div>
        <router-link to="/">Designer</router-link> |
        <router-link to="/spreadSheet">SpreadSheet</router-link>
    </div>
  <router-view/>
</div>
</template>

<script>

export default {
  name: 'App',
  components: {
  }
}
</script>

仔细的小伙伴可能曾经留神到了，路由的配置和main.js 引入形式仿佛与vue2的应用有所不同？是的，vue3中应用Vue Router时须要导入新的办法（如createRouter 和 createWebHistory）能力失常应用。
同时代码中也体现出了vue3 组合式API的特点。相较于vue2选项型API（将代码宰割为 data、methods等），vue3在setup办法外部定义数据和办法，将业务逻辑抽离为函数，并通过return返回，使代码逻辑更为简洁清晰。

配置完路由之后，咱们开始集成组件化表格编辑器（Designer）和SpreadJS。

一、集成Designer

代码如下所示：

<template>
  <div>
      <div id="ssDesigner" style="height:700px;width:100%;text-align: left;"></div>
  </div>
</template>

<script>

import {onMounted, ref, reactive} from "vue";
import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css';
import '@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css';
import "@grapecity/spread-sheets-shapes";
import '@grapecity/spread-sheets-pivot-addon';
import "@grapecity/spread-sheets-tablesheet";
import GC from '@grapecity/spread-sheets'
import "@grapecity/spread-sheets-resources-zh";
GC.Spread.Common.CultureManager.culture("zh-cn");
import "@grapecity/spread-sheets-designer-resources-cn";
import "@grapecity/spread-sheets-designer";
import {designerConfig} from '../files/config'
//import {myBudget } from '../files/budget.js';
import {myBudget} from '../files/right_demo.js';

export default {
  name: 'Designer',
  props: {
  },
  setup() {
    let designer;
    let spreadDom;
    let spread;
    onMounted(() => {
      designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("ssDesigner"), designerConfig);
      spreadDom = designer.getWorkbook().getHost();
      spread = GC.Spread.Sheets.findControl(spreadDom);
      //spread.fromJSON(myBudget);
    })
  
    return {
      designer,
      spread
    };
  }
}
</script>

<style scoped>
  
</style>

1、在模板中增加一个div，这个div就是设计器的容器，能够通过css设置容器的宽高地位等，也就是自定义了设计器的显示大小及地位。
2、导入设计器所须要的依赖。
3、在setup函数中初始化designer

如下图网页中曾经加载显示出设计器了，这阐明设计器曾经被胜利集成在此我的项目中。

Designer的页面与Excel相似，利用工具栏提供的UI按钮和特有的数据绑定性能，咱们能够轻松实现模板设计。
当然也能够通过导入按钮或者应用接口（fromJSON）间接加载预设好的模板。

实现模板设计后点击保留按钮进行提交，这里咱们先将数据保留至sessionStorage，不便前面的获取。

注：
原生Designer并未蕴含保留按钮，咱们能够利用其弱小的自定制能力依据业务需要来执行相干代码逻辑，保留按钮的代码逻辑如下图：

自定制组件残缺代码能够参考文章开端的demo，这里不再一一介绍了。
到此Designer的集成与模板设计实现，接下来看下如何集成前端表格控件并进行数据的填报和收集。

二、集成

与集成Designer相似，首先先创立一个名为SpreadSheet的vue页面。

<template>
  <div>
    <div>
      <button :style="{margin: '20px'}" @click="importTemplate()">导入模板</button>
      <button @click="setDataSource()">绑定数据源</button>
      <button @click="saveTemplate()">保留</button>
    </div>
    <div id="ss" style="height:700px;width:100%;text-align: left;"></div>
  </div>
</template>

<script>
import { onMounted, ref} from "vue";
import "../../node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"
import GC from "@grapecity/spread-sheets"
import "@grapecity/spread-sheets-resources-zh";

export default {
  name: 'SpreadSheet',
  components: {
  },
  setup(){
    let spread, sheet;
    onMounted(() => {
      let workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
      let spreadDom = workbook.getHost();
      spread = GC.Spread.Sheets.findControl(spreadDom);
    });

    let importTemplate = () => {
      const json = JSON.parse(sessionStorage.getItem("templateJson"));
      spread.fromJSON(json);
    };

    let setDataSource = () => {
      sheet = spread.getActiveSheet();
      let table = sheet.tables.all()[0];
      table.allowAutoExpand(true);
      table.expandBoundRows(true);
      let data = {
          budget: [
              {item:"部门流动", Jan: 15, Feb: 25, Mar: 10, Apr: 25, May: 13, Jun: 15},
              {item:"差旅费", Jan: 15, Feb: 25, Mar: 10, Apr: 25, May: 13, Jun: 15},
              {item:"办公费", Jan: 15, Feb: 25, Mar: 10, Apr: 25, May: 13, Jun: 15},
              {item:"广告费", Jan: 15, Feb: 25, Mar: 10, Apr: 25, May: 13, Jun: 15},
              {item:"招待费", Jan: 15, Feb: 25, Mar: 10, Apr: 25, May: 13, Jun: 15}
          ]
      }
      let datasource = new GC.Spread.Sheets.Bindings.CellBindingSource(data);
      sheet.setDataSource(datasource);
    };

    let saveTemplate = () => {
      let source = sheet.getDataSource().getSource();
      sessionStorage.setItem("dataSource", JSON.stringify(source));
      console.log(source);
      alert("保留填报数据胜利");
    };

    return {
      spread,
      importTemplate,
      setDataSource,
      saveTemplate
    }
  }
}
</script>

1、在模板中增加一个div，这个div就是spread的容器，能够通过css设置容器的宽高地位等，也就是自定义了spread的显示大小及地位。
2、增加导入模板、绑定数据源、保留按钮。
3、导入此组件所须要的依赖。
4、在setup办法中初始化spread。
5、实现各按钮对应的代码逻辑。

importTemplate 办法中应用fromJSON办法来加载Designer设计好的模板。
setDataSource中利用数据绑定性能绑定了预设好的数据源，或者你也能够批改或手动填报。

saveTemplate办法中获取批改/填报后的数据源，并可将数据源保留至后盾数据库（本例保留至sessionStorage，仅作示例作用）。前期做填报汇总时就能够间接从后盾数据库间接读取该数据源了。

至此，一个简略的在线Excel填报零碎实现，感兴趣的小伙伴能够下载下方工程代码本人尝试一下。
https://gcdn.grapecity.com.cn…

如果大家对更多实例感兴趣能够查看：
https://demo.grapecity.com.cn…

关于前端:如何开发一款基于-vitevue3-的在线表格系统下

一、集成Designer

二、集成

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

关于前端:如何开发一款基于-vitevue3-的在线表格系统下

一、集成Designer

二、集成

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

发表回复取消回复