将 IntelliJ IDEA 开发的后端（如 Spring Boot）与 HBuilder 开发的前端（如 Vue.js）结合，通常需要以下步骤：
- 技术栈确认
后端：Spring Boot（Java）
前端：Vue.js（HBuilder 常用框架）
交互方式：RESTful API（前后端分离） - 前后端分离部署（推荐）
后端配置
开启 CORS（解决跨域问题）：
java
@Configuration
public class CorsConfig {
@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurer() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/api/**")
.allowedOrigins("http://localhost:8080") // 前端地址
.allowedMethods("GET", "POST", "PUT", "DELETE")
.allowedHeaders("*");
}
};
}
}
提供 API 接口：
java
@RestController
@RequestMapping("/api")
public class UserController {
@GetMapping("/users")
public List
// 返回数据
}
}
前端配置
配置 API 请求基地址：
javascript
// 在Vue项目中配置axios
axios.defaults.baseURL = 'http://localhost:8081'; // 后端端口
打包前端项目：
bash
HBuilder中使用vue-cli打包
npm run build
- 前后端整合部署（后端托管前端）
步骤
将前端静态资源复制到后端：
在 HBuilder 中打包生成dist目录。
将dist目录复制到 Spring Boot 项目的src/main/resources/static或src/main/resources/public下。
配置后端静态资源路径：
java
@Configuration
public class WebConfig implements WebMvcConfigurer {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/**")
.addResourceLocations("classpath:/static/");
}
}
配置前端路由重定向（可选）：
java
@Controller
public class IndexController {
@GetMapping("/")
public String index() {
return "index.html"; // 前端入口文件
}
}
- 测试与运行
启动后端：
bash
使用Maven
mvn spring-boot:run
启动前端（开发模式）：
bash
在HBuilder中运行或使用npm
npm run serve
-
部署建议
生产环境：
前端打包后上传到服务器（如 Nginx）。
后端单独部署，通过反向代理（如 Nginx）统一访问入口。
示例 Nginx 配置：
nginx
server {
listen 80;
server_name your-domain.com;location / {
root /path/to/frontend/dist;
try_files $uri $uri/ /index.html;
}location /api {
proxy_pass http://localhost:8081; # 后端服务地址
}
}
常见问题
跨域问题：确保后端开启 CORS 或使用 Nginx 代理。
端口冲突：检查前后端端口是否一致（如前端 8080，后端 8081）。
静态资源路径：确认后端能正确加载前端的index.html和 JS/CSS 文件。
通过以上步骤，即可实现前后端的整合与交互。如果需要进一步优化（如 Docker 部署、微服务拆分），可以根据具体需求扩展。
