In the tutorial, JavaSampleApproach will show you how to show images on web from MongoDB by Bootstrap Image + MongoDB GridFsTemplate + SpringBoot RestAPI.
Related posts:
– SpringData MongoDB GridFsTemplate to save, retrieve, delete binary files (Image, Text files)
– Bootstrap Image with SpringBoot RestAPI
– Bootstrap Carousel with SpringBoot RestAPI
– Angular 4 + Spring Boot + MongoDB CRUD example
I. Technologies
– Java 1.8
– Maven 3.6.1
– Spring Tool Suite – Version 3.9.0.RELEASE
– Spring Boot – 1.5.7.RELEASE
– MongoDB: version v3.4.9
– Bootstrap
– Jquery
II. Goal
1. BootStrap Image & MongoDB GridFsTemplate
In the tutorial, We create a Spring Boot project to show image from MongoDB on web with below structure:
– For working with MongoDB files (images), We use GridFsTemplate bean:
@Bean public GridFsTemplate gridFsTemplate() throws Exception { return new GridFsTemplate(mongoDbFactory(), mappingMongoConverter()); } |
Then exploring a Get RestAPI:
@Autowired GridFsOperations gridOperations; @GetMapping(value = "/api/image") public ResponseEntity<InputStreamResource> getImage(@RequestParam("name") String imageName) throws IOException { // get file from MongoDB GridFSDBFile imageFile = gridOperations.findOne(new Query(Criteria.where("filename").is(imageName))); return ResponseEntity .ok() .contentType(MediaType.valueOf(imageFile.getContentType())) .body(new InputStreamResource(imageFile.getInputStream())); } |
>>> Refer at: SpringData MongoDB GridFsTemplate to save, retrieve, delete binary files (Image, Text files)
To display image on web, We use Bootstrap Image.
>>> Refer at: Bootstrap Image with SpringBoot RestAPI
2. Run & Check result
2.1 Add files to MongoDB
– Start MongoDB server by commandline: .\mongodb\bin>mongod.exe
– Add image to MongoDB by using mongofiles.exe:
– Run MongoDB shell by commandline: .\mongodb\3.4\bin>mongo.exe. Then check adding image:
2.2 Result
Build and run the SpringBoot project, result:
III. Practice
Step to do:
– Create SpringBoot project
– Configure MongoDB GridFsTemplate
– Create Web Controller
– Create RestAPI
– Create index.html
– Create Jquery to manipulate image
1. Create SpringBoot project
Using Spring Tool Suite to create a Spring Starter Project with needed dependencies:
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-mongodb</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> |
2. Configure MongoDB GridFsTemplate
Open application.properties file, add mongoDB configuration:
jsa.mongo.address=127.0.0.1 jsa.mongo.database=jsa_db |
Create MongoGridFsTemplate:
package com.javasampleapproach.mongodb.config; import org.springframework.beans.factory.annotation.Value; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.data.mongodb.config.AbstractMongoConfiguration; import org.springframework.data.mongodb.gridfs.GridFsTemplate; import com.mongodb.Mongo; import com.mongodb.MongoClient; @Configuration public class MongoGridFsTemplate extends AbstractMongoConfiguration{ @Value("${jsa.mongo.address}") private String mongoAddress; @Value("${jsa.mongo.database}") private String mongoDatabase; @Bean public GridFsTemplate gridFsTemplate() throws Exception { return new GridFsTemplate(mongoDbFactory(), mappingMongoConverter()); } @Override protected String getDatabaseName() { return mongoDatabase; } @Override public Mongo mongo() throws Exception { return new MongoClient(mongoAddress); } } |
3. Create Web Controller
package com.javasampleapproach.mongodb.controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; @Controller public class WebController { @GetMapping(value="/") public String homepage(){ return "index"; } } |
4. Create RestAPI
package com.javasampleapproach.mongodb.controller; import java.io.IOException; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.core.io.InputStreamResource; import org.springframework.data.mongodb.core.query.Criteria; import org.springframework.data.mongodb.core.query.Query; import org.springframework.data.mongodb.gridfs.GridFsOperations; import org.springframework.http.MediaType; import org.springframework.http.ResponseEntity; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.RestController; import com.mongodb.gridfs.GridFSDBFile; @RestController public class RestControllerAPIs { @Autowired GridFsOperations gridOperations; @GetMapping(value = "/api/image") public ResponseEntity<InputStreamResource> getImage(@RequestParam("name") String imageName) throws IOException { // get file from MongoDB GridFSDBFile imageFile = gridOperations.findOne(new Query(Criteria.where("filename").is(imageName))); return ResponseEntity .ok() .contentType(MediaType.valueOf(imageFile.getContentType())) .body(new InputStreamResource(imageFile.getInputStream())); } } |
5. Create index.html
<!DOCTYPE HTML> <html> <head> <title>Bootstrap Image - SpringBoot RestAPI- MongoDb</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="/js/jquery.js"></script> </head> <body class="container"> <h1 style="text-decoration: underline; color:#283E84">1. Bootstrap Image - SpringBoot RestAPI - MongoDB</h1> <div> <div id="loadImageBootstrapStyleDiv"> <a href="/api/image?name=jsa_about"> <img src="/api/image?name=jsa_about" id="jsaAboutImageId" class="img-rounded img-responsive" alt="JSA-About Image" /> <div class="caption"> <p>JSA-About Image</p> </div> </a> </div> <div class="btn-group"> <button id="roundedCornersBtn" type="button" class="btn btn-primary">Rounded Corners</button> <button id="circleBtn" type="button" class="btn btn-primary">Circle</button> <button id="thumbnailBtn" type="button" class="btn btn-primary">Thumbnail</button> </div> </div> <h1 style="text-decoration: underline; color:#283E84">2. Bootstrap Image Gallery</h1> <div class="row"> <div class="col-md-4"> <div class="thumbnail"> <a href="/api/image?name=jsa_about"> <img src="/api/image?name=jsa_about" class="img-rounded" alt="JSA-About img-rounded" style="width:100%" /> <div class="caption"> <p>JSA-About img-rounded</p> </div> </a> </div> </div> <div class="col-md-4"> <div class="thumbnail"> <a href="/api/image?name=jsa_about"> <img src="/api/image?name=jsa_about" class="img-circle" alt="JSA-About img-circle" style="width:100%" /> <div class="caption"> <p>JSA-About img-circle</p> </div> </a> </div> </div> <div class="col-md-4"> <div class="thumbnail"> <a href="/api/image?name=jsa_about"> <img src="/api/image?name=jsa_about" class="img-thumbnail" alt="JSA-About img-thumbnail" style="width:100%" /> <div class="caption"> <p>JSA-About img-thumbnail</p> </div> </a> </div> </div> </div> </body> </html> |
6. Create Jquery to manipulate image
$( document ).ready(function() { $("#roundedCornersBtn").on( "click", function() { $("#jsaAboutImageId").removeClass().addClass('img-rounded img-responsive'); }); $("#circleBtn").on( "click", function() { $("#jsaAboutImageId").removeClass().addClass('img-circle img-responsive'); }); $("#thumbnailBtn").on( "click", function() { $("#jsaAboutImageId").removeClass().addClass('img-thumbnail img-responsive'); }); }) |
Muchas gracias. ?Como puedo iniciar sesion?