前后端合并

前后端分离开发是现在比较流行的一种方式,这样开发的前提是前端采取的是Ajax请求,前后端分离能省去很多不必要的麻烦,让开发者更关注与自己模块的开发。

但是开发完成之后需要合并,我用后端用的是Springboot 合并其实挺简单

这个是后端的文件目录    

 这个是前端的目录


合并时将用到的文件复制到后端的Resources目录的static或resource文件夹下    

 就是要注意一下里面的坑

1.合并之后静态资源无法访问,我就被这个问题困扰了好久。

解决方法,首先要再springboot的配置文件指定存放静态资源的位置,Springboot默认资源路径为/**

Spring Boot 默认配置的/**映射到classpath:/static(或classpath:/public ,classpath:/resourcesclasspath:/META-INF/resources),/webjars/**会映射到classpath:/META-INF/resources/webjars/

spring.mvc.static-path-pattern=/**
spring.resources.static-locations=classpath:/META-INF/resources/,classpath:/resources/,\ classpath:/static/,classpath:/static/view,classpath:/public/

以上指定的目录按照优先级以逗号隔开

spring.mvc.static-path-pattern=/** 
表示所有访问都经过资源路径

还有一种方法就是自己新建一个配置类

你可以让你的配置类继承WebMvcConfigurerAdapter,然后重写如下方法:

@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
    registry.addResourceHandler("/mystatic/**")
            .addResourceLocations("classpath:/mystatic/");
}
  • 1
  • 2
  • 3
  • 4
  • 5

这种方式会在默认的基础上增加/mystatic/**映射到classpath:/mystatic/,不会影响默认的方式,可以同时使用。

2.静态资源是否被shiro拦截,千万要注意,shiro拦截器中如果被拦截了,放开资源时一定要写映射路径


springboot功能很强大,它自带serverlet 容器,打成jar包之后在windows系统下双击就能运行

### 合并在 IntelliJ IDEA 中 Vue 前端和后端项目的步骤 #### 配置开发环境 为了在同一 IDE 实例中管理和开发前端和后端代码,在 IntelliJ IDEA 中创建一个多模块项目是一个有效的方法。这允许开发者在一个工作空间内同时处理不同技术栈的应用部分。 对于基于 Java 的 Spring Boot 后端服务以及采用 Vue.js 构建的单页面应用 (SPA),可以按照如下方式配置: #### 创建多模块 Maven 项目结构 首先,建立一个新的父级 POM 文件来定义整个应用程序的整体依赖关系和其他设置。此文件应位于顶级目录下,并且应当声明子模块作为其组成部分[^2]。 ```xml <modules> <module>backend</module> <module>frontend</module> </modules> ``` 这里 `backend` 和 `frontend` 是两个独立但关联紧密的部分;前者负责业务逻辑和服务接口实现,后者则专注于用户界面展示。 #### 设置前端构建工具链支持 为了让 IntelliJ IDEA 能够识别并编译 Vue 项目中的资源文件,安装 Node.js SDK 并通过插件如 Vite 或 Webpack 来辅助打包过程是非常必要的。可以通过以下命令初始化 npm/yarn 工程并添加所需包: ```bash npm init vite@latest frontend --template vue cd frontend npm install ``` 接着,在 `settings.json` 或 `.iml` 文件里指定正确的 JavaScript/TypeScript 解析器路径以便于编辑期间获得更好的语法提示和支持[^1]。 #### 处理跨域资源共享(CORS)问题 由于前后两端通常部署在不同的服务器上,因此浏览器的安全策略会阻止它们之间的直接通信。解决办法之一是在 Spring Boot 应用程序中启用 CORS 支持,具体做法是修改控制器类上的注解或是全局配置 Bean: ```java @Configuration public class CorsConfig { @Bean public WebMvcConfigurer corsConfigurer() { return new WebMvcConfigurer() { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") // 生产环境中建议限定特定域名 .allowedMethods("GET", "POST", "PUT", "DELETE"); } }; } } ``` #### 运行与调试 当所有准备工作就绪之后,就可以利用内置终端窗口执行相应的脚本来启动各自的服务实例了。值得注意的是,如果遇到类似 “Failed to parse configuration class... FileNotFoundException” 错误,则可能是缺少某些必需的资源配置文件所致,需确保这些文件确实存在于预期位置[^3]。 最后一步就是调整好两者之间交互的方式——API 请求地址、数据格式等细节方面的问题,从而达到无缝衔接的效果。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值