项目小总结
技术选型
- vueCil4.2: 使用它来搭建项目整体脚手架,同时使用自定义方式,来满足部分项目的需求.
- vue2.6 + vuex3.4 + vue-router3.2: 使用vue全家桶来完成整个项目基础架构搭建.
- axios: 使用它来作为项目网络请求基础库,进一步封装之后,用它来完成项目http网络请求.
- echarts: 项目图标展示,项目中做了一层封装,使用更贴近需求.
- ant-design-vue: 项目UI库.
- lodash: 项目工具库.
- monaco-editor: 代码富文本编辑,让项目中富文本代码编辑区具有近乎vsCode的体验.
- @antv/g6: 项目主作业区,流程图,拖拽等操作库.
- nginx: 项目部署环境,轻量,低资源,高性能.
架构规划
服务器减压方面
- 目前项目整体只剩余[首页]和[设置]2个小模块未开发(UI设计图未出),其他模块都开发完毕,并已经在测试环境稳定运行使用了一段时间.
- 由于一些常用基础库,比如vue全家桶,lodash这些,基本是不会变化,最优方式,可以利用webpack,将这些常用不变的库抽取出来,不作为文件,输出到最终打包dist目录中,近一步降低页面请求中js文件的个数,这样有2好处,第一减少前端部署服务器http请求次数,第二减少前端部署服务器网络带宽压力.
- 在webpack中配置不常变动的库对应的CDN地址,通过访问cdn的方式,而不是在前端部署服务器本身,来访问之前不常用库.
- 以上处理方式,已在一台只有1M带宽云服务器上有过具体实践,前后效果对比,提示是显著的,尤其是首次加载.
部署方面
- 利用gitlab上webHooks功能来实现前端自动化部署,由于该项目前端目前只有我一人开发,这边可放弃jenkins,使用webHooks + node脚本方式,也能使用简单,轻便的前端自动化部署.
- 在gitlab的webHooks上设置一个http请求的钩子,比如当远程库有tag提交的时候,来触发这个http钩子.
- 用node写一个httpApi的接口服务器,在该接口中,可获取钩子请求中部分关键参数,并将关键参数传入到部署服务器提前写好的shell脚本,让shell脚本变灵活,最终在node中去调用该shell脚本,来完成前端自动化部署.
- 最终效果,本地推送某个tag到远程库中后,前端部署服务器已经完成前端的部署.
- 以上处理方式,在gitee外网做个一个demo测试,实测是没有问题的,也能实现前端自动化部署.
模块划分
总体按照浏览器路由规则进行功能文件夹划分,好处,目录清晰,后续维护,见浏览器url即可定位目录之后,即可定位具体代码文件
src:
|--- assets // 素材文件夹
|--- commom // 公用,包含全局公用组件,工具类等
|--- components // 界面目录
|-- frame // 项目脚手架,整体路由跳转具体实现
|-- G6Editor // 流程图,拖拽,动画作业区,项目主实现功能
|-- login // 项目首页,登录,注册,羲和跳转相关
|-- modelFactory // 项目模块: 模型工厂
|-- opsManage // 项目模块: 调度中心
|--- icons // SVG有关icon图片,封装了全局svg组件,更高效的使用svg
|--- plugins // 插件
|--- request // 网络请求
|--- router // 定义项目的基本路由
|--- store // vuex,项目响应数据
整体路由设计
项目整体页面脚手架分为2个大模块,[模型工厂]和[调度中心],2大模块切换不需要缓存,需要类似F5刷新数据的效果,大模块下对应小模块如下:
模型工厂: 首页(要缓存,不要G6作业区组件) + 组件(要缓存,要G6作业区组件) + 模型(要缓存,要G6作业区组件)
+ 模板(要缓存,要G6作业区组件) + 设置(要缓存,不要G6作业区组件)
调度中心: 任务(要缓存) + 记录(要缓存)
设计思路:
- vueRouter作为路由实现的底库,在配置路由的时候,使用子路由的方式,来对2个大模块进行划分,同时使用webpackChunkName进行模块区分,避免日后打包之后,部分js文件体积较大.
- 到具体大模块中之后,使用keepAlive来保持住组件之前切换缓存效果,同时用v-show和当前路由名字进行配合,来完成首页和设置不要G6作业区组件的效果.
- 版本初次是没有缓存,没有对G6作业区进行单独处理,最终版本经过如上设计加前端代码实现之后,前后效率提升限制,这点算法同事在实际使用的过程中也有页面整体效率变高,使用丝滑的对应反馈.
公用组件设计实现
全局svg组件
作用: 利用svg中useXlink特性,加上vue的封装,在项目中可以像使用组件一样,来导入svg图片,使用方便,可减少script标签头部import图片代码行数
实现:
// 第一步: 安装svg-sprite-loader
// 第二步: 在vue.config.js中配置svg-sprite-loader
const svgRule = config.module.rule('svg')
svgRule.exclude.add(resolve('src/icons'))
config.module.rule('icons')
.test(/\.(svg)(\?.*)?$/)
.include.add(resolve('src/icons')).end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
// 第三步: 建立专门存放icons目录,并创建AppIcon全局组件
// appIcon.vue
<template>
<svg :class="svgClass">
<use :xlink:href="iconName"></use>
</svg>
</template>
<script>
export default {
name: 'AppIcon',
props: {
iconClass: {
required: true,
type: String
},
svgClassName: {
required: false,
default: ''
}
},
computed: {
iconName() {
return `#icon-${this.iconClass}`
},
svgClass() {
return this.svgClassName ? `svg-icon ${this.svgClassName}` : 'svg-icon'
}
}
}
</script>
// icons目录下index.js
import Vue from 'vue'
import AppIcon from '@common/appIcon'
// 组件全局注册
Vue.component('app-icon', AppIcon)
// 参数1: 目录位置 参数2: 是否遍历目录下子目录 参数3:筛选目录下文件后缀
const req = require.context('./svg', false, /\.svg$/)
// 导入icons/svg目录下所有.svg结尾文件
req.keys().map(req)
// 使用方式
// 组件template标签内可随意使用,icon-class: svg文件名,svg-class-name: 样式名字
<app-icon icon-class="run" svg-class-name="cp" />
鼠标右键菜单组件
作用: 将项目中,所有需要鼠标右键形成的菜单,统一到一个组件中,统一配置,统一逻辑.
实现:
// 第一步: 先写一个组件,用来布局右侧菜单的页面样式,同时设置响应式数据rightMenu,提供包含4个数据,status(字符串)/top(字符串)/left(字符串)/menus(数组)
<template>
<div class="rightClickMenu-box flex-row"
:style="{
display: rightMenu.status,
top: rightMenu.top,
left: rightMenu.left
}">
<ul>
<li class="cp" v-for="item in rightMenu.menus" :key="item.id" @click="item.callBack(item.graphId, item.graphName)">
<div class="flex-row flex-h-sb">
<div style="width: 30%;">
<img :src="item.icon" alt="item.text" style="width: 16px;height: 16px;" />
</div>
<div class="flex-row flex-v-center" style="text-align: left;width: 70%;">{{ item.text }}</div>
</div>
</li>
</ul>
</div>
</template>
// 第二步: 写自定义右击菜单指令
import Vue from 'vue'
import store from '@/store'
// 自定义右击菜单指令
Vue.directive('rightClick', {
bind: function (el, binding) {
el.oncontextmenu = function(e) {
const currentModule = store.state.currentModule
if (currentModule !== 'modelFactoryModel') return // 只有[模型]模块,左侧树才能右击自定义菜单
// 处理菜单名称
const { value: menus } = binding
if (menus.length === 0) return
const graphId = e.target.dataset.graphId // 在使用rightClick节点中配置对应graphId的值
const graphName = e.target.dataset.graphName // 在使用rightClick节点中配置对应graphName的值
// 鼠标位置
const X = e.clientX
const Y = e.clientY
menus.forEach(item => {
item.graphId = graphId
item.graphName = graphName
})
store.commit('updateRightMenuStatus', {
status: 'block',
left: `${X}px`,
top: `${Y}px`,
menus
})
return false // 阻止默认行为
}
}
})
// 第三步: 在对应item节点dom上使用v-right-click指令,在dom中使用html5中dataset技巧,来处理参数传递的问题
<div v-right-click="menus"
:data-graph-id="item.id" :data-graph-name="item.name"
class="ml8 cm ops-node" style="color: #666666;"
:draggable="nodeType === 'model' ? false : true"
@dragstart="handleDragstart" @dragend="handleDragEnd($event, item)">
{{ item.name }}
</div>
全局异常捕获组件
作用: 利用vue自带errorHandler + plugin的方式,再加上一些js的技巧,可以在一个plugin中完成对整个项目所有异常捕获,包含同步异常和异步异常.
实现: 由于算法提供了Sentry平台,后续只需要在main.js中引入Sentry就能完成异常捕获,该plugin可在没Sentry平台支持的情况下,来管理前端异常.
/*
* @Author: projectAuthor
* @Date: 2021-11-12 13:41:09
* @LastEditTime: 2021-11-25 10:52:42
* @Description: 全局错误处理插件
* @FilePath: \machine-learning\src\plugins\gErrorPlugin.js
*/
const globalErrorPlugin = {
install(Vue, options) {
console.log('globalErrorPlugin init')
Vue.config.errorHandler = errorHandler
Vue.mixin({
beforeCreate() {
registerVue(this)
registerVuex(this)
}
})
Vue.prototype.$throw = errorHandler
}
}
const registerVuex = (instance) => {
if (instance.$options.store) {
const actions = instance.$options.store._actions || {}
if (actions) {
const tempActions = {}
Object.keys(actions).forEach(key => {
tempActions[key] = actions[key][0]
})
registerActionHandle(tempActions)
}
}
}
const registerVue = instance => {
if (instance.$options.methods) {
const actions = instance.$options.methods || {}
if (actions) {
registerActionHandle(actions)
}
}
}
function registerActionHandle(actions) {
Object.keys(actions).forEach(key => {
const fn = actions[key]
actions[key] = function(...args) {
const ret = fn.apply(this, args) // 普通函数,ret是函数返回值,Promise函数,返回值是一个Promise对象
if (key === 'getModuleNodes') {
console.log('args---> 1', args)
console.log('args---> 2', ret)
}
if (isPromise(ret)) {
console.log('isPromise--->', key)
return ret.catch(errorHandler)
} else { // 非Promise函数 是没有catch处理的
if (key === 'testAdd') {
console.log('ret--->', ret)
}
return ret
}
}
})
}
function isPromise(ret) {
return (ret && typeof ret.then === 'function' && typeof ret.catch === 'function')
}
// 这里可以捕捉项目中所有异常信息,如有必要,在接口支持下,可进行异常数据入库
const errorHandler = (error, vm, info) => {
console.error('抛出全局异常')
console.error('抛出全局异常 vm', vm)
console.error('抛出全局异常 error', error.message)
console.error('抛出全局异常 error 222', error.stack.toString())
console.error('抛出全局异常 info', info)
}
export default globalErrorPlugin
全局echarts图标组件
作用: 项目中所有涉及到图标展示,全部在一个公用组件中完成,一个项目,设计图出的各种图标展示,样式都是相近,在公用组件可局部引入echarts,使用常量设置一些固定的样式json,再通过vue中一些钩子函数,来对动态数据进行设置,这样在业务组件中,只需要关系当前图标中的数据,其他功能全部交给封装的公用echarts组件.
实现:
<template>
<div class="commonEcharts-box">
<div class="commonEcharts" :id="id"></div>
</div>
</template>
<script>
// 共性echarts封装
import cloneDeep from 'lodash/cloneDeep'
import * as echarts from 'echarts/core'
import {
BarChart, LineChart, ScatterChart
} from 'echarts/charts'
import { TooltipComponent, LegendComponent, DatasetComponent } from 'echarts/components'
import {
CanvasRenderer
} from 'echarts/renderers'
const color = ['#63cc06', '#dc5aec', '#3ebff9', '#f4d91a', '#C3FE5D', '#FD5DF8', '#FEBF5D', '#B85DFE', '#FF0000']
const styles = {
xAxis: {
axisLabel: {
color: '#808080'
},
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#c8c8c8'
}
},
splitLine: {
show: false
}
},
yAxis: {
axisLabel: {
color: '#9fb7f1',
opacity: 0.7
},
splitLine: {
lineStyle: {
width: 2,
color: '#f1f1f1',
type: 'dashed'
}
},
axisLine: {
show: true,
lineStyle: {
color: '#c8c8c8'
}
}
}
}
echarts.use([BarChart, LineChart, ScatterChart, CanvasRenderer, TooltipComponent, LegendComponent, DatasetComponent])
export default {
name: 'CommonEcharts',
props: {
id: {
type: String,
required: true
},
dataSetSource: {
type: Array,
required: true
},
seriesLen: {
type: Number,
required: true
},
serieType: {
type: [String, Array],
default: 'line'
},
yAxisNames: {
type: Array,
required: false,
default: () => []
},
seriesNames: {
type: Array,
required: false,
default: () => []
},
xAxisType: {
type: String,
default: 'category'
},
yAxisType: {
type: String,
default: 'value'
},
yAxisIndexs: {
type: Array,
required: false,
default: () => []
},
gridLeft: {
type: String,
default: '46'
},
gridRight: {
type: String,
default: '46'
},
gridTop: {
type: String,
default: '50'
},
gridBottom: {
type: String,
default: '20'
},
isShowLegend: {
type: Boolean,
required: false,
default: true
}
},
beforeCreate() {
this.commonEcharts = null
},
mounted() {
this.commonEcharts = echarts.init(document.getElementById(this.id))
const option = this.getEchartsOption(this.dataSetSource)
this.commonEcharts.setOption(option, true)
},
watch: {
dataSetSource(newValue) {
const option = this.getEchartsOption(newValue)
this.commonEcharts.setOption(option, true)
this.commonEcharts.resize()
}
},
methods: {
getEchartsOption(dataSetSource) {
const serieType = this.serieType
if (serieType === 'scatter') {
const option = {
color,
xAxis: styles.xAxis,
yAxis: styles.yAxis,
grid: this.getGrid(),
tooltip: {
trigger: 'axis',
confine: true
},
series: [{
symbolSize: 10,
data: dataSetSource,
type: serieType
}]
}
return option
}
if (serieType === 'scatters') {
const len = dataSetSource.length
const seriesNames = this.seriesNames
const series = []
for (let i = 0; i < len; i++) {
series.push({
name: seriesNames[i],
symbolSize: 10,
data: dataSetSource[i],
type: 'scatter'
})
}
const option = {
color,
xAxis: styles.xAxis,
yAxis: styles.yAxis,
grid: this.getGrid(),
tooltip: {
trigger: 'axis',
confine: true
},
legend: {
show: this.isShowLegend,
right: 50,
top: 0,
textStyle: {
color: '#808080',
fontSize: 14
},
icon: 'circle' // 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
},
series
}
return option
}
return {
color,
grid: this.getGrid(),
tooltip: {
trigger: 'axis',
confine: true
},
legend: {
show: this.isShowLegend,
right: 50,
textStyle: {
color: '#808080',
fontSize: 14
},
icon: 'circle' // 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
},
dataset: {
source: dataSetSource
},
xAxis: this.getXAxis(),
yAxis: this.getYAxis(),
series: this.getSeries()
}
},
getSeries() {
const serieType = this.serieType
const seriesLen = this.seriesLen
const yAxisIndexs = this.yAxisIndexs
const series = []
for (let i = 0; i < seriesLen; i++) {
series.push({
type: serieType,
symbol: 'none', // 折线图不要点
smooth: true, // 折线图平滑
yAxisIndex: yAxisIndexs[i]
})
}
return series
},
getXAxis() {
const result = cloneDeep(styles.xAxis)
result.type = this.xAxisType
result.axisLabel.formatter = function (value) {
const values = value.split(' ')
return `${values[0]}`
}
return result
},
getYAxis() {
const yAxisNames = this.yAxisNames
const len = yAxisNames.length
const yAxisType = this.yAxisType
if (len > 0) {
const yAxis = []
for (let i = 0; i < len; i++) {
const yAxisItem = cloneDeep(styles.yAxis)
yAxisItem.type = yAxisType
yAxisItem.name = yAxisNames[i]
yAxisItem.i = i
yAxis.push(yAxisItem)
}
return yAxis
} else {
return styles.yAxis
}
},
getGrid() {
return {
top: this.gridTop,
left: this.gridLeft,
right: this.gridRight,
bottom: this.gridBottom
}
}
}
}
</script>
<style scoped lang="less">
.commonEcharts-box{
width: 100%;
height: 100%;
.commonEcharts{
width: 100%;
height: 100%;
}
}
</style>
使用方式:
<common-echarts v-if="modelBackTestDataset.lineEchart.seriesLen > 0"
id="lineEchartsId"
gridLeft="70"
gridBottom="30"
:dataSetSource="modelBackTestDataset.lineEchart.dataSetSource"
:yAxisNames="modelBackTestDataset.lineEchart.yAxisNames"
:yAxisIndexs="modelBackTestDataset.lineEchart.yAxisIndexs"
:seriesLen="modelBackTestDataset.lineEchart.seriesLen"
/>
全局vsCode富文本组件
作用: 在[组件]模块中,在编辑和新增的时候,集成一个monaco编辑器,能够在web端编码的时候几乎具有vsCode上编码的体验
实现: 分基础组件的封装,和webpack打包的时候的一些处理
<!--
* @Author: projectAuthor
* @Date: 2021-10-20 15:03:49
* @LastEditTime: 2021-12-03 14:00:25
* @Description: Monaco编辑器封装
* @FilePath: \machine-learning\src\common\monaco\index.vue
-->
<template>
<div class="monaco-box flex-column">
<div class="monaco-header flex-row">
<div class="header-item flex-row flex-v-center">
<div class="monaco-title">代码</div>
<!-- propLanguage外部组件传入语言,如果有,该编辑器对语言的设置就不进行渲染 -->
<div v-if="!propLanguage" class="header-title ml20">语言</div>
<div v-if="!propLanguage" class="header-select ml10">
<a-select :default-value="languages[0]" style="width: 140px" size="small" @change="changeLanguage">
<a-select-option v-for="sItem in languages" :value="sItem" :key="sItem">
{{ sItem }}
</a-select-option>
</a-select>
</div>
</div>
<div class="header-item flex-row flex-v-center ml20">
<div class="header-title">主题</div>
<div class="header-select ml10">
<a-select :default-value="themes[0]" style="width: 140px" size="small" @change="changeTheme">
<a-select-option v-for="sItem in themes" :value="sItem" :key="sItem">
{{ sItem }}
</a-select-option>
</a-select>
</div>
</div>
</div>
<div class="monaco-content mt4" id="monacoBox"></div>
</div>
</template>
<script>
import * as monaco from 'monaco-editor'
const languages = ['python', 'shell', 'mysql', 'typescript', 'javascript', 'css', 'pgsql', 'html', 'redis', 'json']
const themes = ['vs-dark', 'vs', 'hc-black']
export default {
name: 'CommonMonaco',
props: {
// 编辑器中实际内容
value: {
type: String,
default: ''
},
// propLanguage外部组件传入语言
propLanguage: {
type: String,
default: ''
}
},
data() {
return {
languages,
language: languages[0],
themes,
theme: themes[0],
monacoValue: ''
}
},
watch: {
propLanguage(newLanguage) {
this.monacoValue = this.monacoInstance.getValue()
const { monacoValue } = this
const currentModel = monaco.editor.createModel(monacoValue, newLanguage)
this.monacoInstance.setModel(currentModel)
}
},
mounted() {
const { language, theme, propLanguage } = this
const value = this.value ? this.value : this.monacoValue
const defaultLanguage = propLanguage || language
const defaultModel = monaco.editor.createModel(value, defaultLanguage)
const monacoInstance = monaco.editor.create(document.getElementById('monacoBox'), {
model: defaultModel,
theme
})
this.monacoInstance = monacoInstance
this.monacoInstance.onDidChangeModelContent(() => {
this.$emit('getMonacoValue', this.monacoInstance.getValue())
})
},
methods: {
changeLanguage(value) {
this.language = value
this.monacoValue = this.monacoInstance.getValue()
const { monacoValue, language } = this
const currentModel = monaco.editor.createModel(monacoValue, language)
this.monacoInstance.setModel(currentModel)
},
changeTheme(value) {
this.theme = value
const newOptions = {
theme: value
}
this.monacoInstance.updateOptions(newOptions)
}
},
destroy() {
console.log('monaco-editor destroy')
this.monacoInstance.dispose()
}
}
</script>
<style scoped lang="less">
.monaco-box{
width: 100%;
height: 100%;
.monaco-header{
height: 32px;
width: 100%;
.header-item{
.monaco-title{
font-size: 16px;
font-weight: bold;
}
.header-title{
color: #555;
}
}
}
.monaco-content{
width: 100%;
flex: 1;
background: #ffffff;
border-radius: 8px;
border: solid 1px #c8c8c8;
text-align: left;
}
}
</style>
使用方式:
<common-monaco v-if="modulePanelType === 0" @getMonacoValue="getMonacoValue"/>
<common-monaco v-else :value="editModule.code" @getMonacoValue="getMonacoValue"/>
© 版权声明
文章版权归作者所有，未经允许请勿转载，侵权请联系 admin@trc20.tw 删除。
THE END
