在上篇内容中我们为大家分享了详细介绍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/spreadjs/SpreadJSTutorial/features/data-binding/table-binding/purejs

主要代码如下:

先来安装需要的模块

"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/forum.php?mod=attachment&aid=MjIzMDM0fGIyODc2MDlmfDE2NTg4MjgyNzB8NjI2NzZ8OTk3MTg%3D

如果大家对更多实例感兴趣可以查看:

https://demo.grapecity.com.cn/spreadjs/gc-sjs-samples/index.html

如何开发一款基于 vite+vue3 的在线表格系统(下)的更多相关文章

  1. 如何开发一款基于 Vite+Vue3 的在线表格系统(上)

    今天,葡萄带你了解如何基于Vite+Vue3实现一套纯前端在线表格系统. 在正式开始项目介绍之前,首先咱们首先来介绍一下Vite和Vue3. Vue3 Vue是什么?大多前端开发者对这个词已毫不陌生了 ...

  2. 手把手带你实现基于 Vite+Vue3 的在线Excel表格系统

    今天,葡萄带你了解如何基于Vite+Vue3实现一套纯前端在线表格系统. 在正式开始项目介绍之前,首先咱们首先来介绍一下Vite和Vue3. Vue3 2020年09月18日Vue.js 3.0发布, ...

  3. 从开发一款基于Vue技术栈的全栈热重载生产环境脚手架,我学到了什么

    浏览文章前 这一期,我分享给大家三点看源码的小技巧,这也是从别的大佬那总结的. 被反复使用的代码 这样的代码是一个软件的重点函数,一个大神的写法有很多精华值得学习. 穿越时间的代码 如果一段代码10年 ...

  4. 基于ssh框架的在线考试系统开发的质量属性

    我做的系统是基于ssh框架的在线考试系统.在线考试系统有以下几点特性:(1)系统响应时间需要非常快,可以迅速的出题,答题.(2)系统的负载量也需要非常大,可以支持多人在线考试(3)还有系统的安全性也需 ...

  5. 基于SSH框架的在线考勤系统开发的质量属性

    我要开发的是一个基于SSH框架的在线考勤系统. 质量属性是指影响质量的相关因素,下面我将分别从6个系统质量属性(可用性,易用性,可修改性,性能,安全性,可测试性)来分析我的系统,以及如何实现这些质量属 ...

  6. 三个小白是如何在三个月内搭一个基于kaldi的嵌入式在线语音识别系统的

    前面的博客里说过最近几个月我从传统语音(语音通信)切到了智能语音(语音识别).刚开始是学语音识别领域的基础知识,学了后把自己学到的写了PPT给组内同学做了presentation(语音识别传统方法(G ...

  7. 基于Spring Boot的在线问卷调查系统的设计与实现+论文

    全部源码下载 # 基于Spring Boot的问卷调查系统 ## 介绍 > * 本项目的在线问卷调查调查系统是基于Spring Boot 开发的,采用了前后端分离模式来开发. > * 前端 ...

  8. 基于Vite+React构建在线Excel

    Vite是随着Vue3一起发布的一款新型前端构建工具,能够显著的提升前端开发体验,它主要由两部分组成: (1)一个开发服务器,它基于**原生ES模块提供了丰富的内建功能,如速度快到惊人的 模块热更新( ...

  9. 基于 vite 创建 vue3 全家桶项目(vite + vue3 + tsx + pinia)

    vite 最近非常火,它是 vue 作者尤大神发布前端构建工具,底层基于 Rollup,无论是启动速度还是热加载速度都非常快.vite 随 vue3 正式版一起发布,刚开始的时候与 vue 绑定在一起 ...

随机推荐

  1. 直接将A类库复制到vs中的B类库,但是解决方案菜单中不显示

    1.将要复制的文件夹复制粘贴到你要用的vs项目中 2.右键 添加   现有项目  选中xxxxx.csproj文件   点击  打开   就可以了

  2. Eureka服务下线太慢,电话被告警打爆了

    某年某月的某一天,就像一张破碎的脸... 错了,重来. 某天,忽然发现大量的告警,经过多番调查研究考察(此处省略3000字),发现是由于 Eureka 服务下线太慢,而仍然有大量的请求打进来导致的报错 ...

  3. JavaScript String -> Number

    五种将String类型转化为Number类型的方法:   方法一:使用一元运算符:eg:字符串'5' +'5' -> 5;  5+null -> 5(null转化为0);  '5'+nul ...

  4. Django 学习记录(AcWing)

    Django 2.1 搭建文件结构 前面的都是配置基本步骤,不需要理解,其他Django项目同样步骤操作: 接下来用Django-admin新建一个Django项目: django-admin sta ...

  5. VMware Workstation 虚拟机安装教程

    一.介绍篇 VMware Workstation 16 Pro是VMware(威睿公司)于2021年最新发布的一代虚拟机软件,软件的中文名是"VMware 工作站 16 专业版". ...

  6. 30.Mysql主从复制、读写分离

    Mysql主从复制.读写分离 目录 Mysql主从复制.读写分离 读写分离 读写分离概述 为什么要读写分离 什么时候要读写分离 主从复制与读写分离 mysql支持的复制类型 主从复制的工作过程 初始环 ...

  7. JS:构造函数

    定义:在JavaScript中,用new关键字来调用的函数,称为构造函数,构造函数首字母一般大写. 理解: 构造函数就是初始化一个实例对象,对象的prototype属性是继承一个实例对象. 创建对象, ...

  8. SAP ABAP 快速入门之 开发环境 (Environment)

    报表是学习ABAP 原则和工具的很好的 起点.ABAP 报表在许多领域都有使用,本章将介绍简单ABAP 报表的开发. Hello ABAP 让我们以'Hello World' 开始. 每一个abap ...

  9. SAP 实例 4 CFW

    *&---------------------------------------------------------------------* *& Report demo_cfw ...

  10. Spring框架系列(7) - Spring IOC实现原理详解之IOC初始化流程

    上文,我们看了IOC设计要点和设计结构:紧接着这篇,我们可以看下源码的实现了:Spring如何实现将资源配置(以xml配置为例)通过加载,解析,生成BeanDefination并注册到IoC容器中的. ...