springboot-项目实战:首页实现


承接:

1 在config层添加mvc配置类,并重写视图控制方法

addViewControllers方法中的内容代表 当请求是 "/" 或者是 "/index.html" 时跳转到 index.html 页面

MyMvcConfig.java

package com.lv.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class MyMvcConfig implements WebMvcConfigurer {
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/").setViewName("index");
        registry.addViewController("/index.html").setViewName("index");
    }
}

2 修改index.html

修改两部分,一个是添加thymeleaf约束,另一个是将原来引入样式链接的语法改为thymeleaf语法

index.html



   
      
      
      
      
      Signin Template for Bootstrap
      
      
   
   
      
   

3 启动项目,访问首页

成功显示主页,这个项目使用的是3.6.4版本的springboot,如果是旧版本,可能会显示失败,需要在application.properties中关闭thymeleaf缓存

application.properties

#关闭模板引擎的缓存
spring.thymeleaf.cache=false

4 修改其它的html页面

所有页面的静态资源都需要使用thymeleaf接管,所以其它页面也要修改,同样是修改两部分,添加thymeleaf约束和将原来引入样式链接的语法改为thymeleaf语法.下面只展示修改位置的代码,没有展示全部页面代码

404.html



   
      
      
      
      
      Dashboard Template for Bootstrap
      
      

dashboard.html



   
      
      
      
      
      Dashboard Template for Bootstrap
      
      

list.html



   
      
      
      
      
      Dashboard Template for Bootstrap
      
      

5 修改项目的目录

因为thymeleaf语法中的 @{} 是万能匹配的,所以即便我们修改了项目的目录也可以成功导入,下面测试一下:

application.properties

#修改项目的目录
server.servlet.context-path=/lv

重启项目访问

访问 http://localhost:8080/lv/ 路径依旧可以显示样式,访问原来的路径会报404.

6 总结

  • 所有静态资源都需要使用thymeleaf接管
  • url 使用 @{}

相关