vue springboot 系统架构图

原创

mob64ca12e5c0c2 2024-10-27 04:41:43 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12e5c0c2的原创作品，请联系作者获取转载授权，否则将追究法律责任

构建一个基于Vue和Spring Boot的全栈应用

随着前端技术的不断发展，Vue.js逐渐成为构建现代Web应用程序的热门框架。而在后端方面，Spring Boot则因其简洁性和强大的功能而备受青睐。将这两者结合，可以轻松搭建一个高效、响应迅速的全栈系统。本文将探讨如何构建一个基于Vue和Spring Boot的系统，并附上代码示例。

系统架构图

在构建Vue和Spring Boot应用之前，我们需要了解其基本的系统架构。下面是一个典型的系统架构图，展示了前端、后端和数据库之间的关系。

erDiagram
    USER {
        int id PK "用户ID"
        string username "用户名"
        string email "电子邮箱"
    }

    POST {
        int id PK "帖子ID"
        string title "标题"
        string content "内容"
        int userId FK "用户ID"
    }

    USER ||--o{ POST : "发布"

开发环境准备

1. 前端：Vue.js setup

首先，我们需要搭建一个Vue.js项目。你可以使用Vue CLI快速启动一个新项目：

npm install -g @vue/cli
vue create my-vue-app

进入项目目录：

cd my-vue-app

接下来，我们可以创建一个简单的页面来展示用户的信息。

代码示例：Vue 组件

<template>
  <div>
    用户列表
    <table>
      <tr>
        <th>ID</th>
        <th>用户名</th>
        <th>电子邮箱</th>
      </tr>
      <tr v-for="user in users" :key="user.id">
        <td>{{ user.id }}</td>
        <td>{{ user.username }}</td>
        <td>{{ user.email }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: []
    }
  },
  mounted() {
    fetch('http://localhost:8080/api/users')
      .then(response => response.json())
      .then(data => {
        this.users = data;
      })
  }
}
</script>

<style>
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
}
</style>

2. 后端：Spring Boot setup

接下来，我们需要使用Spring Boot来构建后端服务。首先，在你的IDE中创建一个新的Spring Boot项目，并添加相关依赖。

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

代码示例：实体类和控制器

接下来创建一个User实体类以及一个控制器来提供REST API。

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

    // Getters and Setters
}

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

    @Autowired
    private UserRepository userRepository;

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

3. 数据库配置

为了简便起见，我们使用H2内存数据库。在application.properties文件中添加以下配置：

spring.datasource.url=jdbc:h2:mem:testdb
spring.datasource.driverClassName=org.h2.Driver
spring.datasource.username=sa
spring.datasource.password=password
spring.h2.console.enabled=true
spring.jpa.hibernate.ddl-auto=create-drop