Condivisione della tecnologia

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

Il primo passo è utilizzare il motore del modello Thymeleaf in Springboot

Dipendenze di importazione

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

Crea cartelle statiche e cartelle di modelli nella directory delle risorse

Configura la foglia di timo in yml

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

Abilita l'accesso ai file statici nella configurazione

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

Crea un pacchetto per il progetto Vue

npm run build

Inserisci i file statici pacchettizzati nella cartella statica e inserisci index.html nella cartella dei modelli

Scrivi il routing nel controller

Lascia che passi alla pagina index.html

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

Esegui il progetto

Entra nel porto e accedi!