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

32次阅读

共计 6271 个字符,预计需要花费 16 分钟才能阅读完成。

在上篇内容中咱们为大家分享了具体介绍 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…

正文完
 0