CODEWITHSUNDEEP
htmlspringspring-mvcspring-boot
Yuri Khechoyan
Yuri Khechoyan

Reputation: 103

Displaying index.html page using @Controller | Spring Boot

Having an issue with displaying the index.html webpage that I have created. The output that I keep receiving when heading over to localhost:8080 is the String value "index" and not the webpage itself. Images of the /templates directory & result given from localhost can be found below (hyperlinks)

@Controller
public class IndexController {

        @RequestMapping("/")
        @ResponseBody
        public String index() {
            return "index";
        }
}

template_directory localhost:8080_result

Upvotes: 6

Views: 23141

Answers (4)

makson
makson

Reputation: 2253

If you don't use template engine like a thyemleaf, you must place ui files into a subfolder of /src/main/resources named /public, /static or /resources. Your index.html put into /src/main/resources/public/index.html

Controller:

@Controller
public class IndexController {

    @RequestMapping("/")
    public String index() {
        return "index.html";
    }
}

Upvotes: 0

rieckpil
rieckpil

Reputation: 12021

Remove @ResponseBody from your controller method addNewBooking(...). With @ResponseBody you tell Spring to map the result of your method to the HTTP response body and so your browser displays it as plain text (you need this if you want to develop RESTful APIs with Spring). As you are using Spring MVC, you want to return a view and therefore you don't need @ResponseBody.

EDIT 1: Detailed explanation of what I wrote.

With Spring Web you have two choices to write your app:

  • Write a server-side rendered application with JSPs, Thymeleaf templates, Freemaker templates -> Spring MVC pattern
  • Write a RESTful backend for e.g. a Single Page Application (like ReactJs or Angular) which gets its data from your RESTful backend

For choice 1 you annotate your controller with @Controller and offer several endpoints where your Spring application will respond with your server-side renderer template. All of your controller return a String which is the name of your template which you want to transfer to the browser. Spring will take the String name like index and will return e.g. the rendered index.jsp to the request. An example could look like the following:

@Controller
public class IndexController {

        @RequestMapping("/")
        public String index() {
            return "index";
        }
}

For choice 2 you annotate your controller with @RestController OR you @Controller and @ResponseBody together (technically @RestController is just a combination of @Controller and `@ResponseBody). With this setup you tell Spring to use your controller method return type and parse it e.g. with Jackson to JSON and will put it in the HTTP body. If you access such an endpoint in your browser you get the JSON representation of your object. Look at the following example:

@RestController
public class IndexController {

        @RequestMapping("/persons")
        public List<Person> getPersons() {
            // ... some service calls/database access to get all persons
            return personList;
        }
}

The Person class:

public class Person {
   private String name;
   private int age;

   // getter and setter ...

}

If you now access http://localhost:8080/persons you could get the following output:

[
  {
    "name": "John Doe",
    "age": 1337
  },
  {
    "name": "Peter Parker",
    "age": 12
  }
]

To summarize the explanation: If you want to serve Views (HTML pages which are server side rendered) you have to use @Controller and your controller methods have to return the name of your template. If plan to build a RESTful application, use @RestController or the combination of @Controller and @ResponseBodytogether.

Upvotes: 10

Abin Mathew
Abin Mathew

Reputation: 21

   @RequestMapping("/")
   @ResponseBody
    public String index() {
        return "index";
    }

Remove @ResponseBody .

@RequestBody and @ResponseBody annotations are used to bind the HTTP request/response body with a object in method parameter or return type.

@ResponseBody : Spring will bind the return value to outgoing HTTP response body.

example 

     @RequestMapping(value    = "/checkuser",
                     method   = RequestMethod.GET,  
                     produces = MediaType.APPLICATION_JSON_VALUE )
     @ResponseBody
     public Boolean checkValidateUser(@RequestParam Map<String, String>  
          requestParams){
          String userName = requestParams.get("username");
          String password = requestParams.get("password");
     return 
   userBL.checkValidateUser(userName.trim().toUpperCase(),password.trim());
  }

Images in src/main/resources/static/assets/images/ Html pages in src/main/resources/templates

@Controller
public class IndexController {

    @RequestMapping("/")
    public String index() {
        return "index.html";
    }
}

Upvotes: 2

secondbreakfast
secondbreakfast

Reputation: 4374

Like others have mentioned, the first thing you need to do is remove the @ResponseBody annotation from your controller method.

Secondly, The static content in your templates directory should be moved to
src/main/resources/static. The templates directory is meant for serving content that needs to be rendered on the server side (for example Thymeleaf).

You can then serve the content directly from your controller.

@Controller
public class IndexController {

    @RequestMapping("/")
    public String index() {
        return "index.html";
    }
}

Upvotes: 5

Related Questions