day51(vueJS)建立Git仓库与使用 编辑器使用 Echarts使用 Excel导入导出 绘制地图

news/2024/4/24 13:09:22/文章来源:https://blog.csdn.net/weixin_69145757/article/details/136469452

建立Git仓库与使用 编辑器使用 Echarts使用 Excel导入导出 绘制地图

  • git仓库的建立与使用
  • 编辑器的使用
  • Echarts的使用
  • Excel导入导出
  • 绘制地图使用

git仓库的建立与使用

步骤:1. 创建项目 npm init vue@latest ↓↓↓↓↓↓↓↓2. 建立仓库↓↓↓↓↓↓↓↓3. git init--------->初始化本地仓库↓↓↓↓↓↓↓↓4. git remote add origin  + 地址 建立本地仓库和远端仓库的链接↓↓↓↓↓↓↓↓5. git add .    将工作区中所有修改过的文件添加到暂存区↓↓↓↓↓↓↓↓6. git commit -m  'xxxx'    将暂存区中的文件提交到本地仓库↓↓↓↓↓↓↓↓7. git clone 仓库分享地址     (前提条件,必须是项目成员,克隆指令默认与主仓库建立关键,不能初始化) ↓↓↓↓↓↓↓↓8. git branch 分支名    建立个人分支↓↓↓↓↓↓↓↓9. git checkout 分支名  切换分支↓↓↓↓↓↓↓↓10. git push origin 分支名  推送代码到制定分支↓↓↓↓↓↓↓↓11. git branch 查看所有分支以及当前在哪个分支  ↓↓↓↓↓↓↓↓12. git pull origin 分支名 /(origin master) 拉取分支代码到本地(远端更新的内容,先拉取,再推送,否则可能造成仓库代码丢失,并且当前切换到那个分支,修改代码以及拉取代码的内容就留在这个分支,切换到其他分支看不到)↓↓↓↓↓↓↓↓13. git log 本地查看提交记录(主要用比对本地和远端仓库代码是否同步)enter直到end,然后Q退出↓↓↓↓↓↓↓↓ 14. git merge 被合并的分支名 (一般合并需要切换到master分支)ps:部分分支不可见时,先使用git pull --all统一拉取所有分支代码到本地(不是合并),然后使用git checkout 指令切换过去,合并时就可见了

编辑器的使用

步骤:下载插件:npm install --save @tinymce/tinymce-react↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓从react导入useRef钩子函数,创建ref引用预备用来获取编辑器输入的内容import React, { useRef } from 'react';let editorRef = useRef(null);↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓从@tinymce/tinymce-react插件中引入Editor组件,即可将组件放在函数组件标签区:import { Editor } from '@tinymce/tinymce-react';此时通过editor.current可获取到编辑器实例,并调用其getContent方法获取中输入和编辑的内容console.log(editorRef.current.getContent());
<Editor apiKey='your-api-key' onInit={(evt, editor) => editorRef.current = editor}initialValue="<p>This is the initial content of the editor.</p>"------编辑器内容区初始值设置init={{height: 500,---------编辑器高度menubar: false,----------禁用菜单栏plugins: [====================指定了要加载的插件列表。'advlist', ---------高级列表插件,用于创建高级列表样式'autolink', ----------自动链接插件,可以自动将输入的URL转换为可点击的链接。'lists', ---列表插件,用于创建有序和无序列表。'link', -------链接插件,用于创建和编辑链接。'image', -----------图片插件,用于插入和编辑图片。'charmap',--------字符图表插件,用于插入特殊符号和字符。 'preview',---------预览插件,用于实时预览编辑器中的内容。'anchor', ---------锚点插件,用于创建和编辑锚点链接。'searchreplace', --------搜索替换插件,用于搜索和替换文本。'visualblocks', -------可视化块插件,用于在编辑器中显示块级元素的边界。'code', ----------代码插件,用于插入和编辑代码块。'fullscreen',------全屏插件,用于将编辑器切换到全屏模式。'insertdatetime', -------插入日期和时间插件,用于插入当前日期和时间。'media', --------媒体插件,用于插入和编辑媒体元素,如音频和视频。'table', -------表格插件,用于创建和编辑表格。'help', -------帮助插件,提供编辑器的帮助文档和指南。'wordcount'------字数统计插件,用于统计编辑器中的字数。],toolbar: 'undo redo | blocks | ' +     'bold italic forecolor | alignleft aligncenter ' +'alignright alignjustify | bullist numlist outdent indent | ' +'removeformat | help',content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
}}
/>toolbar:============指定了编辑器的工具栏按钮配置。'undo':撤销按钮,用于撤销上一步操作。'redo':重做按钮,用于恢复上一步撤销的操作。'blocks':块级元素按钮,用于在编辑器中选择和设置块级元素的样式。'bold':加粗按钮,用于将选中的文本设置为加粗样式。'italic':斜体按钮,用于将选中的文本设置为斜体样式。'forecolor':前景颜色按钮,用于设置选中的文本的前景颜色。'alignleft':左对齐按钮,用于将选中的文本左对齐。'aligncenter':居中对齐按钮,用于将选中的文本居中对齐。'alignright':右对齐按钮,用于将选中的文本右对齐。'alignjustify':两端对齐按钮,用于将选中的文本两端对齐。'bullist':无序列表按钮,用于创建无序列表。'numlist':有序列表按钮,用于创建有序列表。'outdent':减少缩进按钮,用于减少选中文本的缩进级别。'indent':增加缩进按钮,用于增加选中文本的缩进级别。'removeformat':清除格式按钮,用于清除选中文本的样式和格式。'help':帮助按钮,用于显示编辑器的帮助文档和指南。content_style:用于设置编辑器中内容的样式。通过指定content_style,可以对编辑器中的文本、段落、列表等元素的样式进行自定义
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }' 这段代码指定了body元素的样式:将font-family属性设置为Helvetica, Arial, sans-serif,即字体优先使用Helvetica,如果没有则使用Arial,如果还没有则使用系统默认的sans-serif字体;将font-size属性设置为14px,即字体大小为14像素。通过这段代码的设置,编辑器中的内容将以Helvetica/Arial/sans-serif字体显示,并且字体大小为14像素。menubar:================该选项设置了编辑器的菜单栏,菜单栏中包含以下功能,选项设置为false,则菜单栏不可见
File (文件):包括新建、打开、保存、另存为等操作,用于文件的基本操作。
Edit (编辑):包括撤销、重做、剪切、复制、粘贴等操作,用于编辑文本内容。
Format (格式):包括字体样式、段落对齐、文本缩进等操作,用于调整文本的格式。
Insert (插入):包括插入图片、链接、表格等操作,用于在文本中插入其他元素。
Tools (工具):包括查找替换、拼写检查、源代码编辑等操作,用于提供辅助工具。
View (视图):包括缩放、全屏、切换布局等操作,用于调整编辑器的显示方式。
Help (帮助):包括查看帮助文档、查看关于信息等操作,用于获取帮助和支持相关的信息。

Echarts的使用

步骤:
下载插件:npm install echarts --save↓↓↓↓↓↓↓↓↓↓↓↓
从下载的echarts插件集中引入echarts提供的所有方法与属性:import * as echarts from 'echarts';↓↓↓↓↓↓↓↓↓↓
使用init方法初始化echarts实例,将指定用于绘制图表的元素(该元素需要提前设置好,且必须设置宽高)使用原生js中的document.getElementById方法获取然后作为参数传入该方法。(一定要在组件挂载完成后 再执行初始化,注意各个框架和版本的生命周期顺序)
let myChart = echarts.init(document.getElementById('main'));↓↓↓↓↓↓↓↓↓↓↓
使用echarts实例化对象调用setOption方法添加图表配置,绘制图表
myChart.setOption({lenged:{}------图例配置项,用于设置图例的样式和位置。title: {  -------------  标题配置项,用于设置图表的标题。text: 'ECharts 入门示例'},  tooltip: {},  ----------  提示框配置项,用于显示鼠标悬停时的提示信息。xAxis: {  ----------坐标轴配置项,用于设置X轴样式、刻度、标签等。data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']  },  yAxis: {},  ---------------------坐标轴配置项,用于设置X轴样式、刻度、标签等。series: [  ------------系列配置项,用于设置图表的数据系列,如折线图、柱状图、饼图等。{  name: '销量',  type: 'bar',  data: [5, 20, 36, 10, 10, 20]  }]  
});grid:网格配置项,用于设置图表的布局和边距。
dataZoom:数据区域缩放配置项,用于设置图表的数据区域缩放功能。
visualMap:视觉映射配置项,用于设置图表的颜色映射、大小映射等。

Excel导入导出

步骤:从react导入useRef钩子函数,调用该函数创建一个ref引用并赋值给指定变量,预备获取表单元素标签区设置input元素,类型type值为file,为其设置display:none属性使之隐藏,添加ref属性,其值为ref引用变量名,预备获取该元素import { useRef } from 'react';let inputValue:any = useRef();<input type="file" ref={inputValue} style={{ display: 'none' }} onChange={saveFile} />;↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓标签区设置button元素,为其添加点击事件,回调函数中使用ref引用获取input表单元素,并触发其click事件<button onClick={uploadFile}>点击上传文件</button>let uploadFile = () => {inputValue.current.click();}↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓为表单元素(上面创建的那个)绑定onChange事件,在回调函数中传入事件对象,并使用事件对象获取通过input表单元素上传的文件<input type="file" ref={inputValue} style={{ display: 'none' }} onChange={saveFile}/>;let saveFile = (e: any) => {let file = e.target.files[0];httpRequest(file);---------该函数用于解析传入的文件并将其渲染在页面,后面定义了该函数}↓↓↓↓↓↓↓↓↓↓↓↓↓↓下载xlsx插件:(该插件主要用于上传excel文件的解析,主用其read和utils对象的sheet_to_html方法)npm i xlsx -S,↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓并将其中的方法与属性集中导入当前组件:import * as XLSX from 'xlsx';↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓设置一个函数用于处理解析和渲染input元素中获取到的上传的文件,函数命名为httpRequest,调用该函数传入获取到的由input元素上传的excel文件,即可将上传的文件显示在页面上
let httpRequest = (file: any) => {---------这段代码将从input表单中获取到的上传文件作为参数传入
//通过split()方法将文件名以'.'进行分割,并取第二个元素作为文件的扩展名
const types = file.name.split('.')[1];
//['xlsx', 'xlc', 'xlm', 'xls', 'xlt']是允许的文件类型数组,some()方法用于判断数组中是否存在满足条件的元素,这里判断条件是item == types,即文件的扩展名与数组中的元素相等。如果存在满足条件的元素,则fileType为true,否则为false
const fileType = ['xlsx', 'xlc', 'xlm', 'xls', 'xlt'].some((item) => item == types
)
//!fileType表示文件类型不符合要求,即文件的扩展名不属于指定的文件类型数组。alert()用于显示错误提示信息。
if (!fileType) {alert({ message: '格式错误!请重新选择' });return
}
//file.arrayBuffer()方法用于读取文件内容并返回一个Promise对象,
//通过.then()方法获取读取完成后的结果。
//在.then()方法中,首先将读取的内容传递给XLSX.read()方法进行解析,得到一个Workbook对象wb。
//然后通过wb.SheetNames[0]获取第一个Sheet的名称,
//再通过wb.Sheets[wb.SheetNames[0]]获取第一个Sheet的内容。
//接着,通过document.getElementById()方法获取指定ID的HTML元素,将Sheet的内容转换为HTML表格并赋值给该元素的innerHTML属性。
file.arrayBuffer().then((ab: any) => {const wb = XLSX.read(ab);const ws = wb.Sheets[wb.SheetNames[0]];var ele: any = document.getElementById('excel-main');---------需要提前设置绘制表格内容的元素容器ele.innerHTML = XLSX.utils.sheet_to_html(ws)});
}
==================================================================================================
特殊方法解析:
file.arrayBuffer(): 读取文件内容并返回一个Promise对象,该对象在读取完成后会返回一个ArrayBuffer对象。
XLSX.read(ab): 将ArrayBuffer对象解析成一个Workbook对象。XLSX是一个库,用于处理Excel文件。
XLSX.utils.sheet_to_html(ws): 将Sheet对象转换为HTML表格格式的字符串。ArrayBuffer是JavaScript中的一种数据类型,用于表示二进制数据,类似于字节数组。它是一个固定长度的缓冲区,可以存储任意类型的二进制数据。
在这段代码中,file.arrayBuffer()方法用于读取上传文件的内容,并返回一个ArrayBuffer对象。这是因为Excel文件是二进制文件,需要将其读取为二进制数据才能进行后续的解析和处理。ArrayBuffer对象提供了对二进制数据的直接操作和处理能力。
Workbook是指代Excel文件的数据结构,表示一个完整的Excel工作簿。它由多个Sheet组成,每个Sheet包含多个单元格和数据。XLSX.read()方法将读取的二进制数据解析为Workbook对象,以便后续对Excel文件进行操作,如读取Sheet的内容、修改单元格数据等。
返回一个Workbook对象的原因是,通过将Excel文件解析为Workbook对象,可以方便地进行对Excel文件的各种操作和处理,如获取Sheet的内容、修改数据、导出为其他格式等。Workbook对象提供了一系列的方法和属性,使得对Excel文件的操作更加简单和灵活。

绘制地图使用

步骤:https://huiyan.baidu.com/github/react-bmapgl/#/%E8%A6%86%E7%9B%96%E7%89%A9/Circle学习网站地址
index.html模板页面头部加载百度地图JavaScript API代码,密钥可去百度地图开放平台官网申请
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
指令下载插件:npm install react-bmapgl --save↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
将需要的组件从包中导入:
该方法为集中导入,也可以使用默认导入从各自准确的文件夹地址按需导入需要的组件。
import {Map, Marker, NavigationControl, InfoWindow} from 'react-bmapgl';
1. Map 组件:用于创建地图实例和显示地图。可以添加的属性包括:1. center: 地图的中心点坐标2. zoom: 地图的缩放级别3. enableScrollWheelZoom: 是否允许滚轮缩放地图4. enableDoubleClickZoom: 是否允许双击放大地图5. enableDragging: 是否允许拖拽地图
2. Marker 组件:用于在地图上标记点位。可以添加的属性包括:1. position: 标记点的位置坐标2. icon: 标记点的图标3. label: 标记点的文本标签
3. NavigationControl 组件:用于添加地图的默认导航控件。可以添加的属性包括:1. anchor: 导航控件的位置2. offset: 导航控件的偏移值
4. InfoWindow 组件:用于在地图上显示信息窗口。可以添加的属性包括:1. position: 信息窗口的位置坐标2. content: 信息窗口的内容↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
使用组件(map可以通过ref获取实例进行必要的操作)
<Map enableScrollWheelZoom center={{lng:100.402544,lat:39.928216}} zoom='15'>
<MapTypeControl />
<ScaleControl />
<NavigationControl />
<InfoWindow position={{ lng:116.402544,lat:39.928216}} text='内容' title='你好'/>
</Map>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_998096.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java/JDK下载安装与环境配置安装(win11超详细图文版教程)

一&#xff1a;安装JDK 1.开始安装JDK 从Oracle官网进入&#xff08;Java Archive | Oracle&#xff09;下载安装文件。 然后往下滑&#xff0c;可以看到官方已经讲收费和免费的分开来了。 这边建议下载Java SE 8 (8u201 and earlier)&#xff0c;原因请看这个博主讲述的理由…

2023第二届陇剑杯网络安全大赛 SS Writeup

sevrer save_1 打开流量包文件过滤http流量 从这个/helloworld/greeting开始追踪TCP流 直接百度搜索payload 搜索得到这题flag就是CVE-2022-22965 sevrer save_2 追踪TCP流&#xff0c;在tcp.stream eq 106&#xff0c;发现反弹shell的IP和端口 这题flag为192.168.43.128:2333…

React-子传父

1.概念 说明&#xff1a;React中子组件向父组件传递数据通常涉及回调函数和状态提升等方法。 2.代码实现 2.1绑定事件 说明&#xff1a;父组件绑定自定义事件 <Son onGetSonMsg{getMsg}></Son> 2.2接受事件 说明&#xff1a;子组件接受父组件的自定义事件名称…

JVM—内存模型(JMM)

之前字节面试问到过Java内存模型&#xff0c;回答的是内存结构。重新学习了一下整理出来。 1、前置知识 通信是指线程之间如何交换信息&#xff0c;主要有两种机制&#xff1a;共享内存 和 消息传递&#xff0c;共享内存指的是多个线程共享的数据区&#xff0c;A 线程写&#x…

ZJUBCA研报分享 | 《web3社交应用是否会成为区块链世界走向大规模应用的流量入口——以debox为例》...

ZJUBCA研报分享 引言 2023 年 11 月 — 2024 年初&#xff0c;浙大链协顺利举办为期 6 周的浙大链协加密创投训练营 &#xff08;ZJUBCA Community Crypto VC Course&#xff09;。在本次训练营中&#xff0c;我们组织了投研比赛&#xff0c;鼓励学员分析感兴趣的 Web3 前沿话题…

常见数据类型

目录 数据类型 字符串 char nchar varchar varchar2 nvarchar 数字 number integer binary_float binary_double float 日期 date timestamp 大文本数据 大对象数据 Oracle从入门到总裁:https://blog.csdn.net/weixin_67859959/article/details/135209645 数…

matlab 提取分割位于多边形区域边缘内部或边缘上的点

[in,on] = inpolygon(xq,yq,xv,yv) xv 和 yv 为定义的多边形区域的,如xv = [1 4 4 1 1 ];yv = [1 1 4 4 1 ];注意最后一个数字与第一个重复,保证多边形闭合; xq 和 yq 为待查询的点in:在多边形内部和边缘的点序号on:仅在多边形边缘的点序号 提取分割方法: matrix=[xq yq…

使用 Docker 部署 File Browser 文件管理系统

1&#xff09;File Browser 介绍 官网&#xff1a;https://filebrowser.org/ GitHub&#xff1a;https://github.com/filebrowser/filebrowser 今天为大家分享一款开源的私有云盘项目&#xff1a;File Browser&#xff0c;简单实用、轻量级、跨平台&#xff0c;安装部署简单快…

错误: 找不到或无法加载主类 com.zql.springbootTest.SpringbootTestApplication

首先查看application.properties是否出现问题 然后可以尝试 maven install

volatile关键字的作用 以及 单例模式(饿汉模式与懒汉模式的区别及改进)

文章目录 &#x1f4a1;volatile保证内存可见性&#x1f4a1;单例模式&#x1f4a1;饿汉模式&#x1f4a1;懒汉模式&#x1f4a1;懒汉模式多线程版&#x1f4a1;volatile防止指令重排序 &#x1f4a1;volatile保证内存可见性 Volatile 修饰的变量能够保证“内存可见性”以及防…

Prompt 共享网站

好用的提示词网站链接&#xff1a; PromptBase | Prompt Marketplace: Midjourney, ChatGPT, DALLE, Stable Diffusion & more.Search 100,000 quality AI prompts from top prompt engineers. Produce better outputs, save on time & API costs, sell your own prom…

鸿蒙Harmony应用开发—ArkTS声明式开发(通用属性:组件标识)

id为组件的唯一标识&#xff0c;在整个应用内唯一。本模块提供组件标识相关接口&#xff0c;可以获取指定id组件的属性&#xff0c;也提供向指定id组件发送事件的功能。 说明&#xff1a; 从API Version 8开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容…

Tomcat概念、安装及相关文件介绍

目录 一、web技术 1、C/S架构与B/S架构 1.1 http协议与C/S架构 1.2 http协议与B/S架构 2、前端三大核心技术 2.1 HTML&#xff08;Hypertext Markup Language&#xff09; 2.2 css&#xff08;Cascading Style Sheets&#xff09; 2.3 JavaScript 3、同步和异步 4、…

【翻译】零信任架构准则(一)Introduction to Zero Trust

零信任简介 零信任架构是一种移除内网信任的一种系统设计方法&#xff0c;它假定访问网络的用户都是有敌意的&#xff0c;因此&#xff0c;每个访问请求都需要基于访问防护策略去验证。零信任架构对用户请求的可信度是通过持续构建用户行为上下文来实现&#xff0c;而上下文又…

解决tomcat双击startup.bat一闪而过的问题

这种问题可能是tomcat找不到你的jdk环境配置路径 1、首先在tomcat的bin文件夹找到startup.bat 和catalina.bat两个文件 2、startup.bat用记事本打开 在末尾添加pause 3、保存修改&#xff0c;双击startup.bat如果出现这种问题&#xff0c;就是找不到jdk路径 4、用记事本打开ca…

苹果电脑专业的Mac垃圾清理工具CleanMyMac X4.14.7

CleanMyMac X是一款专业的Mac清理工具&#xff0c;它具有强大的功能和易用的界面&#xff0c;可以帮助用户快速清理Mac上的无用文件和垃圾&#xff0c;优化系统性能&#xff0c;提升电脑运行速度。 该软件的核心功能包括智能扫描与清理、应用程序管理、隐私保护和系统维护等。…

Newsmy储能电源与您相约九州汽车生态博览

2024年3月7日—10日&#xff0c;第24届 深圳国际智慧出行、汽车改装及汽车服务业态博览会&#xff08;以下简称“九州汽车生态博览会”&#xff09;将在深圳国际会展中心&#xff08;宝安&#xff09;举办&#xff0c;Newsmy纽曼集团将在3号馆32523展位&#xff0c;携全系产品与…

高效办公-浏览器基本操作

日常我们使用电脑&#xff0c;其实很大部分是用于网络功能&#xff0c;这里面除了客户端程序剩余的就是通过我们的浏览器获取信息或者使用业务系统了&#xff0c;这里就简单学习下浏览器基本常识与操作。 一、浏览器是什么&#xff1f; 白话讲浏览器就是一个软件&#xff0c;我…

如何在Linux系统部署MeterSphere服务并配置固定公网访问地址

文章目录 推荐 前言1. 安装MeterSphere2. 本地访问MeterSphere3. 安装 cpolar内网穿透软件4. 配置MeterSphere公网访问地址5. 公网远程访问MeterSphere6. 固定MeterSphere公网地址 推荐 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#…

搭建Zabbix监控系统

1、Zabbix基础 Zabbix是一个基于Web界面的企业级开源监控套件&#xff0c;提供分布式系统监控与网络监控功能。具备主机的性能监控&#xff0c;网络设备性能监控&#xff0c;数据库性能监控&#xff0c;多种告警方式&#xff0c;详细报表、图表的绘制等功能。检测的对象可以是L…