Spring Boot 与 Vue.js 整合流程

下面是关于“Spring Boot与Vue.js整合流程”的完整攻略：

前言

Spring Boot是一个快速开发Web应用的工具，Vue.js是一个流行的前端框架，将它们整合可以帮你快速开发出高效的Web应用。本文将介绍如何使用Spring Boot和Vue.js创建一个完整的Web应用程序。

环境准备

在开始之前，你需要确保你的电脑上已经安装了以下软件：

JDK 8或更高版本
Node.js和npm包管理器
Vue CLI
IntelliJ IDEA 或者 Eclipse

具体步骤

步骤1：创建Spring Boot项目

使用IntelliJ IDEA或者Eclipse等IDE，创建一个Spring Boot项目，项目名称为"spring-boot-vue-demo"（或是你自己喜欢的名称），选择Spring Boot版本为2.0.x。

步骤2：添加依赖

在Maven或Gradle构建文件中添加以下依赖：

<!-- Spring Boot Web -->
<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-web</artifactId>
</dependency>

<!-- Spring Boot Data JPA -->
<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>

<!-- MySQL数据库驱动 -->
<dependency>
  <groupId>mysql</groupId>
  <artifactId>mysql-connector-java</artifactId>
</dependency>

<!-- Spring Boot DevTools -->
<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-devtools</artifactId>
</dependency>

步骤3：创建API接口

在项目中创建一个API接口，其中包含GET、PUT、POST和DELETE等方法。例如：创建一个名为"UserController"的Java类，其中包含以下代码：

@RestController
@RequestMapping("/api/users")
public class UserController {

    @Autowired
    private UserRepository userRepository;

    @GetMapping("/")
    public List<User> getUsers() {
        return userRepository.findAll();
    }

    @PostMapping("/")
    public User createUser(@RequestBody User user) {
        return userRepository.save(user);
    }

    @PutMapping("/{id}")
    public User updateUser(@PathVariable Long id, @RequestBody User user) {
        User oldUser = userRepository.getOne(id);
        oldUser.setName(user.getName());
        return userRepository.save(oldUser);
    }

    @DeleteMapping("/{id}")
    public void deleteUser(@PathVariable Long id) {
        userRepository.deleteById(id);
    }
}

步骤4：创建Vue.js项目

使用Vue CLI创建Vue.js项目，运行以下命令：

vue create spring-boot-vue-demo-client

Vue CLI将自动创建一个新的Vue.js项目，包括各种预配置的Vue.js开发工具，以及一个基本的Vue.js脚手架。

步骤5：添加依赖

在Vue.js项目的目录下运行以下命令，安装Vue.js自带的axios和bootstrap-vue依赖：

npm install --save axios bootstrap-vue

步骤6：创建Vue.js组件

为了演示如何与Spring Boot项目整合，我们将为Vue.js项目创建一个User列表组件。在Vue.js项目的"src/components"目录下创建一个名为"UserList.vue"的组件，其中包含以下代码：

<template>
  <div>
    <b-table striped hover :items="users" :fields="['id', 'name', 'email']"></b-table>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "UserList",
  data: () => ({
    users: []
  }),
  created() {
    axios
      .get("/api/users/")
      .then(response => (this.users = response.data))
      .catch(error => console.log(error));
  }
};
</script>

此组件将使用axios发送一个GET请求，从后端服务器获取用户列表，并将其展示在一个bootstrap-vue表格中。

步骤7：修改Vue.js入口文件

打开Vue.js项目的"src/main.js"文件，添加以下代码：

import Vue from "vue";
import App from "./App.vue";
import BootstrapVue from "bootstrap-vue";
import axios from "axios";

Vue.use(BootstrapVue);
Vue.config.productionTip = false;

axios.defaults.baseURL = "http://localhost:8080";

new Vue({
  render: h => h(App)
}).$mount("#app");

这部分代码将使用Vue.js自带的axios发起HTTP请求，并将所有的请求发送到"http://localhost:8080"（你的Spring Boot服务器地址）。

步骤8：运行项目

现在在终端中运行以下命令，分别启动后端Spring Boot项目和前端Vue.js项目：

# 进入Spring Boot项目目录
cd spring-boot-vue-demo
# 启动Spring Boot项目
mvn spring-boot:run

# 进入Vue.js项目目录
cd spring-boot-vue-demo-client
# 启动Vue.js项目
npm run serve

现在你应该能够在浏览器中访问"http://localhost:8080"，查看你的Spring Boot应用程序的主页，以及"http://localhost:8081"（或者自定义的Vue.js端口），查看你的Vue.js应用程序的主页。在Vue.js页面中，你将看到以表格形式展示的用户列表。

示例说明

示例1：添加用户

在Vue.js页面中，点击“添加用户”按钮。
在弹出的对话框中，填写用户资料，并点击“确定”按钮。
用户将被添加到用户列表中，同时也将保存到后端的MySQL数据库中。

示例2：更新用户

在Vue.js页面中，点击用户列表中任何一个用户的“编辑”按钮。
在弹出的对话框中，修改需要更新的用户资料，并点击“确定”按钮。
用户资料将被更新，同时也将保存到后端的MySQL数据库中。

以上就是关于“Spring Boot与Vue.js整合流程”的完整攻略，希望可以对你有所帮助！

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Spring Boot 与 Vue.js 整合流程 - Python技术站