IDEA创建前后端

### 在IDEA中创建并配置前后端连接的项目 #### 1. 创建后端Spring Boot项目 在IntelliJ IDEA中，可以通过Spring Initializr快速生成一个Spring Boot项目[^2]。选择所需的依赖项，例如`Spring Web`和`Spring Data JPA`，以支持RESTful API开发和数据库操作。 ```java @SpringBootApplication public class BackendApplication { public static void main(String[] args) { SpringApplication.run(BackendApplication.class, args); } } ``` 在`application.yml`文件中配置数据库连接信息： ```yaml server: port: 9090 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/test?serverTimezone=GMT%2b8 username: root password: 123456 ``` #### 2. 创建前端Vue项目 使用Vue CLI工具创建前端项目，并将其与后端API集成[^2]。确保安装了Node.js环境后，运行以下命令初始化Vue项目： ```bash npm install -g @vue/cli vue create frontend ``` 进入项目目录并安装Axios库以实现与后端的HTTP通信： ```bash cd frontend npm install axios ``` 在Vue组件中调用后端API示例： ```javascript export default { data() { return { users: [] }; }, created() { axios.get('http://localhost:9090/api/users') .then(response => { this.users = response.data; }) .catch(error => { console.error('Error fetching users:', error); }); } }; ``` #### 3. 配置前后端连接 为了使前端能够正确访问后端服务，需要处理跨域问题。可以在Spring Boot项目中添加CORS支持[^2]： ```java @Configuration public class WebConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("http://localhost:8080") // 前端运行的端口 .allowedMethods("GET", "POST", "PUT", "DELETE"); } } ``` #### 4. 解决IDEA终端路径问题 如果在IDEA中遇到终端无法识别`localhost`或出现`ENOENT: no such file or directory, mkdir '\\?'`错误，可以将默认终端从PowerShell更改为CMD[^3]。通过设置`File -> Settings -> Tools -> Terminal`，将Shell path修改为系统中的`cmd.exe`路径。 #### 5. 运行项目 分别启动后端Spring Boot应用和前端Vue应用。后端通常运行在`localhost:9090`，而前端运行在`localhost:8080`。确保两者能够正常通信并展示数据。 ---