建立Git仓库与使用 编辑器使用 Echarts使用 Excel导入导出 绘制地图 git仓库的建立与使用 编辑器的使用 Echarts的使用 Excel导入导出 绘制地图使用
步骤：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 ( 帮助) ：包括查看帮助文档、查看关于信息等操作，用于获取帮助和支持相关的信息。
步骤：
下载插件：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 : 视觉映射配置项，用于设置图表的颜色映射、大小映射等。
步骤：从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表单中获取到的上传文件作为参数传入
const types = file. name. split ( '.' ) [ 1 ] ;
const fileType = [ 'xlsx' , 'xlc' , 'xlm' , 'xls' , 'xlt' ] . some ( ( item ) => item == types
)
if ( ! fileType) { alert ( { message : '格式错误！请重新选择' } ) ; return
}
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>
