Vue3+SpringBoot资料入门教程

概述

本文介绍了如何使用Vue3和SpringBoot进行项目开发，包括环境准备、快速创建Vue3与SpringBoot项目、基本开发入门及集成与数据交互等步骤，提供了详细的代码示例和配置方法，旨在帮助开发者掌握Vue3+SpringBoot技术栈。

引入Vue3与SpringBoot

简介Vue3与SpringBoot

Vue.js 是一个轻量级的前端框架，Vue3 是最新的主要版本，提供了更高的性能、更好的开发体验和更丰富的功能。Spring Boot 是一个基于 Spring 框架的简化开发框架，它通过约定优于配置的方式大大简化了开发过程，允许开发者快速构建独立的、生产级别的基于 Spring 框架的应用程序。

项目搭建环境准备

为了开始使用 Vue3 和 Spring Boot，你需要安装以下工具：

• Node.js（用于 Vue3 项目）
• Maven 或 Gradle（用于 Spring Boot 项目）
• Java JDK（用于 Spring Boot 项目）

确保已经安装好上述工具后，可以继续进行项目搭建。

快速创建Vue3与SpringBoot项目

Vue3项目创建

使用 Vue CLI 快速创建 Vue3 项目：

npm install -g @vue/cli
vue create my-vue3-app
cd my-vue3-app
npm run serve

Spring Boot项目创建

使用 Spring Initializr 创建一个简单的 Spring Boot 项目。在 Spring Initializr 中选择以下选项：

• Project：Maven Project
• Language：Java
• Spring Boot：选择最新版本
• Dependencies：选择 Web Starter 和 JPA（如果你需要数据库操作）

下载生成的项目文件，使用 IDEA 或其他 IDE 打开项目，然后可以通过以下命令启动项目：

mvn spring-boot:run

在 pom.xml 文件中添加以下依赖：

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-jpa</artifactId>
    </dependency>
    <dependency>
        <groupId>com.h2database</groupId>
        <artifactId>h2</artifactId>
        <scope>runtime</scope>
    </dependency>
</dependencies>

SpringBoot后端开发基础

SpringBoot快速入门

Spring Boot 提供了快速开发的特性，简化了许多配置。以下是一个简单的 Spring Boot 应用示例：

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class Application {
    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }
}

使用SpringBoot创建API接口

创建一个简单的 REST API 服务，定义一个用户控制器类：

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class UserController {
    @GetMapping("/users")
    public String getUsers() {
        return "List of users";
    }
}

数据库操作与JPA入门

使用 JPA 进行数据库操作。首先，定义一个实体类：

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;

@Entity
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String name;
    private String email;

    // 构造函数、getter 和 setter 方法省略
}

然后，定义一个仓库接口：

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;

@Repository
public interface UserRepository extends JpaRepository<User, Long> {
}

最后，在控制器中使用仓库接口来操作数据库：

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@RequestMapping("/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);
    }
}

Vue3前端开发基础

Vue3组件与模板语法

Vue3 中的组件是构建大型应用的基础。以下是一个简单的 Vue 组件例子：

<!-- HelloWorld.vue -->
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>{{ count }}</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

<style scoped>
/* 样式定义省略 */
</style>

在此基础上，可以进一步展示组件的生命周期钩子和事件处理：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  },
  mounted() {
    console.log('Component mounted');
  },
  beforeDestroy() {
    console.log('Component will be destroyed');
  }
};
</script>

Vue3路由与导航

使用 Vue Router 为应用程序添加路由。首先，安装 Vue Router：

npm install vue-router@next

然后，设置路由：

// router.js
import { createRouter, createWebHistory } from 'vue-router';
import HelloWorld from '../components/HelloWorld.vue';

const routes = [
  {
    path: '/',
    name: 'HelloWorld',
    component: HelloWorld
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

在主文件中使用路由：

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App).use(router).mount('#app');

Vue3状态管理（如Vuex）

使用 Vuex 进行状态管理。首先，安装 Vuex：

npm install vuex@next

然后，设置 Vuex：

// store.js
import { createStore } from 'vuex';

export default createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

在主文件中使用 Vuex：

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';
import router from './router';

createApp(App).use(router).use(store).mount('#app');

在组件中使用 Vuex：

<template>
  <div>
    <h1>{{ count }}</h1>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapMutations(['increment'])
  }
};
</script>

Vue3与SpringBoot集成与数据交互

项目结构设置与前后端分离

将 Vue3 项目和 Spring Boot 项目分别设置为独立的子项目。Vue3 项目放在前端目录，Spring Boot 项目放在后端目录。

跨域问题解决

在 Spring Boot 项目中，可以通过配置 application.properties 文件来允许跨域请求：

# application.properties
spring.web.cors.allowed-origins=*
spring.web.cors.allowed-methods=GET,POST,PUT,DELETE,OPTIONS
spring.web.cors.allowed-headers=*
spring.web.cors.exposed-headers=Content-Length

Axios请求SpringBoot后端API

在 Vue3 项目中使用 Axios 请求 Spring Boot 后端 API：

// HelloWorld.vue
<script>
import axios from 'axios';

export default {
  name: 'HelloWorld',
  data() {
    return {
      users: []
    };
  },
  created() {
    axios.get('http://localhost:8080/users')
      .then(response => {
        this.users = response.data;
      })
      .catch(error => {
        console.error('There was an error!', error);
      });
  }
};
</script>

项目实战案例

构建用户登录与注册功能

Spring Boot 用户登录

定义一个用户实体类：

@Entity
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String username;
    private String password;

    // 构造函数、getter 和 setter 方法省略
}

定义一个用户仓库接口：

import org.springframework.data.jpa.repository.JpaRepository;

public interface UserRepository extends JpaRepository<User, Long> {
    User findByUsername(String username);
}

定义一个用户服务类：

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class UserService {
    @Autowired
    private UserRepository userRepository;

    public User registerUser(User user) {
        return userRepository.save(user);
    }

    public User getUserByUsername(String username) {
        return userRepository.findByUsername(username);
    }
}

定义一个登录控制器：

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

@RestController
public class UserController {
    @Autowired
    private UserService userService;

    @PostMapping("/register")
    public User registerUser(@RequestBody User user) {
        return userService.registerUser(user);
    }

    @PostMapping("/login")
    public User loginUser(@RequestBody User user) {
        return userService.getUserByUsername(user.getUsername());
    }
}

Vue3 用户登录

定义一个登录表单组件：

<!-- LoginForm.vue -->
<template>
  <div>
    <form @submit.prevent="handleLogin">
      <input v-model="username" placeholder="Username" />
      <input v-model="password" placeholder="Password" type="password" />
      <button type="submit">Login</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    handleLogin() {
      axios.post('http://localhost:8080/login', {
        username: this.username,
        password: this.password
      })
      .then(response => {
        console.log(response.data);
      })
      .catch(error => {
        console.error('Login failed:', error);
      });
    }
  }
};
</script>

实现数据展示与编辑功能

Spring Boot 数据展示与编辑

定义一个数据实体类：

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;

@Entity
public class Data {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String name;
    private String description;

    // 构造函数、getter 和 setter 方法省略
}

定义一个数据仓库接口：

import org.springframework.data.jpa.repository.JpaRepository;

public interface DataRepository extends JpaRepository<Data, Long> {
}

定义一个数据控制器：

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@RequestMapping("/data")
public class DataController {
    @Autowired
    private DataRepository dataRepository;

    @GetMapping
    public List<Data> getAllData() {
        return dataRepository.findAll();
    }

    @PostMapping
    public Data createData(@RequestBody Data data) {
        return dataRepository.save(data);
    }

    @PutMapping("/{id}")
    public Data updateData(@PathVariable Long id, @RequestBody Data newData) {
        Data existingData = dataRepository.findById(id)
                .orElseThrow(() -> new RuntimeException("Data not found with id " + id));
        existingData.setName(newData.getName());
        existingData.setDescription(newData.getDescription());
        return dataRepository.save(existingData);
    }

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

Vue3 数据展示与编辑

定义一个数据展示与编辑组件：

<!-- DataList.vue -->
<template>
  <div>
    <ul>
      <li v-for="data in dataList" :key="data.id">
        {{ data.name }} - {{ data.description }}
        <button @click="editData(data.id)">Edit</button>
        <button @click="deleteData(data.id)">Delete</button>
      </li>
    </ul>
    <form @submit.prevent="handleAddData">
      <input v-model="newDataName" placeholder="Name" />
      <input v-model="newDataDescription" placeholder="Description" />
      <button type="submit">Add Data</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      dataList: [],
      newDataName: '',
      newDataDescription: ''
    };
  },
  methods: {
    fetchData() {
      axios.get('http://localhost:8080/data')
        .then(response => {
          this.dataList = response.data;
        })
        .catch(error => {
          console.error('Failed to fetch data:', error);
        });
    },
    handleAddData() {
      axios.post('http://localhost:8080/data', {
        name: this.newDataName,
        description: this.newDataDescription
      })
      .then(response => {
        this.dataList.push(response.data);
        this.newDataName = '';
        this.newDataDescription = '';
      })
      .catch(error => {
        console.error('Failed to add data:', error);
      });
    },
    editData(id) {
      axios.put(`http://localhost:8080/data/${id}`, {
        name: this.dataList.find(data => data.id === id).name,
        description: this.dataList.find(data => data.id === id).description
      })
      .then(response => {
        this.dataList = this.dataList.map(data => data.id === id ? response.data : data);
      })
      .catch(error => {
        console.error('Failed to update data:', error);
      });
    },
    deleteData(id) {
      axios.delete(`http://localhost:8080/data/${id}`)
        .then(() => {
          this.dataList = this.dataList.filter(data => data.id !== id);
        })
        .catch(error => {
          console.error('Failed to delete data:', error);
        });
    }
  },
  mounted() {
    this.fetchData();
  }
};
</script>

静态资源的加载与配置

在 Spring Boot 中配置静态资源的加载：

import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/public/**")
                .addResourceLocations("file:src/main/resources/public/");
    }
}

在 Vue3 项目中，将静态资源放置在 public 目录下。

Vue3与SpringBoot项目部署与维护

SpringBoot应用部署

将 Spring Boot 应用部署到服务器上。首先，将项目打包为可执行的 JAR 文件：

mvn clean package

然后，将生成的 JAR 文件上传到服务器，并使用 Java 命令运行：

java -jar my-app.jar

Vue3应用打包与部署

将 Vue3 应用打包为静态文件：

npm run build

打包完成后，将生成的 dist 目录中的文件上传到服务器，并使用 Web 服务器（如 Nginx）提供静态文件服务。

项目上线与常见问题处理

项目上线时需要进行以下操作：

1. 环境变量配置：确保所有环境变量在服务器上正确配置。

   • 在 application.properties 或 application.yml 文件中配置环境变量，例如：

     # application.properties
     spring.datasource.url=jdbc:mysql://localhost:3306/mydatabase
     spring.datasource.username=root
     spring.datasource.password=root

2. 日志管理：配置日志服务，便于查看和追踪问题。

   • 在 application.properties 文件中配置日志输出路径和级别：

     # application.properties
     logging.file.path=/var/log/myapp
     logging.level.root=INFO

3. 监控和报警：设置监控和报警服务，确保应用在出现问题时能够及时通知。

   • 使用 Spring Boot Actuator 来监控应用状态和健康状况：

     <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-actuator</artifactId>
     </dependency>

常见问题处理：

1. 数据库连接问题：检查数据库连接配置是否正确，确保数据库服务正常运行。
2. 内存溢出：如果应用频繁出现内存溢出，可能需要增加堆内存大小。
3. 资源文件加载问题：确保静态资源路径配置正确，并且资源文件存在于指定路径下。