SringBoot 下的 Static 文件夹如何打包成前端资源

53 篇文章 0 订阅

以下是在 Windows10 系统下使用 IntelliJ IDEA 编写的 Spring Boot 项目中,将 src/main/resources/static 目录下的静态文件打包成前端资源的示例代码:

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.Bean;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@SpringBootApplication
public class DemoApplication {

    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }

    // 配置静态资源的路径映射
    @Bean
    public WebMvcConfigurer webMvcConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addResourceHandlers(ResourceHandlerRegistry registry) {
                registry.addResourceHandler("/static/**")
                        .addResourceLocations("classpath:/static/");
            }
        };
    }

}

在上述代码中,我们通过 @SpringBootApplication 注解声明了一个 Spring Boot 应用,并在其中定义了一个 WebMvcConfigurer 类型的 Bean,用于配置静态资源的路径映射。

接下来,我们可以在 src/main/resources/static 目录下创建静态文件,例如 index.htmlstyle.cssscript.js,然后使用构建工具将这些文件复制到前端项目的相应目录下。

以 Maven 为例,在项目的 pom.xml 文件中添加以下配置:

<build>
    <plugins>
        <plugin>
            <artifactId>maven-resources-plugin</artifactId>
            <version>3.1.0</version>
            <executions>
                <execution>
                    <id>copy-static-files</id>
                    <phase>prepare-package</phase>
                    <goals>
                        <goal>copy-resources</goal>
                    </goals>
                    <configuration>
                        <outputDirectory>${project.build.outputDirectory}/static</outputDirectory>
                        <resources>
                            <resource>
                                <directory>../spring-boot-project/src/main/resources/static</directory>
                            </resource>
                        </resources>
                    </configuration>
                </execution>
            </executions>
        </plugin>
    </plugins>
</build>

这个配置会在 Maven 打包前,将 Spring Boot 项目中的 static 目录下的文件复制到前端项目的 target/classes/static 目录下。

最后,我们可以使用前端构建工具,例如 webpack 或 gulp,将这些静态资源打包成前端资源。

注意:上述代码仅供参考,具体实现可能需要根据具体情况进行调整。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
资源说明】 1、该资源包括项目的全部源码,下载可以直接使用! 2、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目,作为参考资料学习借鉴。 3、本资源作为“参考资料”如果需要实现其他功能,需要能看懂代码,并且热爱钻研,自行调试。 基于SpringBoot的简易问卷调查系统源码+项目说明.zip # Questionnaire ## Introduction 一个基于SpringBoot的简易问卷调查系统 ### Features * 采用Nginx实现前后端分离(并不规范) * 用户管理 * 发布问卷 * 回答问卷 ### ToDo - 后台管理 - 验证码 - 带答案式问卷 - 统计分析 - 导出excel - 权限验证 ### 后端依赖 + SpringBoot 2.1.10 + Mybatis + hutool工具包 + Lombok插件 + PageHelper分页工具 ### 前端依赖 | 框架 | 介绍 | | ------------------------ | ------------------------------- | | BootStrap | 基础的布局框架 | | BootStrap-datetimepicker | 日期选择工具 | | BootStrap-table | 表格显示工具 | | BootStrapValidator | 表单验证工具 | | Jquery | 基础框架,是BootStrap框架的基础 | | Jsrender | 模板引擎,动态生页面 | | toastr | 提示工具 | ### 开发工具 + IDEA 2018.1.5 ### 如何使用 1. 部署运行环境 * 安装反向代理服务软件Nginx1.14.2,windows或linux版本均可。可参看博文[Nginx简单安装与配置](https://blog.csdn.net/qq_41550842/article/details/103532550),也可自行百度 * 静态html,js,图片等在上面的resource文件夹内,将这些放入服务器中 * Java版本1.8 * mysql5.5 2. 配置文件 * Nginx配置文件,打开nginx.conf文件,进行如下配置 ```nginx server { listen 80; server_name 127.0.0.1; ####需设置服务器ip#### #charset koi8-r; #access_log logs/host.access.log main; location /nginx/ { root html; index index.html index.htm; } #动静分离 location /views/ { ###下面的根目录需要设置为静态资源的根目录,若将代码克隆下来直接放到linux服务器根目录下,则不需要改### root /resource/questionnaire_static_res;#html页面存储位置的根目录 } #该配置是指nginx收到的url中包含/views/的请求,nginx就会去/resource/questionnaire_static_res/views中查找 location /static/ { root /resource/questionnaire_static_res; #同上 } #反向代理,如果nginx匹配完上述两个规则后,未匹配到相应资源
系统介绍: 本系统是一个基于SpringBoot+Vue的CSGO赛事管理系统。在这个系统中,用户可以创建自己的个人账户,并查看赛事信息、报名参赛、创建和管理战队、创建比赛和比赛设置、统计数据并发布赛事公告等等。同时,赛事管理员可以对所有的操作和数据进行管理和审核,包括对战队和比赛的审核、数据统计和发布赛事公告等等。 系统架构: 前端技术栈:Vue2 + Vue-router + Vuex + Element-UI + Axios + webpack 后端技术栈:SpringBoot + SpringSecurity + MyBatis + MySQL 系统功能: 1.登录注册:用户可以通过注册页面进行注册,注册完后可以登录系统,也可以通过第三方登录进行操作。 2.首页展示:首页展示赛事信息、赛事公告、比赛的直播和回放以及战队的信息,管理员可以对这些信息进行管理和编辑。 3.赛事管理:用户可以创建比赛、设置比赛规则、选择比赛地图、创建赛事场次等,管理员可以审核和管理比赛的相关信息,包括报名管理、数据统计、比赛场次等等。 4.战队管理:用户可以创建和加入战队、管理战队的信息、查看和审核战队的信息等等,管理员可以对战队进行审核和管理。 5.个人中心:用户可以查看自己的比赛信息、赛事记录,管理自己的战队,同时也可以修改个人资料、更改密码等。 6.赛事公告:管理员可以发布赛事公告,赛事信息和通知等等。 源码解释: 本系统的源码结构比较清晰,前端部分采用了Vue的组件化开发,后端部分采用了SpringBoot的MVC架构。其中,前端代码放在“/src/main/resources/static”目录下的“/admin”文件夹中,后端代码放在“/src/main/java/com/example/demo”目录下。同时,系统中还包括数据库脚本和配置文件,在部署和启动系统时需要注意配置和运行环境的问题。 部署说明: 1.在本地或云服务器上安装并配置好MySQL数据库、JDK和Maven等环境。 2.下载源代码并使用IDE打开,修改项目中的数据库配置文件“application.yml”,设置好数据库相关信息。 3.在MySQL数据库中创建一个名为“csgo”的数据库,导入项目中提供的数据库脚本。 4.在IDE中运行项目,并访问“http://localhost:8080”即可进入系统首页。初始管理员账号为“admin”,密码为“123456”。 总结: 本系统是一个基于SpringBoot+Vue的CSGO赛事管理系统,系统架构清晰,功能齐全,可以满足赛事组织和管理的各种需求。该系统的源码和部署说明均提供给用户,用户可以按照文档说明进行部署和调试,实现自己的赛事管理系统。
# i18n-demo 基于i18n利用springboot实现后台国际化demo 引入外部依赖:commons-lang3、lombok ## 背景 项目做到尾声,临时需要添加国际化内容,开始只是前台展示的页面添加了国际化支持,后来发现一些后台提示很不友好,遂也选择进行国际化处理。 ## 实现 **Springboot对国际化支持的很好,我们就用自带的i18n实现国际化就行。** 1. application.properties配置文件指定messages位置 ``` spring.messages.basename=i18n.message spring.messages.encoding=UTF-8 ``` 通过查看源码我们可以知道,如果不进行配置,默认读取resource下面messages文件,源码如下: ![springboot默认国际化配置读取位置](https://img-blog.csdnimg.cn/20200511183958366.png) 2. 在resource文件夹下面创建我们配置的basename,目录结构如下图: ![三个配置文件](https://img-blog.csdnimg.cn/20200512093846448.png) **其中 message.properties必须要有,其他的配置文件命名格式为:message_语言_国家.properties**,其中语言和国家格式可以查看 java.util.Locale 类中的说明。 3. 自定义重写 LocaleResolver 类的 resolveLocale 方法,代码如下: ``` public class MyLocaleResolverConfig implements LocaleResolver { private static final String PATH_PARAMETER = "lang"; private static final String PATH_PARAMETER_SPLIT = "_"; @Override public Locale resolveLocale(HttpServletRequest request) { String lang = request.getHeader(PATH_PARAMETER); Locale locale = request.getLocale(); if (!StringUtils.isEmpty(lang)) { String[] split = lang.split(PATH_PARAMETER_SPLIT); locale = new Locale(split[0], split[1]); } return locale; } @Override public void setLocale(HttpServletRequest request, HttpServletResponse response, Locale locale) { } } ``` resolveLocale 方法作用就是我们的程序从哪获取指定的语言信息,我这里采用的是从header中获取指定语言,如果没有则采用浏览器 默认的。 还可以从 Session 或 Cookie 中获取。**这里因为我们采取header中获取,所以前端发的请求中 Request Headers 中要有 key 为 lang,value 为 en_US 或 zh_CN 的header。** 4. 将我们自定义的 MyLocaleResolverConfig 作为 Bean 注册进系统中: ``` @Bean public LocaleResolver localeResolver() { return new MyLocale ## 项目备注 1、该资源内项目代码都经过测试运行功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.md文件(如有),仅供学习参考, 切勿用于商业用途。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

123的故事

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值