dataease二次开发记录1 插入自己写的页面且只需启动dataease_backend。

在使用dataease社区版过程中，需要插入自己写的页面。同时只想启动一个服务。因此要把自己写的页面代码嵌入至dataease代码中。

最终效果

只需启动dataease_backend就能访问到自己写的页面。
例如http://localhost:8100/external/dist/#/mychart

流程

1. 自己写的页面使用vue+springboot框架，前端vue代码中需配置代理
2. 后端springboot controller正常书写
3. 修改dataease相关配置

前端vue配置

在vue.config.js文件中配置production生产环境的配置。此处为了省事，直接把前端build生成的文件夹dist作为地址。external是dataease的白名单list，后续讲解。

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true
})

module.exports = {
  publicPath: process.env.NODE_EVN === 'production'
  ? '/external/dist/'
      :'/',
  devServer: {
    port: 8200, // 你想要设置的端口号,
    proxy:{
      '/myapi':{
        target:'http://localhost:8201/',
        changeOrigin:true
      }
    }
  }
}

前端其他代码就正常写。例如

<template>
  <div ref="chartContainer" class="chart-container"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick ,inject} from 'vue';
import * as echarts from 'echarts';
import elementResizeDetectorMaker from 'element-resize-detector'
import {httpService} from "@/api";
const erd = elementResizeDetectorMaker()

const chartContainer = ref(null);
let chartInstance = null;
let intervalID = null;
const intevalTime= 2000;
const figureTime = ref('');
const wendus = ref([]);
const shengsus = ref([]);
const shendus = ref([]);
// 初始化ECharts实例

let  option = {
 ...
};
const initChart = async () => {
  await nextTick().then(()=>{
    chartInstance = echarts.init(chartContainer.value);
    // 设置ECharts选项
    chartInstance.setOption(option);
  }); // 确保DOM已渲染
};

onMounted( ()=>{
  erd.listenTo(ref(chartContainer).value, function () {
    chartInstance.resize()
  })
  initChart();
  intervalID = setInterval(updateChart,intevalTime);
})
// 组件销毁时清理
onUnmounted(() => {
  if (chartInstance) {
    chartInstance.dispose();
    window.removeEventListener('resize', () => chartInstance.resize());
  }
  if(intervalID){
    clearInterval(intervalID)
  }
});

function updateChart() {
 axios.get('/myapi/echarts/'+'mychart').then(res =>{
 ...});
}
</script>

dataease后端代码

vue的接口直接在dataease_backend中写，就按照正常的springboot 的controller写法。测试了一下，使用@RestController会出错，原因不详，我使用了@Controller

@Controller
@RequestMapping("/myapi/echarts/")
public class ApiController {
	@ResponseBody
    @RequestMapping("/mychart")
    public Object mychartController(){
        ...
    }
}

重点是需要修改dataease的一些配置。需要打开项目dataease，因为需要改最外层的东西。

1. 修改DeMvcConfig.java
   位置：
   core/core-backend/src/main/java/io/dataease/config/DeMvcConfig.java
   此处我定义了存放扩展文件的位置"D:\opt\dataease2.0\external/"，需要把自己写的vue build生成的dist放到此位置。

package io.dataease.config;

import io.dataease.constant.AuthConstant;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Configuration;
import org.springframework.core.env.Environment;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

import java.util.ArrayList;
import java.util.List;

import static io.dataease.constant.StaticResourceConstants.*;
import static io.dataease.utils.StaticResourceUtils.ensureBoth;
import static io.dataease.utils.StaticResourceUtils.ensureSuffix;
@Configuration
public class DeMvcConfig implements WebMvcConfigurer {

//    static final String EXTERNAL_DIR = System.getProperty("user.externalDir");
    static final String EXTERNAL_DIR = "D:\\opt\\dataease2.0\\external/";
    static final String EXTERNAL_DIR1 = "classpath:/external/";
    @Autowired
    private Environment environment;

    /**
     * Configuring static resource path
     *
     * @param registry registry
     */
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        String workDir = FILE_PROTOCOL + ensureSuffix(WORK_DIR, FILE_SEPARATOR);
        String uploadUrlPattern = ensureBoth(URL_SEPARATOR + UPLOAD_URL_PREFIX, AuthConstant.DE_API_PREFIX, URL_SEPARATOR) + "**";
        registry.addResourceHandler(uploadUrlPattern).addResourceLocations(workDir);

        // map
        String mapDir = FILE_PROTOCOL + ensureSuffix(MAP_DIR, FILE_SEPARATOR);
        String mapUrlPattern = ensureBoth(MAP_URL, AuthConstant.DE_API_PREFIX, URL_SEPARATOR) + "**";
        registry.addResourceHandler(mapUrlPattern).addResourceLocations(mapDir);

        String geoDir = FILE_PROTOCOL + ensureSuffix(CUSTOM_MAP_DIR, FILE_SEPARATOR);
        String geoUrlPattern = ensureBoth(GEO_URL, AuthConstant.DE_API_PREFIX, URL_SEPARATOR) + "**";
        registry.addResourceHandler(geoUrlPattern).addResourceLocations(geoDir);

        registry.addResourceHandler("/external/**").addResourceLocations("file:" + EXTERNAL_DIR);
        registry.addResourceHandler("/external1/**").addResourceLocations("file:" + EXTERNAL_DIR1);
    }
}

2. 修改TokenFilter
   位置:
   src/main/java/io/dataease/auth/filter/TokenFilter.java
   在dofilter函数中加上自己后端的api地址。

 if(requestURI.contains("/myapi/") ){
            filterChain.doFilter(servletRequest, servletResponse);
            return;
        }

3. 修改application.yml
   在core/core-backend/src/main/resources/application.yml最后面加上

custom:
  white-url-list: /external/**,/external/test/**
  external-dir: /external

这样就可以只运行dataease_backend。通过http://localhost:8100/external/dist/#/mychart这个地址访问到自己写的页面。缺点就是不能像dataease自带插件或者收费版扩展插件那样在前端配置数据库和显示样式等。但是如果是强自定义插件通过这种方式写页面放入dataease也够了。