---
# System prepended metadata

title: Springboot Web & RESTful API Hello world
tags: [Springboot]

---

---
title: Springboot Web & RESTful API Hello world
tags: Springboot
description: Web & RESTful API的Hello world 的範本
---

# Springboot Web & RESTful API Hello world

我們這邊會實作Web跟Api的 Hello world，會建立Controller、RestController、Configuration

由Webconfig的webServerFactory方法打開Tomcat，@EnableWebMvc打開MVC的設定。

* src/main/java 存放Java程式
    * com.config -> Springboot的系統設定
    * com.example.demo -> Springboot晵動點
    * web.controller & web.controller.api -> @Controller & @RestController 別
* src/main/resource 存放前端資源、系統設定檔等
    * static -> 為前端頁面的靜態資源(css、js、image...etc)
    * templates -> html
    * application.properties -> 系統設定

---

[TOC]

---

### 建立自定的Packages

這邊建立三個Packages
* com.config -> Configuration
* web.controller -> Controller
* web.controller.api -> RestController


![](https://i.imgur.com/8ZQK0AF.png)


---

### application.properties

設定 context path

``` java=
server.servlet.context-path=/demo
```


![](https://i.imgur.com/uNdGad3.png)


---

### DemoApplication

設定@ComponentScan，在這邊設置Configuration

``` java=
package com.example.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.ComponentScan;

@SpringBootApplication
@ComponentScan(basePackages = {"com.config"})
public class DemoApplication {

	public static void main(String[] args) {
		SpringApplication.run(DemoApplication.class, args);
	}
	
}
```

![](https://i.imgur.com/ZYOrbbe.png)



---

### WebConfig

* @EnableWebMvc -> 可讀static(js、css、images...)、templates(html)
* @ComponentScan -> 這邊設置Controller
``` java=
package com.config;

import org.apache.catalina.connector.Connector;
import org.springframework.boot.autoconfigure.EnableAutoConfiguration;
import org.springframework.boot.web.embedded.tomcat.TomcatConnectorCustomizer;
import org.springframework.boot.web.embedded.tomcat.TomcatServletWebServerFactory;
import org.springframework.boot.web.servlet.server.ConfigurableServletWebServerFactory;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;

@Configuration
@EnableWebMvc
@EnableAutoConfiguration
@ComponentScan(basePackages = {
	"web.controller"
	,"web.controller.api"
})
public class WebConfig {
	
	@Bean
	public ConfigurableServletWebServerFactory webServerFactory() {
		TomcatServletWebServerFactory factory = new TomcatServletWebServerFactory();
		factory.addConnectorCustomizers(new TomcatConnectorCustomizer() {
			@Override
			public void customize(Connector connector) {
				connector.setProperty("relaxedQueryChars", "|{}[]");
			}
		});
		return factory;
	}
	
}

```
![](https://i.imgur.com/jtoUGuT.png)


---

### Controller
* @Controller -> ModelAndView & RESTFul Api(需要多加@ResponseBody)
* @RestController -> 為RESTFul Api 

``` java=
package web.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class IndexController {
	
	@RequestMapping("index.action")
	public String index() {
		
		return "index";
		
	}
	
	
}

```
![](https://i.imgur.com/rBPxwA2.png)

``` java=
package web.controller.api;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class RestfulController {
	
	@RequestMapping("index.do")
	public String index() {
		return "Hello world!";
	}
	
}
```
![](https://i.imgur.com/2xQyEr5.png)

---

### templates

* index.html -> 為測試的html頁面

``` java=
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>test</title>
    
</head>

<body>
<div style="color:red;">
Hello world!
</div>

    
</body>

</html>
```

![](https://i.imgur.com/MCKxbpf.png)


---

### Hello world

* [http://localhost:8080/demo/index.action](#http://localhost:8080/demo/index.action)
* [http://localhost:8080/demo/index.do](#http://localhost:8080/demo/index.do)

![](https://i.imgur.com/mgBCwMu.png)
![](https://i.imgur.com/mfGsuyt.png)

---

