lilele200706

 

SpringBoot之web开发

SpringBoot之web开发

用SpringBoot开发要解决的问题

  1. 导入静态资源

  2. 首页

  3. 无jsp，学模板引擎Thymeleaf

  4. 装配扩展SpringMVC

  5. 增删改查

  6. 拦截器

  7. 国际化

一、添加静态资源

public void addResourceHandlers(ResourceHandlerRegistry registry) {
    if (!this.resourceProperties.isAddMappings()) {
        logger.debug("Default resource handling disabled");
    } else {
        this.addResourceHandler(registry, "/webjars/**", "classpath:/META-INF/resources/webjars/");//找webjars
        this.addResourceHandler(registry, this.mvcProperties.getStaticPathPattern(), (registration) -> {
            registration.addResourceLocations(this.resourceProperties.getStaticLocations());
            if (this.servletContext != null) {
                ServletContextResource resource = new ServletContextResource(this.servletContext, "/");
                registration.addResourceLocations(new Resource[]{resource});
            }
​
        });
 /**
 CLASSPATH_RESOURCE_LOCATIONS = new String[]{"classpath:/META-INF/resources/", "classpath:/resources/", "classpath:/static/", "classpath:/public/"};

优先级：classpath:/resources/ > classpath:/static/ > classpath:/public/ > classpath:/META-INF/resources/

  • classpath:/resources/ : 放一些upload上传的文件

  • classpath:/static/ ：静态资源,eg:图片，

  • classpath:/public/ ：放一些公共的资源，eg：jQuery.js

总结：

在SpringBoot中，我们可以使用以下方式处理静态资源

  • webjars 访问路径：localhost:8080/webjars/目录结构/资源

  • public ,static,resources,/** 访问路径：localhost：8080/资源

二、首页与图标

首页一般放到 templates 包中，在 templates下的所有页面，只能通过Controller来访问。

这个需要模板引擎的支持。

Thymeleaf 对应 templates的包

三、Thymeleaf模板引擎

以前的模板引擎：jsp

现在的模板引擎：thymeleaf

模板引擎的作用：我们写一个页面模板，比如有些值是动态的，我们写一些表达式。而这些值，我们来组装一些数据，把这些数据找到。我们这个模板和这个数据交给我们模板引擎，模板引擎按照我们这个数据帮 我们把这表达式解析、填充到我们指定的位置，然后把这个数据最终生成一个我们想要的内容给我们写出去，这就是模板引擎。不管是jsp，还是thymeleaf，都是这个思想。

  1. 导包

<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf-spring5</artifactId>
</dependency>
<dependency>
    <groupId>org.thymeleaf.extras</groupId>
    <artifactId>thymeleaf-extras-java8time</artifactId>
</dependency>

结论：需要使用thymeleaf,只需要导入响应的依赖就可以了。我们就html页面放入templates包下就可以了。

public class ThymeleafProperties {
    private static final Charset DEFAULT_ENCODING;
    public static final String DEFAULT_PREFIX = "classpath:/templates/";
    public static final String DEFAULT_SUFFIX = ".html";

  1. 引入头文件，约束，命名空间

<html xmlns:th="http://www.thymeleaf.org">

  1. 语法

连接：th:href="@{/css/1.css}"

文本：th:text="#{home.welcome}"

  • 变量：${}

  • 选择表达式：*{}

  • 消息：#{}

  • 连接：@{}

  • 组件：~{

不为空：th:text="${not #strings.isEmpty(msg)}"

四、装配并扩展SpringMVC

@Configuration
public class MyMVCConfig implements WebMvcConfigurer {
​
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        //templates中的html页面不可以直接访问，需要通过Controller来调用
        registry.addViewController("/").setViewName("index");
        registry.addViewController("/index.html").setViewName("index");
        registry.addViewController("/forms.html").setViewName("forms");
        registry.addViewController("/login.html").setViewName("login");
    }
}

五、CURD

  1. 提取公共页面。th:include or th:repleace="~{commons::topbar(active="main.html")}"

员工列表

  1. thymeleaf 循环

th:each="emp:${emps}"
th:text="${emp.getId()}"

添加员工

  • 按钮提交

  • 跳转到添加页面

  • 添加员工成功

  • 返回首页

  1. 参数传递用()

  2. bootstrap

<input type="text" class="btn-sm btn-primary">
<input type="text" class="btn btn-sm btn-danger">

  1. 日期格式

默认格式：yyyy/MM/dd
spring:
 mvc:
  date-format: yyyy-MM-dd

  1. 404页面

在templates目录下添加error目录，将404页面放进去即可，出错时会自动使用。

六、拦截器

  1. 写一个拦截器（类）

public class LoginHandlerInterceptor implements HandlerInterceptor {
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        //登录成功，有用户的sessionId，可以进入后台
        return true；
        //没有sessionId，不可以进入后台
        
        return false;
    }
}
​

  1. 注入到Spring中@Bean

 @Override
public void addInterceptors(InterceptorRegistry registry) {
    registry.addInterceptor(new LoginHandlerInterceptor()).addPathPatterns("/**")            .excludePathPatterns("/index.html","/","/user/login","/css/*","/js/**","/img/**");
}

七、国际化

略

八、前端模板bootstrap

前端：

模板：别人写好的，我们拿来直接用就可以了

框架：组件：自动手动组合拼接！ bootstrap，LayUI，x-admin

如何快速的搭建一个web应用：

  1. 前端搞定：页面长什么样子：数据

  2. 设计数据库

  3. 前端让他能够自动运行，独立化工程

  4. 数据接口不喝对接：接送，对象 all in one

  5. 前后端联调测试

  1. 有一套自己熟悉的后台模板:工作必要！X-admin

  2. 前端界面：至少自己能够通过前端框架，组合出来一个网站页面

  • index

  • about

  • blog

  • post

  • user

  1. 让这个网站能够独立运行。（一个月）

posted on 2021-12-14 15:56  lilele200706  阅读(47)  评论(0)    收藏  举报

导航