Technology Sharing

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

The first step is to use the thymeleaf template engine in springboot

Importing Dependencies

        <!-- thymeleaf 模板 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

Create static folder and templates folder in the resources directory

Configure thymeleaf in yml

spring:
  # 模板引擎
  thymeleaf:
    mode: HTML5
    encoding: utf-8
    # 禁用缓存
    cache: false

Enable access to static files in the configuration

public class ResourceConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/**").addResourceLocations("classpath:/static/");
    }
}

Package the Vue project

npm run build

Put the static files in the static folder after packaging, and put index.html in the templates folder

Write routes in controller

Let it jump to the index.html page

@Controller
@CrossOrigin
public class IndexController {
    @GetMapping("/")
    public String index(){
        return "index";
    }
}

Run the project

Enter the port and access it!