SpringBoot项目实战(39)--Beetl网页HTML文件中静态图片及CSS、JS文件的引用和展示

news2025/1/13 16:37:29

        使用Beetl开发网页时,在网页中使用的CSS、JS、图片等静态资源需要进行适当的配置才可以展示。大致的过程如下:

    (1)首先Spring Security框架需要允许js、css、图片资源免授权访问。

    (2)网站开发时,如果网页文件不放在SpringBoot工程内部打包,单独指定了文件目录,需要在Config文件中加载文件系统中的网页目录。

     (3)网页文件中引用静态文件的路径不能使用相对路径,需要使用绝对路径。

     (4)如果使用了Nginx,静态资源文件路径还要加上 Nginx反向代理的路径。

下面是实现过程:

       首先贴一下之前openjweb-sys工程的WebSecurityConfig文件,增加了js目录、css目录、images目录的免授权访问:

package opackage org.openjweb.sys.config;

import lombok.RequiredArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import org.openjweb.core.service.CommUserService;
import org.openjweb.sys.auth.security.AESPasswordEncoder;
import org.openjweb.sys.auth.security.MD5PasswordEncoder;
import org.openjweb.sys.auth.security.MyAccessDecisionManager;
import org.openjweb.sys.auth.security.MyFilterInvocationSecurityMetadataSource;
import org.openjweb.sys.entry.JwtAuthenticationEntryPoint;
import org.openjweb.sys.filter.JwtAuthenticationFilter;
import org.openjweb.sys.handler.JWTLogoutSuccessHandler;
import org.openjweb.sys.handler.JwtAccessDeniedHandler;
import org.openjweb.sys.handler.LoginFailureHandler;
import org.openjweb.sys.handler.LoginSuccessHandler;
import org.openjweb.sys.provider.MyAuthenticationProvider;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.boot.autoconfigure.condition.ConditionalOnExpression;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.authentication.AuthenticationManager;
import org.springframework.security.authentication.dao.DaoAuthenticationProvider;
import org.springframework.security.config.annotation.ObjectPostProcessor;
import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder;
import org.springframework.security.config.annotation.method.configuration.EnableGlobalMethodSecurity;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.security.config.http.SessionCreationPolicy;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.security.crypto.password.PasswordEncoder;
import org.springframework.security.web.access.intercept.FilterSecurityInterceptor;

@Slf4j
@Configuration
@EnableWebSecurity
@RequiredArgsConstructor
@EnableGlobalMethodSecurity(prePostEnabled = true)
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

    @Autowired
    CommUserService userDetailService;

    @Bean
    public PasswordEncoder passwordEncoder()
    {
        return new AESPasswordEncoder();
    }

    @Autowired
    LoginSuccessHandler loginSuccessHandler;

    @Autowired
    LoginFailureHandler loginFailureHandler;

    @Autowired
    JwtAuthenticationEntryPoint jwtAuthenticationEntryPoint;

    @Autowired
    JwtAccessDeniedHandler jwtAccessDeniedHandler;

    @Autowired
    JWTLogoutSuccessHandler jwtLogoutSuccessHandler;

    @Value("${oauth2.server}")
    private boolean isOAuth2Server = false;

    private static final String[] ALLOW_URL_LIST = {
            //
            "/login",
            "/logout",
            "/captcha",
            "/favicon.ico",
            //"/api/jwt/**",
            "/api/cms/**",
            "/api/b2c/**",
            "/api/b2b2c/**",
            "/api/sns/**",
            "/api/comm/**",
            "/api/cms1/**",
            "/api/store/**",
            "/demo/**",
            "/oauth/**", //允许oauth认证的路径
            "/webjars/**", //webjars js允许的路径
            "/testduoyu",
            "/i18n/**",
            "/**/*.html", //swagger
            "/api/comm/user/login",
            "/api/weixin/login",
            "/api/weixin/getVueMenu",
            "/api/comm/user/getUserInfo2",
            "/front/**",
            "/**/js/**",
            "/**/images/**",
            "/**/css/**"

    };

    //作用???暴露AuthenticationManager给其他Bean使用
    @Bean
    @Override
    protected AuthenticationManager authenticationManager() throws Exception {
        return super.authenticationManager();
        //return super.authenticationManagerBean();
    }

    //这个和上面的是什么区别?能一起用吗?

    /*@Bean
    @Override
    public AuthenticationManager authenticationManagerBean() throws Exception
    {
        return super.authenticationManagerBean();
    }*/


    @Override
    protected void configure(HttpSecurity http) throws Exception {
        //下面注释掉的是第一阶段的示例
      /*  http.cors().and().csrf().disable()//登录表单
         .formLogin()
                .and()
                .authorizeRequests()
                .antMatchers(ALLOW_URL_LIST).permitAll()
                .anyRequest().authenticated();
       */
        //下面是第二阶段整合了数据库权限控制的示例
        log.info("是否配置了oauth2 server:::::");
        log.info(String.valueOf(this.isOAuth2Server));
        if(this.isOAuth2Server){
            log.info("OAUTH2模式...........");

            http.formLogin()
                    //.loginPage("/login.html")
                    .loginProcessingUrl("/login")
                    .and()
                    .authorizeRequests()
                    .antMatchers("/login.html", "/img/**","/demo/**","/webjars/**",  "/testduoyu","/i18n/**","/api/b2c/b2carea/**","/api/store/**","/**/*.html", "/api/comm/user/login","/api/weixin/login","/api/weixin/getVueMenu","/api/comm/user/getUserInfo2", "/front/**"
                                    ,"/**/js/**",  "/**/images/**",  "/**/css/**"
                    ).permitAll()
                    .anyRequest().authenticated()
                    .and()
                    .csrf().disable();
        }
        else {
            log.info("非OAUTH2模式............");
            http.authorizeRequests()
                    .withObjectPostProcessor(new ObjectPostProcessor<FilterSecurityInterceptor>() {
                        @Override
                        public <O extends FilterSecurityInterceptor> O postProcess(O object) {
                            object.setSecurityMetadataSource(cfisms());
                            object.setAccessDecisionManager(cadm());

                            return object;
                        }
                    })
                    .and().formLogin()
                    //先注掉这个检查oauth认证
                    //.successHandler(loginSuccessHandler) //登录成功处理
                    .failureHandler(loginFailureHandler) //登录失败处理
                    .loginProcessingUrl("/login").permitAll()
                    //.loginProcessingUrl("/demo/jwt/login").permitAll()

                    .and()
                    .logout()
                    .logoutSuccessHandler(jwtLogoutSuccessHandler)

                    // 禁用session
                    .and()
                    .sessionManagement()
                    .sessionCreationPolicy(SessionCreationPolicy.STATELESS)

                    // 配置拦截规则
                    .and()
                    .authorizeRequests()
                    .antMatchers(ALLOW_URL_LIST).permitAll()
                    .anyRequest().authenticated()


                    // 异常处理器
                    .and()
                    .exceptionHandling()
                    //接口登录模式打开这个
                    //.authenticationEntryPoint(jwtAuthenticationEntryPoint) //这个影响登录,会导致/login登录蔬菜
                    .accessDeniedHandler(jwtAccessDeniedHandler)

                    // 配置自定义的过滤器
                    //这个jwtAuthenticationFilter 不加也执行了,是否增加了会调整多个过滤器的执行顺序
                    .and()
                    .addFilter(jwtAuthenticationFilter())
                    .logout().permitAll().and().csrf().disable();
        }
    }

    /*@Bean
    PasswordEncoder PasswordEncoder() {
        //return md5PasswordEncoder;
        //return aesPasswordEncoder;//这个不行
        return new AESPasswordEncoder();
        //return new BCryptPasswordEncoder();
        //return new Md5PasswordEncoder();

    }*/
   /*
    @Autowired
    MD5PasswordEncoder md5PasswordEncoder;

    @Autowired
    AESPasswordEncoder aesPasswordEncoder;
    */

    @Override
    protected void configure(AuthenticationManagerBuilder auth) throws Exception {
        if(true){
            //如果自定义AuthenticationProvider 则不使用这个
            //auth.userDetailsService(userDetailService).passwordEncoder(aesPasswordEncoder);
            //auth.userDetailsService(userDetailService).passwordEncoder(new BCryptPasswordEncoder());
            DaoAuthenticationProvider provider = new DaoAuthenticationProvider();
            provider.setUserDetailsService(userDetailService);
            provider.setPasswordEncoder(passwordEncoder());
            auth.authenticationProvider(provider);
        }
        else{
            //自定义AuthenticationProvider
            auth.authenticationProvider(new MyAuthenticationProvider(userDetailService));
        }
    }

    @Bean
    MyAccessDecisionManager cadm() {
        //System.out.println("加载角色权限设置。。。。。。。。。。。。");
        return new MyAccessDecisionManager();
    }

    @Bean
    MyFilterInvocationSecurityMetadataSource cfisms() {
        //System.out.println("加载权限设置。。。。。。。。。。。。");
        return new MyFilterInvocationSecurityMetadataSource();
    }


    @Bean
    @ConditionalOnExpression("'${oauth2.server}'=='false'")
    JwtAuthenticationFilter jwtAuthenticationFilter() throws Exception {
        JwtAuthenticationFilter jwtAuthenticationFilter = new JwtAuthenticationFilter(authenticationManager());
        return jwtAuthenticationFilter;
    }
}

  然后在openjweb-core工程的WebMvcConfig中增加文件系统中静态资源目录:

     

package org.openjweb.core.config;

import lombok.extern.slf4j.Slf4j;
import org.beetl.core.GroupTemplate;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.i18n.LocaleChangeInterceptor;

import java.util.HashMap;
import java.util.Map;

@Configuration
@Slf4j
public class WebMvcConfig implements WebMvcConfigurer {

    @Value("${beetl.fileTemplatesPath:}") String fileTemplatesPath;

    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/testduoyu").setViewName("testduoyu");//不能命名testlocale 可能locale有冲突
    }

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        log.info("fileTemplatePath::");
        log.info(fileTemplatesPath);
        if(!fileTemplatesPath.endsWith("/"))fileTemplatesPath+="/";
        //D:/tmp/beetl/templates
        registry.addResourceHandler("/**")
                .addResourceLocations("file:"+fileTemplatesPath)
                .addResourceLocations("classpath:/static/");
    }


    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        log.info("设置国际化参数lang...........");
        //默认拦截器 其中lang表示切换语言的参数名 LocaleChangeInterceptor 指定切换国际化语言的参数名。
        // 例如?lang=zh_CN 表示读取国际化文件messages_zh_CN.properties。
        //System.out.println("增加国际化拦截器...........");
        LocaleChangeInterceptor localeInterceptor = new LocaleChangeInterceptor();
        localeInterceptor.setParamName("lang");// 指定设置国际化的参数
        registry.addInterceptor(localeInterceptor);

    }
}

在上面的代码中,增加了addResourceHandlers方法,此方法加载了文件系统fileTemplatePath目录的静态资源,在开发环境中,application-dev.yml中指定的fileTemplatePath是d:\tmp\beetl\templates。

项目的静态网页:

        假设项目的静态网页路径是D:\tmp\beetl\templates\cms\site\wenhua,在此路径下有js、css、images目录以及html文件,下面截取了局部的HTML文件:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>中国文化网</title>
<meta name="keywords" content="中国文化网">
<meta name="description" content="中国文化网">
<link href="/clouds/cms/site/wenhua/css/common.css" rel="stylesheet" type="text/css" />
<link href="/clouds/cms/site/wenhua/css/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
<link href="/clouds/cms/site/wenhua/css/index.css" rel="stylesheet" type="text/css" />
<link href="/clouds/cms/site/wenhua/css/focus1.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/clouds/cms/site/wenhua/js/jquery.1.7.2.min.js"></script>
<script type="text/javascript" src="/clouds/cms/site/wenhua/js/koala.min.1.5.js"></script>
<script type="text/javascript">
    $(function(){ 
        var pw = $('#po-pic').width();
        var sw = $(window).width();
        var lw = (pw - sw)/2;
        $('#po-pic').attr('style','margin-left:-'+lw+'px');
    })
</script>
</head>
<body>
<div class="top">
    <div class="layout">
        <div class="fl logo"><a href="#"><img src="/clouds/cms/site/wenhua/images/logo.jpg" width="257" height="70" border="0" /></a></div>
        <div class="fr top-nav">
            <div class="fr search">
                <input type="text" name="search" class="fr" /><span>高级搜索&nbsp;&nbsp;<a href="#"><i class="fa fa-search fa-lg"></i></a></span>
            </div>
            <a href="#">邮箱登陆1</a><span>&emsp;|&emsp;</span>
        </div>
        <div class="clear"></div>
    </div>
</div>

注意静态资源文件的引用:/clouds/cms/site/wenhua/css/common.css、/clouds/cms/site/wenhua/images/logo.jpg,其中clouds是使用Nginx反向代理将8001端口转发到了SpringBoot,如果没使用nginx,而是使用了localhost:8001,则不需要使用/clouds,后面/cms开头的路径则是针对模版文件跟路径下的相对路径,根路径为D:\tmp\beetl\templates。

     现在我们开发一个控制层类,用于展示静态页面。在openjweb-cms内容管理模块增加一个控制层类:

package org.openjweb.cms.controller;

import io.swagger.annotations.Api;
import lombok.extern.slf4j.Slf4j;
import org.openjweb.cms.service.CmsInfoService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.HashMap;
import java.util.Map;

@Api(tags = "内容管理-前端查询")
@Slf4j
@Controller
@RequestMapping("/front") //

public class CmsInfoController {
    @Autowired
    private CmsInfoService cmsInfoService;

    @RequestMapping(value="/index")

    public String index( Model model) {

        return "cms/site/wenhua/index.html";//返回页面名
    }

}

测试访问:http://localhost:8001/front/index (不使用nginx则html中静态资源不要加/clouds)

返回的静态页效果:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2276046.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

node_exporter 安装

cd /root/node_exporter wget https://github.com/prometheus/node_exporter/releases/download/v1.7.0/node_exporter-1.7.0.linux-amd64.tar.gz tar xvfz node_exporter-1.7.0.linux-amd64.tar.gz #运行 cd /root/node_exporter/node_exporter-1.7.0.linux-amd64 ./node_exp…

【STM32-学习笔记-4-】PWM、输入捕获(PWMI)

文章目录 1、PWMPWM配置 2、输入捕获配置3、编码器 1、PWM PWM配置 配置时基单元配置输出比较单元配置输出PWM波的端口 #include "stm32f10x.h" // Device headervoid PWM_Init(void) { //**配置输出PWM波的端口**********************************…

【复习小结】1-13

数学追求更简洁的表达&#xff0c;计算机追求更简单的表达。数据结构把数学的逻辑结构放进计算器的存储器。 DAY4 闰年的计算 布尔类型是一种数据类型&#xff0c;用于表示逻辑值的简单类型&#xff0c;它的值只能是真&#xff08;true&#xff09;或假&#xff08;false&…

VSCode连接Github的重重困难及解决方案!

一、背景&#xff1a; 我首先在github创建了一个新的项目&#xff0c;并自动创建了readme文件其次在vscode创建项目并写了两个文件在我想将vscode的项目上传到对应的github上时&#xff0c;错误出现了 二、报错及解决方案&#xff1a; 1.解决方案&#xff1a; 需要在git上配置用…

vue-cli项目配置使用unocss

在了解使用了Unocss后&#xff0c;就完全被它迷住了。接手过的所有项目都配置使用了它&#xff0c;包括一些旧项目&#xff0c;也跟同事分享了使用Unocss的便捷性。 这里分享一下旧项目如何配置和使用Unocss的&#xff0c;项目是vue2vue-cli构建的&#xff0c;node<20平常开…

StarRocks Awards 2024 年度贡献人物

在过去一年&#xff0c;StarRocks 在 Lakehouse 与 AI 等关键领域取得了显著进步&#xff0c;其卓越的产品功能极大地简化和提升了数据分析的效率&#xff0c;使得"One Data&#xff0c;All Analytics" 的愿景变得更加触手可及。 虽然实现这一目标的道路充满挑战且漫…

[SAP ABAP] APPEND INITIAL LINE 追加空行

语法格式 APPEND INITIAL LINE TO itab.示例1 SFLIGHT(航班) 输出结果&#xff1a; 示例2 我们可以使用下面的语法进行内表分配指针&#xff0c;追加空行并赋值的操作 APPEND INITIAL LINE TO lt_tab ASSIGNING FIELD-SYMBOL(<lfs_val>). REPORT z437_test_2025.* 自…

qml SpringAnimation详解

1. 概述 SpringAnimation 是 Qt Quick 中用于模拟弹簧效果的动画类。它通过模拟物体在弹簧力作用下的反应&#xff0c;产生一种振荡的动画效果&#xff0c;常用于模拟具有自然回弹、弹性和振动的动态行为。这种动画效果在 UI 中广泛应用&#xff0c;特别是在拖动、拉伸、回弹等…

【数据结构-堆】力扣1834. 单线程 CPU

给你一个二维数组 tasks &#xff0c;用于表示 n​​​​​​ 项从 0 到 n - 1 编号的任务。其中 tasks[i] [enqueueTimei, processingTimei] 意味着第 i​​​​​​​​​​ 项任务将会于 enqueueTimei 时进入任务队列&#xff0c;需要 processingTimei 的时长完成执行。 现…

[云原生之旅] K8s-Portforward的另类用法, 立省两个端口

前言 此方法适用于Pod不需要大量连接的情况: 有多个pod在执行任务, 偶尔需要连接其中一个pod查看进度/日志;对pod执行一个脚本/命令; 不适用于大量连接建立的情况: pod启的数据库服务;pod启的Api服务;pod启的前端服务;pod启的Oss服务; Portforward简介 Portforward就是端…

MySQL表的增删改查(基础)-下篇

修改 真正在改硬盘了&#xff0c;这样的修改是“持久有效”。一定要确保&#xff0c;update的修改是改对了&#xff0c;改出问题来就麻烦。指定update的时候&#xff0c;如果当前不指定任何条件&#xff0c;就会针对所有的行都能生效&#xff01; (把整个表都给改了)。 案例 --…

Conda虚拟Python环境下安装包遇到的坑

明天下午要去参加Nvidia组织的一个开发者夏令营活动&#xff0c;按照2024 NVIDIA开发者社区夏令营环境配置指南(Win & Mac)_nvidia mac-CSDN博客提供的指引配置环境。里面建议的是用conda来配置Python虚拟环境&#xff0c;原本本机直接安装最直接&#xff0c;不过正好学习下…

【Spring】@Size 无法拦截null的原因

问题复现 在构建 Web 服务时&#xff0c;我们一般都会对一个 HTTP 请求的 Body 内容进行校验&#xff0c;例如我们来看这样一个案例及对应代码。当开发一个学籍管理系统时&#xff0c;我们会提供了一个 API 接口去添加学生的相关信息&#xff0c;其对象定义参考下面的代码&…

Sping Boot教程之五十四:Spring Boot Kafka 生产者示例

Spring Boot Kafka 生产者示例 Spring Boot 是 Java 编程语言中最流行和使用最多的框架之一。它是一个基于微服务的框架&#xff0c;使用 Spring Boot 制作生产就绪的应用程序只需很少的时间。Spring Boot 可以轻松创建独立的、生产级的基于 Spring 的应用程序&#xff0c;您可…

FairGuard游戏安全2024年度报告

导 读&#xff1a;2024年&#xff0c;国内游戏市场实际销售收入3257.83亿元&#xff0c;同比增长7.53%&#xff0c;游戏用户规模6.74亿人&#xff0c;同比增长0.94%&#xff0c;市场收入与用户规模双双实现突破&#xff0c;迎来了历史新高点。但游戏黑灰产规模也在迅速扩大&…

NVIDIA Clara平台助力医学影像处理:编程案例与实践探索(上)

一、引言 1.1 研究背景与意义 在现代医学领域,医学影像技术已然成为疾病诊断、治疗方案制定以及疗效评估的关键支柱。从早期的 X 射线成像,到如今的计算机断层扫描(CT)、磁共振成像(MRI)、正电子发射断层扫描(PET)等先进技术,医学影像为医生提供了直观、精准的人体内…

influxdb 采集node_exporter数据

一、打开Scrapers添加 node_exporter地址&#xff1a;http://192.168.31.135:9100/metrics 查看数据

卷积神经04-TensorFlow环境安装

卷积神经04-TensorFlow环境安装 文章目录 卷积神经04-TensorFlow环境安装0-核心知识脉络1-参考网址2-手动安装Tensorflow-GPU1-关于Tensorflow的官网介绍2-安装Tensorflow-GPU版本1-安装Tensorflow-GPU版本脉络2-安装Tensorflow-GPU版本细节1-Anacanda配置【Python指定版本】-当…

四、智能体强化学习——单智能体工程实践与部署

实验环境与工具模型部署性能指标与评估 搭建强化学习的实验环境、调参与分布式训练&#xff0c;以及将训练好的模型集成到生产系统中并进行监控和评估。 4.1 实验环境与工具 在实际项目中&#xff0c;构建一个稳定、可扩展的实验环境至关重要。以下是一些常用的工具和方法。…

OA项目登录

导入依赖,下面的依赖是在这次OA登录中用到的 <!--web依赖--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.sprin…