|
目录
一、echarts 图标库
1.echarts的基础
2.项目中的使用
二、execl导出
三、面包屑组件
四、富文本框
五、地图
六、vite 构建配置
七、后端未开跨域资源共享，前端使用代理访问
一、echarts 图标库
1.echarts的基础
概念：将数据转换成图标的形式，更主观的看数据
在?echarts CDN by jsDelivr - A CDN for npm and GitHub?选择?dist/echarts.js，点击并保存为?echarts.js?文件。 在项目中引入
在刚才保存?echarts.js?的目录新建一个?index.html?文件，内容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--1. 引入 ECharts 图标库 -->
<script src="echarts.js"></script>
</head>
<body>
<!-- 2.为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title>ECharts</title>
<!-- 引入刚刚下载的 ECharts 文件 -->
<script src="echarts.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {//x轴坐标上的数据
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},//y轴
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
这样你的第一个图表
重点：数据集
2.项目中的使用
（1）安装echarts
npm install echarts --save
（2）在主界面index.html中引入echarts
（3）在platform中新建index.vue
//在项目中集成echarts的图
<div>
<!-- 三栏布局定义四个容器 -->
<el-row>
<el-col :span="12">
<div ref="mybar" class="bar-wrap"></div>
</el-col>
<el-col :span="12">
<div ref="chartBar" class="bar-wrap"></div>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div ref="chartLine" class="bar-wrap"></div>
</el-col>
<el-col :span="12">
<div ref="myangar" class="bar-wrap"></div>
</el-col>
</el-row>
</div>
// 引入echarts图标库
import * as echarts from 'echarts'
mounted() {
this.initBar()
// 调用不同类型的图
this.onDrawChartBar()
this.drawLineChart()
this.drawBarChart()
},
// 定义初始化方法
methods: {
async initBar() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(this.$refs.mybar) // mounted生命周期
动态获取商品数据
柱状图展示
商品名称 商品销量的接口
y轴商品分类中每类的件数
x轴商品分类的类名
//导入接口RequestCategoryList
import { RequestCategoryList } from '@/api/product'
//调接口获取数据
myChart.showLoading() //显示loadding
// 获取商品列表分类
let data = await RequestCategoryList()
let { resultCode, resultInfo } = data
myChart.hideLoading() //加载完后隐藏loading
if (resultCode == 1) {
// 遍历数据获得商品分类名并映射到新的数组list 再将其塞入xAxis中的data中
let list = resultInfo.list.map(item => item.name)
// 绘制图表
myChart.setOption({
title: {
text: '统计商品分类商品数量',
},
tooltip: {},
xAxis: {
data: list,
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20,30,18,43],
},
],
})
}
二、execl导出
（1）安装插件
npm i xlsx@0.17.0 -S // 处理excel文件的库
npm i file-saver@2.0.5 -S
npm i lodash-es -S //深克隆工具
（2）定义按钮并导出数据
<!-- 导出 excel表格按钮 <el-icon><Download/></el-icon> 下载组件-->
<el-button type="primary" size="small" @click="onHandlerExcel" style="margin-bottom:10px;">
导出excel <el-icon><Download/></el-icon>
</el-button>
//导入excelExport2方法
import {excelExport2} from '@/utils'
//在methods中操作onHandlerExcel方法
onHandlerExcel(){
excelExport2(
//数据源
this.list,
//列名
{
id:'序列号',
picture:'图片',
product:'名称',
shop:'店名',
oldprice:'原价',
price:'现价',
categoryname:'分类',
putaway:'上下架',
detail:'描述'
},
'商品列表' // excel文件名称
)
}
三、面包屑组件
在components文件中新建一个BreadCrumbCom.vue 封装面包屑组件
<el-breadcrumb separator="/" style="margin-bottom: 10px">
<el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
<el-breadcrumb-item v-for="(item,index) in routeArr" :key="index">{{item}}</el-breadcrumb-item>
</el-breadcrumb>
定义一个侦听器侦听路由信息变化
watch:{
$route:{
handler(route){
//判断是不是首页，是首页就清空路由对象的数组
if(route.path == '/index'){
this.routeArr = []
return
}
// 获取当前路由信息对象route中matched数组路由信息 保存到新数组中
let routeArr = route.matched.map(item=>item.meta.title)
this.routeArr = routeArr
}
}
}
在Home.vue中导入
import BreadCrumbCom from '@/components/BreadCrumbCom.vue'
四、富文本框
应用场景：添加日志
在plateform 文件夹下新建log文件，log文件夹下新建add.vue ,list.vue ,lacation.vue文件
在官网https://www.tiny.cloud/docs-4x/中
-
下载依赖?Custom HTML Builds | Trusted Rich Text Editor | TinyMCE -
下载汉化包?https://download.tiny.cloud/tinymce/community/languagepacks/6/zh-Hans.zip?_ga=2.37613731.2030153498.1660544987-1887555869.1660544987 -
将tinymce文件夹拷贝到项目public目录下 //在index.html文件中引入汉化包和js文件
<script src="/tinymce/tinymce.min.js"></script>
<script src="/tinymce/langs/zh-Hans.js"></script>
//在add.vue中使用textatea定义一个容器
<div>
<textarea id="default-editor"></textarea>
//保存获取内容
<el-button type="primary" size="default" @click="onSaveContent" style="margin-top:10px;">确定</el-button>
</div>
<script>
export default {
data() {
return {
}
},
//获取内容
methods:{
onSaveContent(){
let content = tinymce.activeEditor.getContent()
console.log(content);
//提示
ElMessage.info('添加日志成功')
}
},
mounted(){
tinymce.init({
selector:'textarea#default-editor',
branding:false, // 取消右下解默认提示,
height:500,
plugins: 'advlist link image lists paste', // 使用插件
paste_data_images: true, // 支持图片粘贴
})
}
}
</script>
五、地图
（1）百度地图ak获取流程（需要下载百度app）?jspopularGL | 百度地图API SDK
- 查找适合的示例直接使用?open | 百度地图API SDK
//在index.js引入百度地图库
<script type="text/javascript"
src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=LSg5n6zOi54hwFDRk2eRxmOwsNWrniKy"></script>
//在location.vue中写
<template>
<!-- 地图容器 -->
<div id="container"></div>
</template>
export default {
data() {
return {}
},
methods: {
initMap() {
var map = new BMapGL.Map('container') // 创建Map实例
map.centerAndZoom(new BMapGL.Point(104.047628, 30.636962), 16) // 初始化地图,设置中心点坐标和地图级别 16为缩放的大小
map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放
map.setHeading(64.5)
map.setTilt(73) //平面效果
},
},
mounted() {
this.initMap()
},
}
<style scoped>
//设置高度
#container {
height: 700px;
}
六、vite 构建配置
打包部署项目
（1）将开发环境下资源编译成浏览器能识别的html、cs、js资源
.vue
scss
ts
（2）压缩
（3）构建工具
webpack
vite：npm run build编译打包生成dist 文件夹，
安装nginx web服务器，将dist文件复制到服务器文件夹中
七、后端未开跨域资源共享，前端使用代理访问
1、代理服务器：vite.config.js文件中配置
server:{
proxy:{
'/api/':{
target:'//后端网址'，
changeOrigin:true,
rewrite:path=>replace(/^\/api/,'') //视情况添加，如果后端服务器地址后面有api,则使用替换api为空
}
}
}
2、封装的axios.js文件中将访问后端的地址改为前端服务器地址
八、监控是生产环境还是开发环境
1、process.env.NODE_ENV
production 生产环境 ：npm run build
development 开发环境：npm run dev
2、代码：在封装的axios.js文件中配置
switch (process.env.NODE_ENV) {
case 'production':
baseURL = 'https://api.yuguoxy.com'
break
case 'development':
baseURL = 'http://10.7.162.150:8089'
break
}
|