vue+spring boot项目开发，使用MySQL示例数据库sakila

从零开始开发一个简单的前后端分离项目，实现对MySQL示例数据库sakila中film表的数据展示。

环境配置

使用IDEA进行后端开发（Spring Boot）

1. 安装IDEA：参考
2. JDK的安装及配置：参考
3. 创建Spring Boot项目：
   • 打开IDEA，选择“Create New Project”
   • 选择“Spring Initializr”，填写项目的基本信息
   • 选择JDK11及以上的版本
   • 选择2.6.x及以上版本的Spring Boot
   • 添加项目依赖: Spring Web, Spring Data JPA, MySQL Driver
   • 完成项目创建向导

使用VS Code进行前端开发（Vue.js）

1. **安装Visual Studio Code (VS Code)：**参考
2. **安装Node.js和npm：**参考
3. 创建 Vue.js 项目：
   • 打开终端或命令行
   • 全局安装Vue Cli： npm install -g @vue/cli
   • 创建vue.js项目： vue create sakila-frontend
   • 使用模板创建或自定义 (choose defaults or manually select features as needed)

项目开发

Spring Boot 后端开发

1. 配置MySQL连接：

   路径 src/main/resources/application.properties:

   spring.datasource.url=jdbc:mysql://localhost:3306/sakila?useSSL=false&serverTimezone=UTC
   spring.datasource.username=用户名
   spring.datasource.password=用户密码
   spring.jpa.hibernate.ddl-auto=update
   

2. 定义JPA Entity：

   路径src/main/java/com/example/sakila/model/Movie.java:

   package com.example.sakila.model;import javax.persistence.Entity;
   import javax.persistence.Id;
   import javax.persistence.Table;@Entity
   @Table(name = "film")
   public class Movie {@Idprivate Long filmId;private String title;private String description;// Standard getters and setters
   }
   

3. 创建Repository 接口：

   路径src/main/java/com/example/sakila/repository/MovieRepository.java:

   package com.example.sakila.repository;import com.example.sakila.model.Movie;
   import org.springframework.data.jpa.repository.JpaRepository;public interface MovieRepository extends JpaRepository<Movie, Long> {
   }
   

4. 实现Controller：

   路径 src/main/java/com/example/sakila/controller/MovieController.java:

   package com.example.sakila.controller;import com.example.sakila.model.Movie;
   import com.example.sakila.repository.MovieRepository;
   import org.springframework.web.bind.annotation.GetMapping;
   import org.springframework.web.bind.annotation.RequestMapping;
   import org.springframework.web.bind.annotation.RestController;
   import java.util.List;@RestController
   @RequestMapping("/api/movies")
   public class MovieController {private final MovieRepository movieRepository;public MovieController(MovieRepository movieRepository) {this.movieRepository = movieRepository;}@GetMappingpublic List<Movie> getAllMovies() {return movieRepository.findAll();}
   }
   

Vue.js前端开发

1. **安装Axios包：**在项目根目录打开命令行运行 npm install axios.

2. 创建MovieService

   路径 src/services/MovieService.js:

   import axios from 'axios';const API_URL = 'http://localhost:8080/api/movies';export const getMovies = () => {return axios.get(API_URL);
   };
   

3. 更新App.vue

   路径 src/App.vue:

   <template><div id="app"><div v-for="movie in movies" :key="movie.filmId"><h3>{{ movie.title }}</h3><p>{{ movie.description }}</p></div></div>
   </template><script>import { getMovies } from './services/MovieService';  export default {name: 'App',data() {return {movies: [],};},created() {getMovies().then(response => {this.movies = response.data;});},};
   </script>

运行项目

• **后端：**使用IDEA运行application，项目会在 http://localhost:8080上运行
• **前端：**使用终端导航到项目根目录运行npm run serve，项目会在 http://localhost:8081上运行

解决跨域问题

通常涉及在Spring Boot后端添加CORS（跨源资源共享）配置。这允许前端应用（比如运行在不同端口或域名上的Vue.js应用）安全地请求后端资源。下面是具体步骤：

方法1：使用@CrossOrigin注解

在控制器（Controller）或者具体的请求处理方法上使用@CrossOrigin注解来允许跨域请求。这是最快捷的方式，适用于只需要为某几个控制器或方法解决跨域问题的情况。

• 在控制器上添加@CrossOrigin：

  import org.springframework.web.bind.annotation.CrossOrigin;
  import org.springframework.web.bind.annotation.RestController;@CrossOrigin(origins = "http://localhost:8081") // 允许来自8081端口的跨域请求
  @RestController
  public class MovieController {// ...
  }
  

• 在方法上添加@CrossOrigin：

  import org.springframework.web.bind.annotation.CrossOrigin;
  import org.springframework.web.bind.annotation.GetMapping;public class MovieController {@CrossOrigin(origins = "http://localhost:8081")@GetMapping("/movies")public List<Movie> getMovies() {// ...}
  }
  

方法2：全局CORS配置

如果想为所有控制器和路由统一配置CORS，可以通过实现WebMvcConfigurer接口并覆写addCorsMappings方法来实现。

1. 创建配置类：

   在Spring Boot应用中创建一个新的配置类，比如命名为WebConfig，并使其实现WebMvcConfigurer接口。

   import org.springframework.context.annotation.Configuration;
   import org.springframework.web.servlet.config.annotation.CorsRegistry;
   import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Configuration
   public class WebConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedOrigins("http://localhost:8081") // 允许来自8081端口的跨域请求.allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") // 允许的请求方法.allowedHeaders("*") // 允许的请求头.allowCredentials(true); // 允许发送Cookie}
   }
   

这个配置类中的addCorsMappings方法会添加针对所有路由（/**）的CORS配置，允许来自指定源（例如http://localhost:8081）的请求，并允许所有方法和头部，还可以配置是否允许凭证（如Cookies）。

注意：

• 在开发环境中，本案例将前端Vue.js应用运行在localhost:8081上，而Spring Boot后端应用运行在localhost:8080上，这种情况下需要配置CORS来允许跨域请求。
• 在生产环境中，建议将allowedOrigins设置为前端应用的实际部署域名，而不是使用*，以增强安全性。

通过以上两种方法之一配置CORS后，Spring Boot后端应该能够接受来自Vue.js前端应用的跨域请求了。