springboot vue 架构图

原创

mob64ca12f5c08e 2024-01-31 06:42:01 ©著作权

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

Spring Boot 和 Vue 的架构图

在现代 web 开发中，Spring Boot 和 Vue.js 是两个非常流行的框架。Spring Boot 是一个用于构建 Java 应用程序的开源框架，而 Vue.js 是一个用于构建用户界面的 JavaScript 框架。它们可以很好地结合在一起，形成一个强大的全栈开发架构。

架构图示例

下面是一个简单的 Spring Boot 和 Vue 的架构图示例：

graph TD
  subgraph Spring Boot
    A[控制器] --> B[服务层]
    B --> C[数据访问层]
    C --> D[数据库]
  end
  subgraph Vue
    E[视图组件] --> F[HTTP 请求]
    F --> G[Vue 服务]
    G --> H[后端 API]
  end
  A --> E

在这个架构图中，Spring Boot 负责处理后端业务逻辑，包括控制器、服务层和数据访问层。而 Vue 则负责处理前端的用户界面和与后端的通信。Spring Boot 和 Vue 通过 HTTP 请求和后端 API 进行通信。

Spring Boot 示例代码

首先，让我们看一下一个简单的 Spring Boot 控制器的示例代码：

@RestController
@RequestMapping("/api")
public class UserController {
  
  @Autowired
  private UserService userService;
  
  @GetMapping("/users")
  public List<User> getUsers() {
    return userService.getUsers();
  }
  
  @PostMapping("/users")
  public User createUser(@RequestBody User user) {
    return userService.createUser(user);
  }
  
  // 其他接口...
}

这段代码定义了一个 UserController 类，它包含了获取用户列表和创建用户的两个接口。这些接口使用了 @GetMapping 和 @PostMapping 注解来指定请求的 URL，以及使用了 @RequestBody 注解来接收请求的 JSON 数据。

Vue 示例代码

接下来，让我们看一下一个简单的 Vue 组件的示例代码：

<template>
  <div>
    <h2>用户列表</h2>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
    <form @submit.prevent="createUser">
      <input type="text" v-model="name" placeholder="用户名" required>
      <button type="submit">创建用户</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [],
      name: ''
    };
  },
  mounted() {
    this.getUsers();
  },
  methods: {
    getUsers() {
      axios.get('/api/users')
        .then(response => {
          this.users = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    },
    createUser() {
      axios.post('/api/users', { name: this.name })
        .then(response => {
          this.name = '';
          this.getUsers();
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};
</script>

这段代码定义了一个用户列表的 Vue 组件，它通过 v-for 指令循环渲染用户列表，并通过 v-model 指令绑定输入框的值。组件中的 mounted 钩子函数会在组件挂载时自动调用，用来初始化用户列表数据。methods 对象中定义了两个方法，分别用于获取用户列表和创建用户。这些方法使用 axios 库发送 HTTP 请求，并通过 Promise 处理返回的数据。