Technologieaustausch

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

Der erste Schritt besteht darin, die Thymeleaf-Template-Engine in Springboot zu verwenden

Abhängigkeiten importieren

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

Erstellen Sie statische Ordner und Vorlagenordner im Ressourcenverzeichnis

Konfigurieren Sie Thymeleaf in YML

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

Aktivieren Sie den Zugriff auf statische Dateien in der Konfiguration

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

Verpacken Sie das Vue-Projekt

npm run build

Legen Sie die gepackten statischen Dateien im statischen Ordner ab und legen Sie index.html im Vorlagenordner ab

Routing im Controller schreiben

Lassen Sie es zur Seite index.html springen

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

Führen Sie das Projekt aus

Betreten Sie den Hafen und greifen Sie darauf zu!