Springboot与抓拍系统对接实现查询违章数据与预览抓拍照片

矫情吗；* 2022-10-16 07:50 121阅读 0赞

# 场景 #

若依前后端分离版本地搭建开发环境并运行项目的教程：

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/108465662][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_108465662]

若依微服务版手把手教你本地搭建环境并运行前后端项目：

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/109363303][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_109363303]

在上面将系统搭建起来之后，默认连接Mysql的数据库。

需要是在基于上面开发系统中，能访问某闯红灯抓拍系统的数据库并能实现

查询其数据，然后跟据器数据库中存储的抓拍照片的路径实现在自己系统中预览访问抓拍系统的

照片。

注：

博客：  
[https://blog.csdn.net/badao\_liumang\_qizhi][https_blog.csdn.net_badao_liumang_qizhi]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

# 实现 #

抓拍服务器抓拍后的存储的数据库在Sqlserver中，而基于Springboot的业务系统是Mysql数据库。

所以首先需要在业务系统中配置多数据源，使其能连接主库为Mysql，某业务连接这个Sqlserver从库。

动态数据源的配置参考下面

synamic-datasource-spring-boot-starter实现动态数据源Mysql和Sqlserver：

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/117356693][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_117356693]

在业务系统中能访问到sqlserver的违章数据后。

其照片路径为在违章抓拍服务器上的磁盘路径。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

所以需要在抓拍服务器上使用Nginx进行静态资源映射，使能通过网络URL访问到其静态资源照片。

使用Nginx实现静态资源映射可以参考

Nginx搭建静态资源映射实现远程访问服务器上的图片资源：

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/117283572][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_117283572]

这里前端在调用后台接口使，后台直接从其sqlserver数据库中查询数据，并且直接将磁盘路径的照片路径

返回，并没有在后台进行处理，因为预览功能不是一直用。而且照片路径也已经确定好这个规则。

所以将照片的磁盘路径转换成网络url映射后的路径是在前端实现。

可以参考如下

Vue中使用el-popover实现悬浮弹窗显示图片预览：

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/117354661][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_117354661]

Vue中使用a标签实现点击在新标签页中打开实现照片预览：

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/117355555][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_117355555]

[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_108465662]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662
[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_109363303]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/109363303
[https_blog.csdn.net_badao_liumang_qizhi]: https://blog.csdn.net/badao_liumang_qizhi
[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_117356693]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/117356693
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: /images/20221014/097031ee876f4dbe8f008e5b5661cacd.png
[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_117283572]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/117283572
[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_117354661]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/117354661
[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_117355555]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/117355555