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

本文链接：https://blog.csdn.net/weixin_57496353/article/details/135998713

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

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

环境配置

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

安装IDEA：参考
JDK的安装及配置：参考
创建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）

**安装Visual Studio Code (VS Code)：**参考
**安装Node.js和npm：**参考
创建 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 后端开发

配置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

定义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 {
    @Id
    private Long filmId;
    private String title;
    private String description;
    // Standard getters and setters
}

创建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> {
}

实现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;
    }

    @GetMapping
    public List<Movie> getAllMovies() {
        return movieRepository.findAll();
    }
}

Vue.js前端开发

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

创建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);
};

更新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方法来实现。

创建配置类：

在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 {

    @Override
    public 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前端应用的跨域请求了。