SpringBoot之访问静态资源(webapp...)

springboot访问静态资源,默认有两个默认目录,

一个是  classpath/static 目录 (src/mian/resource)

一个是 ServletContext 根目录下( src/main/webapp )

这在里可能有小伙伴对 classpath 不怎么了解,这里简要的介绍下,classpath 即WEB-INF下面的classes目录 ,在springboot项目中可能就是,src/main/resource 目录。

1,classpath 目录下-访问默认文件夹名为 static

目录截图:

访问截图:

 

这里有人就想说,我可不可以修改一下访问路径呢,答案是肯定的,肯定可以。

在 properties文件里面设置  spring.resources.static-locations 就ok了

spring.resources.static-locations 的默认值是:classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/

图示修改:我将默认路径改成了 src/main/resource/static/images/,在里面我写了一个 index.html 里面写的 html img

访问的时候就找的是我设置的路径了。

2.ServletContext 根目录下( src/main/webapp ) - webapp 就是默认访问文件夹

这个可能很多人就不陌生了,一般来说 src/main/java 里面放Java代码,resource 里面放 配置文件。xml, webapp里面放页面,js之类的。

ServletContent 根目录就是 src/main/webapp

一般创建的maven项目里面都没有 webapp 文件夹,在这里我们自己在 src/main 目录下创建一个 webapp

项目目录,以及访问截图:

在IntelliJ IDEA 2024.3.1上搭建Spring Boot项目并集成Vue.js,通常需要经历以下几个步骤: 1. **创建Spring Boot项目**: - 打开 IntelliJ IDEA,选择 "Create New Project",然后选择 "Spring Initializr"。 - 配置项目基本信息,如Group、Artifact ID等,并选中 "Web" 模板支持 Spring MVC 和 RESTful API。 - 点击 "Next" -> "Finish" 来生成基本的Spring Boot项目。 2. **添加Vue.js依赖**: - 使用npm或yarn,在项目根目录下打开命令行工具。 - 如果是`npm`,运行 `npm init` 初始化一个package.json文件,然后添加`: vue` 或者 `@vue/cli` 作为脚手架安装。 - 如果是`yarn`,则运行 `yarn create @vue/app` 创建一个新的Vue应用。 - 将Vue应用复制到`src/main/resources/static` 目录或`src/main/webapp` (Spring Boot默认)。 3. **配置前端构建工具**: - 如果使用了Vue CLI,它会在项目的`package.json`自动配置Webpack。如果没有,你需要手动配置Webpack或使用其他构建工具如Vite。 4. **整合前后端**: -Spring Boot的`main`函数中,引入Vue实例,并指定静态资源的映射路径。例如,添加类似以下的代码: ```java @SpringBootApplication public class AppApplication { public static void main(String[] args) { SpringApplication.run(AppApplication.class, args); Vue.config.productionTip = false; new WebFluxConfigurerAdapter().addInterceptors(//...your Vue Router configuration); // 如果使用Nginx反向代理,则配置其将`/api/*`转发给Spring Boot的API } } ``` 5. **路由配置**: - 对于Vue组件,配置`<router-view>`标签用于渲染动态内容。同时,通过`spring.mvc.view.prefix` 和 `spring.mvc.view.suffix` 配置Spring MVC视图解析器指向前端应用的HTML文件。 6. **部署**: - 构建前端应用(使用`npm run build`或`yarn build`),并将生成的dist文件夹放置在服务器的webroot目录下。 - 保证Spring Boot的端口可以访问到Vue应用。
评论 24
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值