新人必看!手把手教你如何使用浏览器表格插件(上)

本文由葡萄城技术团队于博客园原创并首发。葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。

前言|问题背景

  作为一名优秀的打工人,Excel是大家上班中必不可少的办公软件。随着互联网时代的到来,越来越多的公司开始使用各种B/S系统来处理表格数据文件。那么有没有一种可以直接在浏览器中使用的Excel插件去处理数据呢?答案是肯定的。本文小编将为大家介绍如何在Vue框架中集成SpreadJS在线表格插件(以下简称为“SpreadJS”)和在线表格编辑器(类Excel浏览器插件)实现在浏览器中使用Excel插件来处理数据。

  在本教程中,我们将使用node.js,请确保已安装最新版本,除此之外还需要使用软件Visual Studio Code(以下简称“VSCode”)作为编程环境,请您以管理员身份运行它。

如何在Vue框架中集成表格插件(SpreadJS)

      在本节内容中,小编将向大家展示如何在Vue框架引入表格插件(SpreadJS)资源并实现简单的上传文件、下载文件两个功能。

在Vue中集成SpreadJS:

1.首先使用管理员权限打开VSCode软件,然后再用VSCode打开初始代码文件(文章下方资源包中)或者也可以选择自己创建一个Vue项目,相关创建语法如下:

# npm 6.x

npm create vite@latest Vue3-spread-ts --template Vue-ts

# npm 7+, extra double-dash is needed:

npm create vite@latest Vue3-spread-ts --template Vue-ts

# yarn

yarn create vite Vue3-spread-ts --template Vue-ts

# pnpm

pnpm create vite Vue3-spread-ts -- --template Vue-ts

                                             (npm创建Vue指令)

     

2.创建完Vue项目之后,打开项目中的package.json文件夹,这个时候我们需要在文件夹中引入SpreadJS组件包:

{

  "name": "vue3-spread-ts",

  "private": true,

  "version": "0.0.0",

  "scripts": {

    "dev": "vite",

    "build": "vue-tsc --noEmit && vite build",

    "preview": "vite preview"

  },

  "dependencies": {

    "@grapecity/spread-excelio": "15.1.0",

    "@grapecity/spread-sheets": "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-pdf": "15.1.0",

    "@grapecity/spread-sheets-pivot-addon": "15.1.0",

    "@grapecity/spread-sheets-print": "15.1.0",

    "@grapecity/spread-sheets-resources-zh": "15.1.0",

    "@grapecity/spread-sheets-shapes": "15.1.0",

    "@grapecity/spread-sheets-tablesheet": "15.1.0",

    "@grapecity/spread-sheets-vue": "15.1.0",

    "element-plus": "^2.2.5",

    "file-saver": "^2.0.5",

    "vue": "^3.2.25"

  },

  "devDependencies": {

    "@vitejs/plugin-vue": "^2.3.3",

    "typescript": "^4.5.4",

    "vite": "^2.9.9",

    "vue-tsc": "^0.34.7"

  }

}

                                          (需要引入的spreadJS组件)

引入这些组件后,使用npm install命令来下载这些组件(第一次下载可能需要一些时间)。下载完成之后使用命令npm run dev启动项目,如果在浏览器中看可以打开表示项目启动安装成功。

 

3.项目启动后,打开src\components目录下的OnlineSpread.Vue文件,这个文件是Vue框架集成SpreadJS主要代码的存放位置。(如果想自定义.Vue文件编写代码也可以,但注意需要修改APP.Vue文件中的代码import onlineSpread from './components/OnlineSpread.Vue'为自定义的文件名称)。

       3.1为了将SpreadJS集成到Vue框架中,需要引入一些资源到项目中,这些资源包含了SpreadJS的主要资源、文件导入导出等。

import {defineComponent} from 'Vue'

// SpreadJS组件运行时资源

import * as GC from "@grapecity/spread-sheets"

//引入符合自己项目主题的样式

import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"

//设置中文

import "@grapecity/spread-sheets-resources-zh"

// 引入导入导出文件相关的资源

import * as ExcelIO from "@grapecity/spread-excelio"

//引入文件导出

import {saveAs} from 'file-saver'

//引入打印相关资源

import "@grapecity/spread-sheets-print"

//引入导出pdf资源

import "@grapecity/spread-sheets-pdf"

 

//引入语言资源(支持中英文)

GC.Spread.Common.CultureManager.culture('zh-cn')

                                          (SpreadJS引入到Vue中的资源信息)

  3.2引入资源后,发现浏览器显示你的表格内容只有一行,这是因为表格的格式还未被设置,需要用SpreadJS的hostStyle标签和workbookInitialized标签来设置表格的大小和宽度。具体设置方法是先在div标签中设置hostStyle的格式(注意不要忘了return hostStyle标签),然后在setup方法中设置高度格式即可。

// 引入组件

components:{

        'gc-spread-sheets':GcSpreadSheets

    }

 

//div标签

<gc-spread-sheets :hostStyle="hostStyle" @workbookInitialized="initWorkbook">

  </gc-spread-sheets>

 //设置高度格式,写在setup方法中

        const hostStyle={

            height:'90vh'

        }

return{

            hostStyle

        }

                                               (设置表格大小格式的代码)

上传文件和下载文件:

       上传文件、下载文件的方法与设置表格大小的方法如出一辙,首先也是在div标签中设置对应的按钮,

       <el-upload

            class="upload-demo"

            accept=".xlsx"

            :before-upload="importFile"

            action=''>

            <el-button type="primary">上传文件</el-button>

        </el-upload>

        <el-button type="primary" @click="downloadFile">下载文件</el-button>

                                          (在div标签中设置上传文件和下载文件的按钮)

然后在setup方法中设置上传文件和下载文件的方法(具体可以参考SpreadJS的API参考文档)。

 //文件上传的方法

        const importFile = (file) => {

            let io = new ExcelIO.IO()

            // excelio打开文件,回调函数中的参数时SpreadJS支持的json格式

            io.open(file,(fileJSON) => {

                // fromJSON中第二个参数为导入文件的控制参数,默认均为false,根据自己的需求添加,都不要修改时可不传

                spread.fromJSON(fileJSON,{

                    ignoreFormula: false,    //导入忽略公式    

                    ignoreStyle: false,      //导入忽略样式

                    frozenColumnsAsRowHeaders: false,   //将冻结列当作行头

                    frozenRowsAsColumnHeaders: false,   //将冻结行作为列头

                    // 导入文件不立即计算. Excel文件保存时会自动计算,当文件比较大时,可以导入后不计算,提高导入效率.

                    doNotRecalculateAfterLoad: false    

                })

            })

            return false

        }


        //文件下载的方法

        const downloadFile = () => {

        //获取当前工作簿json,toJSON也可以根据需求设置参数,参考学习指南导入导出json

            let fileJson = spread.toJSON()

            //创建文件IO实例

            let io = new ExcelIO.IO()

            //保存文件

            io.save(fileJson,(blob)=>{

                // excelIO将文件转化为blob,传递给回调函数,然后执行file-saver的saveAs保存excel文件.

                saveAs(blob,'导出文件.xlsx')

            },(e) => {

                console.log(e)

            })

        }

                                       (设置上传文件和下载文件的代码)

做完这些之后便可以在浏览器中实现上传文件、修改文件内容并下载文件的操作了,同时还可以体验和使用表格插件(用法和Excel高度相似)。

PS:细心的网友应该发现了,浏览器中只显示了表格,并没有显示Excel中上方的编辑器内容。原因是由于文章长度限制无法一次介绍完,小编将Vue集成在线编辑器的内容放在了下一篇文章中。

备注:

整理的完整源码附文章下方day1文件夹中的vue3-spreadJS-ts文件,直接在终端中使用npm run dev指令运行即可。

源码链接:http://pan.baidu.com/s/13bZTosXVBe3Jy_z-rFhoog(百度网盘)提取码:abcd

 



本文是由葡萄城技术开发团队发布,转载请注明出处:葡萄城官网


本文转载于网络 如有侵权请联系删除

相关文章

  • Kubernetes 1.22.1 高可用二进制部署

    1.环境准备1.1主机规划IP地址机器名机器配置机器角色安装软件操作系统10.10.0.74//VIP由HAProxy和keepalived组成的LBcentos7.910.10.0.75master01.px-k8s2c*4Gmasterkube-apiserver、kube-controller-manager、kube-scheduler、etcd、haproxy、keepalived、nfs-clientcentos7.910.10.0.76master02.px-k8s2c*4Gmasterkube-apiserver、kube-controller-manager、kube-scheduler、etcd、haproxy、keepalived、nfs-clientcentos7.910.10.0.77master03.px-k8s4c*8Gmasterkube-apiserver、kube-controller-manager、kube-scheduler、etcd、haproxy、keepalived、nfs-clientcentos7.910.10.0.78node01.

  • Mybatis 查询时对通配符的处理

    Mybatis、MongoDB或者Solr引擎在查询数据的时候,如果存在%_等通配符时,这些特殊符号都不会被作为字符串进行搜索,会导致查询不出数据或者查询出来的数据是不准确的,这个时候就需要对特殊字符进行转义。例如:<iftest="name!=nullandname!=''"> ANDcontent.namelikeCONCAT(#{name},'%') </if>复制按原先的预想是该字段会进行左匹配,但是如果入参name是%测试%,则实际上搜索的是全匹配搜索了带有测试的所有值。原因就是使用LIKE关键字进行模糊查询时,%、下划线和[]单独出现时,会被认为是通配符,所以需要进行转义,然后通过ESCAPE告诉数据库转义字符后的字符为实际值。首先对关键字进行转义,使用StringEscapeUtils对Java中特殊字符进行转义,或者使用以下的工具类/** *sql模糊搜索时,对查询字段作特殊处理 *通配符转义处理后,like语句后面加上ESCAPE'/' *@params需要转义的字

  • 实战 LeetCode 15.三数之和、18.四数之和,并扩展至 N 数之和

    题目描述15.三数之和链接:https://leetcode-cn.com/problems/3sum/给你一个包含n个整数的数组nums,判断nums中是否存在三个元素a,b,c,使得a+b+c=0?请你找出所有和为0且不重复的三元组。注意:答案中不可以包含重复的三元组。18.四数之和链接:https://leetcode-cn.com/problems/4sum/给定一个包含n个整数的数组nums和一个目标值target,判断nums中是否存在四个元素a,b,c和d,使得a+b+c+d的值与target相等?找出所有满足条件且不重复的四元组。注意:答案中不可以包含重复的四元组。其实这两道题前面还有一道更加基础的题,那就是第一题,两数之和。因为题目比较简单,而且我觉得大部分人也应该都知道这道题,所以这里就不再贴第一题了。不过这几道题都很经典,面试的时候会被经常问道。这几道题也都不难,但是有一定的技巧在里面。掌握了不仅有助于拓展思维,而且对于面试求职也有很大帮助。题目分析做这类题的话,如果之前没有见过的话,很大可能就只能选择暴力求解了。不是说这样做不行,实在想不到其他方法了,也可以。但

  • 【SAP HANA系列】EXCEL连接SAP HANA的方法(ODBC)

    正文部分事前工作准备如下【office2016】:1、PowerQuery在Excel2016中称为Get&Transform。此处提供的信息适用于两者。要了解更多信息,请参阅Excel2016中的获取和转换2、如果你有Office365,此功能仅在Excel中可用。如果你是Office365用户,请确保你具有最新版本的Office。3、在使用PowerQuery连接到SAPHANA数据库之前,需要在计算机上安装SAPHANAODBC驱动程序。    选择与PowerQuery安装(32位或64位)相匹配的驱动程序。4、需要一个SAP帐户登录到该网站并下载该驱动程序。如果不确定,请联系你们的basis确认。下面要连接到SAPHANA数据库:1、路径:从SAPHANA数据库中单击数据>新建查询>从SAPHANA数据库2、在“SAPHANA数据库”对话框中,指定要连接的服务器。服务器名称规则为ServerName:Port。3、如果要使用本地数据库查询导入数据,请单击“高级”选项,然后在“SQL语句”框中输入查询。   单击确定。4、如果SAPHANA服务器需要数据库用户凭据,

  • 掌握 AST,轻松落地关键业务「技术创作101训练营」

    如果你查看目前任何主流的项目中的devDependencies,我们不会在生产环境用到,但是它们在开发过程中充当着重要的角色。归纳一下有:javascript转译、代码压缩、css预处理器、elint、pretiier,postcss等。所有的上述工具,不管怎样,都建立在了AST这个巨人的肩膀上,都是AST的运用:编辑器的错误提示、代码格式化、代码高亮、代码自动补全;elint、pretiier对代码错误或风格的检查;webpack通过babel转译javascript语法;同时,在业务使用AST可以解决一些通过常规方式处理很繁琐的问题。如通过AST解决识别slot插槽名称、$emit事件名称、解析模板字符串并进行替换等关键逻辑问题(这些都已在我们的项目中落地)。AST是什么抽象语法树(AbstractSyntaxTree,AST)是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构,树上的每个节点都表示源代码中的一种结构。AST可以将代码转换成JSON语法树,基于语法树可以进行代码转换、替换等很多操作,其实AST应用非常广泛,我们开发当中使用的less/sass、es

  • 指定 ASP.NET Core 应用监听的端口

    指定ASP.NETCore应用监听的端口ASP.NETCore应用默认监听的端口是5000,在调试或者部署的过程中经常需要指定监听的端口来来运行,本文就这个问题,进行一个总结,可以通过下面的方法来指定运行端口。使用命令行参数使用命令行参数--urls是最常用的方法了,测试或者开发环境下用的最多。只需要在运行命令中添加这个参数即可,如下所示:dotnetrun--urls=http://localhost:5001/复制在appsettings.json中添加配置如果倾向于使用配置文件,可以在appsettings.json文件中添加urls节点,如下所示:{ "urls":"http://localhost:5001" }复制这样,执行dotnetrun时,会自动读取这个配置。环境变量ASP.NETCore应用在启动时会自动读取名称以ASPNETCORE开头的环境变量,所以也可以通过环境变量来指定监听的端口。exportASPNETCORE_URLS=http://localhost:5001/ dotnetrun复制在微软提供的mcr.micr

  • 【DL】训练神经网络时如何确定batch的大小?

    以下文章来源于公众号夕小瑶的卖萌屋,作者夕小瑶当我们要训练一个已经写好的神经网络时,我们就要直面诸多的超参数啦。这些超参数一旦选不好,那么很有可能让神经网络跑的还不如感知机。因此在面对神经网络这种容量很大的model前,是很有必要深刻的理解一下各个超参数的意义及其对model的影响的。贴心的小夕还是先带领大家简单回顾一下神经网络的一次迭代过程:即,首先选择n个样本组成一个batch,然后将batch丢进神经网络,得到输出结果。再将输出结果与样本label丢给loss函数算出本轮的loss,而后就可以愉快的跑BP算法了(从后往前逐层计算参数之于loss的导数)。最后将每个参数的导数配合步长参数来进行参数更新。这就是训练过程的一次迭代。由此,最直观的超参数就是batch的大小——我们可以一次性将整个数据集喂给神经网络,让神经网络利用全部样本来计算迭代时的梯度(即传统的梯度下降法),也可以一次只喂一个样本(即严格意义上的随机梯度下降法,也称在线梯度下降法,简称SGD),也可以取个折中的方案,即每次喂一部分样本让其完成本轮迭代(即batch梯度下降法)。数学基础不太好的初学者可能在这里犯迷糊—

  • R语言︱机器学习模型评价指标+(转)模型出错的四大原因及如何纠错

    笔者寄语:机器学习中交叉验证的方式是主要的模型评价方法,交叉验证中用到了哪些指标呢?交叉验证将数据分为训练数据集、测试数据集,然后通过训练数据集进行训练,通过测试数据集进行测试,验证集进行验证。模型预测效果评价,通常用相对绝对误差、平均绝对误差、根均方差、相对平方根误差等指标来衡量。只有在非监督模型中才会选择一些所谓“高大上”的指标如信息熵、复杂度和基尼值等等。 其实这类指标只是看起来老套但是并不“简单”,《数据挖掘之道》中认为在监控、评估监督模型时还是一些传统指标比较靠谱,例如平均绝对误差(MAE)、平均平方差(MSE)、标准平均方差(NMSE)和均值等,计算简单、容易理解;三者各有优缺点,就单个模型而言,1、绝对误差与相对误差绝对误差(AbsoluteError)=原值-估计值相对误差(RelativeError)=(原值-估计值)/原值2、平均绝对误差(MeanAbsoluteError,MAE)平均绝对误差=︱原值-估计值︱/n其中n代表数据个数,相当于误差绝对值的加权平均值。由于预测误差有正有负,为了避免正负相抵消,故取误差的绝对值进行综合并取其平均数,这是误差分析的综合指标

  • GIL和池的概念

    1.GIL概念 1.什么是GIL(为Cpython解释器) GIL本身就是一把互斥锁.原理都一样.都是让并发的线程同一时间只能执行一个 所以有了GIL的存在.同一进程下的多个线程同一时刻只能有一个能运行.无法实现并行->意味着无法利用多核优势->多个CPU同时计算 GIL是影响python运行效率慢的原因之一.但是不影响并发的执行.只是无法同时利用多个cpu执行计算 GIL可以被比喻成执行权限.同一进程下的所有线程要想运行代码都要先抢执行权限 2.为何要有GIL: 因为Cpython中自带的垃圾回收机制不是线程安全的->需要将GIL锁加在Cpython之上.控制只能有一个线程在执行. 抢到GIL才能去执行 3.如果使用: GILvs自定义的互斥锁 GIL相当于执行任务.会在任务无法执行时.被强迫释放 自定义互斥锁.即便是无法执行.也不回自动释放 4.多线程执行IO密集型任务会大幅提升效率:多线程发送网络请求 执行CPU密集型任务反而会降低效率.因为频繁切换切换线程导致无意义的时间消耗.产生CPU颠簸.CPU负责计算.程序出现io什么都做不了 CPU密集型任务

  • 添加到web.config文件里的用户自定义翻页控件

    <pages> <controls> <addtagPrefix="ucl"tagName="Pager_Backstage"src="~/UserControl/Pager_Backstage.ascx"/> </controls></pages>复制  

  • 笔记:2016-06-12

    ajaxvarurl='open.php?username='+encodeURIComponet(username)+'&password='+password; <?xmlversion="1.0"encoding="utf-8"?><bookstore>   <book>       <name>三国演义</name>       <category>文学</category>       <desc>描述</desc>   </book>      <book>    

  • 腾讯IM

     

  • 预处理、const、static与sizeof-#pragma pack的作用

    1:有如下代码: #include<iostream.h> #pragmapack(1) structtest{ charc; shorts1; shorts2; inti; }; intmian() { cout<<sizeof(test)<<endl; return0; }复制   代码第3行用#pragmapack将对其设为1.由于结构体test中的成员s1、s2和i的自身对齐分别为2、2和4,都小于1.因此它们都是用1作为对齐,sizeof(test)=1+2+2+4=9.   如果注释掉第3行,则编译器默认对齐为8.所以各个成员自身的对齐都小于8,因此它们使用自身的对齐,sizeof(test)=1+1(补齐)+2+2+2(补齐)+4=12. 本博文由LeonZhang原创,若转载,请注明出处。

  • slf4j

    Springframeworkthrows Exceptioninthread"main"java.lang.NoSuchMethodError:org.slf4j.spi.LocationAwareLogger.log(Lorg/slf4j/Marker;Ljava/lang/String;ILjava/lang/String;Ljava/lang/Throwable;)V atorg.apache.commons.logging.impl.SLF4JLocationAwareLog.info(SLF4JLocationAwareLog.java:159) atorg.springframework.context.support.AbstractApplicationContext.prepareRefresh(AbstractApplicationContext.java:454) atorg.springframework.context.support.AbstractApplicationContext.refresh(AbstractApplicationContext.

  • Linux系统监测的常用命令

      cat/proc/cpuinfo  #查看CPU信息  cat/proc/meminfo #查看内存大小  fdisk-l|grepDisk #查看硬盘大小 uname-a#查看内核/操作系统/CPU信息的linux系统信息命令 head-n1/etc/issue#查看操作系统版本 cat/proc/cpuinfo#查看CPU信息的linux系统信息命令 hostname#查看计算机名的linux系统信息命令 lspci-tv#列出所有PCI设备 lsusb-tv#列出所有USB设备的linux系统信息命令 lsmod#列出加载的内核模块 env#查看环境变量资源 free-m#查看内存使用量和交换区使用量 df-h#查看各分区使用情况 du-sh#查看指定目录的大小 grepMemTotal/proc/meminfo#查看内存总量 grepMemFree/proc/meminfo#查看空闲内存量 uptime#查看系统运行时间、用户数、负载 cat/proc/loadavg#查看系统负载磁盘和分区 mount

  • 当你输入一个网址的时候,实际会发生什么?(转)

    转自:http://www.cnblogs.com/wenanry/archive/2010/02/25/1673368.html 原文:http://igoro.com/archive/what-really-happens-when-you-navigate-to-a-url/   作为一个软件开发者,你一定会对网络应用如何工作有一个完整的层次化的认知,同样这里也包括这些应用所用到的技术:像浏览器,HTTP,HTML,网络服务器,需求处理等等。 本文将更深入的研究当你输入一个网址的时候,后台到底发生了一件件什么样的事~ 1.首先嘛,你得在浏览器里输入要网址:   2.浏览器查找域名的IP地址 导航的第一步是通过访问的域名找出其IP地址。DNS查找过程如下: 浏览器缓存– 浏览器会缓存DNS记录一段时间。有趣的是,操作系统没有告诉浏览器储存DNS记录的时间,这样不同浏览器会储存个自固定的一个时间(2分钟到30分钟不等)。 系统缓存 –如果在浏览器缓存里没有找到需要的记录,浏览器会做一个系统调用(windows里是gethost

  • UPC2018组队训练赛第九场

    题目来自2018广西省赛   A题:WelcometoCollegiateProgrammingContest 1#include<iostream> 2 3usingnamespacestd; 4 5intmain() 6{ 7intn; 8intt; 9cin>>t; 10while(t--) 11{ 12cin>>n; 13for(inti=0;i<n;i++) 14{ 15if(i) 16{ 17cout<<""; 18} 19cout<<"AC"; 20} 21cout<<endl; 22} 23return0; 24}复制 ViewCode   B题:Practice 1#include<iostream> 2#include<bits/stdc++.h> 3usingnamespacestd; 4constintN=6; 5structnode{ 6inttime; 7intvalue; 8}op[N]; 9boolcmp1(nodea,

  • 命令行访问https(转载,略有改动)

    由于现在很多的互联网页面开始使用https,造成telnet的http方式无法访问(文档地址:用Telnet发送HTTP请求),特补充下文: 1、安装openssl。如链接失效,请自行找其它资源。 2、将openssl的bin目录(D:\ProgramFiles\OpenSSL-Win64\bin)加入系统环境变量Path中。 3、使用命令访问 openssls_client-connectwww.baidu.com:443 复制   返回证书信息类似下文: CONNECTED(000001A0)depth=1C=BE,O=GlobalSignnv-sa,CN=GlobalSignOrganizationValidationCA-SHA256-G2verifyerror:num=20:unabletogetlocalissuercertificateverifyreturn:1depth=0C=CN,ST=beijing,L=beijing,OU=serviceoperationdepartment,O="BeijingBaiduNetcomScienceTechnologyCo.

  • iOS开发之 音频播放

    音频播放 1、介绍  -功能介绍  用于播放比较长的音频、说明、音乐,使用到的是AVFoundation  -框架介绍  *AVAudioPlayer  *初始化:  注意: (3)必须声明全局变量的音乐播放对象、或者是属性的音乐播放对象 才可以播放 (4)在退出播放页面的时候一定要把播放对象置空 同时把delegate置空   导入框架:#import<AVFoundation/AVFoundation.h> 声明全局变量 @interfaceViewController()<AVAudioPlayerDelegate> { AVAudioPlayer*audioPlayer; } @end复制 音频的基本属性 预播放 [audioPlayerprepareToPlay]; 获取 当前音乐的声道audioPlayer.numberOfChannels audioPlayer.currentTime//当前播放的时间 

  • 体系结构设计

    需求复审 对于电瓶车充电桩管理系统,我们补充了一个总体数据流图:      我们对部分数据流图的精化如下:   登录者信息管理精化的数据流图:        充电桩操作精化的数据流图:        个人订单处理精化的数据流图:        总订单处理精化的数据流图:        软件体系结构   我们的软件体系结构图如下所示:        如上图所示,最顶层为学校电瓶车充电管理系统,可分化为登录者输入,登录者操作处理,显示输出三个模块。其中登录者输入模块主要为用户或管理员填写个人信息模块或登录使用模块;登录者操作处理模块为登录者登录该软件后可使用的功能;显示输出模块为为登录者提供的部分查询功能,使能更方便使用该软件或查询自身使用的记录。   模块设计 最顶层的是学校电瓶车充电管理系统,是整个软件的主体功能的集合。其可以分为三个子模块:登录者输入、登录者操作处理和显示输出。 (1)登录者输入模块可分为登录和登录者信息录入两个模块: ①登录模块:管理员或用户可通过登录功能来获取属于自身的一些权限。其输入数据为登录者的个人信息和个人信息存储空间中的个人信息。输入后

  • ssh-keygen的使用方法

    一、概述 1、就是为了让两个linux机器之间使用ssh不需要用户名和密码。采用了数字签名RSA或者DSA来完成这个操作 2、模型分析 假设A(192.168.20.59)为客户机器,B(192.168.20.60)为目标机;要达到的目的:A机器ssh登录B机器无需输入密码;加密方式选rsa|dsa均可以,默认dsa   二、具体操作流程   单向登陆的操作过程(能满足上边的目的):1、登录A机器 2、ssh-keygen-t[rsa|dsa],将会生成密钥文件和私钥文件id_rsa,id_rsa.pub或id_dsa,id_dsa.pub3、将.pub文件复制到B机器的.ssh目录, 并catid_dsa.pub>>~/.ssh/authorized_keys4、大功告成,从A机器登录B机器的目标账户,不再需要密码了;(直接运行 #ssh192.168.20.60 )   双向登陆的操作过程: 1、ssh-keygen做密码验证可以使在向对方机器上ssh,scp不用使用密码.具体方法如下:2、两个节点都

相关推荐

推荐阅读