Integrating Spring Boot with a Capture System to Query Violation Data and Preview Photos

The article assumes the RuoYi front‑back separation project has been set up locally and is connected to a MySQL database.

To retrieve violation records stored in a traffic‑light‑running capture system whose database runs on SQL Server, the author adds a secondary data source to the Spring Boot service. The configuration relies on the dynamic-datasource-spring-boot-starter library, and a link to the detailed setup is provided.

Once the SQL Server data is accessible, the returned photo paths are physical disk locations on the capture server. The back‑end does not transform these paths; instead, the front‑end must convert them into network URLs for display.

The capture server is equipped with Nginx to map the image directory to a public URL, enabling remote access to the pictures. A reference article describing Nginx static‑resource mapping is included.

On the Vue front‑end, two preview methods are demonstrated: using el-popover to show the image on hover, and using an <a> tag to open the image in a new browser tab. The conversion from disk path to the Nginx‑served URL is performed in the client code. Links to both Vue examples are provided.