### 一、修改目标

由于地图组件是无法通过传递参数进行绘制固定区域地图的，黄海采用的办法是外部链接+$Java$路由，将控制权交给$Java$,获取要绘制哪个城市后，由$Java$修改数据库中的数据来达到改变城市的效果，具体代码见：

```shell
D:\dsWork\YunNanDsBase\src\main\java\com\dsideal\base\DataEase\Controller\DataEaseController.java

public void updateCityArea(String city_name){
 ...
}
```

这样做后，正常操作是没有问题的，可以从省级页面跳转到任何一个城市页面，城市的地图也能正确展示，但有一个问题：害怕刷新页面！



因为一旦刷新了页面，数据库中的城市数据可能已经被修改，就会造成数据还是这个城市的，但地图已经是别的城市了！

需要解决掉这个问题。



黄海的办法是采用$OpenResty$捕获链接，比如：

```
http://10.10.14.203:8100/#/de-link/X4l1qGNH?attachParams=eyJjaXR5X25hbWUiOiLkuL3msZ/luIIifQ==
```



一旦可以拦截成功，就可以采用前置拦截进行处理，修改数据表中城市为丽江市！



但经实验发现，这样干行不通，原因是：

- 去掉$DataEaseV2$中共享链接中存在的#号，这个#号会导致浏览器不会把#号后面的参数传递给$Nginx$,也就是刷新动作无法捕获。



### 二、解决办法

**配置信任的服务器$HTTPS$验证**

```
git config --global http.sslVerify false
```



**使用$TortoiseGit$下载源码**

```
https://github.com/dataease/dataease.git
```



**$DataEase$ $v2$ 开源代码 $Windows$ 从$0$到$1$环境搭建**

```
https://blog.csdn.net/chajinglong/article/details/142666079
```



**前端项目编译**

- 使用$vscode$ 打开`D:\dsWork\dataease\core\core-frontend\src\router\index.ts`



**$vue3$ $history$模式配置及$nginx$服务器配置**

```
https://blog.csdn.net/jay100500/article/details/130072520
```

**切换到$V2.10.1$版本**

![](https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/BlogImages/202412110806315.png)



$NodeJs$与$NPM$版本

```
   <nodeVersion>v16.15.0</nodeVersion>
   <npmVersion>8.5.5</npmVersion>
```



### 三、遇到的问题

```
D:\dsWork\DataEaseV2.10.1\core\core-frontend\src\custom-component\v-query\DynamicTimeFiltering.vue
D:\dsWork\DataEaseV2.10.1\core\core-frontend\src\custom-component\v-query\DynamicTimeRangeFiltering.vue
```

**改正前**：

```javascript
timeGranularityMultiple: {
    type: String as PropType<DatePickType>,
    default: () => {
      return 'yearrange'
    }
  }
```

**改正后**：

```javascript
 timeGranularityMultiple: {
    type: Object as PropType<DatePickType>,
    default: () => {
      return { type: 'yearrange' }
    }
  }
```



**$core-frontend$前端打包失败**

```
**报错：** on project core-frontend: Failed to run task: 'npm run build:distributed' failed.
**原因：**在core-frontend/package.json中 "build:distributed": "NODE_OPTIONS=--max_old_space_size=4096 vite build --mode distributed && npm run 
```

build:flush",而在**$Windows$系统不支持$NODE\_OPTIONS$命令**
**解决方案：**

```
使用npm install cross-env --save-dev 安装cross-env
```

![](https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/BlogImages/202412111339690.png)

在`core-frontend/package.json`中添加`cross-env`命令

![(https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/BlogImages/202412111339065.png)

![](https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/BlogImages/202412111341686.png)

### 四、去掉$Vue$中的#号

```javascript
D:\dsWork\DataEaseV2.10.1\core\core-frontend\src\router\index.ts

//import { createRouter, createWebHashHistory } from 'vue-router'
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  //history: createWebHashHistory(),
  history: createWebHistory(),
  routes: routes as RouteRecordRaw[]
})

```

然后前端重新打包，漫长的等待...

![](https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/BlogImages/202412111557806.png)



**配置好的$Nginx$配置文件**

```nginx
upstream dataease {
    server 10.10.14.203:8100;
}

location /de2api {
        client_max_body_size 600m;
        client_body_buffer_size 128k;
        proxy_connect_timeout 600;
        proxy_read_timeout 600;
        proxy_send_timeout 600;
        proxy_buffer_size 64k;
        proxy_buffers   4 32k;
        proxy_busy_buffers_size 64k;
        proxy_temp_file_write_size 64k;
   
    	proxy_pass http://dataease;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $http_host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
   }
```





### 五、参考资料

**官方：源码部署**

```
https://dataease.io/docs/v2/installation/deployment_installation/
```

**手把手教你搭建$DataEase$二次开发环境$Windows$**

```
https://segmentfault.com/a/1190000045261128
```

**用户名与密码**

```
admin
DataEase@123456
```