Spring Boot+Vue

Spring Boot+Vue 前后端分离是一种非常流行且高效的开发模式，以下是关于其相关方面的详细介绍：

前端（Vue）部分

• 项目搭建

• 使用 Vue CLI 创建项目，它提供了丰富的插件和配置选项，能够快速生成项目基础结构。例如，执行`vue create my-vue-app`命令，根据提示选择需要的特性，如 Babel、ESLint 等，即可创建一个 Vue 项目。

• 项目目录结构清晰，`src`目录下包含`components`（组件）、`views`（页面视图）、`router`（路由配置）、`store`（状态管理）、`assets`（静态资源）等子目录，方便进行模块化开发。

• 页面开发

• 组件化开发：将页面拆分成多个独立的组件，每个组件负责特定的功能和样式。例如，一个商品列表页面可以拆分成商品列表组件、商品详情组件、分页组件等。通过在父组件中引入并使用子组件，实现页面的组装。组件之间可以通过 props 传递数据，也可以通过事件进行通信。

• 路由管理：利用 Vue Router 实现页面的跳转和管理。在`router/index.js`文件中定义路由规则，将不同的 URL 路径映射到对应的组件。例如：

  ```javascript

    const routes = [

      {

        path: '/',

        name: 'Home',

        component: Home

      },

      {

        path: '/about',

        name: 'About',

        component: () => import('../views/About.vue')

      }

    ]

    ```

• 状态管理：对于复杂的应用，使用 Vuex 进行状态管理。Vuex 通过定义全局的状态存储，使得组件之间能够方便地共享状态。例如，一个购物车应用中，购物车商品列表的状态可以存储在 Vuex 中，多个组件通过调用 Vuex 的 action 和 mutation 来更新购物车状态，通过 getters 获取购物车状态。

• 与后端交互

• 使用 axios 库发送 HTTP 请求与后端进行数据交互。在项目中安装 axios，然后创建一个请求实例，配置请求的 baseURL、headers 等参数。例如：

  ```javascript

    import axios from 'axios'

    const instance = axios.create({

      baseURL: 'http://localhost:8080', // 后端接口地址

      timeout: 10000,

      headers: {'X-Custom-Header': 'foobar'}

    })

    ```

• 在组件中调用 axios 实例发送请求获取数据。例如，获取用户列表数据：

  ```javascript

    instance.get('/users').then(response => {

      this.users = response.data

    }).catch(error => {

      console.error(error)

    })

    ```

• 对于登录等操作，发送请求将用户名和密码等信息发送给后端，后端返回 token 等认证信息，前端将其存储在本地存储（如 localStorage）中，后续请求携带 token 进行认证。

后端（Spring Boot）部分

• 项目搭建

• 使用 Spring Initializr（Spring Boot 项目。选择项目的基本信息，如 Group（包名）、Artifact（项目名）、Java 版本等，同时添加所需的依赖，如 Spring Web、Spring Data JPA、MyBatis 等，然后生成项目压缩包并解压到本地。

• 项目结构清晰，`src/main/java`下是 Java 代码目录，包含 controller、service、dao、entity 等包；`src/main/resources`下包含配置文件，如`application.properties`或`application.yml`，用于配置数据库连接、服务器端口等信息。

• 接口开发

• Controller 层：定义 RESTful 风格的接口，通过`@RestController`注解标记控制器类，使用`@RequestMapping`、`@GetMapping`、`@PostMapping`等注解定义接口路径和请求方法。例如：

  ```java

    @RestController

    @RequestMapping("/users")

    public class UserController {

        @GetMapping

        public List<User> getAllUsers() {

            // 调用 Service 层方法获取用户列表

            return userService.findAll();

        }

        @PostMapping

        public User addUser(@RequestBody User user) {

            // 调用 Service 层方法添加用户

            return userService.save(user);

        }

    }

    ```

• Service 层：负责业务逻辑处理。在该层中调用 Dao 层的方法进行数据操作，并对数据进行处理和封装。例如，对用户信息进行加密处理、验证用户输入数据的合法性等。

• Dao 层：与数据库进行交互。可以使用 Spring Data JPA 或 MyBatis 等技术。以 Spring Data JPA 为例，定义一个继承自`JpaRepository`的接口，即可实现基本的增删改查操作。例如：

  ```java

    public interface UserRepository extends JpaRepository<User, Long> {

        // 可以在这里定义一些自定义的查询方法

        List<User> findByUsername(String username);

    }

    ```

• 数据交互

• 接收前端发送的请求数据，如 JSON 格式的请求体，Spring Boot 会自动将其转换为对应的 Java 对象。例如，前端发送一个包含用户信息的 JSON 对象，后端的`@RequestBody User user`参数会自动接收并转换。

• 将处理后的数据以 JSON 格式返回给前端。Spring Boot 默认使用 Jackson 库进行对象与 JSON 的转换，通过在实体类中使用注解如`@JsonProperty`、`@JsonIgnore`等，可以控制 JSON 的序列化和反序列化过程。

前后端交互与部署

• 开发阶段交互

• 跨域问题：由于前后端端口不同，默认情况下浏览器会阻止跨域请求。可以在 Spring Boot 后端项目中配置跨域资源共享（CORS），允许前端项目访问后端接口。例如，在全局配置类中添加 CORS 配置：

  ```java

    @Configuration

    public class GlobalCorsConfig {

        @Bean

        public WebMvcConfigurer corsConfigurer() {

            return new WebMvcConfigurer() {

                @Override

                public void addCorsMappings(CorsRegistry registry) {

                    registry.addMapping("/**") // 允许跨域访问的路径

                            .allowedOrigins("http://localhost:8081") // 允许跨域访问的前端域名和端口

                            .allowedMethods("GET", "POST", "PUT", "DELETE") // 允许的请求方法

                            .allowedHeaders("*") // 允许的请求头

                            .allowCredentials(true); // 允许携带 cookie

                }

            };

        }

    }

    ```

• 接口调试：前后端开发人员可以通过 Postman 等工具直接调用后端接口进行测试，也可以在前端项目中使用 axios 发送请求调试接口。同时，后端可以通过日志输出等方式查看请求参数、响应数据等信息，以便定位问题。

• 部署阶段

• 前端部署：将 Vue 项目构建生成的`dist`目录（包含静态资源文件）部署到服务器的静态资源目录下，如 Nginx 的`html`目录。配置 Nginx 服务器，设置静态资源的访问路径和路由转发规则。例如：

  ```nginx

    server {

        listen 80;

        server_name example.com;

        location / {

            root /usr/share/nginx/html;

            try_files $uri $uri/ /index.html;

        }

    }

    ```

• 后端部署：将 Spring Boot 项目打包成 jar 包，上传到服务器，通过命令`java -jar app.jar`启动应用。可以使用 Docker 容器进行部署，编写 Dockerfile 构建镜像，然后运行容器。同时，配置数据库连接信息、服务器端口等参数，确保后端应用能够正常运行并提供接口服务。

• 前后端整合：确保前端页面能够正确访问后端接口，可以通过配置前端项目的代理规则，在开发阶段将请求代理到后端服务器。在生产环境中，通过 Nginx 等反向代理服务器将前端页面请求和后端接口请求分别转发到对应的服务器和端口，实现前后端的整合部署。

这种前后端分离的开发模式使得前后端可以独立开发、独立部署，提高了开发效率和项目的可维护性。同时，前后端通过定义好的接口进行交互，使得项目的扩展性和灵活性更强。